Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Интригующие селекторы CSS 4-го уровня

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Селекторы CSS обширно развились за эти годы, предоставляя разработчикам гораздо больше возможностей для расположения определённых частей на страницах. Примеры в этой статье являются частью спецификации CSS уровня 4. Давайте погрузимся и исследуем семь из этих интригующих селекторов, некоторые из которых я гарантирую, что вы ещё не использовали на практике!

Селекторы 4го уровня

Спецификация 4 уровня, безусловно, содержит некоторые известные селекторы, такие как nth-child, а также содержит некоторые довольно уникальные черты. Большая часть спецификации 4 уровня описывает много новых и чудесно полезных псевдо-классов и псевдо-селекторов, поэтому в этой теме давайте кратко рассмотрим, какая разница между одиночными и двойными двоеточиями, когда речь идёт о псевдомах в CSS.

Одиночные и двойные псевдо-двоеточия

Основное правило наших дней — следует использовать двойное двоеточие :: вместо одиночного двоеточия :, чтобы отличать псевдо-классы от псевдо-элементов и содержимого, как указано в спецификации.

«Это [удвоенное двоеточие] вводится … с целью установить различие между псевдо-классами и псевдо-элементами. Для совместимости с существующими таблицами стилей, пользовательские агенты, также должны принимать предыдущие обозначения с одним двоеточием для псевдо-элементов, введённых в CSS 1 и 2 (а именно, :first-line, :first-letter, :before и :after). Эта совместимость не допускается для новых псевдо-элементов, введённых в CSS 3.» — Спецификация W3C

Ладно, это очевидно, но какая разница между классами и элементами?

Псевдо-классы и псевдо-элементы

Псевдо-класс всегда состоит из «двоеточия» :, за ним следует название псевдо-класса (ключевое слово), а для функциональных псевдо-классов один или несколько аргументов в круглых скобках (подобно CSS функциям). Этот метод, позволяет авторам указывать и настраивать особое состояние выбранного элемента(ов).

«Псевдо-классы позволяют применять стили к элементу, не только в плане содержимого в дереве документа, но и к внешним факторам, вроде истории навигатора (например, :visited), состояния содержимого (типа :checked для некоторых элементов формы), или позиции мыши (вроде, :hover, что позволяет узнать, наведена мышь на элемент или нет)» — MDN Web Docs.

Псевдо-элементы создают абстракции о дереве документа, кроме тех, которые указаны языком документа. Например, языки документа не предлагают механизмов доступа к «первой букве» или «первой строке» содержимого элемента. Псевдо-элементы позволяют авторам ссылаться на эту недоступную информацию.

Псевдо-элементы также предоставляют верстальщику механизм обращения к содержимому, которое не существует в исходном коде документа, вроде хорошо известных псевдо-элеменов ::before и ::after, которые открыли доступ к сгенерированному содержимому ещё в CSS2.

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

1. :matches()

Псевдо-класс :matches() это определённо сильный селектор, чтобы его добавили в уровне 4, но браузеры до сих пор обсуждают его добавление, за исключением Safari (WebKit).

В общем, его можно использовать для объединения нескольких правил селекторов в одну строку. В качестве аргументов — список селекторов. Эти аргументы могут быть как составными, так и сложными селекторами, однако, комбинаторы селекторов не допускаются.

Хотя этот фрагмент кода объединяет все общие состояния :hover, :focus и :active в один набор правил, на это возможности не заканчиваются. Ниже мы рассмотрим более сложный пример.

Если вы знакомы с понятием «вложенность», то готовьтесь к кое-чему действительно офигенному. Совпадения (:matches) могут быть объединены друг с другом, для подражания функции, обожаемой пользователями препроцессоров, но только теперь в CSS!

Если уж вам так захочется, то можете объединить их вместе, чтобы открыть ещё один набор возможностей.

Этот пример эквивалентен вот этому:

Имейте ввиду, что :matches() не могут быть вложены (:matches(:matches())) и не работают с :not()(:matches(:not()):not(:matches())).

К сожалению, спецификация для этого селектора утвердилась только в Safari и по-прежнему ожидает поддержки от других браузеров, поэтому пока что, вам придётся использовать отдельные указания и префиксы браузеров. В настоящее время такие инструменты, как Autoprefixer, не поддерживают :matches(), но не бойтесь, так как, недавно я подал запрос через GitHub на его поддержку.

Если у вас есть пример использования этого селектора и вы хотите этим поделиться, напишите это в комментариях ниже. Мы всегда обожаем свежайшие демки с CodePen!

2. :placeholder-shown

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

По сути :placeholder-show предназначен для выбора самого элемента ввода, когда отображается его текст-заполнитель, а ::placeholder стилизует текст-заполнитель. На самом деле имеется документация о ::placeholder, отмеченная в CSS Pseudo-Elements Module Level 4 Editors Draft. Имейте ввиду, что :placeholder-shown является псевдо-классом (это элемент в определенном состоянии), а ::placeholder — это псевдо-элемент (видимая штука, которой на самом деле нет в DOM).

Во время моего исследования, я обнаружил, что color довольно исключительное свойство (при использовании его с :placeholder-shown, для изменения цвета текста заполнителя), т.к.сработало это только в Firefox, в то время как в Chrome и Safari цвет заменителя остался серым.

3. :any-link

Псевдо-класс :any-link представляет элемент, который действует как источник указателя гиперссылки.

Например, в HTML5, любой из элементов <a>, <area>, или <link> с атрибутом href, будет являться ссылкой, которая соответствует :any-link и эквивалентна :matches(:link, :visited). На мой взгляд, это очень своеобразный селектор и, видимо, ожидает лучшего названия, однако его поддержка уже распространилась, за исключением Edge.

В настоящее время, Autoprefixer поддерживает это свойство и обеспечивает надлежащие префиксы для браузеров, которым они требуются.

4. :indeterminate

Псевдо-класс :indeterminate (неопределённый, неявный) — это селектор, предназначенный для особых элементов формы и применим ко всем медиа.

Обычно этот селектор соответствует радио-выбору и флажкам выбора, если нет атрибута checked. Такие поля ввода могут быть без явного указания состояния checked или unchecked.

А ещё, он выбирает элементы наподобие элемента progress, атрибут value которого не заполнен (т.е процент завершения не известен). В настоящее время, его стабильно поддерживает множество браузеров.

5. :user-error

Псевдокласс :user-error отражает элемент ввода с неправильно введёнными данными, но только после того, как пользователь взаимодействовал с ним. Т.е в то время, когда пользователь попытался отправить форму и до того, как пользователь снова взаимодействовал с элементом формы.

Однако поддержки попросту ещё нет, и нет возможности узнать, будет ли это реализовано основными браузерами. Пока что, лучше использовать :invalid или :required, если вам нужен такой стиль стилизации ошибок веб-форм.

6. :optional

Псевдо-класс :optional может использоваться, когда значение указано верно, до отправки формы.

Он выбирает любые элементы input или textarea, у которых не указан атрибут required. Это позволяет легко определить необязательные поля форм и оформить их соответственно.

На этот селектор мало документации в черновике 4го уровня.

7. :scope

Псевдо-классом :scope можно ограничивать стили правил, которые применяются к части страницы, установкой атрибута scoped в <style> элемента (в виде дочернего элемента того документа, в котором нужно применить эти стили). Это ограничивает стили, которые отразятся только на элементе, который является родительским элементом для <style> и всех его дочерних элементах; другими словами, родителе элемента <style scoped> и всему, что в нём.

К сожалению, большинство браузеров не поддерживают его или пытались в своё время и с тех пор полностью удалили. Хотя в Chrome и Safari зарегистрировано совпадение псевдо-класса, а, следовательно, применяются эти CSS правила, они пока не поддерживают данный стиль; это означает, что применение этого CSS правила выходит за пределы предполагаемой части документа и применяется на :root.

По текущим исследованиям, Chrome 35 и FF 55 удалили поддержку, однако, было время, когда Chrome и Firefox поддерживали :scope. Все эти «туда-сюда», делают перспективу появления scope’а довольно мрачной, и, согласно Can I Use, большинство браузеров в настоящее время очень плохо работают с этим свойством.

Вывод

Конечно, есть некоторые очень перспективные селекторы в CSS 4 и другое, не упомянутое в этой статье. Любые селекторы в спецификации могут слегка меняться со временем или полностью удаляться. Нам, разработчикам, остаётся лишь следить за тем, чтобы команды, отвечающие за них, были осведомлены, что нас заинтересовало. Если у вас есть вопросы или комментарии, или даже примеры упомянутых выше селекторов, пожалуйста, разместите их ниже. Happy coding!

Спецификации

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.