От автора: CSS разительно изменился за последние годы. Но для меня взрывным годом для CSS стал 2021. В этот год вышло много новых функций.
Среди новых функций можно назвать контейнерные запросы, родительские селекторы, правила управления каскадированием, CSS Grid и т.д. Все главные производители браузеров в восторге от всех этих функций. Это очень помогает нашим разработчикам. Давайте поблагодарим их за тяжелый труд! А теперь взглянем что нового CSS представит в 2022.
1. Родительский CSS селектор :has()
На данный момент поддержка :has() по умолчанию есть только в Safari 137.
В CSS много селекторов, однако :has особенный. CSS селектор или псевдокласс :has() чем-то похож на :not(), также известный как структурный псевдокласс. Он также используется в CSS функциях. Его можно назвать динамической функцией псевдокласса. Она позволяет более точно определять элементы.
Псевдокласс :has() определяет элемент, если хотя бы один селектор, переданный как аргумент, определяет хотя бы один элемент!
Проще говоря, элементы выбираются только если переданный внутрь :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 одной из необходимых функций для работы с новыми адаптивными макетами.
CSS @container похож на @media, но мощнее. Разберем живой пример.
4. Вложенная сетка внутри Grid
Flexbox – замечательный инструмент для создания веб-макетов. Однако в нем очень много ограничений в двумерном пространстве. CSS Grid – единственный двумерный инструмент во всей технической системе макетирования. Тем не менее, CSS Grid макеты все еще развиваются и обрели поддержку в основных браузерах.
CSS Grid с нами уже много лет, и многие функции в этом разделе уже поддерживаются в основных браузерах. Однако в системе макетирования CSS Grid должна быть вложенная сетка subgrid.
Ранние наработки subgrid (grid и inline-grid) были просто значением для свойства display.
div { display: subgrid;
}Позже они были удалены. Но мы можем сымитировать subgrid через вложенность.
div { display: subgrid; grid-template-columns: repeat(4, 1fr);
}Есть проблема с выравниванием ячеек вложенной сетки относительно родительской. Другими словами, родительный grid и вложенный – независимы. Обе сетки обладают своими отдельными параметрами. Дабы переиспользовать релевантные параметры родительской сетки в дочерней в системе CSS Grid снова вернулся subgrid. Теперь это уже не значение для свойства display, а колонки шаблонной сетки или grid-значение для свойства template-rows.
Заключение
Некоторые из перечисленных CSS функций еще неизвестны, но они появятся к середине 2022. А некоторые уже доступны в одном или более браузере. Можете попробовать их, если интересно. Давайте еще раз поблагодарим тех, кто незаметно для нас вносит свой вклад в развитие CSS!
Автор: Richard Lee
Источник: enlear.academy
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен