Cтатьи по тегу «css4»

Когда-то у CSS была мечта. Светлое будущее, прекрасное далёко, в котором хотелось очутиться побыстрее, о котором слагали песни. У него было краткое и запоминающееся имя – «CSS3».

Как всякое будущее, оно было туманным: отдельного стандарта с таким названием никогда не было. Но именно с ним ассоциировалось всё новое и крутое, с чем уже можно было поиграть в экспериментальных реализациях за префиксами и что вот-вот должно было появиться в браузерах.

Годы шли, CSS взрослел. То будущее стало повседневностью, а затем незаметно отошло в прошлое. Мы свыклись с отсутствием у CSS версий, худо-бедно научились ориентироваться в зоопарке его модулей (или вот-вот научимся:), и даже нашли способ отслеживать его эволюцию по периодическим «снимкам состояния». Но всё равно на фоне JS, где на смену вроде бы только что «взлетевшему» ES6/2015 уже приходит ES2020/11, а модные фреймворки и вовсе мелькают как в калейдоскопе, CSS производит на новичков впечатление какого-то застоя (а зря!). И вот недавно сразу несколько «звезд» CSS-сообщества выступили с идеей вернуть CSS мечту.

Рабочая группа по CSS начала работу над новым «снимком» состояния CSS (CSS Snapshot). Прошлый 2019-й год прошел без своего «снимка» (только в январе вышла последняя редакция CSS-2018), так что давно пора!

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

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

Рабочая группа CSS в W3C выпустила второй публичный черновик модуля псевдоэлементов 4 уровня. Этот модуль выделен из CSS-селекторов 4 уровня и дополняет его.

По сравнению с селекторами 3 уровня добавились псевдоэлементы ::selection и ::placeholder (наконец его стандартизируют!). А вторая версия черновика добавила еще ::marker для списков (этого инструмента ждали еще с 2002 года, правда, в новом черновике возможности его оформления сильно урезаны — позиционировать его по-прежнему нельзя…) и отдельный вариант ::selection для неактивного окна — ::selection-inactive. И немного упростила поведение ::first-letter, поскольку для оформления первых букв (буквиц) появился другой механизм, описанный в другом, новом CSS-модуле строчного форматирования 3 уровня.

Новый модуль также расширяет объектную модель CSS для работы с псевдоэлементами из скриптов: должен появиться отдельный интерфейс CSSPseudoElement, который, помимо свойств «тип псевдоэлемента» и «его CSS-код», будет обязан поддерживать интерфейс EventTarget из DOM2 (т.е. на псевдоэлементах наконец можно будет «ловить» события отдельно от их элементов!). Правда, этот раздел модуля пока очень слабо проработан. Но вы можете предложить свое решение любого из спорных вопросов и даже предложить свою правку спецификации на GitHub!

На днях рабочая группа CSS в W3C решила напомнить нам, что будущее уже здесь, и без лишнего шума опубликовала CSS-модуль каскада и наследования 4 уровня в статусе кандидата в рекомендации. Это не опечатка. Модуль с «магической» цифрой 4 в названии — мы бы с радостью обозвали его звучным «CSS4», если бы в этом было хоть сколько-нибудь смысла — в статусе, означающем полную теоретическую готовность спецификации. Добро пожаловать в 2016-й!

Настоящего героя, владеющего суперсилой CSS-спецификаций, трудно сбить с толку. Но в жизни, как и в супергеройском кино, попадаются задачи, на первый взгляд неразрешимые. Например: есть страничка, которую кто-то нехороший собирается через 5 секунд погрузить во тьму, установив ей style="background:#000 !important" на body. Нужно «спасти» страничку, сохранив ее в читаемом виде, с белым фоном… ну хотя бы минут десять. Хотя бы в новейших браузерах.

Ну и поскольку это задачка для CSS-супергероя, то единственное, чего можно касаться — это CSS странички. Ни разметку, ни «злодейский» скрипт трогать нельзя. И чтобы не было слишком легко, псевдоэлементы использовать тоже нельзя.

See the Pen MaxvxJ by Ilya Streltsyn (@SelenIT) on CodePen.

Инлайновый стиль, да еще и с !important. Абсолютное оружие. В известной визуализации «SpeciFISHity» авторства Эстель Вайл (Стандартисты) — атомная бомба. Казалось бы, что можно ему противопоставить?