CSS/Variablen

Aus SELFHTML-Wiki
< CSS
Wechseln zu: Navigation, Suche

Mit den custom properties, (benutzerdefinierte 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 einmal im Dokument ändern.

  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com


Syntax[Bearbeiten]

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

Fallback[Bearbeiten]

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

Der Einsatz von Variablen …

Anwendungsbeispiele[Bearbeiten]

Anwenden einer Farbpalette[Bearbeiten]

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.

ein maßgeschneidertes Theme[Bearbeiten]

Quellen[Bearbeiten]

  1. CSSWG: Using Cascading Variables: the var() notation

Weblinks[Bearbeiten]