От автора: CSS селекторы массово прогрессировали на протяжении многих лет, предоставляя разработчикам гораздо больше возможностей для ориентации определенных битов на своих страницах. Примеры в этой статье являются частью спецификации Selectors CSS level 4. Давайте погрузимся и исследуем семь из этих интригующих селекторов, из которых, я гарантирую, некоторые вы ещё ни разу не использовали на практике!
Selectors level 4
The Level 4 спецификация, безусловно, содержит не только известные селекторы, такие как nth-child, но и некоторые уникальные символы. Большая часть спецификации level 4 описывает много новых и полезных псевдо-классов и псевдо-селекторов, поэтому в этом вопросе давайте кратко рассмотрим, какая разница между одиночными и двойными двоеточиями, когда речь идет о псевдо в CSS.
Одиночные vs. двойные двоеточия
Как правило, в наши дни вместо двоеточия : следует использовать двойные двоеточия ::, чтобы отличать псевдо-классы от псевдо-элементов и содержимого, как указано в спецификации.
«Эта запись с двумя двоеточиями введена …, чтобы установить дискриминацию между псевдо-классами и псевдо-элементами. Для совместимости с существующими таблицами стилей браузеры также должны принимать предыдущее обозначение одиночным двоеточием для псевдо-элементов, введенных в CSS-level 1 и 2 (а именно: first-line,: first-letter, before и: after). Эта совместимость не допускается для новых псевдо-элементов, введенных в CSS-level 3. »— Спецификация W3C
Хорошо, это понятно, но в чем разница между классами и элементами?
Псевдо-классы vs. Псевдо-элементы
Псевдо-класс всегда состоит из «двоеточия» :, за которым следует имя псевдо-класса (ключевое слово), а для функциональных псевдо-классов — один или несколько аргументов между круглыми скобками (подобно функциям CSS). Это метод, позволяющий авторам указывать и настраивать особое состояние выбранного элемента(ов).
«Псевдо-классы позволяют применять стиль к элементу не только по отношению к содержимому дерева документов, но и по отношению к внешним факторам, таким как история навигатора ( :visited, например), статус его содержимого (например, :checked на определенных элементах формы) или на позицию мыши (например :hover, которая позволяет узнать, находится ли мышь над элементом или нет). — MDN Web Docs
Псевдо-элементы создают абстракции о дереве документов, кроме тех, которые указаны языком документа. Например, языки документа не предлагают механизмов доступа к «первой букве» или «первой строке» содержимого элемента. Псевдо-элементы позволяют авторам ссылаться на эту неприемлемую информацию.
Псевдо-элементы также предоставляют авторам механизм для ссылки на контент, которого нет в исходном документе, таких как известные ::before и ::after псевдо-элементы, которые разрешают доступ к сгенерированному контенту в CSS 2.
Теперь, когда мы установили связь, давайте погрузимся и исследуем некоторые из этих интригующих селекторов CSS level 4.
: matches ()
Псевдо-класс :matches(), несомненно, сильный селектор пришедший с level 4, но браузеры пока всё еще обсуждают его включение за исключением Safari (WebKit).
Его можно использовать для объединения нескольких правил выбора в одну лаконичную линию. Он принимает список селекторов в качестве аргумента. Эти аргументы могут быть составными селекторами и комплексными селекторами, однако селекторы комбинаторов не допускаются.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Chrome */ :-webkit-any(:hover, :focus, :active) { color: #222; } /* Firefox */ :-moz-any(:hover, :focus, :active) { color: #222; } /* Safari */ :matches(:hover, :focus, :active) { color: #222; } |
В то время как этот фрагмент сочетает все наши общие состояния для :hover, :focus и: activeв один набор правил, он все еще не раскрыл потенциал, которым он обладает. Ниже мы рассмотрим более сложный пример.
Если вы знакомы с вложенностью, будьте готовы прийти в восторг. Matches могут сочетаться с другими :matches селекторами, чтобы имитировать ту же самую функцию, которую многие пользователи препроцессора обожают, но изнутри CSS!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
:matches(section, article) :matches(h1, h2, h3, h4, h5, h6) { color: goldenrod; } /* equivalent to: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6 { color: goldenrod; } |
Можно даже объединить их вместе, чтобы открыть еще один набор возможностей.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* Firefox */ :-moz-any(a):-moz-any(:link, :visited) { color: blue; } :-moz-any(a):-moz-any(:hover, :focus, :active) { color: red; text-decoration: none; } /* Chrome */ :-webkit-any(a):-webkit-any(:link, :visited) { color: blue; } :-webkit-any(a):-webkit-any(:hover, :focus, :active) { color: red; text-decoration: none; } /* Safari */ :matches(a):matches(:link, :visited) { color: blue; } :matches(a):matches(:hover, :focus, :active) { color: red; text-decoration: none; } |
Этот пример эквивалентен написанию:
|
1 2 3 4 5 6 |
a:link, a:visited {…} a:hover, a:focus, a:active {…} |
Имейте в виду, что :matches() не может быть вложен ( :matches(:matches())) и не работает с :not() ( :matches(:not()), :not(:matches())).
К сожалению, спецификация для этого селектора закрепилась только в Safari и по-прежнему ждёт от других разработчиков браузеров поддержки, поэтому вам придется использовать отдельные декларации и префиксы поставщиков. В настоящее время такие инструменты, как Autoprefixer, не поддерживают :matches(), но не бойтесь, поскольку недавно я поднял на GitHub вопрос о предоставлении этой поддержки.
Если у вас есть пример использования этого селектора и вы хотите поделиться им, отправьте его в комментариях ниже. Нам всегда нравятся хорошие демо-версии CodePen!
: placeholder-shown
Элементы ввода имеют возможность указывать текст заполнителя для пользователя, который должен быть введен. Это происходит, когда атрибут placeholder присутствует во входном теге и, таким образом, соответствует элементу ввода, отображающему текст заполнителя.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* affects entire input */ :placeholder-shown { opacity: 1; /* works */ color: gold; /* sketchy */ background: blue; /* works */ font-weight: bold; /* works */ border: 1px solid red; /* works */ } /* only affects placeholder text */ ::placeholder { opacity: 1; /* works */ color: gold; /* works */ background: goldenrod; /* works */ font-weight: bold; /* works */ border: 1px solid red; /* works */ } |
По сути, :placeholder-shown это выбор самого входа, когда отображается его текст-заполнитель, а напротив ::placeholder, который стилизует текст-заполнитель. На самом деле есть документация о: :placeholder, отмеченная в CSS Pseudo-Elements Module Level 4 Editors Draft. Имейте в виду, что :placeholder-shown это псевдо-класс (элемент в определенном состоянии) а ::placeholder — псевдо элемент (видимая вещь, которая на самом деле не входит в DOM).
Во время моего исследования я обнаружил, что color это особое свойство (когда для изменения цвета текста заполнителя используется :placeholder-shown), которое удостоено вниманием только в браузере Firefox, тогда как Chrome и Safari поддерживают серый цвет текста заполнителя.
: any-link
Псевдо-класс :any-link представляет собой элемент, который действует в качестве источника якоря гиперссылки.
|
1 |
:any-link {…} |
Например, в HTML5, любой <a>, <area> или <link> элементы с атрибутом href являются гиперссылками, которые соответствуют :any-link и эквивалентны :matches(:link, :visited). По-моему, это действительно своеобразный селектор и по-прежнему ожидает лучшего имени, однако в наши дни, за исключением Edge, поддержка довольно широка.
В настоящее время Autoprefixer поддерживает это свойство и предоставляет правильные префиксы поставщиков для браузеров, которые их требуют.
: indeterminate
Псевдо-класс :indeterminate является селектором, предназначенным для определенных элементов формы и применимым ко всем средам.
|
1 2 3 |
:indeterminate { outline: 2px solid red; } |
Обычно этот селектор будет соответствовать входам, таким как радио и флажки, когда нет атрибута checked. Входы, подобные этим, могут существовать без каких-либо проверенных или непроверенных состояний.
Он также выбирает элементы, типа элемент progress без value атрибута контента (т. е. когда процентное завершение неизвестно). В настоящее время поддержка многих широко используемых поставщиков стабильна.
: user-error
Псевдо-класс :user-error представляет входной элемент с неправильным вводом, но только после того, как пользователь начнёт с ним взаимодействовать. Например, с момента, когда пользователь попытался отправить форму или перед тем, как пользователь начинает работу с элементом формы.
|
1 2 3 4 5 |
:user-error { background: red; color: red; border: 2px solid red; } |
Однако поддержки нет, и нет способа узнать, будут ли они реализованы крупными поставщиками браузеров. На данный момент лучше использовать :invalid или :required, если нужен такой стиль оформления ошибок для веб-форм.
|
1 2 3 4 5 |
:invalid { background: red; color: red; border: 2px solid red; } |
: optional
Псевдо-класс : optional может использоваться, когда значение действительно и до того, как будет отправлена его форма.
|
1 |
: optional {…} |
Он выбирает любой input или textarea элемент, который не имеет атрибута required. Это позволяет формам легко указывать необязательные поля и соответствующим образом их форматировать.
Это один из очень легко задокументированных селекторов, включенных в черновик спецификации Selectors level 4.
: scope
Псевдо-класс :scope может ограничивать правила стиля, которые применяются только к части страницы, устанавливая scoped атрибут для <style> элемента (прямой дочерний элемент корня элемента поддерева, к которому вы хотите применить стили). Он ограничивает стили воздействием только на элемент, который является родительским элементом элемента <style> и всех его потомков, или, другими словами, родителем <style scoped> элемента и всего внутри.
|
1 2 3 4 5 6 7 8 9 10 |
<ul> <style scoped> :scope { color: red; } </style> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> |
К сожалению, большинство браузеров не поддерживают его или поддержали в свое время, но потом полностью удалили. И хотя Chrome и Safari регистрируют совпадение псевдо-класса и, следовательно, применяют правило CSS, они пока не поддерживают самостоятельность стиля; это означает, что применяемое правило CSS выходит за пределы предполагаемой части документа и приравнивается к :root.
Исходя из текущих исследований, Chrome 35 и FF 55 удалили поддержку, однако было время, когда Chrome и Firefox поддерживались :scope. Все эти back и forth делают внешний вид видимой области довольно мрачным, и согласно Can I Use, большинство браузеров в настоящее время имеют поддержку обозначенную флажком.
Вывод
Конечно, есть некоторые очень перспективные Selectors Level 4 и многие другие, не упомянутые в этой статье. Как и в любой форме спецификации, некоторые селекторы могут слегка меняться со временем или полностью удаляться. Нам, как разработчикам, нужно цепляться за те, которые мы ценим больше всего, и следить за тем, чтобы команды отвечали. Успешного кодирования!
Автор: Dennis Gaebel
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
