CSS Custom Properties ("CSS-Variable") für die Website-Gestaltung verwenden

07. Juni 2018

CSS-Variable in der Website-Gestaltung

Flexibler und schneller coden mit CSS Custom Properties

Mit CSS-Variablen lassen sich Farben, Typografie, Abstände und weitere Eigenschaften einer Website leicht und schnell ändern. Wie das geht, möchte ich Ihnen in diesem Artikel zeigen.

Grafik zeigt Drucktypen und Werkzeuge für den Drucksatz

Vorbemerkungen

Was Sie mitbringen sollten

Sie wissen, wie eine HTML-Seite aufgebaut ist, Sie kennen sich zumindest ein wenig aus in CSS und haben auch schon selbst CSS-Code geschrieben? Und Sie interessieren sich für neue Möglichkeiten, die CSS bietet? Schön, dann lesen Sie bitte weiter.

Befriffsklärung

Hier geht es um CSS "Variable". Variable in Anführungszeichen, da sie offiziell "CSS Custom Properties for Cascading Variables" heißen, s. hier und hier.
Und Custom Properties trifft es genauer; übersetzen lässt es sich mit "benutzerdefinierte Eigenschaften" - und die AnwenderInnen definieren genau die Eigenschaften, die einem HTML-Element mittels CSS zugewiesen werden sollen.

Warum CSS-Variable anwenden

Variable kennen wir aus verschiedenen Programmiersprachen und CSS-Preprocessoren wie SASS und LESS. Warum also sollte man sich mit CSS-Variablen befassen und sie sogar anwenden?

Gegenüber Variablen von Preprocessoren wie SASS oder LESS haben CSS-Variable den Vorteil, dass man sie sehr schnell ändern kann und die Änderungen sofort im Browser sichtbar werden. Hier muss nichts kompiliert werden, alles geschieht im CSS-Code und im Browser.

CSS-Variable wirken also direkt auf die DOM-Struktur eines HTML-Dokument und lassen sich somit auch per JavaScript manipulieren. Somit können CSS-Variable im Gegensatz zu Variablen in CSS-Preprocessoren dynamisch gestaltet werden. Z. B. kann die Farbgestaltung einer Website je nach Tageszeit oder Wochentag oder Monat mittels CSS-Variable und JavaScript dynamisch geändert werden.

Bild zeigt CSS-Variable im Firefox Developer Tool 'Inspektor'

Weitere Vorteile

Flexiblere Website-Gestaltung
Schnelle Entwicklung und Prototyping, insbesondere in Verbindung mit CSS Grid und Flexbox
Weniger Wiederholungen im CSS-Code
Code wird übersichtlicher
projekt-spezifische Bezeichnungen für Variablen zum besseren Verständnis im Team (naming convention)
CSS-Variable können auch in CSS-Preprocessoren wie SASS verwendet werden

Wann CSS-Variable anwenden

Sofort und überall! Nun, vielleicht nicht gleich und für jede CSS-Anweisung. Aber doch für Farb- und Textgestaltung, die ja über eine Website einheitlich sein sollten. Ebenso können CSS-Variable sinnvoll für Abstände, Ränder und Links verwendet werden.

Allgemein ausgedrückt, werden CSS-Variable eingesetzt:

Wenn dasselbe Element an veschiedenen Stellen eingesetzt dasselbe aussehen haben soll
Wenn verschiedene Elemente auf einer Webseite gleich gestaltet werden sollen
Zur Gestaltung häufig verwendeter Eigenschaften (border, border-radius, font-size usw.)

Wie CSS-Variable anwenden

Unterschied zwischen CSS-"Variablen" und Preprocessor-Variablen

Variablen im CSS-Code werden ebenso einfach deklariert wie Variable in CSS-Preprocessoren - hier am Beispiel von SASS:

SCSS-Code

$bg-color: white;
$text-color: #333;
$heading-color: #999;

body {
   background-color: $bg-color;
   color: $text-color;
}

h1, h2, h3, h4, h5, h6 {
   color: $heading-color;
}

Das ergibt nach der Kompilierung folgendes CSS:

CSS-Code

body {
   background-color:  white;
   color: #333;
}
h1, h2, h3, h4, h5, h6 {
   color: #999;
}

Die Variable existiert also nur im SCSS-Code, nicht im CSS-Code selbst.

Anders bei den CSS-"Variablen" oder exakt ausgedrückt "CSS Custom Properties".

Hier werden die Variable direkt im CSS-Code deklariert und wirken sofort und unmittelbar auf den gesamten DOM, also die HTML-Struktur einer Webseite.

Syntax von CSS Custom Properties

Die Syntax besteht aus zwei Bindestrichen und dem folgenden Namen der Variable: --name-der-variable; wie Sie die Variable bezeichnen, bleibt völlig Ihnen überlassen.

Das o. g. SCSS-Beispiel sieht als native CSS-Variable so aus:

CSS-Code

:root {
   --bg-color: white;
   --text-color: #333;
   --heading-color: #999;
}

Die CSS Pseudoklasse ":root" zielt auf das Wurzelelement der HTML-Seite, das HTML-Element <html>. Hier lege ich die globalen Variable fest, also die Variable, die für das gesamte HTML-Dokument gelten sollen.

Spezifische Variable kann ich z. B. für bestimmte Elemente wie <aside> oder Klassen wie ".box" festlegen. Diese funktionieren dann nur innerhalb der festgelegten Elemente, hier am Beispiel der Klasse ".box":

CSS-Code

.box {
   --box-bg-color: lightgrey;
}

Um diese Variable in den CSS-Selektoren einzusetzen, werden sie in die Funktion var() eingefügt. Vor und in der Klammer dürfen keine Leerzeichen stehen: var(--name-der-variable); zudem sind die Angaben "case sensitive", also auf Groß- und Kleinschreibung achten.

Als Beispiel werden hier Variable des :root-Elements in das HTML-Element <body> und die Überschriften h1-h6 sowie in die Klasse ".box" eingefügt.

CSS-Code

/* Deklaration der globalen CSS-"Variablen" */
:root {
   --bg-color: white;
   --text-color: #333;
   --heading-color: #999;
}

/* Deklaration der spezifischen CSS-"Variablen" */
.box {
   --box-bg-color: lightgrey;
}

/* Anwendung der CSS-"Variablen" */
body {
  background-color: var(--bg-color); /* Hier ist die Hintergrundfarbe "weiß" */
  color: var(--text-color); /* Hier ist die Textfarbe "dunkelgrau" */
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color); /* Hier ist die Textfarbe "grau" */
}

.box {
   background-color: var(--box-bg-color); /* Hier ist die Hintergrundfarbe "hellgrau" */
}

Sollen die Farben geändert werden, müssen sie lediglich in der Variablen-Deklaration angepasst werden.

Was geht und was nicht

CSS-Variable, die für Klassen oder Elemente festgelegt werden, wirken sich nur innerhalb dieser Klasssen oder Elemente aus. Außerhalb werden sie vom Browser ignoriert.

Folgende CSS-Anweisung würde mit den oben deklarierten Variablen nicht funktionieren:

CSS-Code

.content {
   background-color: var(--box-bg-color); /* Hier ist die Hintergrundfarbe nicht "hellgrau", sondern "weiß" - geerbt von "body" */
}

In diesem Fall greift also die ganz normale Kaskade des Cascading Style Sheets, d. h. CSS-Variable werden wie gewöhnliche Eigenschaften von CSS-Selektoren vererbt.

Rechnen mit CSS-Variablen

Sehr nützlich ist die Möglichkeit, bei den CSS-Variablen mit "calc" zu arbeiten. So kann man global die Schriftgröße festlegen und diese mittels "calc" in den entsprechenden Elementen und Klassen anpassen. Ich lege die Schriftgröße global mit dem Faktor 1 fest:

CSS-Code

:root {
   --font-size: 1;
}

Im nächsten Schritt lege ich die Schriftgröße von "body" auf 1rem (das entspricht in fast allen Browsern 16px) fest, indem ich die Variable mit eben diesen 1rem multipliziere:

CSS-Code

body {
   font-size: calc(var(--font-size) * 1rem);
}

Hier darf hinter der schließenden inneren Klammer ein Leerzeichen stehen.

Die Schriftgröße für alle Elemente - sofern nicht anders festgelegt - beträgt nun 1rem: Variable 1 * 1rem = 1rem.

Responsive Gestaltung mit CSS-Variablen

Soll z. B. die Schriftgröße an unterschiedliche Bildschirmgrößen angepasst werden, packt man die CSS-Variable in Media Queries:

CSS-Code

@media (min-width: 600px) {
   :root {
     --font-size: 1.25;
   }
}

Die Schriftgröße für alle Elemente auf Bildschirmen ab 600 Pixel beträgt nun 1.25rem: Variable 1 * 1.25rem = 1.25rem.

Typografie mit CSS-Variablen

Die typografische Gestaltung einer Website sollte auf allen Ebenen der Internetpräsenz einheitlich sein. Um das zu garantieren, bieten sich CSS-Variable geradzu an. Denn hier müssen nur die CSS Custom Properties geändert werden. Das erspart Zeit und vermeidet Fehler.

Hier sollen als Beispiel die Überschriften einer Website in einer bestimmten Größe dargestellt werden. Ich wende wiederum die calc-Funktion an:

CSS-Code

h1 {
   font-size: calc(var(--font-size) * 3.5rem);
}

h2 {
   font-size: calc(var(--font-size) * 2.75rem);
}

h3 {
   font-size: calc(var(--font-size) * 2.25rem);
}

h4 {
   font-size: calc(var(--font-size) * 2rem);
}

h5 {
   font-size: calc(var(--font-size) * 1.75rem);
}

h6 {
   font-size: calc(var(--font-size) * 1.5rem);
}

Wie Sie sehen, kann jede CSS-Eigenschaft in Variablen gespeichert und somit schnell und unmittelbar geändert werden.

Treiben wir es noch ein wenig weiter. Hier ein Vorschlag für eine weitergehende Website-Gestaltung mit CSS Custom Properties:

CSS-Code

/*================================================================
 * Allgemeine Einstellungen mit CSS Custom Properties (Variables)
=================================================================*/
:root {
  --border: 1px solid grey;
  --border-radius: .15rem;
  --box-shadow: 5px 5px 5px 0px rgba(153,153,153,1);
  --font-family: Ubuntu, Helvetica, Tahoma, Arial, "sans-serif";
  --font-size: 1;
  --line-height: 1;
  --link-color: midnightblue;
  --link-color-visited: blueviolet;
  --link-color-hover: cornflowerblue;
  --link-color-active: darkslateblue;
  --max-width: 1280px;
  --spacing: 1;
  --text-shadow: 3px 3px 5px gainsboro;
  --transition: all .5s ease;
}
/* Schriftgröße und Abstände auf Bildschirmen ab 600px vergrößern */
@media (min-width: 600px) {
  :root {
    --font-size: 1.25;
    --spacing: 2;
  }
}

Theming mit CSS-Variablen

Einfach und effektiv lassen sich unterschiedliche Farbschemata als Theme einer Website festlegen. Wünscht zum Beispiel ein Kunde die Auswahl zwischen zwei Farbschemata – eine blaue und eine grüne Farbgestaltung – ist das leicht mit Custom Properties umzusetzen.

CSS-Code

/*===============================================================
 * Farbgestaltung (Theme) mit CSS Custom Properties (Variables)
====================0===========================================*/
/* Farben Blue Theme */

:root {
  --bg-body: aliceblue;
  --bg-content: snow;
  --bg-footer: #4D4D4D;
  --color-footer: floralwhite;
  --heading-color: steelblue;
  --text-color: #232323;
}

/* Farben Grey Theme */
/*:root {
 --bg-body: lightgrey;
 --bg-content: snow;
 --bg-footer: dimgrey;
 --color-footer: ghostwhite;
 --heading-color: darkslategrey;
 --text-color: #1A1A1A;
}*/

Um das graue Schema "anzuschalten", muss ich es lediglich auskommentieren und das blaue Theme in einen Kommentar /* ... */ einschließen und somit "ausschalten".

Stylesheet mit CSS-Variablen

Abschließend ein (unvollständiges) Beispiel, wie man die oben entwickelten CSS-Variable in einem Stylesheet anwenden kann.

CSS-Code

/*=========================
 * Stylesheet 
==========================*/
* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-body);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: calc(var(--font-size) * 1rem);
  margin: 0;
  padding: 0;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.wrapper {
  margin: .75em;
  max-width: var(--max-width);
  padding: calc(var(--spacing) * .25rem);
}

nav {
  padding: calc(var(--spacing) * .25rem);
}

.site-header {
  background-color: var(--bg-content);
  height: 200px;
  padding: calc(var(--spacing) * .75rem);
  text-align: center;
}

.box {
  background-color: var(--bg-content);
  border: var(--border);
  border-radius: var(--border-radius);
  margin: calc(var(--spacing) * 1rem);
  margin-left: 0;
  padding: calc(var(--spacing) * .5rem);
}

footer {
  background-color: var(--bg-footer);
  color: var(--color-footer);
  padding: calc(var(--spacing) * .5rem);
}
footer h6 {
  color: var(--color-footer);
}

/* Typografie */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  margin: 0;
  padding: 0;
}
h1, h4 {
  font-weight: 300;
}
h2, h3, h5, h6 {
  font-weight: 700;
}
h3, h4, h5, h6 {
  line-height: calc(var(--line-height) * 1.5);
}
h1 {
  font-size: calc(var(--font-size) * 3rem);
  line-height: calc(var(--line-height) * 1.1);
}
h2 {
  font-size: calc(var(--font-size) * 2.5rem);
  line-height: calc(var(--line-height) * 1.25);
}
h3 {
  font-size: calc(var(--font-size) * 2rem);
}
h4 {
  font-size: calc(var(--font-size) * 1.75rem);
}
h5 {
  font-size: calc(var(--font-size) * 1.5rem);
}
h6 {
  font-size: calc(var(--font-size) * 1.25rem);
}

p {
  line-height: calc(var(--line-height) * 1.2);
}

.lead {
  color: var(--text-color);
  font-size: calc(var(--font-size) * 1.15rem);
  font-weight: 300;
}

/* Stile für Links */
a {
  color:var(--link-color);
}
a:visited {
  color:var(--link-color-visited);
}
a:hover {
  color:var(--link-color-hover);
}
a:active {
  color:var(--link-color-active);
}

Fallback

Zurzeit (Januar 2020) unterstützen ca. 93 Prozent der in Deutschland verwendeten Browser CSS-Variable. Rund 1,5 Prozent nutzen noch den IE 11, der CSS Custom Properties nicht unterstützt.

Fallbacks kann man auf wie gewohnt folgende Weise notieren:

CSS-Code

body {
  color: #333; /* Fallback */
  color: var(--text-color);
}

Browser, die CSS-Variable verstehen, überschreiben die erste Farbanweisung mit der zweiten, die die Variable enthält. Browser, die CSS-Variable nicht verstehen, ignorieren die zweite Anweisung ohne weitere Folgen.

Ich empfehle dringend, die Fallbacks für die CSS-Variable so zu setzen, dass der Output zu annehmbaren Ergebnissen führt, die nicht unbedingt mit den Variablen übereinstimmen müssen. Ansonsten könnte man sich die Variable gleich sparen, denn mit jeder Änderung einer Variable müsste dann auch das Fallback geändert werden.