Будущее настало незаметно

Когда-то название «CSS3» было символом прогресса и светлого будущего веб-технологий. Долгие годы мы радовались, глядя на растущую поддержку браузерами закругленных уголков и множественных фонов с медиавыражениями, и мечтали о временах, когда «спецификация CSS3 будет готова» и «браузеры будут полностью поддерживать CSS3»…

Вот уже несколько лет, как некоторые модули CSS 3 уровня — селекторы и цвета — получили самый «почтенный» в W3C статус рекомендации (в переводе на человеческий — «повсеместно реализовано, сплошь покрыто тестами и давно массово используется»). Два из этих модулей, кстати, получили этот статус в один день со спецификацией CSS2.1 (так что по «крутости и современности» они примерно равны:). Незаметно CSS3 превратился из «сияющего будущего» в повседневные будни. Мы более-менее свыклись с безверсионностью CSS и тем, что самостоятельной спецификации «CSS3» нет и никогда не будет, а отдельные экспериментальные модули — даже интересные и востребованные — на «будущее» как-то не тянут.

Но людям по-прежнему нужны символы прогресса со звучным названием. За CSS3 должен идти CSS4, логично? Почему-то чаще всего так величают модуль селекторов 4 уровня (хотя давно есть и другие модули). Увы, главный редактор множества спецификаций CSS Таб Аткинс непреклонен: «CSS4» не будет. Да и название «CSS3» останется скорее историческим курьезом, как дань традиции.

Стандарты-первопроходцы

Большинство известных нам модулей «CSS3» развивают и надстраивают какую-то функциональность, уже имевшуюся в CSS2.x: те же селекторы, те же фоны. Поэтому эти модули надстраиваются «поверх» CSS2 (второго уровня) — третьим уровнем. Отсюда и «CSS3».

Но есть модули, аналогов которым в CSS2 и раньше не было вообще, функциональность которых для CSS абсолютно в новинку. Такие модули начинаются с самого первого уровня.

Если модули 3 уровня — «CSS3», а модули 4 уровня — «CSS4», то что же по этой логике, например, CSS-переменные — «CSS1»? Нет, так сказать нельзя: название «CSS1» закреплено за реальной спецификацией, хоть и устаревшей. Но и относить модули первого уровня к «CSS3» тоже как-то странно. Может, пора придумать для них новый «бренд» с позитивными ассоциациями — что-нибудь вроде «первоклассного CSS»?:)

Великое переименование

Относительно недавно участники Рабочей группы CSS в W3C пересмотрели свои наработки и внезапно обнаружили, что многое из того, что раньше считалось «развитием и надстройкой», на самом деле — очень даже абсолютно новая функциональность. И по-хорошему, этим модулям тоже надо бы быть на первом уровне, а не на третьем. Таких модулей набралось больше дюжины. Да и вообще стоило уйти от надоевшего слова «CSS3» и связанной с ним путаницы. И в W3C затеяли Великое Переименование модулей.

Так что сейчас многие спецификации CSS открываются сразу по двум адресам — старому, вида css3-что-то, и «стильно-модно-молодежному», вида css-что-то-1.

Маленькая сенсация: в числе таких «переехавших» модулей — CSS-трансформации и… флексбоксы! Да, даже эти, казалось бы, бесспорные и давно полюбившиеся нам «хиты CSS3» избавились от уже немодной «тройки» в названии и перешли в стан модных «первопроходцев». CSS-переходы, анимации и CSS-колонки тоже в планах на переезд, но на момент написания статьи по новому адресу еще не доступны (переименование — процесс долгий, а W3C не зря славится своей неторопливостью). В «первый класс» перешли и многие перспективные новинки — например, CSS Grid Layout и CSS-регионы.

Краткий обзор некоторых интересных модулей 1 уровня

Пробежимся по модулям CSS 1 уровня, в том порядке, как они перечислены среди «текущей работы» Рабочей группы CSS — т.е. от почти готовых к самым черновым наброскам.

Flexbox Layout 1

Да! Первый в списке «первопроходцев» — знакомый и уже полюбившийся нам первый настоящий раскладочный модуль, о непростой истории, временных трудностях, наглядных возможностях и практических применениях которого мы уже не раз писали.

Кстати, буквально позавчера он опять обновился! Ключевых изменений немного — уточнен алгоритм автоматического flex-basis (добавлено новое значение main-size), исправлено несколько ошибок, уточнены отдельные формулировки. Этот вариант тоже не окончательный: в частности, прямо сейчас обсуждается, как должны вести себя вертикальные внешние/внутренние отступы в процентах у флекс-элементов — отсчитываться от ширины, как у блоков, или от высоты, для единообразия с горизонтальными отступами у вертикальных флексбоксов, чтобы смена направления не приводила к неочевидному изменению поведения. Между браузерами пока тоже нет единства по этому пункту, но от решения W3C будет зависеть, какое поведение будет правильным, а какое — багом. Так что не упустите возможность повлиять на это решение!

CSS Shapes 1

Этот модуль не так популярен, как предыдущий, даром что уже больше года находится в статусе кандидата в рекомендации — т.е. полностью готов теоретически и ждет, пока его реализуют. С реализацией пока не так радужно. Но есть полифилл.

Модуль CSS-фигур позволяет заполнять текстом изнутри и обтекать им снаружи произвольные формы — от обычных закругленных уголков (раньше текст игнорировал закругления) до самых замысловатых, позволяющих эффектно решать нетривиальные дизайнерские задачи. Справедливости ради, в какой-то мере такого эффекта можно было добиться и раньше, но ценой хаков и жутко избыточной разметки. А теперь для этого есть стандартное средство. Дело за браузерами!

Кстати, между делом в недрах W3C тихонько зреет уже следующая итерация этого модуля — второго уровня.

CSS Masks 1

Как и предыдущий, модуль CSS-масок предложен компанией Adobe, поэтому тоже неразрывно связан с графикой (прежде всего SVG). Тоже в статусе кандидата в рекомендации, но браузерная поддержка тоже пока далека от идеала. Но в связке с SVG ее уже достаточно для многих впечатляющих эффектов. Еще неплохая ознакомительная статья об этом и предыдущем модулях (правда, написанная еще тогда, когда они были глубоко в черновиках).

CSS Transforms 1

Еще один сюрприз — модуль, к которому мы привыкли как к «CSS3», тоже на поверку оказался «первоклассным CSS», причем достаточно давно! На удивление хорошо поддерживается браузерами, несмотря на формальный статус черновика. Изначально были два отдельных модуля для 2D- и 3D-трансформаций, но их объединили — и правильно сделали.

CSS Transitions 1

В отличие от CSS-трансформаций, у CSS-переходов основным адресом пока остается старый, с «CSS3». Но в списке редакторских черновиков они недвусмысленно помечены именно единичкой (более того — у них тоже готовится продолжение, второй уровень, описывающий на данный момент два дополнительных события — transitionstart и transitioncancel). Набор тестов для этой спецификации тоже содержит в себе гордую единичку. Так что их тоже по праву можно отнести к «первому классу»!

CSS Custom Properties for Cascading Variables 1

CSS-переменные — нововведение CSS, по сей день вызывающее немало споров (от сомнений в их необходимости и оправданности такого усложнения CSS вообще до сожалений, что они не анимируются). Но часто такая дополнительная возможность оказывается очень кстати. Жаль, работают пока только в Firefox (зато без префикса!).

Compositing and Blending 1

Еще одно нововведение родом из Adobe. В двух словах — позволяет сделать из браузера Photoshop (видеодоказательство). Правда, пока только в Firefox и Chrome (ну и частично в Safari). Но в статусе кандидата в рекомендации, так что оставшимся браузерам придется подтянуться.

CSS Will Change 1

Снова новинка, название которой (можно прочитать как «CSS изменится») наводит на странные философские мысли. На самом деле весь модуль посвящен лишь одному свойству will-change, помогающему заранее оптимизировать обработку браузером тяжелых анимаций и т.п. Свойство не такое уж простое, так что это вполне оправданно.

CSS Grid Layout 1

Второй (после флексбоксов) модуль, предназначенный именно для раскладки блоков (в отличие от таблиц, флоатов, инлайн-блоков и всего того, чем мы делали раскладку раньше!). Получен «скрещиванием» исторически первого раскладочного модуля CSS3 (тогда еще!) Template Layout (известного под прозвищем «раскладка ASCII-артом») и собственно Grid Layout, предложенного Микрософтом. И, как часто бывает с гибридами, оказался очень мощным! Мощнее флексбоксов. Ведь он позволяет управлять расположением блоков не в одном измерении, а в двух одновременно!

На прошлой неделе об этом модуле на конференции An Event Apart в Бостоне рассказывала Рейчел Эндрю. Вот типичная реакция в твиттере на ее доклад:

Мои заметки с выступления @rachelandrew готовы! #aeabos https://mix.fiftythree.com/43559-Susan-Robertson/3231276 …

Я хочу раскладку CSS grid сейчас же, не могу дождаться, чтобы поиграть с ней :)

В общем, этот модуль стоит того, чтобы познакомиться с ним поближе. И очень скоро такая возможность появится прямо здесь — инсайдеры сообщают, что на CSS-live.ru готовится обстоятельная авторская статья о CSS Grid:) Следите за обновлениями!

CSS Device Adaptation 1

Суть модуля — замена тегу <meta name="viewport">, который непонятно почему оказался в HTML, а не в CSS. Его центральный пункт — директива @viewport. Опубликованная версия модуля не менялась аж с 2011 года, но актуальный редакторский черновик датирован апрелем 2015-го. Так что модуль вполне живой, к тому же его частично поддерживают самые проблемные мобильные браузеры — IE и Опера Мини.

CSS Exclusions 1

Когда-то CSS-исключения входили в единую спецификацию с CSS Shapes, и на первый взгляд относятся к той же задаче — обтеканию блоков текстом. Но если CSS-фигуры определяют, как (по какому контуру) текст должен обтекать что-либо (напр., плавающий блок), то CSS-исключения указывают, что именно (какие блоки и по какой стороне) должен обтекать текст. По сути они дополняют возможности float-ов, например, позволяя тексту обтекать абсолютно позиционированные блоки.

Этот модуль тоже находится в процессе «Великого переименования»: в названии у него гордое и современное «Level 1», но в адресе еще осталось старинное «css3».

CSS Filter Effects 1

Еще один модуль-первопроходец, добавляющий в браузеры элементы фотошопа, на этот раз — графические фильтры. Совместное детище двух рабочих групп — CSS и SVG. И фактически является портом SVG-фильтров в CSS. Достаточно неплохо поддерживается последними версиями браузеров, так что вполне готов для прогрессивного улучшения фотогалерей и инстаграммов, да и вообще смелых дизайнерских экспериментов.

CSS Regions 1

Тоже дальний родственник CSS-фигур и CSS-исключений, зародившийся в недрах Adobe и приближающий возможности веба к возможностям издательских систем. Очень мощный модуль, позволяющий тексту, при переполнении какого-либо блока, перетекать… в другие блоки! Причем блоками могут быть не обязательно HTML-элементы: это могут быть, например, ячейки сетки в Grid Layout-е или вышеупомянутые CSS-фигуры. К сожалению, браузерная поддержка оставляет желать лучшего, но, как и для многих других своих предложений, сама Adobe подготовила качественный полифилл.

Добавлено 11.08.2018: к сожалению, модуль регионов в своём первоначальном виде так и не прижился. После коротких неудачных экспериментов Chrome наотрез отказался его реализовывать, да и многие разработчики отнеслись к нему настороженно из-за слишком сильной привязки к несемантичной разметке. Но многие идеи из него могут воплотиться в новых стандартах, особенно с учетом опыта тех же гридов. Пока что неплохой заменой регионам выглядит пофрагментное переполнение (Fragment Overflow) из модуля CSS Overflow 4 уровня.

CSS Ruby Layout 1

Достаточно экзотический модуль, уже успешно избавившийся от своего CSS3-прошлого, отвечающий за подсказки мелким шрифтом для китайских и японских иероглифических надписей, полезный в паре с соответствующими HTML5-элементами и полностью поддерживаемый в свежевышедшем Firefox 38.

CSS Scoping 1

Совершенно новый модуль (первый публичный черновик), решающий главную задачу современной верстки — устранение зависимости от контекста (иногда говорят про «избавление от каскада», хотя это неверно). Для оформления текста такая зависимость скорее плюс (ссылка или выделение в заголовке и должны подхватывать стили его шрифта, например), но для интерфейсных компонентов — почти всегда минус. Отсюда и популярность методологий типа БЭМ. С новым модулем можно будет ограничивать область действия стилей из самого CSS, причем несколькими способами: с помощью специальной директивы @scope, ограничивающей область действия элементом определенным селектором, с помощью комбинаторов теневой DOM и старинным способом через <style scoped> в HTML. Есть возможность и указывать особые стили для отдельных CSS-регионов (см. выше). Стили с ограниченной областью действия будут иметь приоритет перед «обычными» стилями. Конечно, на пути от черновика до хотя бы кандидата в рекомендации многое может измениться, но модуль очень многообещающий!

Non-element Selectors 1

Еще один очень сырой и довольно странный модуль, на данный момент предлагающий возможность выбирать атрибуты элемента как псевдоэлементы. Честно говоря, я не очень понимаю, где это может понадобиться и чем это лучше [attr]::before { content: attr(attr) }, например. Развивается он тоже как-то медленно, но посмотрим — вдруг что-то полезное из этого и вырастет?

Geometry Interfaces 1

Тоже совместное детище рабочих групп CSS и SVG, причем незаметно дозревшее аж до кандидата в рекомендации! Спецификация, несколько необычная для CSS в том смысле, что описывает не визуальные возможности, а программный API для работы с точками, фигурами и матрицами трансформаций. Наверное, может оказаться полезной для скриптового управления визуальными спецэффектами (с чем сейчас есть определенные сложности).

Motion Path Module Level 1

Еще один плод объединения усилий рабочих групп CSS и SVG, дополняющий CSS-анимации возможностью движения по контуру (задаваемому в синтаксисе SVG-элемента <path>). До сих пор такое было возможно лишь в SVG-анимациях (либо с помощью сложных формул в скриптах), теперь такие анимации можно будет декларативно задавать прямо в CSS. С учетом угрозы отказа некоторых браузеров от поддержки SMIL-анимаций, это особенно обнадеживает.

Неопубликованные редакторские черновики

Среди редакторских черновиков, некоторые из которых еще не опубликованы как публичные, также есть немало интересных новинок 1 уровня. Например, CSS Color Correction 1 — еще один шаг к фотошопу в браузере, CSS Round Display 1 — да, именно про отображение на круглых экранах (есть же уже Moto 360!), CSS Mobile Text Size Adjustment 1 — попытка стандартизировать поведение свойства text-size-adjust на мобильниках, и многое другое. И учитывая, что по новому процессу W3C — отказавшемуся от статуса Last Call и упростившему переход в статус кандидата в рекомендации — спецификации могут «взрослеть» быстрее, чем раньше, а браузеры обновляются часто, стоит как минимум поглядывать туда. Вдруг именно эта новинка окажется центром новой моды, пришедшей на смену устаревшему и надоевшему «CSS3»!

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

• Псевдокласс :has() — не только «родительский селектор»
• Не боритесь с каскадом, управляйте им!
• Как читать W3C-спецификации