Новые возможности CSS4
Прогресс не стоит на месте и в спину CSS3 уже дышит CSS4, разрабатываемый под крылом консорциума W3C. Исторически сложилось так, что разработка стандарта CSS ведется независимо от разработки веб-браузеров.
Это ведет к тому, что различные браузеры в различной степени поддерживают спецификацию CSS. Но вернемся к CSS4. W3C периодически обновляет черновую (рабочую) спецификацию CSS4 и я хочу донести до вас основную информацию о том, что уже внесено в документ «CSS selectors level 4».
CSS4 принесет с собой достаточно много изменений. Новых псевдоэлементов добавлено не было, этим, скорее всего, займутся в недалеком будущем. Однако разработке псевдоклассов все-таки уделили внимание.
В CSS4 (на данный момент) были добавлены следующие элементы: логические комбинации из селекторов, селекторы тегов и атрибутов, новые псевдоклассы, селекторы отношений и таблиц. Далее в статье все это рассматривается более подробно.
- Логические комбинации: псевдоклассы :not( ) и :matches( )
- Селекторы атрибутов: чувствительность к регистру
- Языковые псевдоклассы
- Псевдоклассы расположения
- Псевдоклассы пользовательских действий: псевдоклассы drag-and-drop
- Псевдоклассы, относящиеся ко времени
- Псевдоклассы для элементов ввода
- Псевдоклассы :enabled и :disabled
- Мутирующие псевдоклассы :read-only и :read-write
- Псевдокласс :placeholder-shown
- Псевдокласс :default
- Псевдокласс :checked
- Псевдокласс :indeterminate
- Псевдоклассы :valid и :invalid
- Псевдоклассы :in-range и :out-of-range
- Псевдоклассы :required и :optional
- Псевдокласс :user-error
- Псевдоклассы древовидной структуры
- Селекторы отношений
- Выбор родительских элементов
- Табличные селекторы
Логические комбинации: псевдоклассы :not( ) и :matches( )
В CSS3, псевдокласс отрицания :not мог применяться только к простым селекторам, псевдоклассам, тегам, идентификаторам, классам и параметрам селекторов классов. Псевдоэлементы и комбинации вроде UL LI или UL > LI не поддерживались и, к тому же, мы не могли использовать псевдокласс отрицания :not сам по себе.
В спецификации Level 4, псевдокласс :not( ) теперь может быть применен к сложным селекторам, а также к группе селекторов.
Теперь не нужно разделять несколько селекторов на отдельные блоки, чтобы применить к ним :not( ).
p:not(.active, .visible) {
color: yellow;
}
То же самое касается и класса :matches – это новый псевдокласс, который позволяет выбирать классы для однотипных элементов.
Например, если имеются классы article.active и article.visible, то можно использовать конструкцию, приведенную ниже, чтобы выбрать оба класса. Особенно это актуально, если таких классов много.
article:matches(.active, .visible) {
background: green;
}
Селекторы атрибутов: чувствительность к регистру
В настоящее время, в CSS4 регистр атрибутов больше не чувствителен к регистру, если использовать идентификатор i перед закрывающей скобкой ]. Например, в селекторе
[frame=hsides i] { border-style: solid none; }
атрибут ‘hsides’ будет применен к ‘frame’ вне зависимости от написания: ‘HSIDES’, ‘hsides’, ‘Hsides’ и так далее. Это применимо даже в XML с регистро-зависимыми значениями. Это позволит избежать длинного и утомительного поиска ошибок.
Языковые псевдоклассы
Еще одним новым псевдоклассом в CSS4 является :dir. В HTML5 он используется для определения направления текста элементов. Псевдокласс :dir(rtl) выберет элементы с направлением справа-налево, а :dir(ltr) наоборот – слева-направо.
Обратите внимание, что :dir это не то же самое, что селектор атрибута [dir=...], так как первый выбирает значение определенное User Agent`ом.
Новые изменения коснулись и языкового псевдокласса :lang. На данный момент, :lang может делать выборку по шаблону поиска. Например, селектор :lang(de-DE) выберет все подходящие теги языков, не только ‘de-DE’, но и ‘de-DE-1996;.
Выборка по шаблону выполняется с помощью символа звездочки. Например, *-CH выберет ‘de-CH’, ‘it-CH’ и все остальные, подходящие под шаблон.
В примере ниже, первые два селектора представляют документ на французском-бельгийском и немецком языках. Следующие же две строки выбирают тег <q> для соответственно французско-бельгийского и немецкого документов:
html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q
Псевдоклассы расположения
Псевдоклассы расположения относятся к месторасположению посетителя на сайте (не путать с географическим расположением). Один из псевдоклассов, которого коснулись изменения, это :any-link, назначением которого является выбор всех элементов, содержащих гиперссылки.
Вторым из них является псевдокласс :local-link, который выбирает гиперссылки в зависимости от месторасположения посетителя на сайте. Этот псевдокласс также может различать внутренние и внешние ссылки.
Заданный без параметров, псевдокласс :local-link выберет теги <a>, которые имеют внутренние ссылки. Если задать числовой параметр, то :local-link может выбирать ссылки только определенной в параметре степени вложенности:
- :local-link(0) – выберет ссылки с нулевым уровнем вложенности, то есть содержащие URL сайта;
- :local-link(1) – выберет ссылки с уровнем вложенности равным единице, выберет ссылки, содержащие один элемент после имени сайта;
- :local-link(2) – выберет ссылки с уровнем вложенности равным 2, выберет ссылки, содержащие два элемента после имени сайта;
- и так далее.
Псевдокласс :scope применяет стили только к тем элементам, которые входят в определенную ветвь DOM-дерева. Используется совместно с тегом <style> в HTML5.
Несколько примеров:
nav :local-link { text-decoration: none; }
a:local-link(0) {...}
a:local-link(1) {...}
Псевдоклассы пользовательских действий: псевдоклассы drag-and-drop
Псевдокласс :drop применяется к элементам, определенным как области, на которые можно перетащить другой элемент.
Псевдоклассу :drop можно в скобках передать параметр:
- :drop(active) – если пользователь задержит перетаскиваемый элемент над определенным как активная область элементом, то его можно туда «сбросить»;
- :drop(valid) – если стандартный язык определяет целевые объекты как ‘valid’ и ‘invalid’, то данный селектор выберет только валидные области для перетаскиваемого объекта. В противном случае, будут выбраны все доступные области;
- :drop(invalid) – если стандартный язык определяет целевые объекты как ‘valid’ и ‘invalid’, то данный селектор выберет только неправильные области для перетаскиваемого объекта. В противном случае не будет выбрано ничего.
Пример:
:valid-drop-target { box-shadow: 0 0 5px yellow; }
:active-drop-target { outline: solid red; }
Псевдоклассы, относящиеся ко времени
Данные псевдоклассы введены для классификации элементов внутри определенного промежутка времени, например, во время голосовой обработки документа.
Псевдокласс :current выбирает элемент или его потомка, который активен в данный момент. Например, с помощью следующего селектора, тег <p> будет выбран, когда он будет читаться вслух:
:current(p, li, dt, dd) {
background: yellow;
}
Псевдокласс :past определяет момент времени до :current. А псевдокласс :future, соответственно после :current.
Псевдоклассы для элементов ввода
Перечисленные псевдоклассы относятся к элементам пользовательского ввода, таким как <input>.
Псевдоклассы :enabled и :disabled
Псевдокласс :enabled выбирает элементы ввода, находящиеся в состоянии enabled. Напротив, псевдокласс :disabled выбирает элементы ввода, находящиеся в состоянии disabled.
Мутирующие псевдоклассы :read-only и :read-write
Псевдокласс :read-write выбирает элементы ввода, которые можно читать и редактировать, а :read-only – элементы, имеющие атрибут readonly.
Псевдокласс :placeholder-shown
Выбирает элементы ввода, для которых задан атрибут placeholder.
Псевдокласс :default
Данный псевдокласс применяется к одному или нескольким элементам пользовательского ввода, которые заданы по умолчанию среди всех остальных элементов ввода. В основном применяется к пунктам контекстного меню, кнопкам и выпадающим спискам/меню.
Псевдокласс :checked
Псевдокласс :checked срабатывает, когда пользователь выбирает элемент radio- или checkbox.
Псевдокласс :indeterminate
Псевдокласс :indeterminate применяется к элементам ввода, чьи значения находятся в неопределенном состоянии.
Псевдоклассы :valid и :invalid
Элемент соответствует псевдоклассам :valid или :invalid, когда, соответственно, он содержит валидное или неверное значение, в зависимости от значения определенного языком документа.
Псевдоклассы :in-range и :out-of-range
Псевдоклассы :in-range и :out-of-range применяются к элементам, которые, соответственно, входят в заданный диапазон либо не входят в него.
Псевдоклассы :required и :optional
Псевдоклассы :required и :optional применяются для элементов ввода, которые, соответственно, заданы в качестве обязательных и необязательных.
Псевдокласс :user-error
Псевдокласс :user-error предназначен для выбора элементов ввода с неправильно введенными данными, но применяется он только после того, как пользователь произвел ввод и убрал с поля ввода фокус.
Псевдокласс :user-error должен учитывать псевдоклассы :invalid, :out-of-range или :required (если элемент пуст и является обязательным для ввода) после того, как пользователь попытался отправить форму на сервер и до того, как он повторно начал взаимодействие с полем ввода.
User-agent может позволить псевдоклассу выбрать элементы в другое время, чтобы выделить ошибку пользователя визуально.
Псевдоклассы древовидной структуры
Группу из двух имеющихся структурных псевдоклассов (:empty и :root) дополнил новый, под названием :blank. Он похож на :empty, но выбирает символы между элементами.
Например:
<p>
</p>
Этот новый псевдокласс аналогичен :empty, но считает тег пустым, даже если в нем имеются спецсимволы перевода строки и другие разделители.
Также, были добавлены два новых структурных псевдокласса – :nth-match (An+B ) и :nth-last-match(An+B ).
Селектор :nth-match предназначен для элементов, содержащих в себе дочерние теги в виде (An+B-1) и выбирает несколько элементов, идущих за ним. Селектор :nth-last-match действует похожим образом, за исключением того, что производит выбор уже после того, как документ выведен.
Селекторы отношений
Эти псевдоклассы позволяют выбирать присоединенные элементы используя формат A /ATTR/ B, где один элемент соответствует другому по значению ID.
Такое же правило применимо и для селектора атрибутов. В следующем примере реализовано подсвечивание элемента ввода, когда курсор мыши наводится на метку:
label:matches(:hover, :focus) /for/ input, /* association by 'for' attribute */
label:matches(:hover, :focus):not([for]) input { /* association by containment */
box-shadow: yellow 0 0 10px;
}
Выбор родительских элементов
CSS4 позволяет выбирать родительский элемент, используя формат A! > B, где A это родитель элемента B. Например, Мы можем выбрать родителя элемента, когда на него наведен указатель мыши.
Как вам известно, в CSS3, в случае выпадающего меню, когда в древовидной структуре активен последний тег <li>, родительский <li> всегда теряет фокус.
Однако когда есть возможность выбрать родителя при наведении курсора мыши на дочерний элемент, то можно присвоить ему нужные стили, как показано в примере ниже:
ul! li:hover {
color: blue;
}
Табличные селекторы
В CSS3, столбцы поддерживались, но при стилизации выделить их было очень сложно. CSS4 позволяет нам сделать это с легкостью.
Во-первых, появился оператор ‘||’, который позволяет выбрать столбец по определенным критериям. Селектор :nth-column(n) позволяет стилизовать определенные колонки, отсчет которых ведется с начала. Селектор :nth-last-column(n) начинает отсчет с конца.
Обратите внимание, что оба селектора могут включать значения ‘odd’ и ‘even’. Взгляните на пример ниже:
col.selected || td {
background: gray;
color: white;
font-weight: bold;
}
td:nth-column(1) {
text-align: center;
}
<table>
<col span="2">
<col class="selected">
<tr><td>A <td>B <td>C
<tr><td colspan="2">D <td>E
<tr><td>F <td colspan="2">G
</table>