Erforschen der neuen CSS: IS () und: WO () Pseudoklasse

: is () und: wobei () leistungsstarke und syntaktische CSS-Pseudoklassen sind, die das Schreiben des Selektors vereinfachen und Spezifitätsprobleme lösen. 1.: IS () kann mehrere Selektoren gruppieren, den doppelten Code reduzieren und die ursprüngliche Spezifität beibehalten und für Szenarien geeignet sind, in denen Lesbarkeit und klare Struktur erforderlich sind. 2.: WO () Syntax ähnelt der Funktion, aber ihre Spezifität ist immer Null, was sehr geeignet ist, Standardstile festzulegen, die leicht überschrieben werden können und häufig für das Entwerfen von Systemen oder Komponentenbibliotheken verwendet werden. 3.. Beide unterstützen komplexe Selektoren und verschachtelte Strukturen, um die Wartbarkeit der Code zu verbessern. 4. Der Browser unterstützt gut, moderne Browser sind weit verbreitet und die alte Umgebung kann allmählich verbessert werden. Die ordnungsgemäße Verwendung dieser beiden Pseudoklassen macht CSS flexibler, robuster und einfacher.

CSS hat sich mit der Einführung der :is() und :where() Pseudoklasse leise viel mächtiger geworden-und etwas eleganter-. Dies sind nicht nur syntaktischen Zucker; Sie lösen echte Schmerzpunkte beim Schreiben und Aufrechterhalten von CSS -Selektoren. Wenn Sie jemals lange Selektorlisten wiederholt oder mit bestimmten Problemen zu kämpfen haben, helfen diese beiden Pseudoklassen hier, um zu helfen.

Lassen Sie uns aufschlüsseln, was sie tun, wie sie anders sind und warum Sie sie verwenden möchten.

Was :is() tut (und warum es nützlich ist)

:is() ist eine CSS-Pseudo-Klasse, die eine Selektorliste enthält und jedem Element entspricht, das mindestens einen der Selektoren darin passt. Stellen Sie sich dies als einen Weg zu Gruppelektoren vor, ohne dasselbe Muster immer wieder zu wiederholen.

Vorher :is() , Sie könnten so etwas schreiben:

 .Kard: schwebe,
SideBar: Hover,
.nav-link: schwebe,
.Modal-Header: Hover {
  Deckkraft: 0,8;
}

Das ist wiederholt und schwer zu pflegen. Mit :is() können Sie es vereinfachen:

 : IS (.Card,. SideBar, .nav-Link, .modal-Header): Hover {
  Deckkraft: 0,8;
}

Dies ist sauberer, einfacher zu lesen und viel einfacher zu aktualisieren. Fügen Sie einfach eine Klasse aus der Liste in Inside hinzu oder entfernen Sie :is() .

Es funktioniert auch mit komplexeren Selektoren:

 : IS (Header, Main, Fußzeile) H1 {
  Schriftgröße: 2Rem;
}

Dies wendet den Stil auf h1 -Elemente innerhalb header , main oder footer an.

Schlüsselvorteil :: :is() folgt den normalen spezifischen Regeln - die Spezifikation wird vom spezifischsten Selektor in der Liste bestimmt. Wenn also einer der Elemente in :is() #id ist, wird der gesamte Selektor hochspezifisch.

Wie :where() ist anders (und wann man es benutzt)

:where() sieht und funktioniert fast genau wie :is() - es dauert auch eine Liste von Selektoren und entspricht jedem, die gelten. Aber hier ist der kritische Unterschied :

:where() hat immer keine Spezifität .

Das heißt, egal was Sie drinnen haben :where() , fügt es dem Selektor kein bestimmtes Gewicht hinzu.

Dies ist unglaublich nützlich für Standardstile oder Reset-/Dienstprogrammmuster , in denen Sie Basisstile definieren möchten, die später leicht zu überschreiben sind.

Beispielsweise kann eine UI -Bibliothek die Standard -Tastenstile festlegen:

 : WO (Button, [rollen = "Button"], .btn) {
  Polsterung: 0,5EM 1EM;
  Grenze: 1PX Solid #CCC;
  Hintergrund: #f0f0f0;
  Border-Radius: 4px;
}

Weil :where() keine Spezifität hat, kann eine einfache Klassenregel später im CSS sie leicht überschreiben:

 .Primary-Button {
  Hintergrund: Blau;
  Farbe: weiß;
}

Ohne :where() müssten Sie oft verwenden !important oder mit hoher Spezifikation (wie button.btn.primary ), was chaotisch wird.

Verwenden :where() , wenn Sie flexible, überschreibungsfreundliche Stile wünschen-insbesondere in Designsystemen oder Komponentenbibliotheken.

Praktische Beispiele und Anwendungsfälle in der realen Welt

1. Vereinfachung verschachtelter Schwebezustände

Sie möchten, dass ein direktes Kind eines Containers auf Hover reagiert:

 .Container: IS (.Card, .Item, .post): Hover {
  Transformation: Translatey (-2px);
  Box-Shadow: 0 4px 8px RGBA (0,0,0,0,1);
}

Sauber und skalierbar.

2. Styles ohne Kampfspezifität zurückzusetzen

Verwendung :where() in einer Reset- oder Basisschicht:

 : wo (ul, ol) {
  Rand: 0;
  Polsterung: 0;
  Listenstil: Keine;
}

Jetzt können Sie eine bestimmte Liste später stylen, ohne sich Gedanken darüber zu machen, dass Sie durch Zurücksetzen von Regeln überschrieben werden.

3.. Reaktionsfreudige Dienstprogrammklassen

Kombinieren Sie sich mit Utility-First-Ansätzen:

 : Wo (.md \\: Hover: Hover) {
  / * Bewerben Sie sich nur dann, wenn .md: schweben Sie verwendet, bekämpft aber nicht gegen andere Stile */////////
}

HINWEIS: Sie müssen dem Dickdarm mit \\: in Klassennamen entkommen.

Browserunterstützung und Kompatibilität

Beide :is() und :where() werden in modernen Browsern weitgehend unterstützt :

• :is() - unterstützt in Chrome 88, Firefox 78, Safari 13.4
• :where() - Chrome 88, Firefox 78, Safari 14.1

Bei älteren Browsern müssen Sie möglicherweise bei herkömmlichen Selektoren bleiben oder Build -Tools verwenden, mit denen diese diese erweitern können (obwohl noch kein zuverlässiger Autoprefixer vorhanden ist für :is() / :where() ).

Wenn Sie auf ältere Umgebungen abzielen, sollten Sie sie progressiv verwenden - sie scheitern lautlos, sodass Fallbacks bereitgestellt werden können.

Zusammenfassung :is() vs :where()

Verwendung :is() Wenn Sie sauberere CSS erhalten möchten, ohne wie spezifische Funktionen zu ändern.

Verwenden :where() , wenn Sie Standardeinstellungen festlegen möchten, die nicht später im Weg stehen.

Beide machen CSS expressiver und weniger zerbrechlicher. Und ehrlich gesagt, wenn Sie sie verwenden, werden Sie sich fragen, wie Sie ohne sie gelebt haben.

Grundsätzlich sind sie kleine Funktionen mit großer Wirkung.

Das obige ist der detaillierte Inhalt vonErforschen der neuen CSS: IS () und: WO () Pseudoklasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!