5 новых функций CSS, которые вы обязаны знать в 2024 году

IT-блог Academind рассказал о 5 новых функциях в CSS, которые веб-разработчики обязаны знать в 2024 году: о cелекторе :has(), запросах к контейнерам, вложенности CSS, text-wrap:balance и :focus-visible.

Вот, о чём рассказывают в видео:

1. Для изменения цвета акцента радиокнопки, которая является частью элемента input, используется псевдокласс :checked в традиционном CSS.
2. Изменение стиля родительского элемента в зависимости от дочернего или потомка традиционно требовало JavaScript, но с latest.css можно использовать псевдоселектор :has.
3. С помощью :has можно определить условия, при которых стили применяются к родительскому элементу, например, сделать границы розовыми, если внутри есть выбранный input.
4. Поддержка псевдоселектора :has в браузерах очень хорошая.
5. Контейнерные запросы (container queries) позволяют адаптировать макет повторно используемого компонента в зависимости от доступного пространства для конкретного компонента на веб-сайте.
6. Используя контейнерные запросы, можно создавать компоненты, которые изменяют свой макет в зависимости от размера контейнера, в котором они находятся, без повторения CSS-кода.
7. Контейнерные запросы полностью поддерживаются всеми современными браузерами.
8. Вложенность селекторов теперь поддерживается в чистом CSS без использования препроцессоров, что упрощает поддержку и чтение кода.
9. Свойство text-wrap с новым значением balance позволяет балансировать количество символов на каждой строке, улучшая визуальное восприятие текста.
10. Поддержка свойства text-wrap со значением balance в браузерах очень хорошая.
11. Стилизация элементов при фокусировке важна для доступности и пользовательского опыта, а новый псевдокласс :focus-visible позволяет различать элементы, выбранные с помощью клавиатуры или мыши.
12. Совместимость псевдокласса :focus-visible с браузерами очень хорошая, что позволяет использовать его в проектах.

Ниже представлена транскрибация ролика на русском языке.

Применение селектора has

Кнопка радио и граница розовые для выбранного элемента списка. Здесь установлено стандартное оформление: синяя кнопка и серая граница.

Кнопка радио является частью элемента ввода, поэтому мы обращаемся только к этому элементу ввода, добавляем псевдокласс checked и изменяем акцентный цвет в соответствии с нашими потребностями. Это традиционный CSS. Однако граница является частью элемента списка, то есть родительского элемента.

При использовании традиционного CSS изменение стиля родительского элемента в зависимости от потомка или дочернего элемента требовало JavaScript. Используя latest.css, мы можем применить hasSelector к нашему родителю, элементу списка в нашем случае. При пустых скобках ничего не изменится, у нас все еще нет изменения цвета для нашей границы здесь. Но внутри нашего hasSelector мы теперь можем определить условие, которое должно быть выполнено, чтобы применить стиль внутри наших фигурных скобок к нашему родителю. Добавление элемента ввода сделает все наши границы розовыми.

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

Поддержка браузера для псевдоселектора Has очень хорошая. С помощью контейнерных запросов мы можем настраивать макет многоразового компонента в зависимости от доступного пространства для конкретного компонента на нашем сайте.

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

В этом примере используются два раздела: раздел с избранным курсом и раздел с последними курсами, с одинаковой структурой. Каждая карточка курса внутри раздела обернута элементом курса. Для раздела с избранным курсом у нас есть только одна карточка курса. Для последних курсов у нас есть три отдельные карточки курсов. С помощью флагов отображения на классах курсов мы определяем стандартный макет наших компонентов курсов.

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

Контейнерные запросы

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

С этим параметром мы теперь можем выполнять запросы к этому элементу курса. И в зависимости от размера этого контейнера мы можем настраивать макет элементов внутри этого контейнера. Синтаксис добавления контейнера теперь позволяет нам ссылаться на этот контейнер, который мы определили, добавляя здесь минимальную ширину. Мы устанавливаем значение, когда эти правила, определенные внутри этого контейнерного запроса, должны быть активными.

Без использования этих контейнерных запросов макет всех компонентов был бы одинаковым, и, следовательно, дополнительное пространство, которое у нас есть для раздела с избранным курсом, …не использовалось бы должным образом.

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

Контейнерные запросы полностью поддерживаются всеми современными браузерами. Использование традиционного CSS для применения конкретных стилей к конкретным элементам внутри контейнера всегда означало повторение, поэтому нам приходилось снова и снова обращаться к контейнеру перед определением стиля для соответствующего элемента.

Вложенные селекторы

Вложенные селекторы были возможны только с препроцессорами, такими как ZAS. Это изменилось, поскольку обычный CSS теперь также поддерживает вложенные правила, что делает наш код более легким в обслуживании и более читаемым. Мы просто вкладываем элементы, которые мы хотим стилизовать, внутри нашего контейнерного элемента, не повторяя базовый класс контейнера.

Поддержка браузера очень хорошая для последних версий наиболее популярных браузеров.

Свойство text wrap в CSS

Свойство text wrap управляет тем, как текст переносится внутри элемента.

Со вновь введенным значением balance для свойства text wrap CSS балансирует количество символов в каждой строке, чтобы избежать ситуаций, когда у нас есть одно слово в нашем подзаголовке здесь, вместо того чтобы иметь два слова здесь, что балансирует общий вид нашего подзаголовка.

Поддержка браузера для balance очень хорошая, поэтому вы можете использовать это значение в ваших проектах. Элементы веб-сайта доступны через щелчок, клавишу Tab или с помощью клавиатурной навигации. Стилизация фокусированных элементов важна для доступности пользователей и общего пользовательского опыта.

Псевдокласс focus-visible

С помощью псевдокласса focus мы смогли применить наши собственные индивидуальные стили к элементам нашего выбора.

Стили применяются ко всем элементам, где мы используем этот псевдокласс, независимо от того, выбираем ли мы элемент с помощью щелчка мыши, клавиши Tab или клавиатурной навигации. При фокусировке кнопки с помощью клавиатурной навигации подсветка имеет много смысла, для щелчка или клавиши Tab это не слишком разумно.

Со вновь введенным классом focus visible эта проблема теперь исправлена. Focus visible выделяет элементы при навигации с помощью клавиши Tab на клавиатуре, но может различать между элементами, которые не должны быть выделены при выборе с помощью щелчка мыши или клавиши Tab. Таким образом, кнопки не выделяются, а здесь выделяется поле ввода.

Совместимость браузера с focus visible очень хорошая, поэтому вы можете использовать его в ваших проектах.