CSS/Custom properties (CSS-Variablen)

Aus SELFHTML-Wiki
< CSS
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 Stylesheet ä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 Stylesheet mit der Funktion 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 verwendet.
ansehen …

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) }
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[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.
ansehen …

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

Countdown[Bearbeiten]

Bis jetzt benötigten Sie JavaScript, um einen Countdown herunterzuzählen. Mit custom properties können Sie dies nur mit CSS erreichen.[4]

Countdown-Timer ansehen …
<div class="time-bar" style="--duration: 9;">
  <div></div>
</div>
ansehen …

Als Zeitleiste wird ein div verwendet (ein meter-Element wäre evtl. semantisch passender, bringt jedoch bereits viele eigene Formatierungen mit).

Countdown-Timer ansehen …
.time-bar div {
  height: 1em;
  background: linear-gradient(to bottom, red, #c32e04);
  animation: roundtime calc(var(--duration) * 1s) steps(var(--duration)) forwards;
  transform-origin: left center;
}

@keyframes roundtime {
  to {
    /* More performant than animating `width` */
    transform: scaleX(0);
  }
}
ansehen …

Bereits im HTML wurde im style-Attribut des Container-divs eine CSS-Variable --duration festgelegt. Sie wird nun 2x verwendet:

  • steps zerlegt die Animation in einzelne Schritte, ohne extra Wegpunkte festlegen zu müssen.
  • animation-duration erfordert einen Wert mit Zeiteinheit: calc(var(--duration) * 1s) fügt an die Zahl die Einheit s an.
Beachten Sie: Es ist performanter, die Breite des div durch transform:scaleX() anstelle von width zu animieren.

Was nicht geht[Bearbeiten]

Man kann (Stand 2021/06) eine custom property nicht innerhalb einer media query benutzen, z.B.

@media (max-width: var(--mobile-breakpoint)) {...},

sondern nur innerhalb der geschweiften Klammern.

Siehe auch[Bearbeiten]

CSS-Formatierung des Shadow DOM[Bearbeiten]

Das SVG-Use-Element kann aus beliebig vielen Teil-Elementen bestehen, die im Shadow DOM vorhanden sind, aber nicht durch CSS formatiert werden können. MIt Custom properties können auch einzelne Bestandteile des use-Elements formatiert werden.

Hauptartikel: SVG/Elemente/Gruppierungen#Styling des use-Elements

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
  4. ↑ css-tricks.com: Timer Bars in CSS with Custom Properties von Chris Coyier, Aug 18, 2020

Weblinks[Bearbeiten]

Längeneinheiten und custom properties

Zikaden-Prinzip für unregelmäßig wirkende Strukturen

Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Custom_properties_(CSS-Variablen)&oldid=80392“