CSS/Custom properties (CSS-Variablen)

Mit den custom properties (benutzerdefinierten Eigenschaften) können Sie für Werte von CSS-Eigenschaften zu Beginn des Stylesheets Variablen festlegen und später für beliebige Deklarationen verwenden. So können Sie zum Beispiel eine Farbpalette definieren und müssen diese bei einem Redesign nur ein einziges Mal im Dokument ändern.

• 
• 
• 
• 
• 

Details: caniuse.com

Syntax

Syntax

:root {
  --akzentfarbe: #c32e04;
}

h1 {
  color: var(--akzentfarbe);
}

Im Beispiel wird eine Farbe festgelegt. Der Wert einer benutzerdefinierten Eigenschaft wird mit einem frei gewählten Namen festgelegt. Dieser beginnt mit zwei Minuszeichen.
Anschließend kann diese Variable im gesamtem Stylesheetdokument mit der Variablenfunktion var() wieder aufgerufen werden.

Beachten Sie:

• Custom properties sind case-sensitive, d.h. Sie müssen auf genaue Beachtung von Gleich- und Großschreibung achten.
• Variablen können nur Werte, aber keine Eigenschaften annehmen.
• Beim Funktionsaufruf darf sich innerhalb der Klammer kein Leerzeichen befinden.

Vorüberlegungen

In Präprozessoren wie SASS vereinfachte der Einsatz von Variablen die Gestaltung von Stylesheets. Allerdings haben die Präprozessoren einige Nachteile:

• Sie werden vor dem Laden des Dokuments zusammengestellt und können deshalb nicht auf Änderungen durch media queries reagieren
• Sie können nicht von JavaScript ausgelesen oder verändert werden.

Die custom properties dagegen

• reagieren unmittelbar auf Änderungen im DOM und auf media queries
• ermöglichen es, mit setProperty() ein individuelle Themes anzubieten

Fallback

Es gibt mit ShadyCSS einen Polyfill, der besonders für Web Components geeignet ist. Allerdings gibt es auch einen einfachen Fallback:

Ältere Browser, die custom properties nicht verstehen, rendern dafür die Elemente in den Standardeinstellungen.

Als Fallback kann eine eindeutige Festlegung nach der CSS-Variable notiert werden:

Fallback mit festen Werten für custom properties

h1 {
  color: var(--akzentfarbe, #f00);
}

Die CSS-Funktion var enthält neben dem Variablennamen noch einen durch Komma getrennten festen Wert. Falls die Variable nicht vorhanden sein sollte, wird dieser verwendet. Ältere Browser, die var() nicht verstehen, ignorieren auch diese Angabe.

Anwendungsbeispiele

Anwenden einer Farbpalette

Anwenden einer Farbpalette ansehen …

:root {
  --primary: #666;
  --hintergrund: #ccc;
  --akzent: #c32e04;
  --linkfarbe: #09c;
}

h2 {
  color: var(--primary);
  border-bottom: 2px solid var(--akzent);
}

aside {
  color: var(--akzent);
  background-color: var(--primary);
  border: 2px solid var(--akzent);
}

aside > h2 {
  color: var(--hintergrund);
  border-bottom: 2px solid transparent;  
}

aside > label {
  color: black;
  background-color: var(--akzent);
}

Im Beispiel wird eine Farbpalette festgelegt. Durch die strukturelle Pseudoklasse root wird ein Gültigkeitsbereich für das gesamte HTML-Dokument festgelegt. Diese Farbwerte werden dann im Stylesheet mehrfach aufgerufen.

ansehen …

ein maßgeschneidertes Theme

Mit den custom properties können nicht nur Farben, sondern auch Farbtöne und -variationen erzeugt werden:

Farbton ansehen …

:root { --akzentfarbe: 195, 46, 4 }
h1 { color: rgb(var(--akzentfarbe)) }
h2 { color: rgba(var(--akzentfarbe), 0.5) }

ansehen …

Für h2 wird die Akzentfarbe als rgba-Wert mit einem Transparenzwert von 0.5 (50% Deckkraft) berechnet.

Noch mehr Möglichkeiten ergeben sich bei der Verwendung von HSL-Werten:

Erstellen Sie ihr eigenes Theme! ansehen …

:root {
  --baseHue: 240;   
  --primary: hsl(var(--baseHue), 80%, 40%);
  --accent1: hsl(calc(var(--baseHue) - 231), 80%, 40%);
  --backgr1: hsl(calc(var(--baseHue) - 231), 80%, 40%,.15);
  --accent2: hsl(calc(var(--baseHue) - 200), 80%, 50%);
  --backgr2: hsl(calc(var(--baseHue) - 200), 80%, 50%,.15);  
}

Für das Dokument werden über den :root-Selektor eine Hauptfarbe und zwei Akzentfarben festgelegt. Dabei wird der Farbton über baseHue festgelegt und für die Akzentfarben mit der calc()-Funktion entsprechend verändert. Für die Akzentfarben gibt es noch hellere Töne für den Hintergrund. Insgesamt ist die Farbpalette an die SELFHTML-Farbtabelle angelehnt.

document.addEventListener('DOMContentLoaded', function () {
      document.querySelector('#huePicker').addEventListener('input', setHue);
});
	
function setHue() {
      const root = document.querySelector(':root');
      var huePicker = document.querySelector('#huePicker');
      root.style.setProperty('--baseHue', huePicker.value);
};

Beim Laden des Dokuments wird an den Schieberegler ein EventListener angehängt. Sobald er geändert wird, feuert das input-Event und der Wert wird mit setProperty der custom property baseHue zugewiesen.

ansehen …

Das Beispiel von Keith Clark verwendet Farbwähler (input type="color"), mit denen eine Hauptfarbe und eine Kontrastfarbe ausgewählt werden.

Siehe auch

• die SVG-Uhr, die die Zeit mit CSS-Variablen setzt

Quellen

Weblinks

• csswg: Defining Custom Properties: the --* family of properties (Entwurf)
• drweb: CSS Custom Properties: So nutzt du Variablen in Chrome 49 vom 04.02.2016
• css-tricks: Simplifying CSS Cubes with Custom Properties von Ana Tudor
• sitepoint: A Practical Guide to CSS Variables (Custom Properties) (15.06.2017)

Längeneinheiten und custom properties

• How to append a unit to a unitless css custom property with calc() Kevin Powell vom 17.03.2019