:is() on CSS4 tööprojekti pseudoklassi “Matches-Any” praegune nimi.
Algselt nimetati seda pseudoklassi :any()ja seda rakendati piiratud tootjapõhise toega:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Seejärel muudeti pseudoklassi nimi „Matches-Any” :matches()CSS4 töövormi varasemates versioonides, lisades mõnele brauserile täiendavat (mittetäielikku) tuge.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Lõpuks on praegune töökavand selle pseudoklassi ümber nimetanud :is(), mida brauserites praegu ei toetata.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Valija „Sobib mis tahes” (koos kõigi nimedega) eesmärk on muuta keerulised selektorite rühmitused kirjutamise lihtsamaks.
Süntaks
/* 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, kas see pole nagu CSS eeltöötlus?
Selektorite lihtsustamine :is()on tõepoolest sarnane sellega, kuidas CSS-i eeltöötlejad pesastatud reegleid käsitlevad:
/* 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()! */Kuid ole ettevaatlik! Eeltöötlejad, nagu ka Sass, rullivad teie pesastatud reeglid hõlpsasti mõistetavate valijate nimekirja. :is()käsitleb spetsiifilisuse reegleid veidi erinevalt:
Konkreetsus on huvitav
CSS4 tööprojekti kohaselt:
: On () pseudoklassi spetsiifilisus asendatakse selle kõige konkreetsema argumendi spetsiifilisusega. Seega ei ole valikul, mis on kirjutatud: is () -ga, tingimata ekvivalentne spetsiifilisus ilma valemiga is is kirjutatud ekvivalentsega.
See tähendab, et spetsiifilisus :is()täiendatakse automaatselt esitatud argumentide loendis kõige täpsemaks üksuseks:
/* 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`! */Brauseri tugi
Me vihjasime sellele varem, kuid praegu :is()pole brauserituge. See tutvustati CSS-i selektorite 4. taseme spetsifikatsiooni redaktori 1. mustandis. See tähendab, et asjad kujunevad endiselt välja, mistõttu on brauseritel sellise kontseptsiooni ümber koondumine veidi vara.
See tähendab, et meil on üldise funktsionaalsuse jaoks suurepärane brauseritugi :matches(koos müüja eesliitega :anytäidetud mõned lüngad). Ja loomulikult :noton see veel üks pseudoklass, mis aitab sobitada.
Huvitav on see, et see :is()võeti kasutusele pärast :matchesseda :any. See on umbes nagu :anyasendatakse sellega, :matchesmis asendatakse :is(), kusjuures detailid muutuvad. Alati puhas, et näha, kuidas need asjad arenevad.
Rakenduse „Matches-Any” maksimaalse toe saamiseks on vaja kasutada ajalooliste nimede segu, kuna brauseri käsitsemine on praegu tarnijate eesliidete ja katseliste seadete hodgepodge.
/* 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 ( /*… */ )Vaadake pliiatsi näiteid: mis tahes CSS-Tricksi (@ css-tricks) pseudoklassi kohta CodePenis.
Seotud
:matches():not():any-link()
Ressursid
- David Baroni blogipostitus, milles selgitati, miks ta
:-moz-anyGeckole tuge lisas - MDN dokumentatsioon
- CSS-i valijate 4. taseme spetsifikatsioon (redaktori mustand 1): spetsifikatsioon, mis tutvustab
:is()pseudoklassi. - Tutvuge pseudoklasside valijatega: CSS-Tricksi postitus kirjeldab pseudoklasside toimimist.