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 class="selected">
  <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.