CSS-live.ru

День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari

С днем зимнего солнCSSтояния! :)

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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