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. Это тоже может быть интересно:
