: is () - CSS-хитрости

Anonim

:is() - текущее имя псевдокласса «Matches-Any» в рабочем проекте CSS4.

Первоначально этот псевдокласс был назван :any()и реализован с ограниченной поддержкой конкретного производителя:

/* Never actually worked */ :any(div, p) > em ( /*… */ )

Затем имя псевдокласса «Matches-Any» было изменено на :matches()в ранних версиях рабочего проекта CSS4, при этом некоторым браузерам была предоставлена ​​дополнительная (неполная) поддержка.

/* Sort of works */ :matches(div, p) > em ( /*… */ )

Наконец, в текущем рабочем проекте этот псевдокласс переименован в :is(), который в настоящее время не поддерживается браузерами.

/* Will work in the future? */ :is(div, p) > em ( /*… */ )

Цель селектора «Соответствует любому» (со всеми его названиями) - упростить написание сложных группировок селекторов.

Синтаксис

/* Theoretical until CSS4 support finalized */ :is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) ( color: #BADA55; ) /*… which would be the equivalent of: */ section h1, section h2, section h3, section h4, section h5, section h6, article h1, article h2, article h3, article h4, article h5, article h6, aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 ( color: #BADA55; )

Эй, разве это не похоже на предварительную обработку CSS?

Упрощение селекторов с помощью :is()действительно похоже на то, как препроцессоры CSS обрабатывают вложенные правила:

/* SCSS written like this: */ div, p, ul, ol ( span ( /*… */ ) ) /* after processing becomes: */ div span, p span, ul span, ol span ( /*… */ ) /* which is a lot like the effect of :is()! */

Но будьте осторожны! Препроцессоры, такие как Sass, «разворачивают» ваши вложенные правила в список легко понятных селекторов. :is()будет обрабатывать правила специфичности немного иначе:

Специфика интересна

Согласно рабочему проекту CSS4:

Специфика псевдокласса: is () заменяется спецификой его наиболее специфического аргумента. Таким образом, селектор, написанный с помощью: is (), не обязательно имеет эквивалентную специфичность эквивалентному селектору, написанному без: is ().

Это означает, что специфика :is()автоматически обновляется до наиболее конкретного элемента в списке предоставленных аргументов:

/* This has higher precedence… */ :is(ol, .list, ul) li ( /*… */ ) /*… than this, even though this is later… */ ol li ( /*… */ ) /*… because :is() has the weight of it's heaviest selector, which is `.list`! */

Поддержка браузера

Мы упоминали об этом ранее, но :is()на данный момент браузер не поддерживает. Он был введен в проект редактора 1 спецификации CSS Selectors Level 4 Specification. Это означает, что вещи все еще формируются, поэтому браузерам еще рано сплотиться вокруг такой концепции.

Тем не менее, у нас есть отличная поддержка браузеров в виде :matches(с префиксом поставщика, :anyзаполняющим некоторые пробелы) для общей функциональности. И, конечно же, :notесть еще один псевдокласс, который может помочь с сопоставлением.

Что интересно отметить, так это то, что :is()было введено после, :matchesкоторое было введено после :any. Это вроде как :anyзаменяется тем, :matchesчто заменяется :is(), и детали меняются по ходу дела. Всегда интересно посмотреть, как эти вещи развиваются.

Чтобы получить максимальную поддержку для «Любое совпадение», необходимо использовать сочетание исторических имен, так как обработка браузером в настоящее время представляет собой мешанину из префиксов поставщиков и экспериментальных настроек.

/* These are deprecated, but still necessary in some browsers: */ :-moz-any(div, p) > em ( /*… */ ) :-webkit-any(div, p) > em ( /*… */ ) /* Has been replaced by :is() in CSS4, but still supported by some browsers with experimental features enabled */ :matches(div, p) > em ( /*… */ ) /* Doesn't work yet, but for future support, maybe add this? */ :is(div, p) > em ( /*… */ )

См. Примеры Pen: любой псевдокласс от CSS-Tricks (@ css-tricks) на CodePen.

Связанный

  • :matches()
  • :not()
  • :any-link()

Ресурсы

  • Сообщение в блоге Дэвида Барона, объясняющее, почему он добавил :-moz-anyподдержку Gecko
  • Документация MDN
  • Спецификация CSS-селекторов уровня 4 (черновик редактора 1): спецификация, которая вводит :is()псевдокласс.
  • Познакомьтесь с публикацией «Селекторы псевдоклассов: CSS-Tricks», в которой рассказывается, как работают псевдоклассы.