:is() a „Matches-Any” álosztály jelenlegi neve a CSS4 munkadokumentumban.
Eredetileg ezt az álosztályt nevezték el, :any()és korlátozott gyártóspecifikus támogatással valósították meg:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Ezután a „Matches-Any” :matches()álnévnévre változott a CSS4 munkavázlat korai verzióiban, néhány (hiányos) támogatást nyújtva néhány böngészőnek.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Végül a jelenlegi munka tervezet átnevezte ezt az álosztályt :is(), amely jelenleg nem támogatott a böngészőkben.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )A „Matches Any” választó (az összes nevével együtt) célja, hogy a kiválasztók összetett csoportosítását megkönnyítse az írás.
Szintaxis
/* 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é, ez nem olyan, mint a CSS előfeldolgozása?
A szelektorok egyszerűsítése :is()valóban hasonló ahhoz, ahogy a CSS előfeldolgozók kezelik a beágyazott szabályokat:
/* 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()! */De vigyázz! Az előfeldolgozók, akárcsak Sass, a beágyazott szabályokat „könnyen kibontják” a könnyen érthető kiválasztók listájába. :is()kicsit másképp fogja kezelni a specifikussági szabályokat:
A konkrétság érdekes
A CSS4 munkadokumentuma szerint:
Az: is () álosztály sajátosságát a legspecifikusabb érvének sajátossága váltja fel. Így a: is () -vel írt szelektor nem feltétlenül rendelkezik ekvivalens specifitással, mint a: is () nélkül írt ekvivalens szelektor.
Ez azt jelenti, hogy a specifikáció :is()automatikusan frissül a legpontosabb elemre a megadott argumentumlistában:
/* 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`! */Böngésző támogatás
Erre már korábban utaltunk, de :is()jelenleg nincs böngészőtámogatás. Bevezetésre került a CSS Selectors 4. szintű specifikáció szerkesztőjének 1. tervezetébe. Ez azt jelenti, hogy a dolgok még mindig formálódnak, így kissé korán válik a böngészők köré egy ilyen koncepció.
Ez azt jelenti, hogy nagyszerű böngészőtámogatással rendelkezünk :matches(a gyártó által előtagolt :anyhiányosságok pótlásával) az általános funkcionalitás érdekében. És természetesen :notegy másik ál-osztály, amely segíthet az illesztésben.
Érdekes megjegyezni, hogy :is()ezt követően :matchesvezették be :any. Ez olyan, mintha :anyhelyébe lépne az, :matchesamely helyébe a következő lépne :is(), miközben a részletek változnak. Mindig ügyes, hogy lássa, hogyan alakulnak ezek a dolgok.
A „Matches-Any” maximális támogatásához a történeti nevek keveréke szükséges, mivel a böngésző kezelése jelenleg a szállító előtagjainak és a kísérleti beállításoknak a sokasága.
/* 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 ( /*… */ )Lásd a tollal kapcsolatos példákat: bármilyen CSS-Tricks általi osztály (@ css-tricks) a CodePen-en.
Összefüggő
:matches():not():any-link()
Erőforrások
- David Baron blogbejegyzése, amely elmagyarázza, miért adott
:-moz-anytámogatást Geckónak - MDN dokumentáció
- CSS Selectors 4. szintű specifikáció (a szerkesztő 1. tervezete): Az
:is()álosztályt bevezető specifikáció . - Ismerje meg az álosztályválasztókat: a CSS-Tricks poszt bemutatja az álosztályok működését.