Язык программирования CSS постоянно развивается. В 2022 году в нем появились новые функциональности, которые способны значительно улучшить процесс создания и оформления веб-страниц.
В статье мы рассмотрим самые перспективные из них: псевдокласс :has, правило @apply, свойство color-adjust и правило @container. Эти современные функциональности CSS позволяют создавать более точные и гибкие таблицы стилей, а также упрощают разработку динамического и отзывчивого дизайна. Посмотрим, как с ними работать и использовать их для совершенствования создаваемых сайтов.
Псевдокласс :has
Псевдокласс :has представляет собой предварительную функциональность CSS. Он позволяет стилизовать элементы с учетом наличия у них определенного потомка. На данный момент не поддерживается ни одним браузером.
Пример с :has:
/* Style all list items that have a child list * (Стилизация всех элементов списка, имеющих дочерний список)/
li:has(ul) {
font-weight: bold;
}
В данном примере все элементы li, имеющие дочерний элемент ul, выделяются жирным шрифтом.
Примечание. Псевдокласс :has все еще находится на стадии предложения и не поддерживается браузерами, что не позволяет пока задействовать его в веб-разработке.
Директива CSS @apply
Следующая функциональность CSS — правило @apply. Оно позволяет переиспользовать набор стилей, определенных в классе, путем их применения к другому элементу или классу. @apply помогает избегать повторения стилей в таблице стилей, делая ее более точной и простой в сопровождении.
Пример с @apply:
/* Определение класса с набором стилей */
.button-styles {
font-size: 16px;
font-weight: bold;
color: white;
background-color: blue;
border-radius: 4px;
}
/* Применение стилей к элементу button с помощью правила @apply */
button {
@apply .button-styles;
}
/* Применение стилей к классу с помощью правила @apply */
.warning-button {
@apply .button-styles;
background-color: orange;
}
В данном примере класс button-styles определяет набор стилей, которые можно применить как к элементам button, так и к элементам с классом warning-button. Правило @apply допускает переиспользование этих стилей без повторения в таблице стилей.
Примечание. Правило @apply все еще находится на стадии предложения и не поддерживается браузерами, что не позволяет пока задействовать его в веб-разработке.
Свойство color-adjust
Свойство color-adjust позволяет корректировать цвета элемента с учетом фонового цвета. Это свойство гарантирует четкое отображение текста поверх фонового изображения или цвета.
Пример с color-adjust:
/* Корректировка цвета элемента для придания ему четкости на светлом фоне */
.light-bg {
background-color: white;
color-adjust: economy;
}
/* Корректировка цвета элемента для придания ему четкости на темном фоне */
.dark-bg {
background-color: black;
color-adjust: exact;
}
В данном примере свойство color-adjust обеспечивает разборчивое отображение текста на светлом и темном фоне. Значение economy инструктирует браузер настроить цвета текста таким образом, чтобы минимизировать количество требуемых изменений цвета. Значение exact обязует браузер скорректировать цвета как можно точнее, чтобы обеспечить максимальную разборчивость.
Примечание. Свойство color-adjust все еще находится на стадии предложения и не поддерживается браузерами, что не позволяет пока задействовать его в веб-разработке.
Правило @container
Правило @container позволяет определять стили для элемента-контейнера и применять их к его дочерним элементам. С помощью этого правила можно создавать единые стили для группы элементов и адаптивные макеты, подстраивающиеся под размер контейнера.
Пример с @container:
/* Определение стилей для элемента-контейнера */
@container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
/* Применение стилей контейнера к его дочерним элементам */
.container > * {
@apply(--container);
}
В данном примере правило @container определяет набор стилей, применяемых ко всем дочерним элементам контейнера с классом .container. Свойство display: flex указывает на то, что элемент-контейнер должен использовать гибкий макет flex. Другие же свойства определяют способ выравнивания дочерних элементов в контейнере.
Примечание. Свойство @container все еще находится на стадии предложения и не поддерживается браузерами, что не позволяет пока задействовать его в веб-разработке.
Заключение
Подведем итоги: 2022 год стал очень продуктивным для CSS. Появились функциональности, способные усовершенствовать процесс создания и оформления веб-страниц. Псевдокласс :has и правило @apply позволяют создавать более точные и гибкие таблицы стилей. Свойство color-adjust упрощает разработку удобочитаемого дизайна.
Правило @container облегчает создание единых и адаптивных макетов. И хотя браузеры пока не поддерживают рассмотренные функциональности, очень интересно наблюдать за тенденциями развития CSS и открывающимися возможностями для создания еще более эффективной и гибкой стилизации. Как же не терпится увидеть будущее CSS и веб-разработки!
Читайте также:
- 9 инструментов CSS, которые пригодятся в 2022 году
- Отзывчивость – это очень просто с CSS-переменными
- Преимущества использования препроцессора (Sass) при написании CSS
Читайте нас в Telegram, VK и Дзен
Перевод статьи Evgeniykravtsov: Modern CSS Features That Appeared in 2022
