Custom properties (--*): CSS variables

Syntax

--some-keyword: left;
--some-color: #123456;
--some-complex-value: 3px 6px rgb(20 32 54);

<declaration-value>

Dieser Wert entspricht jeder Sequenz von einem oder mehreren Tokens, sofern die Sequenz kein nicht erlaubtes Token enthält. Er repräsentiert die Gesamtheit dessen, was eine gültige Deklaration als Wert haben kann.

Beispiel

Grundlegendes Beispiel

HTML

<p id="firstParagraph">
  This paragraph should have a blue background and yellow text.
</p>
<p id="secondParagraph">
  This paragraph should have a yellow background and blue text.
</p>
<div id="container">
  <p id="thirdParagraph">
    This paragraph should have a green background and yellow text.
  </p>
</div>

CSS

:root {
  --first-color: #1166ff;
  --second-color: #ffff77;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #229900;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

Ergebnis

Registrieren von benutzerdefinierten Eigenschaften mit @property

In diesem Beispiel verwenden wir die @property-At-Regel, um eine benutzerdefinierte Eigenschaft zu registrieren.

HTML

Unser HTML enthält eine geordnete Liste (<ol>) mit drei Listenelementen (<li>).

<ol>
  <li class="one">Item one</li>
  <li class="two">Item two</li>
  <li class="three">Item three</li>
</ol>

CSS

Wir verwenden die @property-At-Regel, um zwei benutzerdefinierte Eigenschaften zu registrieren.

@property --itemSize {
  syntax: "<length> | <percentage>";
  inherits: true;
  initial-value: 200px;
}

@property --borderWidth {
  syntax: "<length>";
  inherits: false;
  initial-value: 10px;
}

Wir versuchen, die Werte der benutzerdefinierten Eigenschaften zu überschreiben. Die auf .two gesetzten Werte sind gültig, während die auf .three gesetzten Werte ungültig sind.

ol {
  --itemSize: 100px;
  --borderWidth: 1px;
}
.two {
  --itemSize: initial;
  --borderWidth: inherit;
}
.three {
  --itemSize: large;
  --borderWidth: 3%;
}

Wir verwenden die beiden benutzerdefinierten Eigenschaften, um die Elemente zu gestalten, indem wir die Umrandung und die Breite für alle Elemente gleichzeitig festlegen:

li {
  width: var(--itemSize);
  border: var(--borderWidth) solid red;
  background-color: yellow;
  margin-bottom: 10px;
}

Ergebnisse

Die Eigenschaft --itemSize ist vererbbar; --borderWidth ist es nicht. Die Eigenschaften werden auf dem ol-Elternteil gesetzt und überschreiben die in ihrer Registrierung standardmäßig definierten Werte. Element eins erbt die Größe, aber nicht die Breite der Umrandung von der OL. Die globalen Schlüsselwörter, die für .two deklariert sind, sind für <length> gültig und werden daher verwendet. Die Werte in .three sind ungültig („large“ ist kein <length-percentage> und 3% ist kein <length>). Siehe

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die var()-Funktion
• @property-At-Regel
• Verwendung von CSS-Benutzerdefinierten Eigenschaften (Variablen) Leitfaden
• Registrieren von CSS-Benutzerdefinierten Eigenschaften Leitfaden
• CSS-Benutzerdefinierte Eigenschaften für Kaskadenvariablen Modul