1. Vorwort und allgemeine Info
CSS hat ja allgemein mächtig zugelegt und in den letzten Jahren sind weitere Eigenschaften dazugekommen, die mir teilweise schon sehr lange (Jahrzehnte) gefehlt haben. Zum Beispiel ist die Pseudo-Klasse
:is() ein probates Mittel um die elendigen redundanten Selektoren mal ein wenig eindämmen (reduzieren) zu können. Mir persönlich geht das aber noch nicht weit genug und speziell auf dem Gebiet wäre Nested CSS eine willkommene Lösung.Wem das jetzt aus dem Stand erstmal nichts sagt, hier ein Beispiel. Ich habe mir dazu bewusst die Kirk-Toggles ausgesucht, weil diese von mehreren Entwicklern hier auf .de eingesetzt werden und in mindestens 31 Erweiterungen integriert wurden. Somit hat das schon einige Verbreitung und ist gut geeignet als Anschauungsobjekt.
Klassische Notation:
Code: Alles auswählen
.toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 38px;
height: 17px;
position: relative;
border-radius: 50px;
cursor: pointer;
font-family: FontAwesome;
transition: background-color 0.2s;
}
.toggle:before {
position: absolute;
width: 14px;
height: 13px;
background-color: #ffffff;
top: 2px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
left: 22px;
content: "\f00d";
transition: 0.2s;
}
.toggle,
.toggle:hover,
.toggle:focus {
background-color: #cccccc;
border: none;
color: #000000;
}
.toggle:checked {
background-color: #3b87ab;
}
.toggle:checked:before {
left: 2px;
content: "\f00c";
}
Code: Alles auswählen
.toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 38px;
height: 17px;
position: relative;
border-radius: 50px;
cursor: pointer;
font-family: FontAwesome;
transition: background-color 0.2s;
&,
&:hover,
&:focus {
background-color: #cccccc;
border: none;
color: #000000;
}
&:before {
position: absolute;
width: 14px;
height: 13px;
background-color: #ffffff;
top: 2px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
left: 22px;
content: "\f00d";
transition: 0.2s;
}
&:checked {
background-color: #3b87ab;
&:before {
left: 2px;
content: "\f00c";
}
}
}
Die wohl wichtigste und direkt sichtbare neue Eigenschaft bei der verschachtelten Variante: keine redundanten Selektoren mehr. Es gibt nur noch einen primären Selektor, auf dessen Basis alle weiteren Selektoren durch das Symbol
& abgeleitet werden. Das hat auch den Vorteil, dass bei einer individuellen Integration in eigene Projekte der Klassen-Name nicht an zig Stellen geändert werden muss, sondern nur noch an einer. Bei den Kirk-Toggles ist das also nur 1 Selektor der geändert werden muss, keine 7 mehr.Des Weiteren ist diese Notation deutlich Objekt-orientierter, weil zusammengehörige Regeln auch wie ein Objekt wahrgenommen werden können. Das kann gerade bei grossen CSS Dateien eine Verbesserung in Sachen Übersicht bewirken. Für mich (als Programmierer) ist die verschachtelte Variante jedenfalls sehr ansprechend. Passt ausserdem gut zu meinem Drang, alles strukturieren zu wollen. ^^
Wenn man sein bestehendes CSS zum ersten Mal auf Nested umstellt, ist das auch mental eine gehörige Umstellung.
Man muss sich erst an diese Darstellung/Notation gewöhnen.2. Einführung und Unterstützung
Eingeführt wurde das 2023 und wurde Ende 2023 bereits von den wichtigsten Browsern unterstützt. 2024 kam noch die Eigenschaft dazu, dass man den Verschachtelungsoperator
& teilweise auch weglassen kann und die noch fehlenden Browser zogen ebenfalls nach, was Unterstützung allgemein angeht. Laut "Can I use" sieht die Situation bezüglich Unterstützung aktuell so aus:https://caniuse.com/css-nesting
Die Browser die da hinterherhinken, sind laut meiner Recherche chinesische Smartphone Web Browser.
3. Lagerfeuer
Jetzt zu meinem eigentlichen Anliegen: Setzt das jemand schon bei einem Style oder Ext ein? Erfahrungen? Meinungen?
