![](https://habrastorage.org/webt/io/ad/it/ioaditw6xh-sbcjantqfxfufrak.png)
Сегодня я хочу рассказать вам о нескольких 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% скидку на первый месяц аренды сервера любой конфигурации!