CSS-Custom-Properties für kaskadierende Variablen

Das Modul CSS-Custom-Properties für kaskadierende Variablen fügt Unterstützung für kaskadierende Variablen in CSS-Eigenschaften hinzu und ermöglicht Ihnen die Erstellung benutzerdefinierter Eigenschaften, um diese Variablen zu definieren, sowie die Mechanismen zur Verwendung von benutzerdefinierten Eigenschaften als Werte für andere CSS-Eigenschaften.

Beim Arbeiten mit CSS verwenden Sie häufig projektbezogene Werte wie Breiten, die gut mit Ihrem Layout harmonieren, oder einen Satz von Farben für Ihr Farbschema. Eine Möglichkeit, Wiederholungen in Stylesheets zu verwalten, besteht darin, einen Wert einmal zu definieren und ihn an vielen anderen Stellen zu verwenden. Mit Custom-Properties können Sie benutzerdefinierte Variablen erstellen und definieren, die wiederverwendet werden können, was komplexe oder sich wiederholende Regeln vereinfacht und leichter lesbar und wartbar macht. Zum Beispiel sind --dark-grey-text und --dark-background leichter zu verstehen als hexadezimale Farben wie #323831, und der Kontext, wie Sie sie verwenden, ist ebenfalls offensichtlicher.

Custom-Properties in Aktion

Um zu sehen, wie Custom-Properties verwendet werden können, bewegen Sie den Eingabeschieberegler von links nach rechts.

<div class="container">
  <div id="color-1">--hue</div>
  <div id="color-2">--hue + 10</div>
  <div id="color-3">--hue + 20</div>
  <div id="color-4">--hue + 30</div>
  <div id="color-5">--hue + 40</div>
  <div id="color-6">--hue + 50</div>
  <div id="color-7">--hue + 60</div>
  <div id="color-8">--hue + 70</div>
</div>
<input type="range" min="0" max="360" value="0" step="0.1" id="hue" />

const hue = document.querySelector("#hue");

const updateHue = () => {
  document.documentElement.style.setProperty("--hue", hue.value);
};

hue.addEventListener("input", updateHue);

.container {
  display: grid;
  font-family: sans-serif;
  color: white;
  gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1rem;
}
.container div {
  border-radius: 0.5rem;
  padding: 1rem;
}

input {
  width: 100%;
  margin: 0;
}

:root {
  --hue: 0;
}

#color-1 {
  background-color: hsl(var(--hue) 50% 50%);
}
#color-2 {
  background-color: hsl(calc(var(--hue) + 10) 50% 50%);
}
#color-3 {
  background-color: hsl(calc(var(--hue) + 20) 50% 50%);
}
#color-4 {
  background-color: hsl(calc(var(--hue) + 30) 50% 50%);
}
#color-5 {
  background-color: hsl(calc(var(--hue) + 40) 50% 50%);
}
#color-6 {
  background-color: hsl(calc(var(--hue) + 50) 50% 50%);
}
#color-7 {
  background-color: hsl(calc(var(--hue) + 60) 50% 50%);
}
#color-8 {
  background-color: hsl(calc(var(--hue) + 70) 50% 50%);
}

In diesen Farbmusterfeldern wird die background-color mit der hsl() <color> Funktion als hsl(var(--hue) 50% 50%) festgelegt. Jedes Farbmuster erhöht den <hue> Wert um 10 Grad wie calc(var(--hue) + 10), calc(var(--hue) + 20) usw. Wenn sich der Wert des Schiebereglers von 0 auf 360 ändert, wird der Wert der --hue Custom-Property mittels calc() aktualisiert, und auch die Hintergrundfarbe jeder Box im Raster wird aktualisiert.

Referenz

Eigenschaften

--*

Funktionen

var()

Leitfäden

Verwendung von CSS-Custom-Properties (Variablen): Erklärt, wie man Custom-Properties in CSS und JavaScript verwendet, mit Hinweisen zum Umgang mit undefinierten und ungültigen Werten, Fallbacks und Vererbung.
Ungültige Custom-Properties: Erklärt, wie Browser mit Eigenschaftswerten umgehen, wenn der Wert einer benutzerdefinierten Eigenschaft ein ungültiger Datentyp für diese Eigenschaft ist.

Spezifikationen

Specification
CSS Custom Properties for Cascading Variables Module Level 1

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden