Gott bin ich lustig.
Immer wenn wir ziemlich repetitive Selektoren haben, die einen gemeinsamen Elternteil haben, ist das wahrscheinlich ein Ort, an dem wir den :is() Pseudoselektor verwenden können.
Holger Bartel demonstriert dies so
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
font-size: 20px;
}Wird zu
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
font-size: 20px;
}
Adam Argyle hat es so demonstriert
:is()-Selektor 🎉
der Nachfolger von :any() und :matches()Ein kleiner Vorgeschmack auf unseren Vortrag: Hier ist ein schickes GIF, das ich mit XD erstellt habe und das zeigt, was die :is()-Selektorsyntax leisten kann. Freut euch auf den Chrome Dev Summit, Leute! https://#/0r2CcUx9Hv pic.twitter.com/wSuGOsDLvZ
— Adam Argyle (@argyleink) 7. November 2019
MDN hat eine etwas dramatischere Version
ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
list-style-type: square;
}:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
list-style-type: square;
}Es ist weniger Code und leichter nachzuvollziehen.
Kezz Bracey merkt an, dass die Kombination mit :not() auch gut funktionieren kann.
:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
font-weight: 400;
}Die Browserunterstützung kommt gerade erst in Gang und das Polyfilling ist schwierig, daher sind wir noch nicht ganz auf dem Niveau, dass es eine Selbstverständlichkeit für den täglichen Gebrauch ist. Ich wette, das wird nicht mehr lange dauern.
Tolle Demonstration, ich verstehe :is() jetzt total! Es ist ein zusätzlicher Aufwand, wenn man einen Compiler verwendet, aber für reines CSS wäre dies ein großer Vorteil für die Lesbarkeit.
Ich habe Adams Tweet damals gesehen, aber nicht verstanden, was :is() macht, und selbst hier helfen all diese Beispiele nicht viel. Ich verstehe ernsthaft nicht, wie
:is(section, article, aside, nav):is(section, article, aside, nav) {
font-size: 20px;
}
dem gezeigten Code entspricht! Können Sie bitte im Detail erklären, als würden Sie es jemandem erklären, der dieses Konzept zum allerersten Mal hört. Danke
Hier ist ein vereinfachtes Beispiel
section section h1, section article h1 { ... }ist dasselbe wiesection *:is(section, article) { ... }Es ist also im Grunde dasselbe wie eine ODER-Anweisung. (Beachten Sie auch, dass ich ein
*hinzugefügt habe, um das Beispiel klarer zu machen.)Fehlt nicht h1?
Heute etwas Neues gelernt. Wusste nicht einmal von diesem CSS-Selektor. Danke für die schnellen und leicht verständlichen Beispiele.
Persönlich erinnere ich mich nicht daran, einen Selektor wie
:is()benötigt zu haben, während ich mehreren Fällen begegnet bin, in denen ein Selektor wie:has()wirklich nützlich sein könnte.Geht man vom MDN-Beispiel aus, wie performant ist
:is()im Vergleich zu einer Reihe expliziter Selektoren?Wie sieht es mit der Performance aus? Ist ":is" langsamer?
Ich denke, das fällt in die Kategorie "Mach dir keine Sorgen". Die Leistung von CSS-Selektoren ist fast nie ein großes Problem (ich habe sie in sagen wir 20 Jahren noch nie optimiert), es sei denn, man befindet sich in einer sehr, sehr intensiven DOM-Situation (z. B. beim Rendern von einer Million Knoten). MDN weist darauf hin, dass
:-moz-anyeine schlechte Leistung hatte, da es dasselbe war wie*, was ich persönlich wahlweise nutze, und dass:isdiese "schlechte" Leistung beheben soll.Das MDN-Beispiel könnte mit einem :is(ul, menu, dir) weiter vereinfacht werden
bedeutet im Grunde, dass alles innerhalb der Klammern übereinstimmt, es wird übereinstimmen / übersetzen zu
Es ist wie die
inArray()Funktion, aber für CSS.Wirklich tolle Sachen, die CSS verdient.
.item1,.item2{ color: “black” } Was ist der Unterschied? Ich verstehe es nicht.
Können Sie bitte im Detail erklären, als würden Sie es jemandem erklären, der dieses Konzept zum allerersten Mal hört.
Danke Chris für den Artikel.
Es erinnert mich daran, wie wir früher Platzhalter deklariert haben wie
Wenn wir alle browser-spezifischen Selektoren im selben Regelblock gruppiert hätten, wie
würde das den gesamten Block ungültig machen. :D
Schönes Feature übrigens, auch wenn ich SASS immer noch bevorzuge :)
Danke Chris! Ich fand es lustig, dass das Beispiel von MDN immer noch die drei Regeln definiert hatte und nicht nur dieses
Aber wenn man zur MDN-Seite durchklickt, wird dies explizit als langsam bezeichnet und davon abgeraten, :is() als letzten Selektor zu verwenden. Etwas, das ich wohl im Hinterkopf behalten muss.