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-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 ур., isolation из композитинга 1 уровня. Уточнены определения cursor и outline (CSS UI 3 ур.). С оговорками включены также трансформации, анимации, переходы и флексбоксы (все — 1 ур.). Исправлено много ошибок CSS2.1 (в т.ч. добавлен «забытый» табличный контекст форматирования). | Разделы CSS2.1 про синтаксис, каскад, единицы, фоны и рамки, шрифты, cursor и outline (заменены модулями 3 ур.) |
| «CSS6» | 2017 | Режимы письма 3 уровня (writing-mode, text-orientation и т.п.).: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 ур., псевдокласс | Удалены «профили» CSS, значение fit-content отправлено на доработку. Зато флексбоксы, CSS-переменные и трансформации включены уже без всяких оговорок! |
«Почти вошли» в последнее официальное определение CSS, но всё-таки еще ждут своей очереди, свойства CSS-счетчиков 3 ур., маски и контурная обрезка 1 ур., фигуры 1 ур., выделение текста 3 уровня (новые возможности text-underline и не только), CSS для речевого вывода 1 уровня (на замену так и не прижившемуся — в очередной раз! — приложению к CSS2.1), свойства для выравнивания всего из модуля выравнивания блоков 3 ур., CSS-фрагментация 3 ур., CSS-изоляция 1 ур. (
Какая нам от этого польза? На первый взгляд, особо никакой. Даже в предисловии к самим «снимкам» CSS сказано, что они нацелены в первую очередь на разработчиков браузеров, а не на веб-разработчиков, и отражают «готовность» самих фич, а не их поддержку на практике. Для нас по-прежнему куда важнее старый добрый CanIUse.
Но всё-таки, на мой взгляд, тому, кто хочет стать выдающимся фронтенд-разработчиком, полезно иметь представление об общей картине современного CSS как целого, хотя бы в таком «несерьезном» виде. Чтобы лучше понимать, когда пора писать багрепорты в браузеры, а когда еще рано, и как в одной спецификации может уживаться совсем сырое и совсем готовое (как в тех же селекторах 4 уровня).
Ну и чисто психологически, «Я знаю CSS3» уже давно звучит не круто и футуристично, а скучно и буднично, а то и вообще архаично. А вот
P.S. Это тоже может быть интересно:
5 нововведений в CSS4.
Вы здесь: Главная — CSS — CSS Основы — 5 нововведений в CSS4.
Всем привет! В этой статье мы рассмотрим 5 нововведений, которые должны появиться в новой спецификации CSS4.
Развитие не стоит на месте и, казалось бы, недавно вышла третья версия спецификации CSS, а уже ведутся разработки четвертой версии. Что там появится? Давайте посмотрим на то, что уже стало известно. Однако, не забывайте, что это еще не окончательный результат, следовательно, что-то может поменяться к моменту выхода, хотя, я думаю, несильно.
Конечно же, появятся новые селекторы. Давайте рассмотрим несколько интересных.
1. :NOT()
Этот селектор уже есть, но он был усовершенствован. Теперь вы можете перечислять внутри него не один, а сразу несколько тегов:
:not(p, h2, div) // то же самое, что и :not(p):not(h2):not(div)
2. :HAS()
Это очень интересный селектор, открывающий большие возможности для выборки. Указанное правило сработает только, если в нем будут определенные элементы:
div:has(img) // любой блок, в котором есть картинка
p:has(h2, h3) // любой параграф, имеющий заголовки первого или второго типов
p:has(:not(h2)) // любой параграф, не имеющий заголовок первого типа
3. :any-link
Помните, как нам приходилось писать что-то вроде этого:
a:link, a visited {}
И только лишь для того, чтобы правило срабатывало сразу для двух свойств. Поскольку это приходилось писать достаточно часто, появилось новое свойство, объединяющее эти два:
a:any-link {}
4. :placeholder-shown
Этот псевдо-класс выбирает элементы ввода, когда показывается текст, заданный в placeholder
input:placeholder-shown {
outline: 1px solid blue;
}
5. :drop и :drop()
Первый псевдо-класс выбирает любой элемент, который перетаскивается пользователем. Второй – похож на первый, но имеет дополнительные возможности сортировки:
div:drop {}div:drop(active || valid || invalid) {
// active: перетаскиваемый объект
// valid: сработает, если цель перетаскивания действительна для объекта, который в настоящее время перетаскивается
// invalid: наоборот, если цель перетаскивания недействительная для объекта, который в настоящее время перетаскивается
}
А на этом сегодня все. Спасибо за внимание и следите за новостями!
- Создано 27.03.2017 17:00:00
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Почему нет никакого CSS4? Разбираемся с CSS Levels – front-end.su
Данный материал является вольным переводом статьи:
Rachel Andrew Why there is no CSS4 — explaining CSS Levels
У нас были CSS1 и CSS2. У нас даже был CSS 2.1, который сразу перешёл в CSS3. Или это мы перешли? Этот пост — краткое объяснение того, как CSS версионируется сегодня.
CSS версий 1 и 2 были монолитными спецификациями. Все, что касалось CSS было включено в один большой документ. Селекторы, позиционирование, цвета — всё было там.
Проблема монолитной спецификации в том, что для того чтобы её закончить, каждый входящий в неё элемент должен быть завершён. CSS стал сложнее, добавились новые функции. Больше нет смысла создавать черту, которая будет останавливать работу над всеми частями CSS только для того, чтобы объявить, что очередная версия закончена. Поэтому после версии 2.1 спецификация была разделена на модули. Так как модули включали в себя все то, что было раньше, плюс добавились новые возможности — все они вышли на третий уровень. Следовательно, люди вроде меня, которые понимали CSS как единую спецификацию, называют модули третьего уровня как CSS 3.
Пока мы относимся ко всему новому в CSS как к CSS 3, работающему не в полную силу, это не будет отражать реальность того, где находится CSS сейчас. Если вы читали что-то о селекторах в CSS 3, то фактически описанное является частью спецификации CSS Selectors Level 3. На самом деле CSS Selectors является одной из спецификаций, отмеченных как завершенная и рекомендуемая. В данный момент рабочая группа по CSS работает над Selectors Level 4 с новыми предложенными функциями, а также возможностями которые были частью третьего уровня (а также CSS 1 и 2). Это не CSS 4, но спецификация 4-го уровня единой спецификации. Одна небольшая часть.
Также есть спецификации возможностей, которые никогда не были частью CSS 1 или 2 и поэтому они относятся к первому уровню. Они являются совершенно новыми. К примеру, к первому уровню относятся спецификации CSS Grid Layout и Flexbox. Flexbox и Grid находятся в статусе Candidate Recommendation (CR).Поэтому любые новые возможности, которые предлагаются в данный момент, вероятно, в итоге попадут на следующий уровень этих спецификаций – Flexbox Level 2 и CSS Grid Level 2.
Если вы хотите посмотреть состояние тех или иных возможностей и их уровень, можете сделать это в документе Current Work. Чтобы разобраться в различных статусах, советуем обратиться к этому документу.
HTML 6 и CSS 4 — когда мы уже сможем попробовать это?
Разработчики веб-приложений уже сейчас могут опробовать преимущества шестой версии HTML и возможности четвёртой версии CSS. Чем это станет для веб-программирования и какие перспективы откроет?
Не все веб-разработчики ещё успели освоить пятую версию HTML, а свет уже увидели первые варианты шестой. Кроме того, формировать таблицы стилей стало ещё проще благодаря появлению четвёртой версии CSS. Там чем же станут для веб-программистов HTML 6 и CSS 4, какие возможности откроют?
HTML 6: перспектива создания одностраничных приложений без скриптов
Оговоримся сразу, что как таковой «даты выхода HTML 6» никогда не будет в абсолютном понимании. Многие сейчас задаются вопросом: HTML 6 когда уже будет доступна? Инструменты для работы уже имеются: садись пиши! Но вот только кто это оценит сейчас и будет ли это целесообразно в настоящее время? Думаю, что нет. Даже если ВЫ готовы перейти на стандарт гипертекстовой разметки шестого поколения сию минуту, то БРАУЗЕРЫ не готовы. Да, топовые представители интернет-обозревателей уже сделали кое-какие шаги навстречу новым технологиям, но этого не достаточно. Об этом по порядку.
Шестая версия HTML так же значительно отличается от пятой, как пятая — от четвёртой. Она стала ещё более унифицированной, обрела ещё больше черт сходства с XML и может стать идеальным инструментом для создания веб-приложений в ближайшем будущем.
Многие веб-разработчики направляли в Консорциум Всемирной паутины свои предложения по поводу того, чем дополнить код в шестой версии. Эти предложения были услышаны и объединены. Как результат, добавлено пространство имён в стиле XML, что сильно влияет на структуру кода, приводит создание приложений к новому стандарту и выводит на новый уровень.
В качестве одного из самых простых примеров можно привести конструкцию для создания контейнеров. Теперь не понадобится создавать новый div с указанием его id. Достаточно будет просто вставить тег <container> — это значительно упрощает задачу. Использование пространства имён открывает широкие возможности и в перспективе позволит полностью отказаться от использования javascript в веб-приложениях.
Веб-программисты, мыслящие перспективно, уже стали осваивать HTML 6, когда он представлен пока лишь в тестовых версиях. Можно предположить, что и по сложности, и по функциональности шестая версия данного языка в итоге обойдёт и .NET, и PHP. Речь идёт ни много ни мало о создании автономного одностраничного приложения, которое не будет нуждаться во внешних элементах для работы.
CSS 4: упрощение работы с псевдоэлементами
Нововведений в четвёртой версии CSS довольно много по сравнению с третьей. Правда, пока не было замечено новых псевдоэлементов, но это, скорее всего, временно. Зато было уделено внимание разработке псевдоклассов. Теперь можно составлять из селекторов логические комбинации, использовать селекторы для атрибутов, тегов, таблиц и отношений.
Так, присоединённые элементы теперь можно выбрать с помощью селектора отношений, используя конструкцию вида: A /ATTR/ B. Таким образом уточняется, соответствует ли один элемент другому по ID. С помощью конструкции вида A! > B можно выбирать родительский элемент через обращение к дочернему, например при наведении указателя на дочерний элемент. Что касается табличных селекторов, то с ними разработчики веб-приложений уже знакомы по третьей версии, но там эти конструкции были достаточно громоздкими. Теперь же управлять столбцами и вообще работать с таблицами стало намного проще.
Очевидно, что HTML 6 и CSS 4 когда-то станут новой ступенью в разработке приложений. Значительно упрощая сам процесс работы с приложением и стандартизируя многие разобщённые моменты, эти два нововведения, вполне возможно, исключат необходимость использовать многие современные инструменты.
Почему мы говорим о CSS4? — Smashing Magazine
Об авторе
Рэйчел Эндрю — веб-разработчик, писатель и спикер. Она является автором ряда книг, в том числе The New CSS Layout. Она одна из тех, кто стоит за… Больше о Рэйчел ↬
В Интернете и в рабочей группе CSS было некоторое обсуждение того, следует ли нам указывать версию CSS — возможно, назвав ее CSS4. В этой статье Рэйчел Эндрю подводит итоги некоторых плюсов и минусов этого и просит вас высказать свое мнение об этом предложении.
Недавно была дискуссия о том, должен ли быть CSS4, как в определенной «следующей версии» CSS. В этой статье я рассмотрю дискуссии по этому поводу, плюсы и минусы создания версии функции для CSS, а также потенциальные проблемы при принятии решения о том, что в нее входит.
Я использую термин CSS4 , поскольку именно с него началось обсуждение, и не пытаюсь обсуждать, каким должно быть на самом деле именование, если этот подход будет реализован.Именование Bikeshedding — отличное отвлечение от обсуждения того, следует ли нам вообще это делать, поэтому я буду использовать CSS4 в качестве заполнителя для версии CSS, которую мы предлагаем определить, и CSS5 для следующей по очереди.
The Issue
В сообществе поднялась дискуссия о том, следует ли определять 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.Как только стало очевидно, что они могут применяться к другим методам компоновки, таким как компоновка сетки, они были перемещены в новый модуль, который будет определен и для этого другого метода.
Мы перестали называть новые спецификации спецификациями CSS3, отчасти потому, что они не имели большого смысла. Способ версионирования модулей заключается в том, что модули, которые были развитием CSS2, например, Селекторы, стали модулем Уровня 3. Совершенно новый CSS, например CSS Grid Layout, вообще не существовал в CSS2 и поэтому начал свою жизнь как модуль уровня 1.Некоторые из этих начальных модулей теперь находятся на уровне 4 или даже на уровне 5. Поэтому вызов всех новых CSS CSS3 больше не сопоставляется с номерами уровней и потенциально может сбивать с толку.
Уровни зрелости спецификаций
В дополнение к уровням спецификаций каждый отдельный уровень проходит поэтапный процесс от первоначального проекта до превращения в рекомендацию W3C, шаги в этом процессе называются уровнями зрелости. Рекомендация W3C — это то, что вы можете назвать «веб-стандартом», однако многие вещи, которые мы используем ежедневно в нашей работе, определены в спецификациях, которые еще не достигли этого уровня зрелости.Вы можете увидеть список спецификаций и их статус на странице «Текущая работа CSS WG».
Объяснение отсутствующего CSS4
Многие из нас, участвовавших в процессе, заметили путаницу по поводу CSS3 или очевидное отсутствие прогресса в CSS4 и начали писать статьи, публиковать видео и пытаться помочь людям немного понять, как на самом деле этот процесс работал. Тем не менее, хотя было важно поделиться этой информацией, чтобы люди, обучающие CSS, объяснили ее правильно, я не уверен, насколько эта информация имеет значение для среднего веб-разработчика.На каком уровне находится спецификация или внутренний процесс зрелости спецификации W3C, гораздо менее важен для веб-разработчика, чем вопрос о том, какой CSS можно на самом деле использовать в браузерах.
Каковы преимущества управления версиями 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, «готовая к прайм-тайму», не так проста, как выбор набора спецификаций. Многие спецификации реализованы частично, с большой поддержкой некоторых свойств и отсутствием поддержки других. Есть функции, которые многие веб-разработчики сочли бы зрелыми, включенными в спецификации, все еще находящимися в статусе рабочего проекта, наряду с функциями, которые все еще обсуждаются и уточняются в Рабочей группе.
Если мы возьмем макет с несколькими столбцами в качестве примера. Большинство свойств широко используются в браузерах на протяжении многих лет. Однако свойство column-span только недавно было реализовано в Firefox, и есть ряд функций, которые были недавно уточнены, например column-fill .
Мы могли бы решить полностью игнорировать спецификации и посмотреть на свойства. Это непросто из-за того, что у нас есть частичные реализации для разных методов компоновки.Свойства выравнивания бокса — отличный пример. Они определены для всех методов компоновки, где свойство имеет смысл в этом методе компоновки. Однако поддержка Box Alignment в настоящее время видна только в Grid и Flexbox. Следовательно, является ли justify-self , который определен для блоков уровня блока, блоков с абсолютным позиционированием и элементов сетки, стабильным? Да в контексте сетки, нет в контексте макета блока.
Box Sizing — еще одна область, у нас есть поддержка внутреннего значения размера fit-content () в CSS Grid Layout для определения размера дорожки, но не как значение для ширины .Тогда ни одно из ключевых слов внутреннего размера не реализовано для flex-base другими браузерами, кроме Firefox.
Наконец, если мы вернемся к multicol, многие проблемы, с которыми люди сталкиваются с 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 Namespace
- Selectors Level 3
- CSS Level 2 Revision 1
- Media Queries
- CSS Атрибуты стиля
- CSS Fonts Level 3
- CSS Writing Modes Level 3
- CSS Basic User Interface Level 3
- CSS Containment Level 1
Итак, нет Grid, Flexbox, Box Alignment и многих других спецификаций, которые большинство из нас используют.
Если мы собираемся определить версию 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, чтобы узнать, что поддерживается? Вы думаете, что средний веб-разработчик заботится об этом? Дайте нам знать в комментариях, опубликуйте исходную проблему или присоединитесь к новой группе сообщества, созданной для обсуждения этого.
(il)CSS4 | CSS-уловки
Tab Atkins в 2012 году:
CSS4 никогда не было.CSS4 никогда не будет. CSS4 не существует.
Рэйчел Эндрю в 2016 году:
Хотя все новые CSS называются CSS3, работавшими в течение короткого времени, они не отражают реальность сегодняшнего положения CSS. Если вы читали что-то о селекторах CSS3, то то, что на самом деле описывается, является частью спецификации CSS-селекторов уровня 3. Фактически CSS Selectors — это одна из спецификаций, отмеченная как завершенная и являющаяся Рекомендацией. Рабочая группа CSS сейчас работает над селекторами уровня 4 с новыми предлагаемыми функциями, а также над селекторами, которые были частью уровня 3 (а также CSS 1 и 2).Это не CSS4, а уровень 4 единой спецификации. Небольшая часть CSS.
Джен Симмонс в 2018 году:
Многие люди ждут выхода CSS4. Где это? Когда он прибудет? Ответ: никогда. CSS4 никогда не появится. На самом деле это не так.
Итак, CSS3 был уникальной разовой возможностью. Вместо одной большой спецификации, разбейте их на части и начните все с «Уровня 3», но затем позвольте им развиваться отдельно. Это было очень нарочно , чтобы все могло двигаться быстрее независимо.
Проблема? Это было почти слишком эффективно, . CSS3 и, возможно, в большей степени HTML5, стали (почти) нарицательными. Это было настолько успешно, что нам хочется снова нажать на этот рычаг. Успешно на тонне уровней:
- Он продвинул браузерные технологии вперед, особенно тех, которые были устаревшими слишком долго.
- Это заставило владельцев сайтов подумать: « Эй, может, сейчас хорошее время, чтобы обновить наш сайт. «
- Это заставило преподавателей подумать:« эй, может, сейчас хорошее время обновить наши учебные программы. “
Это было хорошо для Интернета в целом, хорошо для веб-сайтов, использующих его преимущества, и на этом можно было заработать деньги. Бьюсь об заклад, было бы ошеломляющих , чтобы увидеть, сколько денег было заработано на курсах и конференциях, размахивающих флагом CSS3.
Питер-Пауль Кох в 2020 году:
Я предлагаю, чтобы мы, веб-разработчики, поддерживаемые W3C CSS WG, начали говорить: «CSS4 уже здесь!» и взволнованно болтают о том, как он выйдет на рынок в любой момент и изменит практику CSS.
Конечно, «CSS4» не имеет никакого технического значения. Все текущие спецификации CSS имеют свои собственные версии в диапазоне от 1 до 4, но CSS в целом не имеет версии, да и не нуждается в ней.
Независимо от того, что мы говорим или делаем, CSS 4 не выйдет на рынок и ничего не изменит. Он также не описывает техническую реальность.
Тогда зачем это делать? Для маркетингового эффекта.
Думаю, он прав. Если бы мы все собрались вместе, это могло бы иметь такой же успех для всех, как это сделал CSS3.
Если это произойдет, то, что придаст импульс этому, — это если будет одно четкое сообщение о , что это такое . CSS3 был примерно таким:
- border-radius
- градиенты
- анимации и переходы
- преобразовывает
- box-shadow
О, черт возьми, сейчас это трудно вспомнить. Но в то время это был довольно четкий набор вещей, которые представляли то, что нужно было изучить, и все они были довольно захватывающими.
Что бы мы поместили под флаг CSS4?
- Flexbox? (Слишком старый?)
- Сетка
- Все новое с цветом (например, это и это)
- Независимые преобразования
- Изменяемые шрифты
- Пути смещения
- Давайте сделаем вложение!
- Гудини вещи? (Не готовы?)
- Селекторы теневого DOM?
Лемм просто скажу, что я лично возглавлю эту вещь, если контейнерные запросы могут быть выполнены, и мы сделаем это частью.= ‘bar’] / [foo $ = ‘bar’] / [foo * = ‘bar’] Структурный псевдокласс : корень /: пустой /: последний-ребенок /: только-ребенок /: первый-тип /: последний-тип /: только-тип /: nth-ребенок (n) /: nth-последний -child (n) /: nth-of-type (n) /: nth-last-of-type (n)
CSS-селекторы уровня 2
Атрибут [foobar] / [attribute = 'value'] / [foo ~ = 'bar'] / [foo | = 'en'] Селекторы CSS уровня 1
Информация основана на селекторах CSS уровня 4 — W3C Editors Draft от . © 2011-2021 css4-selectors.com. Все права защищены. | Выходные данные и конфиденциальность | Этот сервер работает исключительно на возобновляемых источниках энергии.Мы используем файлы cookie, чтобы обеспечить максимальное удобство использования нашего веб-сайта. Сюда могут входить файлы cookie со сторонних веб-сайтов, если вы посещаете страницу, содержащую встроенный контент от третьих лиц. Наши партнеры также используют файлы cookie, чтобы показывать вам релевантную рекламу.Если вы продолжите без изменения настроек, мы будем считать, что вы готовы получать все файлы cookie на веб-сайте. Однако вы можете изменить настройки файлов cookie в любое время. Понятно!
Когда у нас будет CSS4?
Никогда! Версии CSS V4 не будет.
Сказал, что это звучит немного странно, но не волнуйтесь, CSS будет развиваться. Нам просто нужно понять, как управление версиями работает с CSS.Чтобы быть более точным, мы говорим о уровнях .
Обратимся к официальной спецификации:
Cascading Style Sheets не имеет версий в традиционном понимании; вместо этого имеет уровни . Каждый уровень CSS основан на предыдущем, уточняя определения и добавляя функции. Набор функций каждого более высокого уровня является надмножеством любого более низкого уровня, а поведение, разрешенное для данной функции на более высоком уровне, является подмножеством того, что разрешено на более низких уровнях.Таким образом, пользовательский агент, соответствующий более высокому уровню CSS, также соответствует всем более низким уровням.
Базовая иллюстрация для понимания логики:
CSS Уровень 1
Логично, что CSS начался на уровне 1 (давным-давно), но теперь этот уровень устарел
Рабочая группа CSS считает спецификацию CSS1 устаревшей. Уровень 1 CSS определяется как все функции, определенные в спецификации CSS1 (свойства, значения, правила и т. Д.), Но с использованием синтаксиса и определений в CSS2.1 спецификация. Атрибуты стиля CSS определяют его включение в атрибуты стиля, зависящие от элемента.
Obselete не означает, что то, что было определено в то время, теперь неверно или больше не используется. Если вы перейдете по ссылке спецификации CSS1, вы увидите основы CSS, но мы не должны больше полагаться на нее, поскольку у нас есть более современная спецификация.
CSS Уровень 2
Здесь начинает интересовать CSS2, имеющий 2 подуровня. Чтобы быть более точным, мы называем их ревизиями:
Со временем опыт внедрения и дальнейший анализ выявили множество проблем в спецификации CSS2, поэтому вместо расширения и без того громоздкого списка ошибок рабочая группа CSS решила определить CSS Level 2 Revision 1 (CSS2.1). В случае любого конфликта между двумя спецификациями CSS2.1 содержит окончательное определение.
Спецификация CSS2.1 определяет уровень 2 CSS
В другой спецификации мы читаем:
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 Module Level 1, CSS Grid Layout Module Level 1, Selectors Level 3, Selectors Level 4 и т. Д.
Все их можно найти здесь: https://www.w3.org/TR/?tag=css
Иллюстрация для понимания логики CSS уровня 3
Подводя итог, CSS3 (или CSS Level 3) — это набор различных спецификаций (каждая из которых связана с модулем) плюс «Спецификация CSS2.2» в качестве основной.
Многие из нас думают, что CSS3 — это сам по себе язык, но это не так. Язык — CSS. CSS3 — это только один уровень CSS, который определяет, как должны быть организованы спецификации.
Будем надеяться, что люди перестанут говорить: «Я разбираюсь в CSS3», потому что это не имеет большого смысла.
CSS уровень 4
Думаю, теперь понятно, почему нет CSS4.
Нет CSS 4-го уровня. Независимые модули могут достигать 4-го уровня или выше, но CSS-язык больше не имеет уровней. (Термин «уровень CSS 3» используется только для того, чтобы отличить его от предыдущих монолитных версий.)
Давайте прекратим споры вокруг CSS2, CSS3, CSS4 и т. Д.CSS — это просто CSS , и он содержит разные модули, которые повышаются независимо друг от друга.
У вас может быть хороший опыт использования Flexbox, но не CSS Grid, вы можете очень хорошо знать селекторы CSS, но не знаете, что такое маскирование CSS и т. Д., Но, пожалуйста, не говорите больше: «Я хорошо знаю CSS3».
Новые возможности CSS4. Как человек, досконально увлекающийся CSS… | Кэти Брауэрс
Как человек, который полностью наслаждается CSS, но у меня не было времени глубоко изучить все, что он предлагает, я ухватился за возможность представить эту самую тему на еженедельном шоу HackerYou и рассказать о нем.Да, мы показываем и рассказываем, и да, это связано с алкоголем. Шоу и рассказы для взрослых с презентациями на тему алкоголя и техники — вот из чего состоят мечты.
Хотя еще неизвестно, когда CSS4 будет поддерживаться во всех браузерах, есть еще некоторые функции, которые мы можем включить в наш код, если вы быстро выполните поиск, насколько сильно функция, которую вы хотите использовать, фактически поддержал. Лучше перестраховаться, чем сожалеть, правда? Ниже вы найдете несколько функций CSS4, которые мне показались особенно интересными.
- : default — селектор по умолчанию заставляет определенные элементы выбираться по умолчанию, как только страница загружается. Подобно селектору: checked, стили: default не удаляются, если пользователь снимает с них отметку. Это может быть особенно полезно, если пользователь решит вернуться к списку отмеченных элементов по умолчанию. Принимая во внимание, что: отмеченные стили будут удалены, что затрудняет пользователю вспомнить, что это были за автоматически проверенные элементы,: стили по умолчанию останутся, позволяя пользователю более эффективный и простой опыт.
2.: valid и: invalid — селектор: valid сообщает пользователю, когда введенная информация верна, а: invalid предупреждает пользователя, когда информация это, как вы уже догадались, неверно. Это может быть полезно, чтобы помочь пользователю понять, что нужно, например, для заполнения элементов формы.
Красный элемент ввода предупреждает пользователя о том, что это недействительный адрес электронной почты. Зеленый элемент ввода указывает, что электронная почта действительна.3.: совпадения — этот селектор сам по себе позволяет сэкономить время. Группируя и сопоставляя элементы, для которых требуется один и тот же стиль, это упрощает и ускоряет чтение стилей CSS. Например, предположим, что у вас на странице несколько h3, и только половину из них нужно стилизовать. Вы можете просто добавить классы к тем, которые нуждаются в стилизации, или вызвать каждый раздел — или вы можете указать каждый семантический раздел своей страницы, который включает h3 и должен быть стилизован. * подсказка — это также отличный повод использовать семантический HTML — проще использовать селектор: match!
4.: in-range и: out-of-range — эти удобные селекторы, используемые для таких вещей, как элементы формы, идеально подходят для случаев, когда допустим только определенный диапазон данных. Подобно концепции: valid и: invalid, однако: in-range /: out-of-range лучше всего использовать для диапазонов данных (например, дата, месяц, неделя и т. Д.)
красный ввод не имеет даты в течение указанного периода времени (с 2017–01–01 по 2018–01–01), в результате чего поле ввода будет красным. Зеленый вход соответствует диапазону запрашиваемых данных, что делает его зеленым.5. И последнее, но не менее важное: селектор: not.Этот селектор является частью CSS3, однако был переработан для CSS4. : not может взять список элементов и стилизовать их, исключив при этом определенные элементы. В CSS3: не может принимать только одно исключение, но теперь может принимать более одного исключения в CSS4.
Пример, показывающий, как CSS3 может исключить только один элемент, в то время как CSS4 принимает более 1 элемента для исключения из стиля.Функций гораздо больше, чем этих замечательных, поэтому я настоятельно рекомендую погуглить несколько, чтобы узнать, какие интересные новые вещи в CSS4 вы можете использовать!
Новая версия CSS, которой никогда не будет • Silo Creativo
Скидка 20%
Темы WordPress, такие как Divi, по 1 доллару за каждую
В последнее время некоторые из наиболее частых сомнений, которые возникают на курсах дизайна и веб-верстки, в которых мы участвуем, указывают на CSS4: Когда выйдет CSS4? Какая дата отъезда? Какие новые функции он будет включать? Быстрый ответ разочаровал некоторых: «CSS4 не будет.”
Но с длинным ответом мы возродим надежду: будут обновления, улучшения и новые функции для CSS, но они не будут называться CSS4 и не будут следовать тому же процессу, что и версии CSS1 или CSS2.
Сеть развивается нелинейным образом, и новые спецификации CSS работают в соответствии с этой эволюцией, гораздо более естественной, , разделенной на модули , где уровень каждого модуля (уровень 1, 2, 3, 4 или 5) соответствует не обязательно соответствует версии CSS, в которую они были включены впервые, но реагирует на собственный контроль уровней.Давайте посмотрим на это подробнее.
CSS1 и CSS2: полный документ
Первые версии CSS были включены в спецификацию в виде единого документа . Это означает, что вся спецификация (хотя и разделенная на разделы) была рассмотрена, пересмотрена или рекомендована одновременно в монолитном виде.
Это был первый веб-сайт, на котором была определена спецификация CSS (тот, который мы называем CSS1).Таким образом, документ не вышел, пока не были готовы все функции.Если что-то задерживалось, откладывалось внедрение всех функций.
Например, в CSS1 свойство background-color сочетается с заполнением , поскольку, хотя они не имеют к нему никакого отношения, оба являются частью одного и того же документа, и его реализация является ровесницей.
То же самое происходит с CSS2 и CSS2.1, единым документом со всеми новостями в виде полного и закрытого обновления. Сроки реализации увеличены. Чтобы эти версии вышли, все должно быть готово.
Однако, как мы уже сказали, сеть развивается нелинейно. Браузеры обновляются в соответствии с их собственными рабочими циклами, добавляя те характеристики, которые они считают более удобными или актуальными.
CSS3: переход на модуляризацию
Модули, определенные в CSS3, готовы развиваться и расти независимо. Источник: WikipediaНо с CSS3 способ работы изменился. Вместо единого документа каждая группа однородных характеристик разделена на независимые модули , так что их реализация проще, и они могут развиваться и обновляться отдельно.
Это приводит к тому, что многие модули, называемые «уровнем 3», такие как модуль селекторов уровня 3 или цветовой модуль уровня 3, независимы друг от друга, но имеют один и тот же уровень.
CSS4: следующая версия без CSS
Отсюда, после разделения всей спецификации, каждый модуль развивается независимо . Временная шкала размыта, и невозможно будет установить общую дату для всех модулей, поскольку некоторые из них уже опубликованы, а другие еще не запущены.
Это разные этапы работы над документами CSS. Некоторые никогда не дойдут до конца.Это вместе с различными возможными фазами каждого документа (рабочий проект, потенциальная рекомендация…) делает развитие каждого модуля независимым и в большей степени соответствует развитию Интернета.
Однако кажется, что мы все еще можем определить общие шаги для всех модулей (все, что требует уровня 3, будет CSS3, а уровень 4 может относиться к CSS4). Однако это не так, потому что у нас также будут новые модули , которые начнутся с собственной версией и контролем уровня.Самым ярким примером является CSS Grid (на испанском языке), новый модуль для создания макетов на основе сетки начинается с уровня 1, который уже является кандидатом в рекомендацию и уже был повышен до уровня 2 в рабочем проекте.
Означает ли это, что CSS Grid — это CSS1? Ясно, что нет. Это модуль, текущий собственный уровень которого — 1 , но который не является частью какого-либо отдельного документа, как остальные модули.
Вывод: CSS4 не будет, но обновления
Пример CSS Grid, пожалуй, наиболее наглядно показывает, каким будет будущее будущих функций и обновлений CSS. Работа в модулях — это всегда хорошая идея. позволяет вам играть с разными циклами и рабочими скоростями в зависимости от уровня использования или сложности реализации той или иной функции браузерами.
Если вам интересно узнать некоторые характеристики новых уровней, я рекомендую вам взглянуть на эту статью на испанском языке о формах или о времени чтения с помощью CSS (на испанском языке). Вы увидите, что мы можем делать с помощью CSS.
Что такое CSS4? — QuirksBlog
Что такое CSS4? — QuirksBlogЧто такое CSS4?
Если мы хотим, чтобы CSS4 был чем-то, необходимо определить его немного подробнее.Однако это не означает, что необходимо разделить все существующие модули CSS на сегменты CSS3 и CSS4. В этой статье обсуждаются эти проблемы и даются некоторые отзывы о моей исходной статье.
Ответов
Моя статья вызвала несколько откликов. Луи Лазарис не согласен со мной и считает, что мы должны придерживаться отдельных модулей, как мы делаем это сегодня. Я предоставляю Дэну Кью резюмировать свое несогласие:
Никто не собирается покупать книгу, которая обещает научить их «Селекторы CSS3, уровень 3, шрифты, уровень 3, режимы письма, уровень 3 и уровень сдерживания 1»: это название даже не поместится на обложке.Но если мы завершим обзор того, что сейчас происходит, и назвали это CSS4… теперь это будет продаваться.
В своем комментарии Илья Стрельцин отмечает, что CSS-модулей слишком много, что делает их менее подходящими для высокоуровневого обучения и маркетинга. Список из двенадцати модулей по своей сути скучнее, чем «CSS4».
Тем не менее, Луи не совсем неправ. Нам нужно кое-что сказать о том, что такое CSS4. У Криса Койера и Тимоти Миллера есть несколько идей, к которым я вернусь ниже.
Я думаю, мы должны выбрать два или около того модуля, которые станут деталью «CSS4», в основном для повышения осведомленности и энтузиазма среди веб-разработчиков, которые не слишком внимательно следят за CSS.
CSS4 не определен
Выбор двух или около того модулей — это не то же самое, что пройти весь CSS и решить, какие части являются CSS3, а какие — CSS4. Следовательно, опасения Йохана Ронссе необоснованны:
МодулиКак своего рода учитель, я, например, не хочу объяснять младшим веб-разработчикам разницу между CSS3 и CSS4.В этом просто нет смысла. CSS — это просто CSS. Мы должны быть счастливы, что он стабилен. Мы должны быть счастливы, что сбросили 3.
CSS не являются CSS3 или CSS4; они всего лишь CSS. Термин «CSS4» предназначен для привлечения людей к вашему обучению, но как только вы замечаете их внимание, вы в значительной степени отказываетесь от этого термина и просто учите их тому, что им нужно знать.
Вместо того, чтобы пытаться определить его, мы должны легкомысленно сослаться на CSS4, но не совсем точно понимать, что это означает. Это позволяет людям проецировать на него свои собственные чувства и идеи.CSS4 здесь, и он означает все, что вы хотите. А теперь приходите и учитесь. Это круто!
Помните: это маркетинговое упражнение; не техническое описание CSS.
Успокаивает сознание
Тем не менее, чтобы доказать, что CSS4 — это круто, нам понадобится несколько примеров модулей. «Изучите CSS4! Это позволяет делать X и Y! » Какие модули выбрать?
Давным-давно, когда я был учителем истории, я усвоил один ценный трюк: при написании тестов для учеников всегда начинайте с простого вопроса, на который все они знают ответ.Цель состоит в том, чтобы успокоить умы учащихся и дать им почувствовать, что они знают как минимум или вещей по данной теме.
Например, если им нужно выучить главу о Французской революции, начните тест с вопроса: «В каком году произошла Французская революция?» В первых двух абзацах главы отчетливо виден ответ «1789 год», так что вы можете быть достаточно уверены, что почти все студенты выучили его наизусть. Так они вздохнут с облегчением, дадут правильный ответ и получат больше уверенности до конца теста.
Я считаю, что мы должны сделать что-то подобное для CSS4. Один из модулей, который мы рекламируем как «CSS4», должен быть тем, что даже люди, не очень разбирающиеся в CSS, использовали и немного знали. Это заставит их почувствовать, что они уже кое-что знают о предмете, поэтому остальное не должно быть слишком . Он их втянет.
CSS4 — известные части
Крис Койер составил черновой список, а Тимоти Миллер добавил несколько идей. Первый модуль, о котором упоминает Крис, — это Flexbox, но он отмечает, что он может быть слишком старым.К сожалению, я вынужден согласиться. Flexbox был бы блестящим модулем «CSS4 не так сложно, как вы думаете», потому что почти все слышали о нем, и многие люди, которые в противном случае не ужасно в CSS использовали его.
К сожалению, он действительно слишком стар: если мы будем использовать его в качестве нашего плаката, люди могут потерять приостановку недоверия, которая необходима для работы трюка CSS4. «Хм? Flexbox? Но это уже лет, лет! »
Grid — очевидный следующий вариант.Он не слишком старый, и некоторые люди слышали о нем и используют его. С другой стороны, проводя исследование для книги, я узнал, что есть некоторые веб-разработчики, которые считают, что им не нужно изучать Grid, потому что они уже знают Flexbox. И оба предназначены для макета, верно? Так зачем учить два?
В качестве аргумента это не имеет никакого смысла, но тот факт, что эти идеи распространяются, означает, что использование Grid в качестве дочернего элемента может иметь неприятные последствия. (Я не уверен; я просто догадываюсь.Но мое чутье подсказывает, что Grid — неправильный модуль.) Обновление: я передумал: сетка определенно должна быть частью CSS4.
На данный момент я остановился на пользовательских свойствах CSS (или переменных) в качестве своего выбора. Они используются, но это еще не старые новости. Что еще более важно, настраиваемые свойства допускают локальную область видимости в CSS, а это очень важно для разработчиков JavaScripters и может привлечь их к нужным статьям и учениям.
Я еще не совсем уверен, лучший ли это модуль — готов спорить.Но я должен кое-что сказать, и именно здесь я сейчас стою.
CSS4 — неизвестные части
В дополнение к хорошо известному модулю «Устрашайся» у нас также должно быть что-то действительно, действительно новое. Идея заключалась в том, чтобы рекламировать два модуля как «CSS4». Люди потеряли бы свой страх, узнав настраиваемые свойства, в то время как другой модуль заинтриговал бы их, и они были бы рады узнать об этом.
Но какой модуль? Я не уверен. Крис упоминает Houdini, вложение CSS, переменные шрифты и пути смещения как возможности.Тимоти добавляет в список медиа-запросы четвертого уровня. Крис также говорит:
Лемм просто скажу, что я лично возглавлю эту вещь, если контейнерные запросы будут выполнены, и мы сделаем это частью.
Контейнерные запросы подойдут. Разработчики, которые преимущественно используют JavaScript, хотели бы их иметь.
К сожалению, их еще нет. Поэтому, хотя они и являются отличным выбором для будущего модуля («CSS4 в конечном итоге будет включать контейнерные запросы»), они не помогут нам прямо сейчас.
Итак … есть ли у кого-нибудь полезное предложение для нового модуля CSS, который еще не очень хорошо известен, применим не только к подмножеству CSS, и который мы можем начать преподавать прямо сейчас? (Моя проблема связана с отсутствием общего применения с переменными шрифтами и путями смещения.)
Houdini? Боюсь, что его сложность помешает изучению простого CSS, поэтому меня не продают.