Eine kurze Analyse der CSS-Funktionen :is() und :where(), die bald in Browsern verfügbar sein werden

Vorschauversionen von Safari (Technology Preview 106) und Firefox (Version 78) unterstützen jetzt die neuen CSS-Pseudoklassen :is() und :where() . Die Implementierung von Chrome hinkt noch hinterher.

Verwenden Sie :is(), um Duplikate zu reduzieren

Sie können die Pseudoklasse :is() verwenden, um Duplikate aus einer Selektorliste zu entfernen.

/* vorher */
.embed .save-button:hover,
.attachment .speichern-button:hover {
  Deckkraft: 1;
}

/* nach */
:ist(.embed, .attachment) .Speichern-Button:hover {
  Deckkraft: 1;
}

Diese Funktion ist vor allem bei unverarbeitetem Standard-CSS-Code nützlich. Wenn Sie Sass oder einen ähnlichen CSS-Präprozessor verwenden, bevorzugen Sie möglicherweise die Verschachtelung.

Hinweis: Browser unterstützen auch die nicht standardmäßigen Pseudoklassen :-webkit-any() und :-moz-any() , die :is() ähnlich, aber restriktiver sind. WebKit hat :-webkit-any() im Jahr 2015 verworfen und Mozilla hat das User-Agent-Stylesheet von Firefox aktualisiert, um :is() anstelle von :-moz-any() zu verwenden.

Verwenden Sie :where(), um die Spezifität gering zu halten

:where() hat dieselbe Syntax und Funktionalität wie :is() . Der einzige Unterschied zwischen ihnen besteht darin, dass :where() die Spezifität des Gesamtselektors nicht erhöht (d. h. je höher die Spezifität einer CSS-Regel, desto höher wird ihr Stil übernommen).

Weder :where() noch eines ihrer Argumente tragen zur Spezifität des Selektors bei, die immer Null ist.

Diese Funktion ist für Stile nützlich, die leicht überschrieben werden sollen. Beispielsweise enthält das Basis-Stylesheet sanitize.css die folgende Stilregel, die die Standardfüllfarbe festlegt, wenn das Attribut <svg fill> fehlt:

svg:nicht([füllen]) {
  füllen: aktuelle Farbe;
}

Aufgrund der höheren Spezifität (B=1, C=1) können Websites diese Deklaration nicht mit einem einzelnen Klassenselektor (B=1) überschreiben und sind gezwungen, entweder !important hinzuzufügen oder die Spezifität des Selektors künstlich zu erhöhen (z. B. .share- icon.share-icon ).

.Teilen-Symbol {
  Füllung: blau; /* Nicht anwendbar aufgrund geringer Spezifität*/
}

CSS-Bibliotheken und Basis-Stylesheets können dieses Problem vermeiden, indem sie ihre Attributselektoren mit :where() umschließen, um die allgemeine Spezifität des Selektors niedrig zu halten (C=1).

/* bereinigen.css */
svg:wo(:nicht([füllen])) {
  füllen: aktuelle Farbe;
}

/* Autoren-Stylesheet */
.Teilen-Symbol {
  Füllung: blau; /* Aufgrund der hohen Spezifität anwendbar*/
}

Zusammenfassen

Dies ist das Ende dieses Artikels über CSS :is() und :where(), die in Browsern verfügbar sind. Weitere Browserinhalte zu CSS :is() und :where() finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!