:is() is de huidige naam voor de "Matches-Any" pseudoklasse in het CSS4-werkconcept.
Oorspronkelijk kreeg deze pseudo-klasse een naam :any()en werd deze geïmplementeerd met beperkte leverancierspecifieke ondersteuning:
/* Never actually worked */ :any(div, p) > em ( /*… */ )De pseudoklassenaam "Matches-Any" werd vervolgens gewijzigd :matches()in vroege versies van het CSS4-werkconcept, waarbij aanvullende (onvolledige) ondersteuning werd gegeven aan sommige browsers.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Ten slotte heeft de huidige werkende versie deze pseudo-klasse hernoemd naar :is(), die momenteel niet wordt ondersteund in browsers.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Het doel van de “Matches Any” -selector (met al zijn namen) is om complexe groeperingen van selectors gemakkelijker te schrijven.
Syntaxis
/* 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; )Hé, is dat niet zoals CSS-voorverwerking?
Selectors vereenvoudigen met :is()is inderdaad vergelijkbaar met hoe CSS-preprocessors geneste regels afhandelen:
/* 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()! */Maar let op! Preprocessors, zoals Sass, 'rollen' uw geneste regels uit in een lijst met gemakkelijk te begrijpen selectors. :is()zal specificiteitsregels een beetje anders behandelen:
Specificiteit is interessant
Volgens het CSS4 Working Draft:
De specificiteit van de: is () pseudo-klasse wordt vervangen door de specificiteit van het meest specifieke argument. Een selector geschreven met: is () heeft dus niet noodzakelijk een equivalente specificiteit als de equivalente selector geschreven zonder: is ().
Dat betekent dat de specificiteit van :is()automatisch wordt geüpgraded naar het meest specifieke item in de lijst met opgegeven argumenten:
/* 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`! */Browser-ondersteuning
We hebben hier al eerder op gezinspeeld, maar hebben :is()momenteel geen browserondersteuning. Het werd geïntroduceerd in Editor's Draft 1 van de CSS Selectors Level 4 Specification. Dat betekent dat de dingen nog steeds vorm krijgen, waardoor het voor browsers een beetje vroeg is om rond een concept als dit te scharen.
Dat gezegd hebbende, we hebben geweldige browserondersteuning in de vorm van :matches(met vendor-prefixed :anyenkele hiaten opvullen) voor de algemene functionaliteit. En, natuurlijk, :notis een andere pseudo-klasse die kan helpen bij het matchen.
Wat interessant is om op te merken, is dat het :is()werd geïntroduceerd en daarna :matcheswerd geïntroduceerd :any. Het is een beetje zoals :anywordt vervangen door :matchesdie wordt vervangen door :is(), met de details te veranderen langs de weg. Altijd netjes om te zien hoe deze dingen evolueren.
Om maximale ondersteuning voor "Matches-Any" te krijgen, moet een combinatie van de historische namen worden gebruikt, aangezien het omgaan met de browser momenteel een mengelmoes is van voorvoegsels van leveranciers en experimentele instellingen.
/* 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 ( /*… */ )Zie de Pen-voorbeelden van: elke pseudo-klasse door CSS-Tricks (@ css-tricks) op CodePen.
Verwant
:matches():not():any-link()
Middelen
- De blogpost van David Baron legt uit waarom hij
:-moz-anyondersteuning aan Gecko toevoegde - MDN-documentatie
- CSS Selectors Level 4 Specification (Editor's Draft 1): De specificatie die de
:is()pseudo-class introduceert . - Maak kennis met de Pseudo Class Selectors: CSS-Tricks post waarin wordt beschreven hoe pseudo-klassen werken.
