CSS Custom Properties, besser bekannt als CSS-Variablen, sind ein großer Schritt nach vorn für Frontend-Entwickler. Sie bringen die Kraft von Variablen ins CSS: weniger Wiederholung, bessere Lesbarkeit, mehr Spielraum.
Anders als die Variablen der CSS-Präprozessoren sind CSS-Variablen außerdem Teil des DOM, was eine Reihe von Vorteilen mit sich bringt. Im Kern verhalten sie sich wie Variablen in SASS und LESS. In diesem Tutorial zeige ich dir an Beispielen, wie dieses CSS3-Modul arbeitet.
Warum CSS-Variablen einsetzen?
Es gibt viele Gründe für Variablen in CSS. Einer der überzeugendsten: Sie räumen die Wiederholungen in deinem Stylesheet aus.
Die alte Methode
#title {
color: #ff0000;
}
.h1 {
color: #ff0000;
}Die neue Methode
:root {
--red: #ff0000; /* Déclaration d'une variable css */
}
#title {
color: var(--red); /* Utilisation de la variable css */
}
.h1 {
color: var(--red); /* Utilisation de la variable css */
}Das macht deinen Code nicht nur leichter lesbar, es lässt dir auch mehr Spielraum, falls du diese Farbe einmal ändern willst.
Mit SASS- und LESS-Variablen geht das zwar schon seit Jahren. CSS-Variablen haben aber ein paar Vorteile.
- Sie müssen nicht übersetzt werden, um zu funktionieren, denn der Browser kennt sie von Haus aus. Du brauchst also keinerlei Einrichtung, um loszulegen, anders als bei SASS und LESS
- Sie leben im DOM, und das eröffnet eine Menge Möglichkeiten, die ich in diesem Tutorial durchgehe.
Fangen wir mit den CSS-Variablen an!
Deine erste CSS-Variable deklarieren
Bevor du eine Variable deklarierst, entscheidest du, in welchem Geltungsbereich sie leben soll. Soll sie global verfügbar sein, definierst du sie einfach in der Pseudoklasse :root. Sie steht für das Wurzelelement deines Dokumentenbaums, in der Regel das Tag <html>.
Da Variablen vererbt werden, steht sie damit in deiner gesamten Anwendung bereit, denn alle DOM-Elemente sind Nachfahren des Tags <html>.
:root {
--main-color: #00FF00; /* Déclaration d'une variable css */
}Wie du siehst, deklarierst du eine Variable genauso, wie du eine CSS-Eigenschaft setzt. Ihr Name muss allerdings mit zwei Bindestrichen beginnen.
Um auf eine Variable zuzugreifen, nimmst du die Funktion var() und übergibst ihr den Namen der Variablen als Parameter.
#title {
color: var(--main-color);
}Und schon hat deine Überschrift die Farbe #00FF00.
Eine lokale CSS-Variable deklarieren
Du kannst auch lokale Variablen anlegen, die nur dem Element zugänglich sind, an dem sie deklariert wurden, und dessen Kindern. Das ist praktisch, wenn du weißt, dass eine Variable nur in einem oder in wenigen bestimmten Teilen deiner Anwendung gebraucht wird.
Denk zum Beispiel an eine Alert-Box mit einer besonderen Farbe, die sonst nirgends in der Anwendung vorkommt. In so einem Fall lohnt es sich, die Variable lokal zu deklarieren.
.alert {
--alert-color: #ff0000;
}Die Kindelemente können diese Variable jetzt nutzen:
.alert p {
color: var(--alert-color);
border: 1px solid var(--alert-color);
}Wenn du die Variable alert-color an anderer Stelle deiner Anwendung einsetzt, etwa in der Navigationsleiste, passiert schlicht nichts. Der Browser überspringt diese CSS-Zeile.
Responsive mit CSS-Variablen
Ein großer Vorteil von CSS-Variablen ist ihr Zugang zum DOM. Bei LESS oder SASS ist das nicht so, denn deren Variablen werden zu CSS kompiliert und erst danach vom Browser gelesen
In der Praxis heißt das: Du kannst die Variablen zum Beispiel abhängig von der Bildschirmbreite ändern:
:root {
--main-size: 16px ;
}
@media all and (max-width: 600px) {
:root {
--main-size : 12px ;
}
}Mit diesen vier einfachen Zeilen hast du die wichtigste Schriftgröße deiner ganzen Anwendung angepasst, sobald sie auf kleinen Bildschirmen läuft. Ziemlich elegant, oder?
CSS-Variablen mit JavaScript auslesen
Ein weiterer Vorteil des Lebens im DOM: Du kommst mit JavaScript an die Variablen heran und kannst sie sogar aktualisieren, etwa abhängig von den Interaktionen des Nutzers.
var root = document.querySelector(':root') ;
var rootStyles = getComputedStyle(root) ;
var mainColor = rootStyles.getPropertyValue('--main-color') ;
console.log(mainColor); // #00FF00Zum Aktualisieren einer CSS-Variablen rufst du die Methode setProperty auf dem Element auf, in dem die CSS-Variablen deklariert wurden, und übergibst den Namen der Variablen als ersten und den neuen Wert als zweiten Parameter.
root.style.setProperty('--main-color','#0000ff')Browser-Kompatibilität
Alle aktuellen Browser unterstützen CSS-Variablen, nur der inzwischen eingestellte Internet Explorer ignoriert sie.
···
