Трюки CSS, которые сделают из вас ниндзя верстки

Сегодня я хочу рассказать вам о нескольких CSS-свойствах и значениях, которые редко упоминаются в специальной литературе, но, на мой вгляд, представляют определенный интерес с точки зрения скорости и качества разработки веб-интерфейсов.

Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading="lazy").

Там, где можно обойтись сниппетом, я ограничусь кодом. Там, где потребуется визуализация, будет приведена ссылка на песочницу.

Я не стал делать примеры слишком красивыми, чтобы не затенять рассматриваемые свойства другими стилями.

Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.

grid + place-items

Здесь вы найдете полное визуальное руководство по Grid и Flexbox.

Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.

.parent {   display: grid;   place-items: center; }

place-items является сокращением для justify-items и align-items.

Это свойство может использоваться как в отношении одной, так и в отношении сразу нескольких (дочерних) ячеек.

.parent {   display: grid;   grid-template-columns: 1fr 1fr;   place-items: center }

flex + margin

Другой современный способ выравнивания элементов по горизонтали и вертикали заключается в сочетании display: flex и margin: auto.

.parent {   display: flex; }  .child {   margin: auto; }

Справедливости ради следует отметить, что тоже самое можно реализовать с помощью такого сниппета:

.parent {   display: flex;   justify-content: center;   align-items: center; }

flex + gap

Раз уж мы заговорили о Flexbox, нельзя не упомянуть, что не так давно у нас появилась возможность добавлять отступ между flex-элементами с помощью свойства gap (этой возможности чертовски не хватало):

.parent {   display: flex;   flex-wrap: wrap;   gap: 1em; }

inline-flex

Данное свойство позволяет создавать строчные элементы, обладающие функциональностью Flexbox. Лучше один раз увидеть:

columns

Данная техника позволяет разделять текст на колонки. Свойство column-count определяет количество колонок, column-gap — отступ между колонками, column-rule — стили для вертикальной линии, разделяющей колонки.

Свойство columns является сокращением для column-count и column-width.

background-repeat

Свойство background-repeat определяет порядок заполнения фона указанным изображением. Значение round позволяет равномерно распределять изображения по всей ширине контейнера, а значение space добавляет между изображениями небольшой отступ:

background-blend-mode

Свойство background-blend-mode определяет порядок наложения фонового изображения и цвета (или нескольких фоновых изображений/цветов) друг на друга.

Возможные значения:

• color
• color-burn
• color-dodge
• darken
• difference
• exclusion
• hard-light
• hue
• lighten
• luminosity
• multiply
• overlay
• saturation
• screen
• soft-light

Когда-нибудь работали с Photoshop? Тогда, думаю, вы понимаете, о чем идет речь.

Представим, что у нас есть черно-белое изображение, которое мы хотим использовать в качестве фона. Но при этом мы хотим, чтобы оно было цветным. Как нам этого добиться?

background-clip

Свойство background-clip определяет, как цвет фона или фоновое изображение выводятся под границами блока. На мой взгляд, самым интересным значением данного свойства является text:

filter

Свойство filter позволяет применять к элементам некоторые художественные эффекты.

Возможные значения-функции:

• url() — svg-фильтр
• blur() — размытие
• brightness() — яркость
• contrast() — контрастность
• drop-shadow() — об этой функции поговорим отдельно
• grayscale() — обесцвечивание
• hue-rotate() — оттенок
• invert() — инверсия
• opacity() — прозрачность
• saturate() — насыщенность
• sepia() — сепия

Изменение цветовой темы (или схемы) сайта для ленивых:

Здесь вы найдете пример использования filter для реализации фильтров Instagram.

drop-shadow

Свойство filter со значением drop-shadow(), в отличие от похожего с точки зрения применяемого эффекта свойства box-shadow, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в котором оно размещается.

object-fit

Свойство object-fit управляет соотношением сторон заменяемых элементов, таких как img и video, когда у них задана ширина или высота, а также способом масштабирования.

Значение scale-down, например, позволяет сохранять пропорции изображения независимо от размеров блока:

Свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока.

cursor

Знаете ли вы о том, что кроме иконок для курсора, предоставляемых браузером (например, cursor: pointer), мы имеем возможность определять собственные изображения и svg?

scroll-behavior

Свойство scroll-behavior со значением smooth позволяет легко реализовать плавную прокрутку между секциями (разделами) страницы:

text-overflow

Свойство text-overflow со значением ellipsis позволяет добавлять ... в конец текста при его выходе за пределы контейнера.

p {   text-overflow: ellipsis; }

caret-color

Свойство caret-color позволяет определять цвет каретки — видимого маркера (|), указывающего на место вставки следующего символа.

textarea {   caret-color: #00b74a; }

scroll-snap

Группа свойств scroll-snap (scroll-span-type, scroll-snap-align и scroll-snap-stop) позволяет управлять поведением прокрутки. Данная группа свойств заслуживает отдельной статьи, но если кратко, то суть заключается в том, что в стилях определяются контрольные точки, при приближении к которым выполняется автопрокрутка:

Среди других возможностей scroll-snap можно назвать легкое создание слайдеров с помощью одного CSS.

supports

Правило @supports позволяет проверять поддержку браузером определенного свойства или свойств (или сочетания свойство/значение) перед их использованием.

/* проверяем поддержку свойств `grid` и `image-rendering` */ @supports (display: grid) {   section {     display: grid;   } }  @supports (image-rendering) {   img {     image-rendering: pixelated;   } }

var()

Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Вторым опциональным параметром данной функции является резервное значение.

/* определяем пользовательскую переменную - основной цвет фона */ :root {   --primary-bg-color: #1266f1; }  /* и используем ее */ button {   background-color: var(--primary-bg-color) }

calc()

Функция calc() используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, угол, время или число. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений.

Обычно, абсолютно позиционируемый элемент выравнивается по горизонтали и вертикали следующим образом:

.modal {   position: absolute;   top: 50%;   left: 50%;   transform: translate(-50%, -50%); }

Если нам известны размеры такого элемента, мы можем сделать следующее:

/* допустим, высота элемента составляет 100px, ширина - 200px */ .modal {   position: absolute;   top: calc(50% - 50px);   left: calc(50% - 100px); }

attr()

С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать его в стилях.

Реализация всплывающей подсказки средствами CSS:

:target

Псевдокласс :target позволяет создавать модальные окна, работающие без JavaScript:

::marker

Раньше мы удаляли маркер списка с помощью list-style: none и добавляли свой с помощью псевдоэлементов ::before или ::after. Сейчас существует более простой способ — псевдоэлемент ::marker.

::selection

Псевдоэлемент ::selection позволяет стилизовать выделение текста.

p::selection {   background-color: #262626;   color: #fbfbfb; }

Напоследок, вот вам парочка полезных ссылок на ресурсы, которые сделают вас настоящим CSS-ниндзя:

• Руководство по CSS от MDN
• Справочник CSS от WebReference
• Справочник CSS от W3Schools
• Визуальное руководство по CSS
• 50+ интересных CSS-свойств и значений — CSSTricks
• 50 полезных CSS-сниппетов — Hongkiat — имейте ввиду, что сниппеты, приводимые в статье, по состоянию на 2021 год немного устарели
• 30 основных селекторов CSS — EnvatoTuts+

Благодарю за внимание и хорошего дня!

---

Облачные серверы от Маклауд на NVMe-дисках запускаются за 1 минуту.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!