:is() је тренутни назив псеудо-класе „Матцхес-Ани“ у ЦСС4 радном нацрту.
Првобитно је ова псеудо-класа именована :any()и примењена је уз ограничену подршку специфичну за добављача:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Име псеудо-класе „Матцхес-Ани“ је тада промењено :matches()у ране верзије ЦСС4 радног нацрта, уз додатну (непотпуну) подршку која је дата неким прегледачима.
/* 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; )Хеј, није ли то као ЦСС предобрада?
Поједностављивање селектора са :is()заиста је слично ономе како ЦСС претпроцесори обрађују угнежђена правила:
/* 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()! */Али пазите! Препроцесори, попут Сасс, „размотавају“ ваша угнежђена правила на листу лако разумљивих селектора. :is()ће се са правилима специфичности бавити мало другачије:
Специфичност је занимљива
Према ЦСС4 радном нацрту:
Специфичност псеудо-класе: ис () замењена је специфичношћу њеног најспецифичнијег аргумента. Дакле, селектор написан са: ис () не мора нужно имати еквивалентну специфичност еквивалентном селектору написаном без: ис ().
То значи да се специфичност функције :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 Спецификације нивоа ЦСС селектора. То значи да се ствари још увек обликују, тако да је претраживачима мало рано да се окупе око оваквог концепта.
Упркос томе, имамо сјајну подршку за прегледаче у облику :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 ( /*… */ )Погледајте примере оловке: било које псеудо-класе од ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.
Повезан
:matches():not():any-link()
Ресурси
- Објава на блогу Давида Барона која објашњава зашто је додао
:-moz-anyподршку Гецко-у - МДН документација
- Спецификација ЦСС селектора нивоа 4 (Нацрт уредника 1): Спецификација која уводи
:is()псеудо-класу. - Упознајте Псеудо Цласс Селецтор: ЦСС-Трицкс пост описује како функционишу псеудо-класе.