CSS-live.ru

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 заранее, еще до его появления;)

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

7 комментариев

  1. из-за таких статей новичкам вообше нихера не будет понятно, у css нет версий, любая попытка объяснить что есть только запутывает

    1. Версий нет, но язык-то развивается и меняется, и как-то отличать давно прижившиеся фичи от новых экспериментальных надо:). По-моему, то, что слово «версия» в этой заметке везде взято в кавычки и в тексте подчеркнуто, что такое деление неофициальное и наполовину шуточное, должно предотвратить путаницу.

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

  2. Спасибо! Мне как человеку который вернулся в frontend после несколько годичного перерыва и хочет узнать, что пропустил — эта статья была очень полезна и удобна.

    1. Официально такого названия и не было. Всё, что появилось после CSS2.1, собирательно называют «CSS3». Последующая история CSS официально не делится на этапы. Но есть периодически обновляемый «снимок состояния» CSS — документ, где перечислены модули спецификации, «официально включенные» в текущее определение CSS как языка на определенный момент, с адресом вида w3.org/TR/css-2018. В статье показана история CSS на основе редакций этого «снимка», но названия этапов условные (поэтому в кавычках).

      Но с недавних пор идут разговоры о том, чтобы вернуть название «CSS4» в обиход, по аналогии с «CSS3» десять лет назад.

  3. Катастрофически не хватает свойства в CSS стилях типа:
    @media (max-width:XXXpx или min-width:XXXpx) но не для экана, а для нужного нам блока
    Устал смотреть на этот весь бардак. Что только не придумали, как не фиксили. Но все же сложности никуда не делись. Море лишних правил мы пишем для каждого размера экрана.

    ЗАЧЕМ ????? Если нам нужно описать лишь поведения блока при условии его ширины и высоты

    Ребята, кто там спик Инглиш вери вел? Обратитесь пожалуйста с идеей, пусть рассматривают.

    Еще раз. Идея состоит в том, чтобы в зависимости от ширины нужного блока програмисты могли описать правила, задать любой стиль. В итоге мы получим море новых возможностей и упрощения.

    @block .bl1, .bl2 (max-width:300px){

    .bl3{

         flex-direction: row;

    }

    }

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

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

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