Последняя и заключительная часть про новинки HTML и CSS с Google I/O. В этой части посмотрим на различные фичи, улучшающие DX.
CSS Nesting Lookahead
В CSS появилась вложенность, к которой многие привыкли в препроцессорах. В базовой реализации было неудобно добавлять
& перед вложенными элементами. Это исправили и теперь писать & не обязательно. Подробнее про Nesting Relaxed Syntax. Доступно в Chrome и Edge 120+, Firefox 117+ и Safari 17.2+.align-content в блочных элементах
Фича, которая вызвала дикий восторг у аудитории. Мы привыкли к свойству
align-content внутри flex и grid. И если нам нужно что-то вертикально выровнять, мы делает контейнер flex или grid только ради того, чтобы применить align-content. Теперь свойство align-content будет работать и внутри block. Подробнее про align-content в блочных элементах. Доступно в Chrome и Edge 123+, Firefox 125+ и Safari 17.4+.text-wrap: balance и text-wrap: pretty
Новые значения для выравнивания и переноса текста.
text-wrap: balance балансирует текст, чтобы длина всех строк в блоке была как можно более равной. Это полезно для заголовков. Подробнее про balance. Доступно в Chrome и Edge 114+, Firefox 121+ и Safari 17.5+. text-wrap: pretty переносит текст таким образом, чтобы в конце текста на новой строке не оказалось одно слово. Подробнее про pretty. Доступно в Chrome и Edge 117+.word-break: auto-phrase
Ещё одно улучшение для работы с текстом в CSS. Новое значение
word-break: auto-phrase позволяет управлять автоматическим переносом и правильно переносить фразы для CJK-языков (Китайский, Японский, Корейский и подобные). Подробнее про auto-phrase. Доступно в Chrome и Edge 119+.text-spacing-trim
В типографии CJK-языков принято разделять знаки препинания небольшими отступами для лучшей читаемости. Свойство
text-spacing-trim как раз включает режим, при котором отступы автоматически добавляются. Фича будет по умолчанию включена в браузерах, которые поддерживают это свойство. Подробнее про text-space-trim и его полное описание в черновике спецификации. Доступно в Chrome и Edge 123+.Relative Color Syntax
Продолжается работа над цветами в CSS. Relative Color Syntax позволяет изменять компоненты цветов в разных цветовых пространствах и форматах. Например, можно взять цвет в формате
oklch и изменить параметры (l - lightness, c - chroma, h - hue), сделать цвет чуть ярче или тусклее, изменить оттенок. Ещё это позволяет конвертировать цвета из одного формата в другой. Подробнее про Relative Color Syntax. Доступно в Chrome и Edge 119+ и Safari 16.4+.light-dark()
Новая CSS-функция
light-dark() принимает два цвета. Первый будет применён для светлой темы (prefers-color-scheme: light), второй — для тёмной темы (prefers-color-scheme: dark). Сейчас это же можно реализовать при помощи Custom Properties и prefers-color-scheme. Но с light-dark() это удобнее. Подробнее про light-dark() и плагин для PostCSS. Доступно в Chrome и Edge 123+, Firefox 120+ и Safari 17.5+.:has()
:has() — родительский селектор, с помощью которого можно стилизовать элемент в зависимости от его дочерних элементов и их состояний. Вариантов применения уже придумано огромное количество. Интерактивный гайд Ахмада Шадида по :has(). Доступно в Chrome и Edge 105+, Firefox 121+ и Safari 15.4+.Container Queries
Container queries позволяют менять внешний вид элемента в зависимости от ширины контейнера, а не ширины всего экрана. Можно будет создавать универсальные компоненты, которые будут адаптироваться в зависимости от места использования. Подробнее про Container Queries, Интерактивный гайд Ахмада Шадида по Container Queries. Доступно в Chrome и Edge 106+, Firefox 110+ и Safari 16+.
property
По умолчанию все Custom Properties — строки. Браузер сам преобразует их в нужные типы. Но браузер не понимает, как анимировать из строки в строку.
@property решает эту проблему. Директива позволяет указать тип, значение по умолчанию и наследуемость для Custom Properties. Подробнее про @property. Доступно в Chrome и Edge 85+, Firefox 128+ и Safari 16.4+.