Skip to main content

Полезные возможности современного CSS

· 10 min read

Привет, друзья!

В данной заметке я расскажу вам о некоторых полезных возможностях, предоставляемых современным CSS. Также мы немного поговорим о полезных "фичах", которые ждут нас в ближайшие 2 года.

"Полезный" означает, что я либо часто использую фичу в своих проектах, либо с нетерпением жду такой возможности.

Существующие возможности

Начнем с существующих возможностей, поддерживаемых большинством браузеров.

:not()

Функция-псевдокласс :not() позволяет стилизовать элементы, которые не совпадают ни с одним селектором из указанного списка. Список может состоять как из одного, так и из нескольких селекторов, разделенных запятыми. Селекторы могут быть как простыми, так и сложными.

Синтаксис

:not(selector1, selector2, ...selectorN) {}

Поддержка - 93.04%.

Пример

Предположим, что у нас имеется такой инпут:

<input type="text" placeholder="Enter some text..." required />

Мы хотим, чтобы в невалидном состоянии границы этого поля были красного цвета. "Невалидность" поля можно стилизовать с помощью псевдокласса :invalid. При этом, стилизация невалидности не должна влиять на стилизацию наведения и фокусировки. Это можно реализовать следующим образом:

input:invalid:not(:hover, :focus) {
border-color: red;
}

/* отключаем подсветку */
:invalid {
box-shadow: none;
}

:-moz-submit-invalid {
box-shadow: none;
}

:-moz-ui-invalid {
box-shadow: none;
}

Лирическое отступление: стилизация placeholder

Раньше заменители текста приходилось стилизовать так:

input.placeholder {
color: #0275d8;
font-size: 0.8rem;
opacity: 0.8;
}
input:-moz-placeholder {
color: #0275d8;
font-size: 0.8rem;
opacity: 0.8;
}
input::-moz-placeholder {
color: #0275d8;
font-size: 0.8rem;
opacity: 0.8;
}
input:-ms-input-placeholder {
color: #0275d8;
font-size: 0.8rem;
opacity: 0.8;
}
input::-webkit-input-placeholder {
color: #0275d8;
font-size: 0.8rem;
opacity: 0.8;
}

Сейчас это можно делать с помощью псевдокласса ::placeholder (спасибо @dynamicult):

input::placeholder {
color: #0275d8;
font-size: 0.8rem;
opacity: 0.8;
}

Поддержка - 96.26%.

:empty

Псевдокласс :empty позволяет стилизовать элементы, которые не имеют потомков. К потомкам относятся элементы, текст и (sic!) пробелы.

Синтаксис

:empty {}

Поддержка - 97.65%.

Пример

Предположим, что у нас имеется такой список ссылок:

<ul>
<li><a href="#">Link 1</a></li>
<li>
<a href="#" target="_blank" rel="noopener noreferrer">Link 2</a>
</li>
<li></li>
</ul>

С такими стилями:

ul {
display: inline-flex;
flex-direction: column;
/* отступы между элементами списка */
gap: 0.5rem;
list-style: none;
}

Допустим, что список формируется динамически и последний элемент по какой-то причине оказался пустым, например, в объекте не было url для ссылки. Тогда после второго элемента получим лишний отступ:


Скрываем пустые элементы списка с помощью :empty:

li:empty {
display: none;
}

Лишнего отступа больше нет:


Лирическое отступление: невидимый контент

display: none; полностью скрывает элемент. Сделать элемент невидимым, но доступным для устройств чтения с экрана, можно следующим образом:

.sr-only {
background: none;
border: none;
color: none;
cursor: none;
height: 0;
margin: 0;
opacity: 0;
outline: none;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
user-select: none;
visibility: hidden;
white-space: nowrap;
width: 0;
z-index: -1;
}

:is() и :where()

Функции-псевдоклассы :is() и :where() позволяют стилизовать элементы, совпадающие с любым селектором из указанного списка. Список может состоять как из одного, так и из нескольких селекторов, разделенных запятыми. Селекторы могут быть как простыми, так и сложными.

Разница между :is() и :where() заключается в том, что :is() принимает специфичность самого конкретного селектора из списка, а специфичность :where() всегда равняется 0.

Синтаксис

:is(selector1, selector2, ...selectorN) {}
:where(selector1, selector2, ...selectorN) {}

Поддержка :is() - 94.9%. Поддержка :where() - 91.61%.

Пример

Предположим, что мы хотим стилизовать ссылки, находящиеся только в шапке или подвале страницы:

:is(header, footer) a:hover {
color: green;
}

Для понимания того, насколько :is() и :where() могут уменьшить количество шаблонного кода, рекомендую взглянуть на этот пример.

:focus-within

Псевдокласс :focus-within позволяет стилизовать элементы, которые либо сами находятся в фокусе (в этом случае :focus-within аналогичен псевдоклассу :focus), либо имеют потомков, находящихся в фокусе.

Синтаксис

:focus-within {}

Поддержка - 95.32%.

Пример

Предположим, что у нас имеется такой инпут с подписью и иконкой:

<div class="form-field">
<label>
<span>Some text:</span>
<input type="text" placeholder="Enter some text..." required />
</label>
<svg viewBox="0 0 60 60">
<path
d="M48.014,42.889l-9.553-4.776C37.56,37.662,37,36.756,37,35.748v-3.381c0.229-0.28,0.47-0.599,0.719-0.951
c1.239-1.75,2.232-3.698,2.954-5.799C42.084,24.97,43,23.575,43,22v-4c0-0.963-0.36-1.896-1-2.625v-5.319
c0.056-0.55,0.276-3.824-2.092-6.525C37.854,1.188,34.521,0,30,0s-7.854,1.188-9.908,3.53C17.724,6.231,17.944,9.506,18,10.056
v5.319c-0.64,0.729-1,1.662-1,2.625v4c0,1.217,0.553,2.352,1.497,3.109c0.916,3.627,2.833,6.36,3.503,7.237v3.309
c0,0.968-0.528,1.856-1.377,2.32l-8.921,4.866C8.801,44.424,7,47.458,7,50.762V54c0,4.746,15.045,6,23,6s23-1.254,23-6v-3.043
C53,47.519,51.089,44.427,48.014,42.889z"
fill="currentColor"
/>
</svg>
</div>

Обратите внимание на значение атрибута fill элемента path.

И такими стилями:

.form-field {
color: darkslategray;
position: relative;
width: max-content;
}

.form-field label {
align-items: center;
display: flex;
}

.form-field input {
border: 2px solid darkslategray;
margin-left: 0.5rem;
outline: none;
padding: 0.5rem;
/* отступ для иконки - 20px + 5px + 5px */
padding-right: 30px;
}

.form-field svg {
height: 20px;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 20px;
}

Допустим, что при наведении и фокусировке мы хотим менять цвет подписи, границы поля и заливки иконки.

С инпутом все просто:

.form-field input:hover {
border-color: deepskyblue;
}

.form-field input:focus {
border-color: mediumseagreen;
}

С наведением тоже:

.form-field:hover {
color: deepskyblue;
}

Но следующее работать не будет, поскольку элемент div не является фокусируемым (focusable):

.form-field:focus {
color: mediumseagreen;
}

Здесь на помощь приходит :focus-within:

.form-field:focus-within {
color: mediumseagreen;
}

Scroll Snap

Scroll Snap позволяет реализовывать прокручиваемые слайдеры (scrollable sliders). Основными свойствами данной модели являются:

  • scroll-snap-type - определяет строгость привязки контейнера к контрольным точкам;
  • scroll-snap-align - определяет контрольные точки для прокрутки.

Синтаксис (основные значения)

scroll-snap-type: x | y | both [mandatory | proximity];
scroll-snap-align: start | center | end;

Поддержка scroll-snap-type - 94.98%. Поддержка scroll-snap-align - 94.75%.

Пример

Прокручиваемый слайдер с тремя изображениями котиков:

<div class="slider">
<img
src="https://images.unsplash.com/photo-1529257414772-1960b7bea4eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
alt=""
/>
<img
src="https://images.unsplash.com/photo-1598188306155-25e400eb5078?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80"
alt=""
/>
<img
src="https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1768&q=80"
alt=""
/>
</div>
* {
margin: 0;
}

body {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
overflow: hidden;
}

.slider {
display: flex;
overflow-x: scroll;
position: relative;
/* ! */
scroll-snap-type: x mandatory;
/* стилизация скроллбара для Firefox */
scrollbar-color: hotpink whitesmoke;
scrollbar-width: thin;
width: 480px;
}

.slider > img {
object-fit: cover;
/* ! */
scroll-snap-align: start;
width: 100%;
}

/* стилизация скроллбара для Webkit */
.slider::-webkit-scrollbar {
height: 6px;
}

.slider::-webkit-scrollbar-track {
background-color: whitesmoke;
}

.slider::-webkit-scrollbar-thumb {
background-color: hotpink;
}

scroll-behavior

Свойство scroll-behavior, как следует из названия, определяет поведение прокрутки.

Синтаксис (основные значения)

scroll-behavior: auto | smooth;

Поддержка - 91.01%.

Пример

Рассматриваемое свойство позволяет легко реализовать прокрутку к определенной позиции на странице без помощи JavaScript:

<!-- якорь -->
<a id="top"></a>

<div class="page-content">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>

<a href="#top" class="top-link">
<img src="https://cdn-icons-png.flaticon.com/512/892/892692.png" alt="" />
</a>
* {
margin: 0;
}

html,
body {
/* ! */
scroll-behavior: smooth;
}

.page-content {
display: flex;
flex-direction: column;
}

p {
display: grid;
font-size: 4rem;
height: 100vh;
place-content: center;
}

.top-link {
bottom: 1rem;
left: 50%;
position: fixed;
transform: translateX(-50%);
}

.top-link img {
width: 40px;
}

accent-color

Свойство accent-color позволяет менять цвет таких элементов, как <input type="checkbox" />, <input type="radio" />, <input type="range" /> и <progress />.

Синтаксис

accent-color: auto | <color>;

Поддержка - 87.04%.

Пример

<input type="checkbox" checked />
<input type="radio" checked />
<input type="range" min="0" max="10" value="5" />
<progress max="100" value="50"></progress>
body {
/* ! */
accent-color: deepskyblue;
align-items: start;
display: flex;
flex-direction: column;
gap: 1rem;
}

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

Будущие возможности

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

Вложенность

Вложенность - одна из самых ожидаемых возможностей, давно реализованных в таких CSS-препроцессорах, как Sass и Less.

Синтаксис похож на Sass, за исключением того, что использование символа & в качестве родительского селектора является обязательным.

Пример

<article class="article">
<h2 class="title">Title</h2>
<div class="info">
<p class="author">Author</p>
<time datetime="2022-08-01" class="date">01.08.2022</time>
</div>
<p class="summary">Summary</p>
</article>
/* стилизуем информацию об авторе статьи */
.article {
& .info {
/* .article .info .author */
& .author {
/* ... */
}
}
}
/* в Sass можно опускать `&` */
.article {
.info {
.author {
/* ... */
}
}
}

Еще одно отличие от Sass состоит в том, что, судя по всему, в CSS нельзя будет "склеивать" селекторы. Например, если у нас имеется такая разметка:

<article class="article">
<h2 class="article__title">Title</h2>
</article>

В Sass стилизовать заголовок можно следующим образом:

.article {
&__title {
/* ... */
}
}

Если вас интересует более подробная информация о вложенности, рекомендую взглянуть на эту статью.

:has()

Функция-псевдокласс :has() предназначена для стилизации элементов, совпадающих хотя бы с одним селектором из списка, переданного в качестве аргумента. Прелесть данной функции состоит в том, что она позволяет стилизовать родительские элементы.

Синтаксис

:has(selector1, selector2, ...selectorN) {}

Примеры

/* стилизуем ссылки, которые содержат изображения в качестве непосредственных потомков */
a:has(> img) {}

/* стилизуем `img`, которые находятся в `figure`, которые имеют `figcaption` */
figure:has(figcaption) img {}

color-mix()

Функция color-mix принимает 2 цвета и возвращает результат их смешивания в указанном цветовом пространстве и на указанный процент. Дефолтным цветовым пространством является LCH.

Синтаксис:

color-mix(in <colorspace>?, <color1> <percentage>?, <color2> <percentage>?)

Пример

<div class="box brand"></div>
<div class="box darken"></div>
<div class="box lighter"></div>
:root {
--brand: deepskyblue;
/* ! */
--darken: color-mix(var(--brand) 25%, #333);
--lighter: color-mix(var(--brand) 25%, #eee);
}

.box {
width: 100px;
height: 100px;
}

.box.brand {
background-color: var(--brand);
}

.box.darken {
background-color: var(--darken);
}

.box.lighter {
background-color: var(--lighter);
}

@scope

Директива @scope предназначена для определения области видимости стилей.

Синтаксис

@scope <selector> {
<stylesheet>
}

Пример

Вернемся к примеру из раздела про вложенность:

.article {
& .info {
& .author {
/* ... */
}
}
}

Если после этих стилей будет определено что-то вроде:

.section {
& .info {
& .author {
/* ... */
}
}
}

То специфичность селекторов .article .info .author и .section .info .author будет одинаковой и стили, определенные в .section, перезапишут стили, определенные в .article. @scope позволяет решить данную проблему за счет инкапсуляции стилей в собственной области видимости:

@scope .article {
/* стили применяются только к элементам, находящимся в элементе с классом `article` */
& .info {
& .author {
/* ... */
}
}
}

@scope .section {
/* стили применяются только к элементам, находящимся в элементе с классом `section` */
& .info {
& .author {
/* ... */
}
}
}

Справедливости ради следует отметить, что на сегодняшний день существует еще одно средство для решения проблемы правильного порядка определения стилей - директива @layer, позволяющая определять так называемые каскадные слои стилей (cascade layers). Однако, на мой взгляд, эта директива больше подходит для использования в CSS-фреймворках, чем для локального применения. Например, @layer активно используется в таком фреймворке, как TailwindCSS.

selectmenu

Элемент selectmenu - это своего рода стилизуемый вариант элемента select.

Синтаксис

selectmenu::part(<part>) {}

Пример

<selectmenu class="select-menu">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</selectmenu>
.select-menu::part(button) {
background-color: #f00;
border-radius: 5px;
color: white;
padding: 5px;
}

.select-menu::part(listbox) {
border-radius: 5px;
border: 1px solid red;
margin-top: 5px;
padding: 10px;
}

anchor()

Последняя возможность, о которой я хочу рассказать, это функция anchor().

Данная функция является альтернативой позиционированию элементов с помощью position: relative и position: absolute. Она позволяет привязывать одни элементы к другим независимо от их места в иерархии DOM.

anchor() также будет предоставлять возможность определять границы позиционирования и другие интересные фичи. Перейдите по ссылке, если хотите получить более подробную информацию о рассматриваемом интерфейсе (да, это целый интерфейс, а не одна функция).

Подробнее о новых и ожидаемых возможностях CSS можно почитать в этой замечательной статье.

Благодарю за внимание и happy coding!