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 diese bei einem Redesign nur ein einziges Mal im Dokument ändern.
Details: caniuse.com
Inhaltsverzeichnis
Syntax[Bearbeiten]
:root {
--akzentfarbe: #c32e04;
}
h1 {
color: var(--akzentfarbe);
}
- 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
- reagieren unmittelbar auf Änderungen im DOM und auf media queries
- ermöglichen es, mit setProperty() ein individuelles Theme anzubieten
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:
h1 {
color: var(--akzentfarbe, #f00);
}
var() nicht verstehen, ignorieren auch diese Angabe.Anwendungsbeispiele[Bearbeiten]
Anwenden einer Farbpalette[Bearbeiten]
: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);
}
ein maßgeschneidertes Theme[Bearbeiten]
Mit den custom properties können nicht nur Farben, sondern auch Farbtöne und -variationen erzeugt werden[2]:
: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]:
: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);
}
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);
};
baseHue zugewiesen.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]
<div class="time-bar" style="--duration: 9;">
<div></div>
</div>
Als Zeitleiste wird ein div verwendet (ein meter-Element wäre evtl. semantisch passender, bringt jedoch bereits viele eigene Formatierungen mit).
.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);
}
}
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 Einheitsan.
Siehe auch[Bearbeiten]
- die SVG-Uhr, die die Zeit mit CSS-Variablen setzt
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.
Quellen[Bearbeiten]
- ↑ CSSWG: Using Cascading Variables: the var() notation
- ↑ SELF-Forum: Farben in Abhängigkeit von Grundfarbe von Gunnar Bittersmann vom 05.03.2020
- ↑ SELF-Forum: Farben in Abhängigkeit von Grundfarbe von Rolf B. vom 05.03.2020
- ↑ css-tricks.com: Timer Bars in CSS with Custom Properties von Chris Coyier, Aug 18, 2020
Weblinks[Bearbeiten]
- 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)
Längeneinheiten und custom properties
- How to append a unit to a unitless css custom property with calc() Kevin Powell vom 17.03.2019
Zikaden-Prinzip für unregelmäßig wirkende Strukturen
- The Cicada Principle, revisited with CSS variables Lea Verou, 07.07.2020)
Anschließend kann diese Variable im gesamtem Stylesheetdokument mit der Variablenfunktion
var()wieder aufgerufen werden.[1]