Интригующий Selector CSS level 4

Интригующий Selector CSS level 4

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

Selectors level 4

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

Одиночные vs. двойные двоеточия

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

Интригующий Selector CSS level 4

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

Псевдо-классы vs. Псевдо-элементы

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

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

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

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

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

1. : matches ()

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

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

/* 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!

: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;
}

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

/* 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;
}

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

a:link,
a:visited {…}
 
a:hover,
a:focus,
a:active {…}

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

2. :placeholder-shown

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

/* 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 поддерживают серый цвет текста заполнителя.

3. :any-link

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

:any-link {…}

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

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

4. :indeterminate

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

:indeterminate {
  outline: 2px solid red;
}

Обычно этот селектор будет соответствовать входам, таким как радио и флажки, когда нет атрибута checked. Входы, подобные этим, могут существовать без каких-либо проверенных или непроверенных состояний. Он также выбирает элементы, типа элемент progress без value атрибута контента (т. е. когда процентное завершение неизвестно). В настоящее время поддержка многих широко используемых поставщиков стабильна.

5. :user-error

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

:user-error {
  background: red;
  color: red;
  border: 2px solid red;
}

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

:invalid {
  background: red;
  color: red;
  border: 2px solid red;
}

6. : optional

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

: optional {…}

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

Это один из очень легко задокументированных селекторов, включенных в черновик спецификации Selectors level 4.

7. :scope

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

<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, большинство браузеров в настоящее время имеют поддержку обозначенную флажком.

Интригующий Selector CSS level 4

Вывод

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

Автор: Dennis Gaebel

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree