Seit einiger Zeit kann man CSS Variablen benutzen. Normalerweise brauchte man bisher immer Preprozessoren wie SASS oder LESS dafür. Mit den in CSS integrierten Variablen kann man aber noch viel mehr machen. Beispielsweise mit JavaScript direkt darauf zugreifen und sie verändern. Aber der IE unterstützt das natürlich noch nicht, wäre ja auch zu schön. Hier geht es zum Browsercheck Hier gehts zum Browsercheck
Table of Contents
- Wie kann man eine CSS Variable definieren
- CSS Variablen in vanilla JavaScript setzen und verändern
- Fortgeschrittene Beispiele
Wie kann man eine CSS Variable definieren
CSS Variablen kann man vielfältig einsetzen. Ich persönlich benutze sie für Schriftgrößen, Farben und um die CSS-Eigenschaft translate per JavaScript einfach manipulieren zu können.
Was sind CSS Variablen
CSS Variablen definiert man einmal im CSS an einer zentralen Stelle und benutzt sie dann Seitenweit überall. Durch die Möglichkeit der Manipulation dieser Variablen im Nachhinein, kann man hier ein gutes System schaffen, um so Farben, Größen und andere Eigenschaften zentral zu steuern.
Farben einmal definieren und überall verwenden
Als erstes muss man im :root oder auch innerhalb eines Containers Variablen definieren, dann kann man sie später im CSS oder auch in JavaScript verwenden.
CSS
:root {
--color: red;
}
h1 {
color:var(--color);
}
...
Ergebnis
Verschachteln
Definiert man die Variable im Root, so kann sie im gesamten Dokument verwendet werden. Aber es gibt auch die Möglichkeit diese nur innerhalb eines Containers zu definieren. Das ganze könnte dann so aussehen:
CSS
:root {
--color: red;
}
p {
--color: green;
}
h1 {
color:var(--color);
}
p strong {
color:var(--color);
}
a {
background-color:var(--color);
color:white;
}
Wir definieren im Root eine Farbe, und können das dann innerhalb eines Container überschreiben.
Ergebnis: Wir haben global die Variable --color als Rot definiert, und überschreiben das für alle im p liegenden Elemente auf die Farbe Grün
CSS Variablen in vanilla JavaScript setzen und verändern
Nicht nur im CSS kann man diese neuen Variablen hervorragend verwenden, man kann sie auch direkt in vanilla JS setzen und verändern. Ich nehme wieder das Beispiel von eben und verändere hier die CSS Variablen per JS. Außerdem habe ich im CSS noch eine weitere CSS-Variable --bg-color verwendet, die aber nicht im CSS gesetzt wird, sondern erst im JS.
CSS
:root {
--color: red;
}
h1 {
color:var(--color);
}
p strong {
color:var(--color);
background-color: var(--bg-color);
}
a {
background-color:var(--color);
color:white;
}
Jetzt verändern wir per JS die Variable --color von Rot zu Blau und außerdem setzen wir hier noch eine neue Variable --bg-color
JS
var body = document.querySelector('body');
/* Change css variable via vanilla js */
body.style.setProperty("--color", "blue");
/* Set a new css variable to root */
body.style.setProperty("--bg-color", "silver");
Ergebnis:
CSS Variablen per JS verändern
Wir können diese Variablen natürlich überall verwenden und per JS manipulieren. So können wir Elemente mit Hilfe von JS und der CSS Eigenschaft translate3d verschieben. Rotate und alle anderen CSS Eigenschaften kann man natürlich genauso manipulieren. Der riesige Vorteil hierbei ist die extrem gute Performance.
CSS
:root {
--move-x: 1px;
}
.container {
transform:translate3d(var(--move-x),0,0);
transition:1s transform ease-in-out;
}
JS
var body = document.querySelector('body');
body.style.setProperty("--move-x", "200px");
In diesem Beispiel habe ich das JavaScript erweitert. Ich habe ein Interval gesetzt, und jedesmal wird per Zufall die Bewegung der X-Achse ermittelt und gesetzt.
Forgeschrittene Beispiele
Tinder-Effekt
iOS Touch Switch Radiobutton
Browser-Support von CSS Variablen
Fazit
Funktionieren CSS Variablen in IE11?
Mit dem Internet Explorer hat man leider Pech. Hier funktionieren die CSS Variablen noch nicht. Mit den CSS-Variablen jedoch lassen sich trotzdem richtig coole Sachen anstellen: Farbveränderungen, Positionsveränderungen oder sogar Inhalte lassen sich jetzt einfach und ohne Probleme via vanilla JS manipulieren.