:is() е текущото име за псевдокласа „Съвпадения-всякакви“ в работния проект на CSS4.
Първоначално този псевдоклас беше наречен :any()и беше реализиран с ограничена поддръжка, специфична за доставчика:
/* Never actually worked */ :any(div, p) > em ( /*… */ )След това името на псевдокласа „Съвпадения - всякакви“ бе променено на :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 селектори ниво 4 Спецификация. Това означава, че нещата все още се оформят, което прави малко по-рано браузърите да се събират около концепция като тази.
Въпреки това, ние имаме страхотна поддръжка на браузъра под формата :matches(с предварително :anyзапълване на доставчика на някои пропуски) за общата функционалност. И, разбира се, :notе друг псевдоклас, който може да помогне за съвпадение.
Интересното е да се отбележи, че :is()беше представено, след :matchesкоето беше въведено след :any. Това е нещо като да :anyбъде заменен от :matchesкойто се заменя с :is(), като детайлите се променят по пътя. Винаги спретнат, за да видим как се развиват тези неща.
За да получите максимална поддръжка за „Matches-Any“, е необходимо да се използва комбинация от исторически имена, тъй като понастоящем обработката на браузъра е смесица от префикси на доставчика и експериментални настройки на този етап.
/* 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-трикове публикуват, описвайки как работят псевдокласовете.