CSS/Custom properties (CSS-Variablen)

Aus SELFHTML-Wiki
< CSS(Weitergeleitet von Custom properties)
Wechseln zu: Navigation, Suche

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.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Syntax[Bearbeiten]

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.[1]


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[Bearbeiten]

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

Fallback[Bearbeiten]

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[Bearbeiten]

Anwenden einer Farbpalette[Bearbeiten]

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.

ein maßgeschneidertes Theme[Bearbeiten]

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

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

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[3]:

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.

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

Siehe auch[Bearbeiten]

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

Quellen[Bearbeiten]

  1. CSSWG: Using Cascading Variables: the var() notation
  2. SELF-Forum: Farben in Abhängigkeit von Grundfarbe von Gunnar Bittersmann vom 05.03.2020
  3. SELF-Forum: Farben in Abhängigkeit von Grundfarbe von Rolf B. vom 05.03.2020

Weblinks[Bearbeiten]

Längeneinheiten und custom properties