CSS-Kurs / CSS-Variablen: var(), Gültigkeitsbereich, Vererbung und Fallbacks

Benutzerdefinierte CSS-Eigenschaften (Custom Properties) speichern wiederverwendbare Werte und werden in Eigenschaftswerten mit var() referenziert. Ihr Gültigkeitsbereich folgt der Kaskade und der Vererbung, und ein var()-Fallback rettet nicht automatisch einen definierten Wert, der für die empfangende Eigenschaft ungültig ist.

Wählen Sie bedeutungsvolle gemeinsame Variablen

Wenn Sie dieselbe Akzentfarbe für mehrere Schaltflächen und Karten verwenden, können Sie sie in eine sinnvolle Variable zusammenfassen, anstatt den Farbcode in jeden Selektor zu kopieren. Wenn Sie die Akzentfarbe ändern, ändert sich auch an der Stelle, die auf diesen Wert verweist, etwas, wenn Sie eine Deklaration modifizieren. Wenn Sie Variablen erstellen, selbst für Werte, die nur an einer Stelle verwendet werden und keine separate Rolle haben, kann die Last, die Namen im Auge zu behalten, tatsächlich zunehmen.

:root {
  --accent: #1d5f91;
  --space-unit: .5rem;
}
.button { color: white; background: var(--accent); }
.card { border: 2px solid var(--accent); padding: calc(var(--space-unit) * 3); }

Nur die Deklaration einer Farbe im obigen Code ändert den Bildschirm nicht. Tatsächliche Eigenschaften, wie Hintergrund oder Rahmen, müssen als var referenziert werden. Wenn der Name die Rolle angibt, wie --accent, anstatt die aktuelle Farbe zu fixieren, wie --blue, wird es später weniger verwirrend, wenn man zu einer anderen Farbe wechselt. --accent und --Accent sind unterschiedliche Namen, also stimmen Sie Groß-/Kleinschreibung und Rechtschreibung überein.

var() wird für den Wert von Eigenschaften wie color oder padding verwendet. Selektoren oder Eigenschaftsnamen können nicht durch Variablen ersetzt werden, und var() kann auch keine Größenschwelle innerhalb von @media (min-width: ...) oder einer Containergrößenabfrage ersetzen. Die Funktion var() ist für Eigenschaftswerte bestimmt. Schreiben Sie Haltepunkte direkt in die entsprechende Bedingungsaussage und unterscheiden Sie sie von Werten, auf die Variablen angewendet werden können, wie z. B. die Farbe oder der Abstand von Elementen.

Verstehen Sie Root, Vererbung und Komponentenbereich

In einem HTML-Dokument entspricht :root dem obersten HTML-Element, daher ist es praktisch, einen gemeinsamen Standardwert im Dokument zu haben. Gewöhnliche, mit -- beginnende und nicht mit @property registrierte Custom Properties werden vererbt. Bei registrierten Eigenschaften kann die Vererbung gesondert festgelegt werden. Innerhalb einer Karte deklarierte Werte können von Nachkommen verwendet werden, wie zum Beispiel der Titel, werden aber nicht an nicht verwandte Geschwisterkarten weitergegeben.

.card { --card-accent: var(--accent); }
.card.warning { --card-accent: #a63e32; }
.card { border-color: var(--card-accent); }
.card h2 { color: var(--card-accent); }

Diese Regel ist ein Bestandteil des vollständigen Beispiels unten. .card.warning entspricht Karten mit beiden Klassen. Gewinnen oder Verlieren wird nicht durch die Auflistungsreihenfolge der HTML-Klassen bestimmt, sondern durch das Abgleichen der CSS Vererbung, Spezifität und der Kaskade, um den Wert zu bestimmen. Das Ändern des globalen Akzents ändert die Standardkarte, und Warnkarten mit ihrem eigenen Kartenakzent behalten ihre ursprünglichen Warnfarben bei.

Beim Kombinieren von Variablen mit anderen Variablen ist es auch wichtig, von welchem Element der Wert berechnet wird. Wenn --line-color: var(--accent) im übergeordneten Element berechnet und dann an das untergeordnete Element weitergegeben wird, wird die bereits geerbte Linienfarbe nicht immer neu berechnet, nur weil der Akzent im untergeordneten Element überschrieben wird. Abgeleitete Werte, die dem Akzent ihrer Nachkommen folgen sollen, werden offensichtlich besser im Element selbst oder direkt durch Verweis auf den Akzent im tatsächlichen Eigenschaftswert deklariert. Für Definitionen von Umfang und Vererbung siehe CSS Custom Property Specification.

Unterscheiden Sie zwischen Fallbacks und ungültigen berechneten Werten

var(--notice-color, #6a3989) liefert einen violetten Fallback-Wert, wenn ein Variablenwert fehlt und nicht verwendet werden kann. Selbst wenn eine Variable definiert ist und in anderen Eigenschaften wie 20px einen sinnvollen Wert hat, wird die Farbangabe ungültig, wenn der Wert nicht mit Farbe übereinstimmt, zum Zeitpunkt der Berechnung. In diesem Fall sollten Sie nicht erwarten, dass sie „durch Violett ersetzt wird“.

Wie unten gezeigt, selbst wenn zuerst in derselben Regel eine blaue Deklaration vorhanden ist, wird nach der Variablenersetzung in der zweiten Deklaration, wenn der Wert nicht übereinstimmt, nicht wieder auf das erste Blau zurückgegriffen. Nachdem die in der Kaskade ausgewählte Deklaration zum Zeitpunkt der Auswertung ungültig ist, werden die Vererbungsregeln der Farbe angewendet. In derselben Situation kann eine nicht vererbte Eigenschaft als Initialwert dieser Eigenschaft behandelt werden. MDN Custom Property Guide erklärt den Unterschied zwischen Ersatz- und ungültigen Werten.

.sample {
  color: #1d5f91;
  color: var(--notice-color, #6a3989);
}
.sample.bad { --notice-color: 20px; }

Sie können auch andere Variablen im Fallback-Wert verwenden. Zum Beispiel sucht var(--button-accent, var(--accent, #1d5f91)) nach dem zu verwendenden Wert, beginnend mit dem button-spezifischen Wert, dann dem gemeinsamen Wert und schließlich der Primärfarbe. Wenn jedoch die Verwendung von Zahlen, Längen und Farben gemischt wird, tritt dasselbe Problem auf, daher müssen Variablennamen und Nutzung zusammen verwaltet werden.

Kombinieren Sie Werte und Einheiten mit calc()

Das Beispiel multipliziert --space-unit: .5rem mit 3, um das Padding der Karten festzulegen. rem verwendet die Schriftgröße der Wurzel, sodass sich durch eine Änderung dieser Größe auch die Abstände ändern. Verwenden Sie calc() für die Berechnung anstelle des Aneinanderreihens von Zeichenfolgen und lassen Sie Leerzeichen um Additions- und Subtraktionsoperatoren. Weitere Details finden Sie unter CSS Farben und Einheiten: px, em, rem und Prozentsätze.

:root {
  --space-unit: .5rem;
  --space-card: calc(var(--space-unit) * 3);
}
.card { padding: var(--space-card); }

Wählen Sie konsequent, ob Variablen Einheiten enthalten oder nur Zahlen sind. Wenn Sie einen Wert ohne Einheit wie 2 in die Längenvariable eingeben, ist er möglicherweise nicht für Anwendungen geeignet, die Einheiten erfordern. Vermeiden Sie die Kombination unterschiedlicher Verwendungen, beispielsweise die Anwendung von calc auf eine Variable, die eine Farbe enthält. Für die grundlegende Syntax der Formel siehe das MDN calc-Dokument.

Führen Sie den Scope- und Fallback-Vergleich aus

Speichern Sie den folgenden Code als custom-properties.html in UTF-8 und öffnen Sie ihn in Ihrem Browser. Vergleichen Sie die Akzentfarben der beiden Karten und die Textfarben der drei Sätze. Die Bedeutung der Farben wurde auch in Buchstaben geschrieben, sodass die Ergebnisse nicht allein anhand der Farbe unterschieden werden konnten.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS variable scope and substitution values</title>
  <style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #183044; font-family: sans-serif; line-height: 1.6; }
main { max-width: 46rem; margin-inline: auto; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #164f73; outline-offset: 3px; }
:root { --space-unit: .5rem; --space-card: calc(var(--space-unit) * 3); --accent: #1d5f91; }
.cards { display: grid; gap: 1rem; }
.card { --card-accent: var(--accent); padding: var(--space-card); border: 2px solid var(--card-accent);
  border-radius: .5rem; background: #f6f9fb; }
.card h2 { color: var(--card-accent); margin-block: 0 .5rem; }
.card p { margin: 0; }
.card.warning { --card-accent: #a63e32; }
.fallback-area { margin-block: 2rem; padding: 1rem; border: 1px solid #8a9ba7; color: #28633b; }
.sample { color: #1d5f91; color: var(--notice-color, #6a3989); }
.sample.bad { --notice-color: 20px; }
.sample.good { --notice-color: #a63e32; }
  </style>
</head>
<body>
<main>
<h1>Variable scope and fallbacks</h1>
<div class="cards">
  <article class="card"><h2>Basic card</h2><p>The heading and border share the same accent color.</p></article>
  <article class="card warning"><h2>warning card</h2><p>The accent color changes only inside this card.</p></article>
</div>
<section class="fallback-area">
  <h2>The parent's text color is green</h2>
  <p class="sample missing">Undefined: purple fallback</p>
  <p class="sample bad">20px: Doesn't match the color, so it inherits the green color from the parent.</p>
  <p class="sample good">Defined as red: use that color</p>
</section>
</main>
</body>
</html>

1. Stellen Sie sicher, dass der Titel und der Rahmen der Basiskarten blau sind und dass die Warnkarten rot sind. Die drei Sätze unten sind jeweils lila, grün und rot gefärbt.
2. Ändern Sie nur den Root-Akzent zu #28633b. Die Überschrift und der Rahmen der Standardkarte sollten sich ändern, während die Warnkarte ihre eigene Warnfarbe behält. Stellen Sie den Root-Akzent nach der Überprüfung wieder auf #1d5f91 zurück.
3. Ersetzen Sie nur --space-unit durch 1rem. Das Padding beider Karten dehnt sich gemeinsam aus. Nach der Bestätigung stellen Sie sie wieder auf .5rem zurück.
4. Ändern Sie nur --notice-color von .sample.bad von 20px zu #1d5f91. Der Satz ändert sich von grün zu blau. Nach der Bestätigung stellen Sie ihn auf 20px zurück.
5. Löschen Sie nur die --notice-color-Deklaration aus .sample.bad. Nun greift der violette Fallback. Vergleichen Sie das Ergebnis mit dem Blau des vorigen Schritts und stellen Sie die ursprüngliche Deklaration wieder her.

Prüfen Sie fehlende oder falsche Variablen

• Prüfen Sie in den Entwicklertools, ob der Variablenname und -wert tatsächlich in diesem Element existieren. Prüfen Sie zuerst Rechtschreibung, Großschreibung und Deklarationsbereich an.
• Prüfen Sie, ob Nachkommen oder andere Regeln dieselbe Variable überschreiben. Es muss kein Fehler sein, wenn eine Komponente ihre eigenen Werte behält, selbst wenn sich ihr gemeinsamer Wert ändert.
• Prüfen Sie, ob die Variable in der tatsächlichen Eigenschaft referenziert wird und ob die Einheiten und der Typ des ersetzten Wertes korrekt sind.
• Wenn ein Wert durch mehrere Variablen erstellt wird, überprüfen Sie das berechnete Element und den geerbten Wert. Vermeiden Sie außerdem Deklarationen, die sich auf dieselbe Variable wie sich selbst beziehen oder zirkulär verweisen.

Sie können Variablen nutzen, indem Sie zwischen allgemeinen Farben und Abständen des Designs und Ausnahmen für jede Komponente unterscheiden und die Ergebnisse vor und nach der Änderung überprüfen. Anstatt die Anzahl der Variablennamen zu erhöhen, ist es hilfreicher für die Wartung, klarzumachen, welche Werte in welchem Geltungsbereich geteilt werden.