6 первых публичных черновиков новых модулей CSS, которыми вы, возможно, давно пользуетесь

При всей парадоксальности заголовка, будто взятого из фантастики про «временные петли», это правда. Три недели назад рабочая группа по CSS опубликовала первые публичные рабочие черновики двух модулей CSS. Сегодня к ним добавились еще аж 4 первых публичных черновика (включая два модуля 5 уровня). И многие новинки роднит то, что часть их функций давно работает почти во всех браузерах, и даже в реальных проектах!

Вот список этих новинок:

  • Привязка скроллинга 1 уровня (CSS Scroll Anchoring Level 1). Когда-то давно при загрузке контента, например, высоких картинок, элементы меняли высоту и текущий блок мог «ускакать» куда-то вниз, что раздражало пользователей. Новые браузеры по умолчанию автоматически подстраивают положение скроллинга так, чтобы видимый элемент оставался на месте. Новый модуль стандартизирует это поведение и дает возможность его отключить (свойство overflow-anchor). Оно уже поддерживается в Firefox и всех браузерах на Blink.
  • Resize Observer 1 уровня. Нечасто CSS-спецификации описывают API JS, но этот API нужен для одной из важнейших задач адаптивной верстки компонентов и использует всю мощь CSS-движка. Эксперименты с этим механизмом мы видели еще два года назад, а сейчас он уже внедрен во все актуальные браузерные движки (в Safari – пока лишь в превью для разработчиков, но в ближайшем релизе будет).
  • Медиавыражения 5 уровня. Если вы тоже уже делали автоматическую темную тему для сайта с помощью prefers-color-scheme или отключали анимации для prefers-reduced-motion – можете смело указать в резюме «опыт в CSS5»! (Шутка… но на некоторых рекрутеров может подействовать:). Увы, еще одна интересность этого модуля – собственные переменные для медиавыражений – пока лишь на уровне сырой идеи.
  • CSS-трансформации 2 уровня. Если вы когда-либо «крутили кубики» или «перелистывали карточки» на CSS, либо просто добавляли backface-visibility или transform:translatez(0), чтобы вынести элемент на композитный слой – вы с этим модулем уже работали:). Да, это старые добрые 3D-трансформации «из CSS3», которые когда-то давно уже были отдельной спецификацией, потом их объединяли с 2D, а недавно вот опять выделили (в них было больше неясностей).
  • Цвета 5 уровня. Главная новинка наверняка знакома вам по препроцессорам, а у тех, кто активно следил за новинками стандартов и даже пытался их применять с помощью инструментов типа cssnext, может возникнуть чувство «где-то мы это уже видели!». Речь о возможности взять любой цвет за основу и «модифицировать» его, добавив/убавив яркости, подмешав другой оттенок и т.п. Одно время модуль цветов 4 уровня предлагал для этого функцию color-mod(), но ей не везло: сперва ее отложили «на потом», а потом и вовсе решили переделать с нуля. В новом черновике она вернулась под именем color-adjust(), но не одна: в качестве альтернативы ей предлагается синтаксис «относительных цветов» – расширение старых добрых цветовых функций типа rgb() и hsl(), где можно будет менять только отдельные компоненты исходного цвета. Теперь выбор за браузерами, что из этого им будет проще и удобнее реализовать.
  • Условные правила 4 уровня (CSS Conditional Rules Level 4). Расширение директивы @supports, позволяющее проверять поддержку не только пар свойство/значение, но и CSS-селекторов. Поддерживается, правда, пока лишь в одном браузере – Firefox – но лучше чем ничего!

Тех, кто представляет себе разработку стандартов как линейный процесс «сначала проработка теории, затем реализация, затем внедрение» такая ситуация, когда функция уже давно есть в браузерах и используется на практике, а первая публичная спецификация для нее появляется лишь сейчас, может удивить. Но реальность сложнее и интереснее этой линейной схемы. Так что смелее оглядывайтесь по сторонам и не бойтесь пробовать новое, даже если оно еще «не утверждено»! Ведь где еще, как не в CSS, мы можем уже сейчас вовсю пользоваться технологиями из будущего? 🙂

Источник иллюстрации – Wikimedia

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