Новые функции CSS, которых стоит ожидать в 2022 году

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

CSS (каскадные таблицы стилей) дебютировали в 1996 году и до сих пор являются важным, развивающимся компонентом стека веб-разработки. CSS, как и другие живые языки, всегда добавляет новые функции в ответ на практику реального мира. Из-за быстрого развития даже преданные разработчики могут пропустить новые функции. Ознакомьтесь с некоторыми из наиболее полезных функций, которые появятся в CSS в ближайшем будущем.

Подсетка

CSS подвергался критике за ряд вопиющих недостатков с момента его создания. Некоторые простые задачи, такие как центрирование чего-либо в CSS, требуют слишком сложных обходных путей и ловушек.
Еще одной серьезной проблемой было достижение приемлемого макета сетки, по крайней мере, до тех пор, пока не вмешался модуль CSS Grid Layout.

Макет сетки обозначается объявлением display: grid и похож на Flexbox тем, что позволяет вам определять прямоугольные макеты, а также управлять сеткой в ​​двух измерениях.
Согласно исследованиям, большинство разработчиков CSS знают о Grid Layout, и многие из нас его используют. (Не забудьте попробовать, если еще не пробовали!)

Subgrid — совершенно новая и чрезвычайно полезная функция модуля Grid Layout. Функция подсетки позволяет вам создать дочернюю сетку, которая наследует макет своей родительской сетки.

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

Subgrid в настоящее время доступен только в Firefox 71 и выше, но планируется для Safari WebKit, Google Chrome и Microsoft Edge. Подсетка будет очень полезной функцией макета в будущем.

Акцент-цвет

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

Например, как показано в листинге 1, вы можете применить пурпурный цвет ко всем переключателям на вашей странице (см. также этот живой пример).

Листинг 1. Управление цветом CSS для радиокнопок

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

Привязка прокрутки

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

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

Команда свойств scroll-snap-* предоставляет несколько параметров для тонкой настройки работы положения прокрутки в контейнере. Разработчики получают выгоду от повышенной точности, а конечные пользователи получают более плавный и контролируемый пользовательский интерфейс.

В листинге 2 показан простой пример того, как управлять привязкой прокрутки к элементу div (см. также этот живой пример).

В листинге 2 приведен пример простой привязки прокрутки.

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

Позиция прокрутки y в листинге 3 автоматически перемещается к дочернему элементу независимо от того, где вы прекращаете движение прокрутки. Это связано с тем, что для свойства scroll-snap-type контейнера прокрутки установлено значение y, а дочерние элементы имеют объявление scroll-snap-align: start.

Это поведение также можно изменить. Вы можете, например, установить для свойства scroll-snap-type значение y близость. Это работает, как и ожидалось, привязываясь только тогда, когда прокрутка находится близко к элементу.

Кроме того, связанное свойство overscroll-behavior управляет поведением контейнеров с вложенной прокруткой.

Логические свойства CSS

Вы, вероятно, испытывали раздражение от необходимости записывать свойства border-left и border-right или border-top, border-bottom дословно, если вы когда-либо хотели установить границу контейнера слева и справа или снизу и Топ. Проблема в том, что невозможно использовать свойство ярлыка, не затрагивая границы, которые вы не хотите изменять. Это также верно для таких элементов, как отступы и поля.

Модуль логических свойств CSS позволяет вам обращаться к вещам абстрактным образом, используя ключевые слова inline и block. Говоря о левом и правом, используйте inline; при обращении к верху и низу используйте блок. Например, чтобы добавить границу к левой и правой сторонам элемента div, используйте код из листинга 3 (см. также живой пример здесь).

Листинг 3. Заполнение слева и справа со встроенной логикой

 div { border- inline : 10px dashed seagreen; }

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

Большинство разработчиков используют эти сочетания клавиш для решения проблем с направлением текста и режимом письма. В этих случаях такое свойство, как padding-inline-end, позволяет указать заполнение в конце независимо от направления текста.

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

Поиск контейнеров

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

Четкого определения синтаксиса нет, но он, вероятно, будет похож на листинг 4.

@container Листинг 4.

 @container (max-width: 650px){ … }

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

Три новые цветовые схемы

Практики CSS использовали RGB, HEX и именованные цвета для украшения и оживления дисплеев устройств с незапамятных времен. Недавно было введено объявление цвета в стиле HSL. Спецификация CSS теперь представляет новые цветовые дескрипторы, а именно hwb, lab и lch.

HWB — это сокращение от оттенков, белизны и черноты. Это приятный штрих, который выделяется своей удобочитаемостью — вы выбираете цвет, а затем добавляете белый и черный. Он совместим с самыми последними версиями Chrome, Firefox и Safari. (Справочник по функциям Microsoft Edge странно молчит по этому поводу.) Чтобы узнать больше о HWB, см. hwb() — обозначение цвета для людей? Он, как и RGB и HWL, имеет альфа-канал для прозрачности.

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

Наиболее теоретическим из новых цветовых пространств является LAB, основанный на теории цвета CIE LAB. Дескриптор лабораторного цвета утверждает, что охватывает весь спектр воспринимаемых человеком цветов, что является смелым заявлением. Он, как и LCH, на данный момент поддерживается только Safari. Дополнительную информацию о LAB для CSS можно найти в документации Mozilla CSS.