:is() ist der aktuelle Name für die Pseudoklasse "Matches-Any" im CSS4-Arbeitsentwurf.
Ursprünglich wurde diese Pseudoklasse benannt :any()und mit begrenzter herstellerspezifischer Unterstützung implementiert:
/* Never actually worked */ :any(div, p) > em ( /*… */ )Der :matches()Pseudoklassenname "Matches-Any" wurde dann in früheren Versionen des CSS4-Arbeitsentwurfs geändert, wobei einige Browser zusätzliche (unvollständige) Unterstützung erhielten.
/* Sort of works */ :matches(div, p) > em ( /*… */ )Schließlich hat der aktuelle Arbeitsentwurf diese :is()Pseudoklasse in umbenannt , was derzeit in Browsern nicht unterstützt wird.
/* Will work in the future? */ :is(div, p) > em ( /*… */ )Das Ziel des Selektors "Matches Any" (mit all seinen Namen) besteht darin, das Schreiben komplexer Gruppierungen von Selektoren zu vereinfachen.
Syntax
/* 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; )Hey, ist das nicht wie CSS-Vorverarbeitung?
Das Vereinfachen von Selektoren mit :is()ähnelt in der Tat dem Umgang von CSS-Präprozessoren mit verschachtelten Regeln:
/* 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()! */Aber Vorsicht! Präprozessoren wie Sass "rollen" Ihre verschachtelten Regeln in einer Liste leicht verständlicher Selektoren ab. :is()wird Spezifitätsregeln etwas anders behandeln:
Die Spezifität ist interessant
Gemäß dem CSS4-Arbeitsentwurf:
Die Spezifität der Pseudoklasse: is () wird durch die Spezifität ihres spezifischsten Arguments ersetzt. Ein mit: is () geschriebener Selektor hat also nicht unbedingt eine äquivalente Spezifität wie der mit: is () geschriebene äquivalente Selektor.
Dies bedeutet, dass die Spezifität von :is()automatisch auf das spezifischste Element in der Liste der bereitgestellten Argumente aktualisiert wird:
/* 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-Unterstützung
Wir haben bereits früher darauf hingewiesen, haben aber :is()derzeit keine Browserunterstützung. Es wurde im Editor's Draft 1 der CSS Selectors Level 4 Specification eingeführt. Das bedeutet, dass die Dinge immer noch in Ordnung sind, so dass es für Browser etwas früh ist, sich um ein solches Konzept zu kümmern.
Wir haben jedoch eine hervorragende Browserunterstützung in Form von :matches(mit vom Hersteller vorangestelltem :anyAusfüllen einiger Lücken) für die allgemeine Funktionalität. Und natürlich :notist es eine weitere Pseudoklasse, die beim Matching helfen kann.
Interessant ist, dass :is()das eingeführt wurde, wonach :matcheses eingeführt wurde :any. Es :anyist so, als würde es ersetzt, durch :matchesdas ersetzt wird :is(), wobei sich die Details auf dem Weg ändern. Immer schön zu sehen, wie sich diese Dinge entwickeln.
Um maximale Unterstützung für "Matches-Any" zu erhalten, muss eine Mischung aus den historischen Namen verwendet werden, da die Browserbehandlung derzeit eine Ansammlung von Herstellerpräfixen und experimentellen Einstellungen ist.
/* 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 ( /*… */ )Siehe die Stiftbeispiele für: jede Pseudoklasse von CSS-Tricks (@ css-Tricks) auf CodePen.
verbunden
:matches():not():any-link()
Ressourcen
- David Barons Blog-Beitrag erklärt, warum er
:-moz-anyGecko unterstützt hat - MDN-Dokumentation
- CSS Selectors Level 4 Spezifikation (Editor's Draft 1): Die Spezifikation, die die
:is()Pseudoklasse einführt . - Lernen Sie die Pseudo-Klassen-Selektoren kennen: CSS-Tricks, in denen die Funktionsweise von Pseudo-Klassen beschrieben wird.