21 декабря, самый короткий день в 21-м году 21 века, принес сразу несколько приятных CSS-новостей.

Во-первых, у CSS в очередной раз обновилось официальное определение — уже девятое по счету (можно сказать, «CSS9»?). Отличий от прошлогоднего не очень много. В само «официальное определение» (т.е. модули, по мнению редакторов полностью проработанные, покрытые тестами и готовые к внедрению) добавились стили для счетчиков (возможность нумеровать списки любыми символами). Список стабильных, но мало опробованных в деле модулей пополнился стилями скроллбаров — псевдоэлементы типа ::-webkit-scrollbar-* окончательно уступят место CSS-свойствам из Мозиллы. Больше всего изменился раздел «Модули с более-менее единообразной реализацией» — туда вошли трансформации 2 уровня (отдельные функции translate(), scale() и rotate(), а также 3D, в котором наконец навели относительный порядок), логические свойства и значения (отступы и т.п. с учетом направления текста), размеры бокса (новые значения типа min-content), позиционирование (включая position:sticky), шрифты 4 уровня, и даже пара скриптовых API — ResizeObserver и API анимаций.

Во-вторых, в этот же день вышли сразу три новых первых публичных черновика:

• Модуль каскада и наследования 6 уровня (да, шестого!), добавляющий в CSS долгожданные области видимости.
• Условные правила 5 уровня. Можно будет гибко комбинировать проверку медиасвойств и поддержки функций в новых универсальных директивах @when и @else — по сути программировать выбор конкретных стилей и фолбэки на все случаи жизни. А еще — проверять поддержку отдельных свойств шрифта (например, вариативности) и подгружать его только там, где всё будет работать как надо.
• CSS-изоляция (containment) 3 уровня. За скромной цифрой прячется не менее внушительный прогресс, ведь этот модуль не продолжает CSS2.x, а стартовал с нуля, с уровня 1. И главная его новинка — долгожданные нативные Container Queries, выражения от контейнера! Вместе с единицами измерения контейнера cqw, cqh и т.п., по аналогии с vw, vh и т.д. для вьюпорта. Кстати, их уже можно пощупать в браузерах на Blink за флагом — теперь уже официально.

И кстати, о браузерах: в этот же день вышел Safari TP 137 — экспериментальное превью будущих новинок. Их список внушителен: там и новые цветовые пространства, и долгожданный фикс position:sticky для ячеек таблиц, много других улучшений совместимости. Но все они меркнут перед первым пунктом раздела CSS: без лишнего шума и суеты Apple взяли и реализовали… псевдокласс :has(). Тот самый «родительский селектор» (а также селектор предыдущего соседа и не только), про который нам годами твердили, что он невозможен! Пожалуй, эта новость и этот селектор заслуживает отдельной статьи! :)

P.S. Это тоже может быть интересно:

• Псевдокласс :has() — не только «родительский селектор»
• «Родительскому селектору» :has(), скорее всего, запретят быть вложенным
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами