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 Sie bei einem Redesign nur ein einziges Mal im Dokument ändern.

• 
• 
• 
• 
• 

Details: caniuse.com

Syntax

Beispiel: 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.

Fallback

Es gibt mit ShadyCSS einen Polyfill, der besonders für Web Components geeignet wird. 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:

Beispiel: 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.

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

Anwendungsbeispiele

Anwenden einer Farbpalette

Beispiel: 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

ToDo (weitere ToDos)

Dieser Abschnitt muss erstellt werden

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)