При всей парадоксальности заголовка, будто взятого из фантастики про «временные петли», это правда. Три недели назад рабочая группа по 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, мы можем уже сейчас вовсю пользоваться технологиями из будущего? 🙂
P.S. Это тоже может быть интересно:
