Es ist Realität geworden. Wir können jetzt benutzerdefinierte Eigenschaften bzw. CSS Custom Properties nutzen!
Aber zuerst einmal beginnen wir mit einem schönen <h2>, gefolgt von einem guten <p> als kurze Zusammenfassung.
CSS Custom Properties oder benutzerdefinierte Eigenschaften
Oder: wie man in einem CSS-Stylesheet zaubert.
Benutzerdefinierte Eigenschaften in CSS sind ein „neues“ Konzept bei der Arbeit mit CSS-Stylesheets. Kurz und einfach gesagt geht es um die Nutzung von Variablen, die innerhalb des CSS-Dokuments und sogar aus Javascript heraus zugänglich sind – und zwar NATIV.
Warum „neu“ in Anführungszeichen? Nun, ihr kennt sicher CSS-Präprozessoren. Sie waren lange sehr angesagt, aber mit dem Aufkommen der Custom Properties und dem zunehmenden Support dieser neuen Eigenschaften durch die verschiedenen Browser sind sie früher oder später zum Verschwinden verurteilt. Am Ende des Beitrags findet ihr eine Tabelle zur Browser-Unterstützung, aber so viel vorab: Rund 70 % der Nutzer haben bereits einen Browser, der benutzerdefinierte Eigenschaften unterstützt.
CSS und benutzerdefinierte Eigenschaften
Um den Vorteil gegenüber einem herkömmlichen CSS-Stylesheet zu sehen, nehmen wir als Beispiel ein CSS-Stylesheet ohne Custom Properties und werden genau dasselbe anschließend mithilfe dieser Eigenschaften „übersetzen“.
Nehmen wir an, wir möchten für den body eine bestimmte Hintergrundfarbe festlegen, die wir später auch als Textfarbe in einer Ebene verwenden. Gleichzeitig nutzen wir die Textfarbe des body als Hintergrundfarbe dieser Ebene.
Die capa1 erhält ein padding von 20px. Genau denselben Wert bekommt der margin-top von capa2.
body{
background-color:#1b1b1b;
color:#fff;
}
.capa1{
padding:20px;
color:#1b1b1b;
background-color:#fff;
}
.capa2{
margin-top:20px;
}
Jetzt bilden wir dasselbe Beispiel nach, diesmal jedoch mit benutzerdefinierten Eigenschaften.
:root{
--color1:#1b1b1b;
--color2:#fff;
--mainSpacing:20px;
}
body{
background-color:var(--color1);
color:var(--color2);
}
.capa1{
padding:var(--mainSpacing);
color:var(--color1);
background-color:var(--color2);
}
.capa2{
margin-top:var(--mainSpacing);
}
Über :root deklarieren wir die Variablen, die im gesamten CSS-Dokument verfügbar sind. Mit dem doppelten Bindestrich — deklarieren wir eine Variable und ihren Wert. Um die deklarierten Variablen anschließend zu verwenden, nutzen wir var(–VARIABLE);.
Stellt euch nun vor, welchen Nutzen das in einem CSS-Stylesheet mit mehr als 1000 Codezeilen hat – und wie einfach es wird, Werte zu ändern. Wir müssen nur einen einzigen Wert anpassen, damit sich die Änderung im gesamten CSS-Dokument widerspiegelt.
Ein Schritt weiter
Oder auch zwei. Denn CSS Custom Properties ermöglichen uns Berechnungen, bedingte Operationen und Standardwerte, falls eine bestimmte Variable nicht definiert ist. Klingt nach Javascript, oder? All das machen wir aber direkt im CSS-Stylesheet.
Wir können addieren, multiplizieren, verschiedene Werte vergleichen und je nach Bedingung den einen oder anderen Wert anwenden.
.caja{
/*Falls variable1 nicht deklariert ist, werden 10px angewendet*/
margin-top:var(--variable1, 10px);
/*Wir können Variablen auch nutzen, um einen Standardwert festzulegen*/
padding-top:var(--variable1,var(--variable2));
/*Wir können addieren, subtrahieren, multiplizieren und dividieren (*wichtig: Leerzeichen bei Addition und Subtraktion)*/
padding-top:calc(var(--variable1) + 10px);
height:calc(var(--variable1) - 5px);
line-height:calc(var(--variable1) * 2);
width:calc((var(--variable1) - 5px)/2);
}
Weitere Beispiele:
:root{
/*Wir können Text erstellen, der später in ein :before eingefügt wird*/
--texto:"Klicken zum Anzeigen";
}
.caja:before{
content:var(--text);
}
.caja2:before{
/*Wir können nach unserer deklarierten Variable weiteren Text hinzufügen (zum Beispiel einen Link zu einem Projekt)*/
content:var(--text)' unser komplettes Projekt';
}
.caja2:before{
/*Jetzt verwenden wir es für einen Link zu einer Nachricht*/
content:var(--text)' unsere Nachricht';
}
Bedingtes Beispiel:
:root{
/*Darauf können wir per Javascript zugreifen*/
--variableCond: if(x > 5) this.width = 10;
}
Browser-Unterstützung
Wie ihr seht, unterstützen es praktisch alle Browser … außer Explorer! Wie seltsam, DAMIT HÄTTE ICH JA NIE GERECHNET! Das erinnert uns an die guten alten Zeiten, in denen wir beim Layouten für Explorer 6 akrobatische Kunststücke vollbringen mussten.
Zum Glück nutzen heute – anders als damals – nur noch weniger als 4 % der Nutzer Explorer. Kein Drama.
Der Anteil der Nutzer mit einem Browser, der Custom Properties unterstützt, liegt bei 70,9 %. Sehr hoch.
