:is() on CSS4: n työluonnoksessa olevan "Matches-Any" -pseudoluokan nykyinen nimi.
Alun perin tämä pseudoluokka nimettiin :any()ja toteutettiin rajoitetulla toimittajakohtaisella tuella:
/* Never actually worked */ :any(div, p) > em ( /*… */ )”Matches-Any” :matches()-pseudoluokan nimi muutettiin sitten CSS4-työstöluonnoksen varhaisversioihin, joillekin selaimille annettiin lisätukea (puutteellinen).
/* Sort of works */ :matches(div, p) > em ( /*… */ )Lopuksi, nykyinen työluonnos on nimittänyt tämän pseudoluokan uudeksi :is(), jota selaimet eivät tällä hetkellä tue.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )”Matches Any” -valitsimen (kaikilla nimillä) tavoitteena on tehdä monimutkaisista valitsimien ryhmittelyistä helpompi kirjoittaa.
Syntaksi
/* 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; )Hei, eikö se ole kuin CSS-esikäsittely?
Selektorien yksinkertaistaminen :is()on todellakin samanlainen kuin CSS-esiprosessorit käsittelevät sisäkkäisiä sääntöjä:
/* 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()! */Mutta varokaa! Esiprosessorit, kuten Sass, "avaavat" sisäkkäiset säännöt helposti ymmärrettävien valitsimien luetteloksi. :is()käsittelee tarkkuutta koskevia sääntöjä hieman eri tavalla
Tarkkuus on mielenkiintoista
CSS4-työluonnoksen mukaan:
: On () pseudoluokan spesifisyys korvataan sen tarkimman argumentin spesifisyydellä. Siten valitsimella, joka kirjoitetaan: is (): lla, ei välttämättä ole yhtä spesifisyyttä kuin vastaavalla valitsimella, joka on kirjoitettu ilman: is ().
Tämä tarkoittaa, että spesifisyys :is()päivitetään automaattisesti tarkimmaksi kohteeksi tarjotun argumenttiluettelossa:
/* 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`! */Selaimen tuki
Viittasimme tähän aikaisemmin, mutta :is()sillä ei ole tällä hetkellä selaintukea. Se esiteltiin CSS Selectors Level 4 -määrittelyn toimittajan luonnoksessa 1. Tämä tarkoittaa sitä, että asiat muuttuvat edelleen, joten selainten on vähän varhaista kokoontua tällaisen konseptin ympärille.
Siitä huolimatta meillä on suuri selaintuki muodossa :matches(toimittajan etuliitteellä :anytäyttämällä joitain aukkoja) yleiselle toiminnallisuudelle. Ja tietysti :noton toinen näennäisluokka, joka voi auttaa sovittamisessa.
Mielenkiintoista on huomata, että se :is()otettiin käyttöön, minkä jälkeen :matchesse otettiin käyttöön :any. Se on eräänlainen kuin :anykorvataan jollain :matcheskorvataan :is(), yksityiskohdat muuttuvat matkan varrella. Aina siisti nähdä, miten nämä asiat kehittyvät.
"Matches-Any" -tuen maksimaalisen tuen saaminen edellyttää historiallisten nimien yhdistelmää, koska selaimen käsittely on tällä hetkellä toimittajien etuliitteiden ja kokeellisten asetusten joukko.
/* 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 ( /*… */ )Katso kynän esimerkkejä: CSS-Tricksin (@ css-tricks) pseudoluokista CodePenissä.
Liittyvät
:matches():not():any-link()
Resurssit
- David Baronin blogikirjoitus, jossa kerrotaan, miksi hän lisäsi
:-moz-anytukea Geckolle - MDN-dokumentaatio
- CSS-valitsinten tason 4 määrittely (toimittajan luonnos 1): määritys, joka esittelee
:is()näennäisluokan. - Tapaa Pseudo-luokan valitsimet: CSS-Tricks-viesti esittelee, miten pseudoluokat toimivat.