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

Вот 5 самых захватывающих и впечатляющих функций, которые появились недавно или появятся в ближайшее время и которые мне показались наиболее интересными:

👉 Запросы стиля

Спецификация запроса контейнера также позволяет запрашивать значения стиля родительского контейнера. В настоящее время это частично реализовано в Chrome 111, где вы можете использовать настраиваемые свойства CSS для применения стилей контейнера.

В следующем примере показано, как использовать запросы стилей.

Пример кода пера: https://codepen.io/web-dot-dev/pen/KKxzYQx

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

Вы можете узнать больше и увидеть больше демонстраций в записи блога о запросах стилей.

👉 :has()

Говоря о мощных динамических функциях, селектор :has() — одна из самых мощных новых возможностей CSS, появившихся в современных браузерах. С помощью :has() вы можете применять стили, проверяя, содержит ли родительский элемент присутствие определенных дочерних элементов или находятся ли эти дочерние элементы в определенном состоянии. Это означает, что у нас теперь есть родительский селектор.

Основываясь на примере запроса контейнера, вы можете использовать :has(), чтобы сделать компоненты еще более динамичными. В нем к элементу со звездочкой применяется серый фон, а к элементу с установленным флажком — синий фон.

Но этот API не ограничивается выбором родителей. Вы также можете стилизовать любые дочерние элементы внутри родителя. Например, заголовок выделяется полужирным шрифтом, если в элементе присутствует звездочка. Это достигается с помощью .item:has(.star) .title. Использование селектора :has() дает вам доступ к родительским элементам, дочерним элементам и даже родственным элементам, что делает этот API действительно гибким, с новыми вариантами использования, которые появляются каждый день.

Чтобы предотвратить замедление производительности рендеринга в больших деревьях модели DOM, мы рекомендуем вам как можно ближе ограничить этот селектор. Например, использование :has() для проверки совпадений в корневом элементе html будет медленнее, чем проверка совпадений в панели навигации или в элементе карточки с меньшим деревом.

👉n-й синтаксис

Веб-платформа теперь имеет более расширенный выбор nth-child. Расширенный синтаксис nth-child дает новое ключевое слово («из»), которое позволяет вам использовать существующий микросинтаксис An+B с более конкретным подмножеством для поиска.

Если вы используете обычный nth-child, такой как :nth-child(2) в специальном классе, браузер выберет элемент, к которому применен специальный класс, а также второй дочерний элемент. Это отличается от :nth-child(2 of .special), который сначала предварительно отфильтрует все элементы .special, а затем выберет второй из этого списка.

Пример кода пера: https://codepen.io/web-dot-dev/pen/oNMRaQq

👉 Динамические единицы просмотра

Одной из распространенных проблем, с которыми сегодня сталкиваются веб-разработчики, является точное и последовательное определение размера всего окна просмотра, особенно на мобильных устройствах. Как разработчик, вы хотите, чтобы 100vh (100% высоты области просмотра) означало «быть таким же высоким, как область просмотра», но единица vh не учитывает такие вещи, как убирание панелей навигации на мобильных устройствах, поэтому иногда она оказывается слишком длинной и вызывает прокрутку.

Чтобы решить эту проблему, теперь у них есть новые значения единиц на веб-платформе, в том числе:

  • Небольшие высота и ширина окна просмотра (или svh и svw), которые представляют наименьший размер активного окна просмотра.
  • Большая высота и ширина окна просмотра (lvh и lvw), которые представляют наибольший размер.
  • Динамическая высота и ширина области просмотра (dvh и dvw).

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

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

👉 Вложение

Вложение CSS, то, что людям нравится в Sass, и один из самых популярных запросов разработчиков CSS в течение многих лет, наконец-то появляется на веб-платформе. Вложение позволяет разработчикам писать в более сжатом, сгруппированном формате, что уменьшает избыточность.

Вы также можете вкладывать Media Queries, что также означает, что вы можете вкладывать Container Queries. В следующем примере карточка меняется с книжной на альбомную, если в ее контейнере достаточно ширины:

Настройка макета на flex происходит, когда в контейнере больше (или равно) 480px доступного встроенного пространства. Браузер просто применит этот новый стиль отображения, когда будут выполнены условия.

Для получения дополнительной информации и примеров ознакомьтесь с нашей статьей Вложение CSS.

👉 Ограниченный CSS

Стили CSS с ограниченной областью действия позволяют разработчикам указывать границы, для которых применяются определенные стили, по существу создавая собственное пространство имен в CSS. Раньше разработчики полагались на сторонние сценарии для переименования классов или специальные соглашения об именах, чтобы предотвратить конфликт стилей, но вскоре вы можете использовать @scope.

Здесь мы масштабируем элемент .title до .card. Это предотвратит конфликт этого элемента заголовка с любыми другими элементами .title на странице, такими как заголовок сообщения в блоге или другой заголовок.

Вы можете увидеть @scope с ограничениями области вместе с @layer в этой живой демонстрации: https://codepen.io/web-dot-dev/pen/MWPVGPL

Узнайте больше о @scope в спецификации css-cascade-6.

😘 Заключение

Будьте в курсе всех последних лендингов в CSS и HTML прямо здесь, на developer.chrome.com, и посмотрите Видео I/O, чтобы узнать больше о веб-лендингах.

Если вы хотите найти более интересный контент, подобный этому, от меня. Пожалуйста, не стесняйтесь посетить мой Веб-сайт портфолио и ссылку GitHub.

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

Большое спасибо и хорошего дня😍.