Eine unserer bevorzugten CSS-Präprozessorfunktionen ist jetzt in die Sprache integriert: die Stilregeln für Verschachtelungen.
Vor der Verschachtelung musste jeder Selector explizit und unabhängig von miteinander kommunizieren. Dies führt zu Wiederholungen, zu großen Mengen an Stylesheets und zu einer Streuung des Authorings. Nutzererfahrung.
.nesting {
color: hotpink;
}
.nesting > .is {
color: rebeccapurple;
}
.nesting > .is > .awesome {
color: deeppink;
}
Nach der Verschachtelung können Selektoren und zugehörige Stilregeln können gruppiert werden.
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
Das Verschachteln hilft Entwicklern, da Selektoren nicht wiederholt werden müssen.
Stilregeln für verwandte Elemente Es kann auch dabei helfen, Stile an die
HTML, auf das sie ausgerichtet sind. Wenn die Komponente .nesting im vorherigen Beispiel
aus dem Projekt entfernt haben, können Sie die gesamte Gruppe löschen, anstatt
für zugehörige Selektorinstanzen.
Nesting kann dir bei Folgendem helfen: – Organisation - Dateigröße verringern – Refaktorierung
Die Verschachtelung ist ab Chrome 112 verfügbar und kann auch in der technischen Vorschau von Safari 162 getestet werden.
Erste Schritte mit der Verschachtelung von Preisvergleichsportalen
Im weiteren Verlauf dieses Beitrags wird die folgende Demo-Sandbox verwendet, um die Auswahl zu visualisieren. In diesem Standardzustand ist nichts ausgewählt und alles sichtbar ist. Durch die Auswahl der Formen und Größen können Sie die Syntax in Aktion zu erleben.
In der Sandbox befinden sich Kreise, Dreiecke und Quadrate. Einige sind klein oder mittelgroß
oder groß. Andere sind blau, rosa oder lila. Sie befinden sich alle im .demo
enthaltendes Element. Im Folgenden sehen Sie eine Vorschau der HTML-Elemente, die Sie in Zukunft verwenden werden.
Ausrichtung.
<div class="demo">
<div class="sm triangle pink"></div>
<div class="sm triangle blue"></div>
<div class="square blue"></div>
<div class="sm square pink"></div>
<div class="sm square blue"></div>
<div class="circle pink"></div>
…
</div>
Beispiele für Verschachtelungen
Mithilfe von CSS-Verschachtelungen können Sie Stile für ein Element im Kontext von anderen Selector.
.parent {
color: blue;
.child {
color: red;
}
}
In diesem Beispiel ist der Klassenselektor .child in
.parent-Klassenselektor Das bedeutet, dass der verschachtelte .child-Selektor
gelten nur für Elemente, die untergeordnete Elemente von Elementen mit der Klasse .parent sind.
Dieses Beispiel könnte alternativ mit dem Symbol & geschrieben werden, um explizit
gibt an, wo die übergeordnete Klasse platziert werden soll.
.parent {
color: blue;
& .child {
color: red;
}
}
Diese beiden Beispiele sind funktional gleichwertig und der Grund, warum Ihnen Optionen zur Verfügung stehen. werden in diesem Artikel anhand von weiterführenden Beispielen verständlicher.
Kreise auswählen
In diesem ersten Beispiel müssen Stile hinzugefügt werden, um nur die Bereiche in der Demo sehen.
Ohne Verschachtelung gilt für CSS derzeit Folgendes:
.demo .circle {
opacity: .25;
filter: blur(25px);
}
Bei Verschachtelungen gibt es zwei Möglichkeiten:
/* & is explicitly placed in front of .circle */
.demo {
& .circle {
opacity: .25;
filter: blur(25px);
}
}
oder
/* & + " " space is added for you */
.demo {
.circle {
opacity: .25;
filter: blur(25px);
}
}
Das Ergebnis. Alle Elemente in .demo mit einer .circle-Klasse sind
unkenntlich gemacht und nahezu unsichtbar:
<ph type="x-smartling-placeholder">Dreiecke und Quadrate auswählen
Dazu müssen mehrere verschachtelte Elemente ausgewählt werden. Dies wird auch als Gruppenauswahl bezeichnet.
Ohne Verschachtelung gibt es bei CSS derzeit zwei Möglichkeiten:
.demo .triangle,
.demo .square {
opacity: .25;
filter: blur(25px);
}
oder mit :is()
/* grouped with :is() */
.demo :is(.triangle, .square) {
opacity: .25;
filter: blur(25px);
}
Bei Verschachtelung gibt es zwei Möglichkeiten:
.demo {
& .triangle,
& .square {
opacity: .25;
filter: blur(25px);
}
}
oder
.demo {
.triangle, .square {
opacity: .25;
filter: blur(25px);
}
}
Das Ergebnis. Nur .circle-Elemente verbleiben innerhalb von .demo:
<ph type="x-smartling-placeholder">Große Dreiecke und Kreise auswählen
Für diese Aufgabe ist ein compound Selector erforderlich, wobei Für Elemente müssen beide Klassen vorhanden sein, damit sie ausgewählt werden können.
Ohne Verschachtelung gilt für CSS derzeit Folgendes:
.demo .lg.triangle,
.demo .lg.square {
opacity: .25;
filter: blur(25px);
}
oder
.demo .lg:is(.triangle, .circle) {
opacity: .25;
filter: blur(25px);
}
Bei Verschachtelung gibt es zwei Möglichkeiten:
.demo {
.lg.triangle,
.lg.circle {
opacity: .25;
filter: blur(25px);
}
}
oder
.demo {
.lg {
&.triangle,
&.circle {
opacity: .25;
filter: blur(25px);
}
}
}
Das Ergebnis, alle großen Dreiecke und Kreise sind in .demo ausgeblendet:
<ph type="x-smartling-placeholder">Profitipp mit zusammengesetzten Selektoren und Verschachtelung
Das Symbol & ist hier hilfreich, da es explizit zeigt, wie verschachtelte Einträge verknüpft werden
Selektoren. Dazu ein Beispiel:
.demo {
.lg {
.triangle,
.circle {
opacity: .25;
filter: blur(25px);
}
}
}
Die Verschachtelung ist zwar sinnvoll, aber die Ergebnisse stimmen nicht mit den Elementen überein, die Sie erwarten.
Der Grund dafür ist, dass ohne &, um das gewünschte Ergebnis von .lg.triangle,
.lg.circle-Zusammensetzung anzugeben, das tatsächliche Ergebnis .lg .triangle, .lg
.circle wäre. Nachfolgeselektoren.
Alle Formen außer den rosafarbenen auswählen
Diese Aufgabe erfordert eine negationsfunktionale Pseudoklasse, bei der Elemente nicht die den angegebenen Selector haben.
Ohne Verschachtelung gilt für CSS derzeit Folgendes:
.demo :not(.pink) {
opacity: .25;
filter: blur(25px);
}
Bei Verschachtelung gibt es zwei Möglichkeiten:
.demo {
:not(.pink) {
opacity: .25;
filter: blur(25px);
}
}
oder
.demo {
& :not(.pink) {
opacity: .25;
filter: blur(25px);
}
}
Das Ergebnis. Alle Formen, die nicht rosa sind, sind in .demo ausgeblendet:
<ph type="x-smartling-placeholder">Präzision und Flexibilität mit &
Angenommen, Sie möchten ein Targeting auf .demo mit dem Selektor :not() vornehmen. & ist erforderlich für
dass:
.demo {
&:not() {
...
}
}
Dabei werden .demo und :not() zu .demo:not() zusammengefügt, im Gegensatz zum vorherigen
Beispiel, wofür .demo :not() erforderlich war. Diese Erinnerung ist sehr wichtig,
und möchten eine :hover-Interaktion verschachteln.
.demo {
&:hover {
/* .demo:hover */
}
:hover {
/* .demo :hover */
}
}
Weitere Beispiele für Verschachtelungen
Die CSS-Spezifikation für Verschachtelungen lautet noch mehr Beispiele. Weitere Informationen zur Syntax behandelt, deckt sie ein breites Spektrum an gültigen und ungültigen Beispielen ab.
In den nächsten Beispielen wird kurz eine CSS-Verschachtelungsfunktion vorgestellt, um Ihnen zu helfen, die Bandbreite der damit verbundenen Funktionen zu verstehen.
@media verschachteln
Es kann sehr ablenken, wenn Sie in einen anderen Bereich des Stylesheets wechseln, Bedingungen für Medienabfragen, die einen Selektor und seine Stile ändern. Diese Ablenkung mit der Möglichkeit, die Bedingungen direkt im Kontext zu verschachteln.
Aus Gründen der Einfachheit der Syntax, wenn die verschachtelte Medienabfrage nur die Stile ändert für den aktuellen Selektorkontext festgelegt ist, kann eine minimale Syntax verwendet werden.
.card {
font-size: 1rem;
@media (width >= 1024px) {
font-size: 1.25rem;
}
}
Die explizite Verwendung von & kann auch verwendet werden:
.card {
font-size: 1rem;
@media (width >= 1024px) {
&.large {
font-size: 1.25rem;
}
}
}
In diesem Beispiel sehen Sie die erweiterte Syntax mit & und gleichzeitig für .large
Karten, um zu zeigen, dass weitere Verschachtelungsfunktionen weiterhin funktionieren.
Weitere Informationen zum Verschachteln von @rules
Überall verschachtelt
Alle Beispiele bis zu diesem Punkt wurden fortgesetzt oder an einen vorherigen Kontext angehängt. Bei Bedarf können Sie den Kontext komplett ändern oder neu anordnen.
.card {
.featured & {
/* .featured .card */
}
}
Das Symbol & steht für einen Verweis auf ein Selektorobjekt (kein String) und
kann an einer beliebigen Stelle in einem verschachtelten Selector platziert werden. Sie können sogar mehrere
Mal:
.card {
.featured & & & {
/* .featured .card .card .card */
}
}
Dieses Beispiel sieht zwar etwas nutzlos aus, aber es gibt sicherlich Szenarien, in denen einen Selektorkontext wiederholen zu können.
Beispiele für ungültige Verschachtelungen
Einige Szenarien für die Verschachtelungssyntax sind ungültig und könnten Sie überraschen. wenn Sie in Präprozessoren verschachtelt haben.
Verschachtelung und Verkettung
Viele Namenskonventionen bei CSS-Klassen hängen davon ab, dass Verschachtelungen fügt Selektoren wie Strings hinzu. Dies funktioniert nicht bei CSS-Verschachtelungen, da Die Selektoren sind keine Strings, sondern Objektverweise.
.card {
&--header {
/* is not equal to ".card--header" */
}
}
Eine ausführlichere Erläuterung finden Sie in der Spezifikation.
Beispiel für komplizierte Verschachtelung
Verschachtelung in Auswahllisten und :is()
Betrachten Sie den folgenden verschachtelten CSS-Block:
.one, #two {
.three {
/* some styles */
}
}
Dies ist das erste Beispiel, das mit einer Selektorliste beginnt und dann weiter verschachtelt wird. Vorherige Beispiele wurden nur mit einer Auswahlliste beendet. In diesem Verschachtelungsbeispiel gibt es nichts ungültiges, aber es gibt ein möglicherweise kompliziertes Implementierungsdetail bei der Verschachtelung in Selektorlisten, insbesondere in solchen, die einen ID-Selektor enthalten.
Damit die Verschachtelung funktioniert, wird jede Selektorliste, die nicht die innerste Verschachtelung ist, vom Browser mit :is() umschlossen. Durch dieses Wrapping wird die Gruppierung der Selektorliste innerhalb aller erstellten Kontexte beibehalten. Der Nebeneffekt dieser Gruppierung, :is(.one, #two), besteht darin, dass sie die Spezifität des höchsten Werts innerhalb der Selektoren innerhalb der Klammern übernimmt. So funktioniert :is() immer, es könnte jedoch überrascht sein, wenn Sie die Verschachtelungssyntax verwenden, da diese nicht genau dem entspricht, was erstellt wurde. Der Trick im Überblick: Verschachtelungen mit IDs und Auswahllisten können zu Selektoren mit sehr hoher Spezifität führen.
Um das schwierige Beispiel kurz zusammenzufassen, wird der vorherige Verschachtelungsblock so auf das Dokument angewendet:
:is(.one, #two) .three {
/* some styles */
}
Achten Sie auf die Verschachtelung oder bringen Sie Ihren Linters bei, gewarnt zu werden, wenn sie in einer Selektorliste verschachteln, die einen ID-Selektor verwendet, ist die Spezifität aller Verschachtelungen innerhalb dieser Selektorliste hoch.
Verschachtelung und Deklarationen kombinieren
Betrachten Sie den folgenden verschachtelten CSS-Block:
.card {
color: green;
& { color: blue; }
color: red;
}
Die Farbe von .card-Elementen ist blue.
Alle vermischten Stildeklarationen werden nach oben gezogen, als erstellt wurde, bevor eine Verschachtelung erfolgte. Weitere Informationen finden Sie in der Spezifikation.
Es gibt verschiedene Möglichkeiten, sie zu umgehen. Im Folgenden werden die drei Farbstile in & umschlossen, wodurch
behält die vom Autor beabsichtigte Kaskadenreihenfolge bei. Die Farbe von
.card-Elemente werden rot dargestellt.
.card {
color: green;
& { color: blue; }
& { color: red; }
}
Es hat sich sogar bewährt, alle Stile, die einer Verschachtelung folgen, mit einem & zu versehen.
.card {
color: green;
@media (prefers-color-scheme: dark) {
color: lightgreen;
}
& {
aspect-ratio: 4/3;
}
}
Funktionserkennung
Es gibt zwei großartige Möglichkeiten, CSS-Verschachtelungen mithilfe von Features zu erkennen: Verwenden Sie Verschachtelung oder
@supports, um zu prüfen, ob das Parsen von Verschachtelungsselektoren möglich ist.
Verschachtelung verwenden:
html {
.has-nesting {
display: block;
}
.no-nesting {
display: none;
}
}
mit @supports:
@supports (selector(&)) {
/* nesting parsing available */
}
Mein Kollege Bramus hat einen tollen Codepen, der diese Strategie verdeutlicht.
Fehlerbehebung mit den Chrome-Entwicklertools
Derzeit wird das Verschachteln in den Entwicklertools nur minimal unterstützt. Derzeit finden Sie Stile werden wie erwartet im Bereich "Stile" dargestellt, verfolgen jedoch die Verschachtelung und der vollständige Selektorkontext wird noch nicht unterstützt. Wir haben Design und Pläne, transparent und klar zu machen.
Für Chrome 113 ist eine zusätzliche Unterstützung für CSS-Verschachtelungen geplant. Bleib also dran!
Die Zukunft
CSS-Verschachtelung ist nur ab Version 1 verfügbar. Version 2 wird mehr syntaktischen Zucker und möglicherweise weniger Regeln auswendig lernen können. Es besteht ein Bedarf daran, dass das Parsen von Verschachtelungen oder knifflige Momente.
Verschachtelung ist eine große Verbesserung der CSS-Sprache. Hat Auswirkungen auf die Erstellung für fast jeden architektonischen Aspekt von CSS übernommen. Diese großen Auswirkungen müssen erforscht und verstanden werden, bevor Version 2 effektiv spezifiziert werden kann.
Zum Abschluss hier eine Demo.
das @scope, Verschachtelung und @layer zusammen verwendet. Das ist total aufregend!
