Взгляд в будущее: CSS4

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

Мы все долго и упорно работали, и в конце концов дошли до использования CSS3 в реальных проектах, а теперь он просто устарел? «Конечно же нет!» — отвечу я. Всё это – результат эволюции, который только поможет всему CSS в целом, потому что и «Уровень 3», и «Уровень 4» — просто определения, скрывающие за собой набор документов спецификации.

Зачем нам 4 уровень? Что слышно о CSS3?

«4 Уровень» – это просто номер документа W3C. Вы слышали что-нибудь о новых спецификациях «Фильтров с Эффектами, 1 Уровня»? Куда они подевались? В CSS3? Может, в CSS4? А может в CSS1, потому что там фигурирует «Уровень 1»? Всё это вообще не важно, потому что CSS – это просто CSS. Селекторы являются первым документом, для достижения четвертого уровня спецификации, который всё ещё находится в разработке. Каждый документ там — сам по себе, если дело касается номера спецификации. Они разрабатываются независимо друг от друга.

Это является большим преимуществом, т.к. законченные части стандарта могут быть установлены в качестве рекомендации для использования, как селекторы «Уровня 3». К тому же, законченные документы — мобильны, и перемещение проблемных участков на следующий уровень помогает «двигать Веб» вперед, потому что спецификации реализуются небольшими кусочками: один за одним.

CSS3 постигнет учесть HTML5: и я имею ввиду не конкретную версию, а язык в целом. HTML5, по факту, просто следующая версия языка разметки, в которую добавили поддержку новых элементов. Но когда люди говорят о нем, они могут иметь ввиду всё, что угодно: начиная от аудио API и Веб Сокетов, и заканчивая геолокацией (которая, кстати, вообще не входит в HTML5 спецификацию).

То же самое касается и CSS3: для некоторых он выглядит как волшебство, которое мы применяем для создания современных демо страниц. Вы не обязаны знать к чему принадлежит спецификация border-radius или box-shadow, если умеете правильно их использовать. Аналогичная ситуация и с новыми селекторами, это просто другая (следующая) версия «Селекторной» спецификации.

Что же такое Селекторы?

В спецификации селекторы описаны как шаблоны, которые соответствуют элементам DOM дерева. Большинство селекторов из «4 Уровня» являются псевдо-классами. Селекторы появились с самого начала существования CSS, и продолжают успешно существовать на «4 Уровне», при этом получая множество новых интересных дополнений. Давайте же перейдем к практике и посмотрим, что там интересного. Я не буду описывать весь документ – только новшества «4 Уровня».

Логические комбинаторы: :matches, :not

Начнём, пожалуй, с логических псевдо-классов. Первый из них: :matches, скорее всего, известный тебе ранее как :-moz-any() от компании Mozilla , был внедрен ещё в Firefox 4. Благодаря этому селектору, мы можем группировать и находить элементы в CSS документе. Зачем это нужно? Ну, например, если нам необходимо собрать несколько ссылок «одним махом».
Вместо такого:

ul.menu li a:link,
ul.menu li a:hover,
ul.menu li a:visited,
ul.menu li a:focus {
   color: red;
}

можно написать так:

ul.menu li a:matches(:link, :hover, :visited, :focus) {
   color: red;
}

Просто, не правда ли? Несмотря на то, что этот пример выглядит простовато, он показывает потенциальные возможности псевдо-класса :matches и может быть использован в более сложных ситуациях:

article:matches(.active, .visible, #important) {
   background: red;
}

Второй селектор, который мы рассмотрим, на самом деле, был введен ещё в CSS3, но по настоящему мощным стал на «4 Уровне». Я имею ввиду псевдо-класс :not, который теперь может принимать список селекторов в качестве параметра:

p:not(.active, .visible) {
   color: red;
}

Этот код будет делать красным все параграфы не имеющие классов: .active или .visible.

Псевдо-классы для обработки ссылок: :any-link и :local-link

Благодаря этим псевдо-классам, мы будем иметь больше контроля над стилями ссылок. Первый: :any-link (временное имя, может быть изменено) – объединяет определения a:link и a:visited в одно так, что вам не придется писать:

a:link,
a:visited {
   color: red;
}

Теперь не важно, является ли ссылка посещенной или нет. У неё будет стиль обычной ссылки:

a:any-link {
   color: red;
}

Второй псевдо-класс :local-link — более интересен. Им можно, к примеру, дать свой стиль ссылке, указывающей на вашу личную страницу, оставив все остальные ссылки нетронутыми:

nav :local-link {
   text-decoration: none;
}

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

:not(:local-link(0)) {
   color: red;
}

Это правило будет применено ко всем внешним ссылкам. (Можно добавить к ним, скажем, иконку или фоновое изображение по вашему желанию)

Как можно видеть, в этом последнем примере :local-link используется с параметром. Число в скобках определяет часть в URL пути, по которому будут происходить сопоставление каждой найденной ссылки.
Звучит немного непонятно, но всё проще, чем кажется:

nav :local-link(0) {
   color: red;
}
nav :local-link(1) {
   color: green;
}
nav :local-link(2) {
   color: blue;
}
nav :local-link(3) {
   color: yellow;
}
nav :local-link(4) {
   color: gray;
}

Предположим, что текущий адрес страницы: end3r.com/2012/10/20/some-title, и у вас есть следующие ссылки в меню:

• Home [http://end3r.com/]
• 2012 [http://end3r.com/2012/]
• October 2012 [http://end3r.com/2012/10/]
• 20 October 2012 [http://end3r.com/2012/10/20/]
• Article [http://end3r.com/2012/10/20/some-title/]

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

Время-определяющие псевдо-классы: :past, :current, :future

Эти псевдо-классы очень удобны для пользователей программ чтения текста с экрана. Всего лишь одной CSS строчкой могут быть оформлены отдельные, озвучиваемые в данный момент слова (почему то, сразу вспоминается караоке):

p:current {
   background: yellow;
}

Этот код подсвечивает озвучиваемые слова желтым фоном.
Второе применение – это оформление субтитров для WebVTT видео формата. Можно, например, менять цвет или любые другие свойства. Псевдо-классы :past и :future, как можно догадаться, относятся к элементам, которые были озвучены ранее, и которые будут озвучены следующими.

Псевдо-класс неопределенного состояния: :indeterminate

В то время, как к оформлению элементов форм может быть применено множество полезных псевдо-классов, таких как: :enabled, :disabled или :checked, есть один новый: :indeterminate. Как всем известно, флажки и переключатели могут иметь два состояния: установлен и не установлен. Каждое состояние может быть определено псевдо-классами :checked — для установленного и :not(:checked) — для не установленного. Но что, если вы хотите оформить элемент, который ещё не был использован. По факту, у него не может быть определено ни состояние установлен, ни состояние не установлен. В некоторых случаях это бывает полезным, например, чтобы напомнить пользователю, что он что-либо пропустил. Таким образом, мы может стилизовать элементы, которые ещё не использовались и не имеют состояния по умолчанию:

input.checkbox:indeterminate {
   background: #ccc;
}

Аналогичным образом можно определить состояние прогресс-бара, если его текущий статус неизвестен:

progress:indeterminate {
   background: #ccc;
}

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

Псевдо-классы для древовидных структур: :nth-match, :nth-last-match

Эти псевдо-классы впервые появились в «4 Уровне», и они очень интересны. Используя :nth-match, вы можете добиться намного больших возможностей, чем когда-либо ранее. Любопытно, как он работает? Окей, представьте, что я возьму псевдо-класс nth-child, который выбирает элементы и объединю его с мощью псевдо-класса :matches, и вы получите ответ на свой вопрос.

Пусть у вас есть список ссылок, некоторые из которых имеют класс .active, и вы хотите выбрать только четные ссылки с этим классом. Мы можем использовать nth-child(even) для выборки четных элементов, но этого недостаточно, ведь нам нужны ссылки с классом .active. Не подходит и :matches(.active), т.к. в этом случае мы выбираем вообще все ссылки с классом .active. В этом случае нам и поможет :nth-match:

li a:nth-match(even of .active) {
   color: red;
}

Да, теперь мы можем выбрать только четные ссылки с классом .active из всех элементов.
Это очень простой пример. Давайте немного усложним его использованием выражения An+B:

p:nth-match(2n+1 of .active, .visible, #important) {
   color: red;
}

Эта комбинация селекторов ищет элементы, используя более сложное выражение. Псевдо-класс

:nth-last-match

работает так же, как и :nth-match, но начинает поиск с конца DOM дерева.

Псевдо-классы: :column, :nth-column, :nth-last-column

Давайте попробуем применить некоторые псевдо-классы для табличных данных. Все мы знаем, что использовать таблицы для разметки — не есть хорошо, но вот для данных они подходят отлично.
HTML таблицы являются строка-ориентированными, т.е. столбцы описываются внутри строк. Создание столбец-ориентированной таблицы возможно, но тогда у вас не будет единых строк, к тому же строка-ориентированные таблицы более популярны. Было бы полезно иметь возможность использовать CSS стили для оформления, например, отдельных колонок в такой таблице. Скажем, вы хотите задать четным и нечетным колонкам свой цвет фона. Конечно, мы можем использовать дополнительные классы, или усложнить разметку, но с помощью новых селекторов из «4 Уровня» мы сможем сделать это псевдо-классами в пару строк:

:column(.total) {
   background: red;
}
:nth-column(even) {
   background: blue;
}

Этот небольшой код устанавливает красный фон каждой ячейке с классом .total, находящейся в одной колонке, и синей каждой ячейке, находящейся в каждой четной колонке таблицы.
Теперь, мы можем выбирать столбцы точно так же, как и строки, даже используя безумные правила типа: :nth-column(3n+2). Только помните, что колонки оформляются на основе следования их в DOM дереве, а не так, как они отображаются на странице. Разумеется, не только таблицы, в конечном счете, выиграют от этих псевдо-классов, колоночные макеты уже на подходе.

Родительский (дочерний) селектор:

Этот селектор почти как Швейцарский Армейский нож, которого очень ждали, и вот он здесь. Самая обсуждаемая новинка в «Селекторной» спецификации «4 Уровня» даст вам невиданную ранее мощь в работе с CSS. Благодаря этому селектору, можно очень легко оформлять элементы, не добавляя им классы или идентификаторы. Такая особенность может быть супер-полезной при оформлении, например, меню, в котором нет никаких классов в разметке для идентификации элементов.

Давайте посмотрим на это в действии, используя некоторые базовые примеры. Пусть, у нас есть меню, состоящие из списка простых ссылок. Мы хотели бы оформить его, но оно полностью генерируется на серверной стороне на php, и у нас нет доступа к коду. Проблема возникнет, когда мы захотим оформить элемент li активного пункта меню, при том, что класс .active будет не у элемента li, а у самой ссылки. Известная проблема, не так ли? В такой ситуации самый просто путь – это перенести класс, отвечающий за активный пункт, с ссылки на элемент li. Но нам это не подходит, т.к. доступа к серверному коду у нас нет.

В нормальной структуре описания правил CSS, те или иные свойства применяются к последнему элементу. В правиле ul li a.active — это будет ссылка с классом .active, которая находится в элементе li, который находится в элементе ul. В правиле p span – это будет элемент span, который находится внутри элемента p, и т.д. Благодаря родительскому селектору, такой порядок может быть нарушен:

ul li! a.active {
   color: red;
}

Теперь, мы можем оформить элемент li, даже если активный класс будет у его ребенка. При добавлении родительского сектора к элементу, мы говорим, что хотим оформить именно его, а не последний элемент.
Другой пример: можно изменить фон страницы, просто добавив ссылку с определённым классом в любое место:

body! header a.styleSwitcher:hover {
   background: red;
}

Этот код будет делать фон (иначе говоря - страницы) красным при наведении курсора на ссылку с классом .styleSwitcher, находящуюся в хедере. Для достижения подобного эффекта, не используя родительский селектор, без JS не обойтись. Очевидно, что нативная поддержка подобных правил в CSS – наилучшее решение.

Примечание: Первая редакция спецификации (от 29 сентября 2011) определяла родительский селектор знаком доллара, стоящим перед элементом ($li). Текущая редакция (от 22 июня 2012) использует другой синтаксис, в котором используется восклицательный знак, стоящий после элемента (li!). Разумеется, всё может поменяться еще не раз. Важно то, что рано или поздно финальная спецификаций выйдет, и данный вопрос будет закрыт. А уж какой у неё будет синтаксис, по сути, не так важно, главное правильная работа.

Чтобы увидеть родительский селектор в действии, воспользуйтесь jQuery плагином cssParentSelector .

Резюме:

Новые дополнения к спецификации селекторов выглядят очень и очень интересно, не так ли? Лично я не могу дождаться того момента, когда смогу использовать их в реальных проектах. Пока основная проблема в браузерах. На то, чтобы реализовать всё это, уйдет немало времени. Ну, а пока, для имитации некоторых новых CSS свойств, можно использовать JS библиотеки.

Текущее состояние документа

На данный момент, «4-му Уровню Селекторов» все ещё далеко до своей финальной точки. Одни правила постоянно меняются, другие добавляются, третьи убираются. Нет никакой возможности ориентироваться на этот документ сегодня, ибо он изменится ещё не один раз. Но есть и плюсы: вы можете принять участие в обсуждении и предлагать свои идеи уже сейчас. Любая интересная идея может быть добавлена в стандарт и, в итоге, стать частью финальной спецификации.

Поддержка браузерами

Есть мнение, что трудно реализовать то, что находится на стадии разработки. Отчасти, это так, производители браузеров начинают думать о реализации только тогда, когда финальная спецификация стандарта утверждена.
Но, не смотря на то, что на данный момент мы не можем использовать новые фишки стандарта, у нас есть Sel – один из немногих движков, который уже поддерживает некоторые будущие функции. Благодаря ему, можно начать экспериментировать с функциями, которые будут доступны в браузерах в ближайшие месяцы и даже годы.

Другие спецификации «4 Уровня»

Существует ещё парочка новых документов:

• CSS4 Media Queries
• CSS4 Background
• CSS4 Images
• CSS4 Text

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

Ресурсы:

Первым и, безусловно, самым интересным является: официальная W3C документация для «Селекторов 4 Уровня». Только помните о том, что она всё ещё разрабатывается. Вы так же можете посмотреть несколько интересных статей от David Storey - члена рабочей группы W3C.

Что там в будущем?

Помощь с документацией, предложение своих идей, комментирование чужих идей – сейчас самое время, чтобы стать частью этого будущего. Кто знает? Может через пару лет вы станете членом Рабочей Группы, отвечающим за удивительные функции в CSS, которые будут использовать миллионы веб-сайтов каждый день? Это невероятная возможность: идти нога в ногу с разработчиками стандарта, или, что ещё лучше, принять участие, непосредственно, в процессе его разработки. Дерзайте, время ещё есть!