4 новые удивительные CSS функции в 2022

Среди новых функций можно назвать контейнерные запросы, родительские селекторы, правила управления каскадированием, CSS Grid и т.д. Все главные производители браузеров в восторге от всех этих функций. Это очень помогает нашим разработчикам. Давайте поблагодарим их за тяжелый труд! А теперь взглянем что нового CSS представит в 2022.

1. Родительский CSS селектор :has()

На данный момент поддержка :has() по умолчанию есть только в Safari 137.

В CSS много селекторов, однако :has особенный. CSS селектор или псевдокласс :has() чем-то похож на :not(), также известный как структурный псевдокласс. Он также используется в CSS функциях. Его можно назвать динамической функцией псевдокласса. Она позволяет более точно определять элементы.

Псевдокласс :has() определяет элемент, если хотя бы один селектор, переданный как аргумент, определяет хотя бы один элемент!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

В примере сверху выбираются все элементы img, которые лежат внутри figure. А селектор figure:has(figcaption) img означает, что выбираются все теги img внутри figure, которые внутри себя содержит figcaption.

В поддерживаемых браузерах вы увидите следующее:

2. Следующая версия CSS transform

Это не новая CSS функция, она похожа на медиа запросы. В спецификации CSS Transform Level 2 функции rotate(), scale() и translate() использующие свойство transform сам превратились в независимые свойства. Все они стали экспериментальными свойствами для всех основных браузеров.

Свойства translate, rotate и scale позволяют разработчикам делать простые трансформации независимо в соответствии с типичным использованием интерфейса. Не нужно запоминать порядок трансформаций, делать transform(). Действия rotate() и scale() остаются независимыми и работают по координатам экрана. Порядок применения – сначала translate, затем rotate, scale последний. Порядок именной такой, а не тот, в котором вы написали. Независимость этих свойств также позволяет разделить анимацию и transition.

3. CSS @container

Контейнерный CSS запрос — совершенно точно долгожданная функция, несущаяся на полной скорости в 2022! Una Kravets представила контейнерный запрос @container на конференции Google I/O. Она называет @container одной из необходимых функций для работы с новыми адаптивными макетами.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS @container похож на @media, но мощнее. Разберем живой пример.

4. Вложенная сетка внутри Grid

Flexbox – замечательный инструмент для создания веб-макетов. Однако в нем очень много ограничений в двумерном пространстве. CSS Grid – единственный двумерный инструмент во всей технической системе макетирования. Тем не менее, CSS Grid макеты все еще развиваются и обрели поддержку в основных браузерах.

CSS Grid с нами уже много лет, и многие функции в этом разделе уже поддерживаются в основных браузерах. Однако в системе макетирования CSS Grid должна быть вложенная сетка subgrid.

Ранние наработки subgrid (grid и inline-grid) были просто значением для свойства display.

div { display: subgrid; }

123	div {   display: subgrid;}

Позже они были удалены. Но мы можем сымитировать subgrid через вложенность.

div { display: subgrid; grid-template-columns: repeat(4, 1fr); }

1234	div {   display: subgrid;   grid-template-columns: repeat(4, 1fr);}

Есть проблема с выравниванием ячеек вложенной сетки относительно родительской. Другими словами, родительный grid и вложенный – независимы. Обе сетки обладают своими отдельными параметрами. Дабы переиспользовать релевантные параметры родительской сетки в дочерней в системе CSS Grid снова вернулся subgrid. Теперь это уже не значение для свойства display, а колонки шаблонной сетки или grid-значение для свойства template-rows.

Заключение

Некоторые из перечисленных CSS функций еще неизвестны, но они появятся к середине 2022. А некоторые уже доступны в одном или более браузере. Можете попробовать их, если интересно. Давайте еще раз поблагодарим тех, кто незаметно для нас вносит свой вклад в развитие CSS!

Автор: Richard Lee

Источник: webformyself.com