15
Ноя
2019

CSS4 не будет… потому что он давно прошел. Встречайте CSS8!

Хотя мы свыклись с «вечнозеленой», безверсионной природой CSS, иногда хочется каких-то ориентиров. Всё-таки, как ни крути, CSS сегодня, когда во всех основных движках доступны гриды с CSS-переменными — совсем не то же самое, что CSS в каком-нибудь 2012-м, когда даже флексбоксы были туманным будущим. И постоянно растущий зоопарк модулей с уровнями от первого до пятого включительно — причем первые могут быть гораздо новее последних — ясности не добавляет.

Внимательные читатели нашего сайта уже знают, что с 2007 года существует периодически обновляемый документ под названием «CSS Snapshot» (т.е. «снимок» состояния CSS), c лаконичным адресом https://w3.org/TR/css. Один из его разделов называется (ни много ни мало) «Официальным определением CSS». Чем не ориентир?

Для JS у нас есть спецификация Ecma-262, которая время от времени (с 2015 г. — ежегодно) обновляет номер редакции. Раньше «версии», точнее, этапы развития JS так и определяли по номеру редакции стандарта — 5-я, или ES5, 6-я, или ES6. Потом официальное обозначение версий стандарта стало включать год (ES2015, ES2016…), но многие еще долго по привычке нумеровали их (напр. «асинхронные функции из ES7»). А чем разные редакции «официального определения CSS» — не такие же «версии стандарта»? У них тоже есть официальные обозначения по годам, но неофициально, в полушутку, никто не запрещает их нумеровать!:)

Тогда запутанная история CSS становится наглядной и более-менее логичной:

Версия (или «версия») Год Что добавлено Что удалено/отменено
CSS1 1996 основы синтаксиса CSS и каскада, селекторы по тегу, классу и ID, псевдоклассы для ссылок, псевдоэлементы :first-line и :first-letter, боксовая модель, блочное и строчное форматирование, флоаты, свойства шрифта, цвета в #rrggbb и rgb(), абсолютные единицы длины, единицы em и ex, «эталонный пиксель»
CSS2 1998 Селекторы по атрибуту, псевдокласс :first-child, псевдоэлементы :before/:after, комбинаторы > и +, @media, @page, табличная модель, cursor и outline, голосовые стили (@media aural) Весь CSS1 заменен уточненными аналогами
«CSS3» 2007 display:inline-block (добавлен в CSS2.1), новые селекторы по атрибутам, :: для псевдоэлементов, псевдоклассы :last-child, :nth-child() и т.п., :empty, :target и :not(), комбинатор ~, hsl(), currentColor и opacity, CSS Namespaces, стандарт для атрибута style. Также введены отдельные «профили» CSS для печати, мобильных устройств и TV. CSS2 заменен на CSS2.1, при этом разделы про селекторы и цвета фактически сразу заменены модулями селекторов 3 уровня и цветов 3 уровня соответственно (в частности, : для старых псевдоэлементов объявлен устаревшим). Вместо не прижившегося @media aural предложен @media speech
«CSS4» 2010 Медиавыражения 3 уровня (width, orientation и т.д.) Раздел про @media из CSS2.1
«CSS5» 2015 Синтаксис 3 ур., вложенные @media и @supports (из условных выражений 3 ур.), каскад 3 ур., новые единицы из модуля единиц и значений 3 уровня (px стал абсолютной единицей) и calc(), множественные фоны, border-image и border-radius (из фонов и рамок 3 ур.), линейные и радиальные градиенты (из изображений 3 ур.), шрифты 3 ур., мультиколонки 1 ур., mix-blend-mode и isolation из композитинга 1 уровня. Уточнены определения cursor и outline (CSS UI 3 ур.). С оговорками включены также трансформации, анимации, переходы и флексбоксы (все — 1 ур.). Исправлено много ошибок CSS2.1 (в т.ч. добавлен «забытый» табличный контекст форматирования). Разделы CSS2.1 про синтаксис, каскад, единицы, фоны и рамки, шрифты, cursor и outline (заменены модулями 3 ур.)
«CSS6» 2017 Режимы письма 3 уровня (writing-mode, text-orientation и т.п.).

С оговорками — CSS-переменные (кастомные свойства 1 ур.) и текст 3 уровня (новые возможности переноса строк, трансформации текста и т.д.), псевдоклассы :dir() и :lang() из селекторов 4 ур., а также значения min-content, max-content и fit-content из модуля размеров 3 уровня.

Раздел CSS2.1 про текст (дополнен модулем текста 3 ур.)
«CSS7» 2018 С оговорками — CSS-гриды 1 ур., will-change (из одноименного модуля 1 ур.) и filter (из фильтров 1 ур.), функции плавности 1 ур., логические свойства боксовой модели с учетом направления письма (block-size, padding-inline-end и т.п.) из логических свойств 1 ур., конические градиенты из изображений 4 ур., псевдокласс :focus-within из селекторов 4 уровня Удалены «профили» CSS, значение fit-content отправлено на доработку. Зато флексбоксы, CSS-переменные и трансформации включены уже без всяких оговорок!

«Почти вошли» в последнее официальное определение CSS, но всё-таки еще ждут своей очереди, свойства CSS-счетчиков 3 ур., маски и контурная обрезка 1 ур., фигуры 1 ур., выделение текста 3 уровня (новые возможности text-underline и не только), CSS для речевого вывода 1 уровня (на замену так и не прижившемуся — в очередной раз! — приложению к CSS2.1), свойства для выравнивания всего из модуля выравнивания блоков 3 ур., CSS-фрагментация 3 ур., CSS-изоляция 1 ур. (contain), «прилипчивый» скроллинг 1 ур., медивыражения 4 уровня и каскад 4 уровня (с его новинками мы мельком знакомились в прошлом году). Все они полностью проработаны теоретически, но поддержка их браузерами еще маловата, чтобы с полным правом считать их «частью современного CSS». Но к счастью, этот недостаток быстро исправляется. Так что наверняка многое из них мы увидим в следующем официальном определении — скорее всего, CSS-2020 (или, по неофициальному порядковому номеру… «CSS8»!).

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

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

Ну и чисто психологически, «Я знаю CSS3» уже давно звучит не круто и футуристично, а скучно и буднично, а то и вообще архаично. А вот «Я знаю CSS8» (и тем более «Я знаю CSS-2020») — совсем другое дело! :). Особенно если вы, как постоянные читатели нашего сайта, знакомы с этим CSS-2020 заранее, еще до его появления;)

Share

Тебе может это понравится...