Css 4: CSS4 не будет… потому что он давно прошел. Встречайте «CSS8»! — CSS-LIVE

CSS4 не будет… потому что он давно прошел. Встречайте «CSS8»! — CSS-LIVE

Хотя мы свыклись с «вечнозеленой», безверсионной природой 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. Это тоже может быть интересно:

CSS 4: что новенького? / Хабр

Необходимо немедленно оговориться, что опубликованный 29-ого сентября документ носит название «Селекторы уровня 4» (Selectors Level 4). Является ли это черновой спецификацией CSS 4? Понять пока что трудно, хотя некоторые уже успели обозвать документ таким именем.

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

Таким образом работа над четвертой версией стандарта может идти параллельно с развитием третьей версии.

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

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

Некоторые элементы были добавлены из других спецификаций, другие же не были включены в спецификацию селекторов.

Псевдоэлементы

Первое, что бросается в глаза — спецификация не содержит псевдоэлементов. По всей видимости в будущем они будут описаны в других модулях.

Псевдоклассы

Были добавлены псевдоклассы состояния пользовательского интерфейса из модуля «CSS 3: базовый пользовательский интерфейс». Их значения описывают состояния элементов графического интерфейса: флажок или его отсутствие у чекбокса, обязательность ввода или же нет, :read-write и :read-only — детали, необходимые для конфигурации форм ввода в HTML5. Видимо, было решено собрать в одном модуле всё по селекторам кроме псевдоэлементов.

Изменения в существующих селекторах

В CSS 3 псевдокласс отрицания :not может применяться только к простым селекторам: псевдоклассам, тегам, идентификаторам, классам и селекторам параметров. Псевдоэлементы и комбинации такие как ul li или ul>li не поддерживались, а псевдокласс отрицания нельзя было вложить :not(:not(...)) в самого себя.

Перечисленные ограничения куда слабее в CSS 4: псевдокласс отрицания теперь можно применять к списку селекторов, к сложным селекторам. Псевдоэлементы и вложенные отрицания всё еще запрещены.

Новые псевдоклассы

Есть несколько новых элементов, созданных на основе пожеланий веб-мастеров и наработок создателей браузеров.

Псевдокласс совпадения

:matches()

:matches() очень похож на мозилловский псевдокласс :moz-any(). Его применение оправдано при необходимости выбрать большое число похожих селекторов. К примеру, вместо li a:link, li a:hover, li a:visited, li a:focus достаточно будет указать li a:matches(:link, :hover, :visited). Комплексные селекторы, вложения и использование :not запрещены.

Псевдокласс направленности

:dir

Названный псевдокласс позволяет выбрать элемент на основе направления текста. Перечислены значения rtl (справа налево; это арабский язык и иврит) и ltr (слева направо). Другие значения не недействительны, но и их действия не заданы, что в будущем позволит добавлять новые значения (наверное, это будут сверху вниз и снизу вверх).

Новые псевдоклассы гиперссылок

Псевдокласс :any-link() указывает на ссылки вне зависимости от их посещенности. Единожды посещенная ссылка (псевдокласс :link) более непосещенной не считается, поэтому и понадобился ввод подобного элемента, могущего пригодиться при необходимости задания единого стиля обоих состояний. Элемент имеет пометку о возможности выбора лучшего имени.

Псевдокласс локальной ссылки

:local-link указывает на локальные ссылки. При использовании просто :local-link без выражения в круглых скобках он укажет на элемент, который указывает на текущую страницу, то есть на точно соответствующий УРЛ документа без якоря фрагмента. Число в скобках укажет на число совпадающих элементов в УРЛ, например, у документа по ссылке www.example.com/foo/bar/baz a:local-link(0) укажет на ссылки на тот же домен www.example.com, a:local-link(1) — на домен и первый сегмент в УРЛ www.example.com/foo, a:local-link(2) — на домен и два первых сегмента в УРЛ www.example.com/foo/bar.

Временн́ые псевдоклассы

Появились три псевдокласса, зависящих от времени: :past, :current и :future, связанные с зависящим от времени воспроизведением или полосой времени, то есть со средствами речевого воспроизведения HTML-документов. Соответственно, :current укажет на обрабатываемый элемент, что дает возможность выделить воспроизводимый сейчас фрагмент, :past укажет на элементы, уже обработанные в прошлом, а :future выделит элементы, которые будут обработаны в будущем. У :current есть версия, которая принимает значения в скобках.

Новые псевдоклассы деревьев элементов

В документе описаны два новых подобных псевдокласса: :nth-match и :nth-last-match, входные значения которых совпадают с :nth-child и :nth-last-child: те же выражения an+b, а также ключевые слова или строка селектора, которая позволяет выбрать подмножество результатов. Из спецификации понять задумку не так легко, как на примере. Предположим, что существует селектор button:nth-match(even of .active). Он в отличие от button:nth-child(even) сначала определит подмножество элементов с классом active, а уже потом отделит четные элементы.

Псевдоклассы структуры таблицы

Это :column(), :nth-column() и :nth-last-column. В HTML клетки перечисляются подряд и разделяются тэгом tr, а отношение клетки к колонке подразумевается порядком перечисления. Поэтому, чтобы задать стиль клетки на основе принадлежности её к колонке, вводится псевдокласс :column, который может применяться к одному или нескольким селекторам. Следующий пример из черновика задаст желтый цвет клеток

C, E и D:

:column(col.selected) { background: yellow; }
<table>
  <col span="2">
  <col>
  <tr><td>A <td>B <td>C
  <tr><td span="2">D <td>E
  <tr><td>F <td span="2">G
</table>

Черновые :nth-column() и :nth-last-column принимают аргументы так же, как уже существующие :nth-child или :nth-last-child, а то есть числовые значения, выражения вида an+b, значения even и odd. К примеру, :nth-column(odd) выберет все ячейки, принадлежащие нечетным колонкам.

Селектор предка или объектный селектор

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

Свойства CSS всегда применялись к последнему элементу в списке: ul li.

selected укажет на элементы в списке, обладающие классом selected. Но нет никакой возможности задать стиль целого списка, основываясь на свойствах вложенных в него элементов.

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

Предположим, возникла необходимость задать стиль списка, в котором есть элемент с классом selected. Объектный селектор легко позволит сделать это:

$ul li.selected {
background: white;
}

Таков текущий черновик документа «Селекторы уровня 4», состояние которого может и будет претерпевать значительные изменения, а понять весь смысл отдельных фрагментов пока ещё затруднительно.

Подготовлено на основе публикаций Девида Стори, члена рабочей группы W3C, и Скотта Гилбертсона, автора для сайта Webmonkey.

com.

Почему мы говорим о CSS4? — Smashing Magazine

• 14 минут чтения
• CSS, Браузеры
• Поделиться в Twitter, LinkedIn

Об авторе

Рэйчел Эндрю — веб-разработчик, писатель и спикер. Она является автором ряда книг, в том числе The New CSS Layout. Она одна из тех, кто стоит за… Больше о Рэйчел ↬

В Интернете и в Рабочей группе CSS велись дискуссии о том, следует ли указывать версию CSS — возможно, назвать ее CSS4. В этой статье Рэйчел Эндрю обобщает некоторые плюсы и минусы этого и просит вас высказать свое мнение о предложении.

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

Я использую термин CSS4 , так как именно с этого началось обсуждение, и не пытаюсь обсуждать, каким на самом деле должно быть наименование, если этот подход будет принят. Именование Bikeshedding — отличный способ отвлечься от обсуждения того, должны ли мы вообще это делать, поэтому я буду использовать CSS4 в качестве заполнителя для версии CSS, которую мы предлагаем определить, и CSS5 для следующей в этом ряду.

Проблема

В сообществе поднялась дискуссия о том, должны ли мы определить CSS4, и затем Джен Симмонс подняла вопрос Рабочей группы CSS, который аккуратно обобщает некоторые из существующих дебатов. Помимо фактической проблемы, которую мы обсуждаем, это фантастика видеть так много людей, которые не являются частью рабочей группы CSS, отвечая в этой теме, и я надеюсь, что, прокомментировав один раз, люди будут рады прийти и прокомментировать некоторые из них. другие наши проблемы.

Чтобы понять, почему нет CSS4, нам нужно немного взглянуть на историю веб-платформы. Первоначальные версии CSS представляли собой единую монолитную спецификацию. Эти спецификации содержали все возможные свойства и значения CSS. Это сработало хорошо, так как не нужно было много CSS для детализации. CSS1 в основном охватывал функции форматирования текстовых документов, в CSS2 и CSS2.1 были добавлены дополнительные функции и пояснения, однако CSS по-прежнему оставался относительно небольшой спецификацией.

Еще после прыжка! Продолжить чтение ниже ↓

CSS3

Когда рабочая группа CSS начала работу над CSS3, было решено разделить большую спецификацию на модули. Каждый из этих модулей будет охватывать часть CSS. Не весь CSS сразу помещался в новый модуль. Многие вещи остались определенными в CSS2.1, так как в них не было никаких изменений или дополнений. По этой причине вы все равно найдете ссылки на спецификацию CSS2 в современных модулях, если вещь, на которую ссылаются, все еще определена в CSS2. Однако любой новый CSS создается в отдельных модулях. Эта модульность продолжается и сегодня, когда создается новый CSS. Например, некоторые функции, составляющие спецификацию Box Alignment, изначально появились в спецификации Flexbox. Как только стало очевидно, что они могут применяться к другим методам компоновки, таким как Grid Layout, их переместили в новый модуль, чтобы определить и для этого другого метода.

Мы перестали называть новые спецификации спецификациями CSS3, отчасти потому, что это не имело особого смысла. Модули версионируются таким образом, что модули, которые были развитием CSS2, например Selectors, стали модулями уровня 3. Совершенно новый CSS, например CSS Grid Layout, вообще не существовал в CSS2, поэтому начал свою жизнь как модуль уровня 1. Некоторые из этих первоначальных модулей теперь находятся на уровне 4 или даже на уровне 5. Таким образом, вызов всех новых CSS как CSS3 больше не соответствует номерам уровней и может быть довольно запутанным.

Уровни зрелости спецификации

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

Объяснение отсутствующего CSS4

Многие из нас, участвовавших в этом процессе, увидели путаницу в отношении CSS3 или явное отсутствие прогресса в CSS4 и начали писать статьи, публиковать видео и пытаться помочь людям понять, как на самом деле происходит этот процесс. работал. Тем не менее, хотя было важно поделиться этой информацией, чтобы люди, преподающие CSS, объяснили ее правильно, я не уверен, насколько эта информация важна для среднего веб-разработчика. На каком уровне находится спецификация или внутренний процесс зрелости спецификации W3C, гораздо менее важен для веб-разработчика, чем вопрос о том, какой CSS на самом деле можно использовать в браузерах.

• «Не существует такой вещи, как CSS4», Таб Аткинс-Биттнер
• «Почему нет CSS4: объяснение уровней CSS», Рэйчел Эндрю
• «Где CSS4? Когда он выйдет?», Layout Land (видео)

Каковы преимущества управления версиями CSS?

Просматривая ответы на проблему и обсуждения в Интернете, можно сделать вывод, что наличие четкого номера версии CSS, безусловно, дает некоторые потенциальные преимущества.

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

Одна вещь, которую мы потеряли, отказавшись от номера версии всего CSS, — это возможность проводить что-то вроде Acid Test. Тест Acid 1 протестирован на поддержку CSS1, Acid 2 на поддержку CSS2.1. Эти тесты были достаточно хорошо известны и считались хорошим эталоном поддержки браузерами веб-стандартов. Однако был разработан тест версии 3, он проверял ряд функций и был менее тесно связан с модулями CSS уровня 3, чем предыдущие тесты с CSS1 и 2.1. Определенная линия, проведенная вокруг набора функций, позволит агентам пользователя объявить свой уровень поддержки этих функций.

Некоторые комментаторы этой проблемы упомянули, что версия позволит им отказаться от старых версий браузера, потому что они «не поддерживают CSS4».

«[…] возможно, CSS4 мог бы помочь подтолкнуть их мышление к более безопасному и лучшему Интернету. Во время презентации трудно сказать им, что мы не можем поддерживать IE10, потому что нам нужны переменные CSS и макет сетки. Заинтересованные стороны не знают и не заботятся. Они просто хотят поддерживать как можно больше браузеров (очень типичное мышление FOMO), и у них есть деньги, чтобы бросить.

Однако, если бы мы могли сказать им, что не можем поддерживать IE10, потому что в нем нет новейшей технологии CSS4, и бросить им вопрос: «Вы уверены, что хотите, чтобы ваш недавно созданный веб-сайт отставал от ваших конкурентов из-за этого?» вопрос, который мог бы их задумать (конечно, помимо того факта, что IE10 полностью устарел и уязвим)».

Существует мнение, что определение версии дает разработчикам четкий набор вещей для изучения. Открывая вопрос рабочей группы CSS, Джен Симмонс сказала:

«Я вижу сильное сопротивление изучению CSS, появившееся после CSS3. Люди устали и подавлены. Им кажется, что они никогда не узнают всего, никогда не наверстают упущенное, так зачем пытаться или зачем пытаться сейчас? Если CSSWG сможет провести черту вокруг нескончаемой кучи новых и сказать: «Вот, это. Эта часть готова. Эта часть сделана. Это то, что вы должны потратить время, чтобы изучить. Ты можешь сделать это. Это не бесконечно. Я верю, что это очень поможет».

Каковы проблемы управления версиями CSS?

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

Если взять в качестве примера макет с несколькими столбцами. Большинство свойств уже много лет имеют широкое распространение в браузерах. Тем не менее, 9Свойство 0075 column-span только недавно было реализовано в Firefox, и есть ряд функций, которые недавно были прояснены, например column-fill .

Мы могли бы вообще игнорировать спецификации и смотреть на свойства. Это тоже непросто из-за того, что у нас есть частичные реализации методов компоновки. Box Alignment Properties — отличный пример. Они определены для всех методов макета, где свойство имеет смысл в этом методе макета. Однако поддержка Box Alignment в настоящее время наблюдается только в Grid и Flexbox. Поэтому justify-self , который определен для блоков блочного уровня, блоков с абсолютным позиционированием и стабильных элементов сетки? Да в контексте сетки, нет в контексте блочного макета.

Box Sizing — это еще одна область, у нас есть поддержка внутреннего значения размера fit-content() в CSS Grid Layout для размера дорожек, но не как значение width . Затем ни одно из ключевых слов встроенного размера не реализуется для flex-basis другими браузерами, кроме Firefox.

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

CSS не только для веб-браузеров

Как я и еще один комментатор упомянули, CSS не только для веб-браузеров . Существует множество пользовательских агентов, которые используют CSS и HTML и выводят печатные документы путем создания готовых к печати PDF-файлов. Как правило, они отлично поддерживают спецификацию Paged Media, фрагментацию и так далее. Тем не менее, они часто отстают от браузеров с точки зрения реализации нового CSS, например Grid Layout. Как они вписываются в CSS4?

Люди ожидают, что релиз функций будет включать в себя в настоящее время несуществующие функции

Что-то интересное, что произошло в ходе обсуждения этого вопроса, заключается в том, что несколько человек прокомментировали, говоря, что они ожидают от CSS4 того, что он будет содержать определенные функции что еще не являются частью CSS. Джошуа Линдквист в своем превосходном обзоре комментариев отмечает, что

«При обсуждении авторов, которые не следят за последними разработками, я думаю, что этот подход будет простым для понимания. Все будет казаться им совершенно новым, хотя некоторые из этих функций, такие как Grid и Flexbox, были в браузерах в течение многих лет.

Но любой, кто пойдет в ногу со временем, вероятно, будет озадачен тем, почему существует «новая» спецификация, полная вещей, которые на самом деле старые».

Кто будет решать, что делать?

Учитывая тот факт, что функции, из которых состоит CSS4, не совсем однозначны, кто-то должен будет принять решение о том, что включать.

Рабочая группа CSS разработала критерии стабильности с помощью уже рассмотренных уровней зрелости. Как только спецификация имеет две реализации каждой функции, она может перейти от статуса кандидата в рекомендации к статусу рекомендации. Однако, как подробно описано выше, это может занять некоторое время, и пока мы ждем реализации некоторых функций в спецификации, другие могут иметь широкую и стабильную поддержку браузеров. Если бы мы сказали, что CSS4 — это только те спецификации, которые находятся в статусе рекомендации, то это включало бы:

• CSS Color Level 3
• CSS -пространства имен
• Selectors Уровень 3
• CSS Уровень 2 Редакция 1
• СМИ
• Стиль CSS. Уровень интерфейса 3
• Уровень ограничения CSS 1

Итак, никаких сеток, флексбоксов, выравнивания блоков и многих других спецификаций, которые использует большинство из нас.

Если мы собираемся определить версию CSS, отдельную от существующих уровней спецификации и зрелости, которые у нас уже есть как часть процесса W3C, тогда должна быть группа со временем и ресурсами для работы над этим . Эта группа должна не только определить CSS4, но и сделать это как часть разработки структуры для принятия этих решений на этот раз и для следующих n версий CSS. В противном случае через два года у нас снова будет дискуссия о том, что никто не выпустил CSS5. Я не думаю, что рабочая группа по CSS является подходящим местом для этого, даже если есть только другая работа, которую WG необходимо выполнить для разработки и определения нового CSS. Работы уже больше, чем мы успеваем сделать. Кроме того, если учесть еще один фактор при работе над спецификациями, решения по каждой спецификации будут более сложными. В настоящее время у нас бывают ситуации, когда части спецификации помечаются как подверженные риску, если их включение может помешать продвижению спецификации к Рекомендации. Именно по этой причине подсетка была поднята до уровня 2 сетки. Если у нас есть этот дополнительный уровень абстракции, который на самом деле не вписывается в процесс, не будет ли это просто еще одной вещью, которую следует учитывать и, таким образом, задержать работу над спецификациями?

Какую проблему мы пытаемся решить?

Во многих ответах на эту проблему веб-разработчики упомянули поддержку браузера как ключ к тому, что должно быть включено в CSS4, и я думаю, что проблема, с которой мы сталкиваемся, заключается не столько в управлении версиями CSS, сколько в ясности веб-разработчиков. относительно того, какой набор функций обычно следует считать пригодным для использования в их проектах.

«Одним из преимуществ подхода CSS4 является то, что он сигнализирует о двух вещах. Во-первых, это значительный набор новых функций CSS, которые были разработаны после CSS3 и которые готовы к использованию, а во-вторых, что они готовы к использованию. Не экспериментально и не реализовано Chrome, но никем другим, но готово к широкому внедрению».

— Рик Грегори

Тот факт, что поддержка браузера так часто упоминается в этом обсуждении, заставляет меня задуматься, не лучше ли определить это где-нибудь наподобие MDN. В MDN уже внесли свой вклад все поставщики браузеров, у него уже есть данные о поддержке этих функций, что позволяет нам увидеть частичные реализации таких вещей, как Box Alignment. MDN — это документация для веб-платформы, поэтому мы могли бы обойти проблему реализации печати или любых других реализаций CSS, ограничив набор функций только сетью.

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

«Однако я должен согласиться с некоторыми другими, что основные маркетинговые версии имеют смысл только в ситуации совместимости. Если мы объявим, что CSS5, наконец, здесь, это должно означать, что все основные браузеры имеют полную или почти полную поддержку.

Без соблюдения этого условия совместимости, я думаю, некоторые разработчики будут циничными и вернутся к мышлению, основанному на функциях или модулях, нынешнему статус-кво».

— Ферди Кристант

Что вы думаете?

Я хотел перенести обсуждение в Smashing Magazine, так как думаю, что многие наши читатели этого обсуждения не заметили. Мне было бы интересно, что вы думаете. Есть ли способы, которыми вам поможет объявление версии CSS, о которых я здесь не упомянул? Будете ли вы проверять, что было в этой версии, или вы были бы более склонны проверить Могу ли я использовать или MDN, чтобы узнать, что поддерживается? Как вы думаете, средний веб-разработчик заботится об этом? Дайте нам знать в комментариях, опубликуйте исходную проблему или присоединитесь к новой группе сообщества, созданной для обсуждения этого вопроса.

Когда у нас будет CSS4?

Никогда! Выпуска V4 CSS не будет.

Сказанное так звучит немного странно, но не беспокойтесь, CSS будет продолжать развиваться. Нам просто нужно понять, как управление версиями работает с CSS. Чтобы быть более точным, мы говорим о уровнях .

См. официальную спецификацию:

Каскадные таблицы стилей

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

Базовая иллюстрация для понимания логики:

CSS уровень 1

Логически CSS начинался с уровня 1 (давным-давно), но теперь этот уровень устарел

Рабочая группа CSS считает спецификацию CSS1 устаревшей. CSS Level 1 определяется как все функции, определенные в спецификации CSS1 (свойства, значения, at-правила и т. д.), но с использованием синтаксиса и определений в спецификации CSS2.1. Атрибуты стиля CSS определяют его включение в атрибуты стиля, специфичные для элемента.

Устаревший не означает, что то, что было определено в то время, теперь неверно или больше не используется. Если вы перейдете по ссылке на спецификацию CSS1, вы увидите основы CSS, но мы не должны больше полагаться на нее, поскольку у нас есть более современная спецификация.

CSS уровень 2

Здесь все становится интереснее с CSS2, который имеет 2 подуровня. Чтобы быть более точным, мы называем их ревизиями:

.

Со временем опыт реализации и дальнейшее рассмотрение выявили множество проблем в спецификации CSS2, поэтому вместо расширения и без того громоздкого списка опечаток рабочая группа CSS решила определить CSS Level 2 Revision 1 (CSS2.1). В случае любого конфликта между двумя спецификациями CSS2.1 содержит окончательное определение.

Спецификация CSS2. 1 определяет CSS уровня 2

В другой спецификации мы можем прочитать:

CSS 2.2 — это вторая версия CSS уровня 2 [CSS2]. Он исправляет несколько ошибок в CSS 2.1, первой версии CSS уровня 2

.

И

CSS 2.2 является производным от CSS 2.1 и CSS2 и предназначен для их замены. Некоторые части CSS2 не изменились в CSS 2.2, некоторые части были изменены, а некоторые удалены. Удаленные части могут быть использованы в будущей спецификации CSS3. ^№

Итак, спецификация CSS2.2 определяет уровень CSS 2, и мы должны полагаться на него. Опора на спецификацию CSS2.1 также допустима, но не на «спецификацию CSS2»

Вы можете найти разницу между первой и второй версиями здесь: https://www.w3.org/TR/CSS22/changes.html. Вы увидите, что речь идет скорее об уточнении и обновлении нескольких определений, чем о добавлении новых свойств или значений.

Изменения между CSS2.1 и CSS2 более важны: https://www. w3.org/TR/CSS21/changes.html

CSS Уровень 3

Здесь CSS останавливает выравнивание. Да, спецификации CSS3 нет.

CSS Level 3 строится на CSS Level 2 модуль за модулем, используя в качестве ядра спецификацию CSS2.1 . Каждый модуль добавляет функциональность и/или заменяет часть спецификации CSS2.1. Рабочая группа CSS предполагает, что новые модули CSS не будут противоречить спецификации CSS2.1: только они добавят функциональность и улучшат определения

.

С этого уровня на модули выравниваются независимо

Рабочая группа решила больше не поддерживать только одну спецификацию для всего языка. Вместо этого у нас есть спецификация для каждого модуля, в которой CSS2.1 (или CSS2.2) рассматривается как основная.

Вот почему мы можем найти: модуль CSS Flexible Box Layout уровня 1, модуль CSS Grid Layout уровня 1, селекторы уровня 3, селекторы уровня 4 и т. д.

Найдите их все здесь: https://www. w3.org /TR/?tag=css

Иллюстрация для понимания логики CSS уровня 3

Подводя итог, можно сказать, что CSS3 (или уровень CSS 3) представляет собой набор различных спецификаций (каждая из которых связана с модулем) плюс «Спецификация CSS2.2» в качестве основной.

Многие из нас думают, что CSS3 — это отдельный язык, но это не так. Язык CSS. CSS3 — это только один уровень CSS, который определяет, как должны быть организованы спецификации.

Будем надеяться, что люди перестанут говорить: «У меня есть опыт работы с CSS3», потому что это не имеет особого смысла.

CSS уровень 4

Думаю теперь понятно почему нет CSS4.

Уровень CSS 4 отсутствует. Независимые модули могут достигать уровня 4 или выше, но язык CSS больше не имеет уровней. («CSS ​​Level 3» как термин используется только для того, чтобы отличить его от предыдущих монолитных версий.)

Давайте прекратим дискуссию вокруг CSS2, CSS3, CSS4 и т.