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
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Der Wert einer benutzerdefinierten Eigenschaft wird mit zwei Minuszeichen und einem frei gewählten Namen festgelegt: --*.

Anschließend können Sie im gesamtem Stylesheetdokument mit der Variablenfunktion var() wieder aufgerufen werden.[1]

[Bearbeiten] Anwendungsbeispiel

Beispiel
:root {
  --hauptfarbe: #666;
  --hintergrundfarbe: #ccc;
  --akzentfarbe: #c32e04;
  --linkfarbe: #09c;
}
 
h1 {
  color: var(--hauptfarbe);
  border-bottom: 1px solid var(--akzentfarbe);
}
 
aside {
  color: var(--hauptfarbe);
  background: (--hintergrundfarbe);
  border: 2px solid var(--akzentfarbe);
}
 
aside h2 {
  color: var(--akzentfarbe);
  background: (--hintergrundfarbe);
  border: 2px solid var(--akzentfarbe);
}
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.

[Bearbeiten] Quellen

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

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML