Verwenden der CSS-Eigenschaften- und Werte-API

Registrieren einer benutzerdefinierten Eigenschaft

Beim Registrieren einer benutzerdefinierten Eigenschaft können Sie dem Browser mitteilen, wie sich die benutzerdefinierte Eigenschaft verhalten soll; welche Typen erlaubt sind, ob die benutzerdefinierte Eigenschaft ihren Wert erbt und was der Standardwert der benutzerdefinierten Eigenschaft ist. Es gibt zwei Möglichkeiten, eine Eigenschaft zu registrieren: in JavaScript oder in CSS.

CSS.registerProperty

Das Folgende registriert eine benutzerdefinierte Eigenschaft mit dem Namen --my-prop mit CSS.registerProperty. --my-prop wird die CSS-Farbsyntax verwenden, hat einen Standardwert von #c0ffee und wird seinen Wert nicht vererben:

window.CSS.registerProperty({
  name: "--my-prop",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

@property

Die gleiche Registrierung kann in CSS erfolgen. Das Folgende registriert eine benutzerdefinierte Eigenschaft mit dem Namen --my-prop unter Verwendung der @property at-rule. --my-prop wird die CSS-Farbsyntax verwenden, hat einen Standardwert von #c0ffee und wird seinen Wert nicht vererben:

@property --my-prop {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

Verwenden registrierter benutzerdefinierter Eigenschaften

Ein Vorteil der Registrierung einer Eigenschaft ist, dass der Browser jetzt weiß, wie Ihre benutzerdefinierte Eigenschaft behandelt werden soll, zum Beispiel bei Übergängen! Wenn eine Eigenschaft nicht registriert ist, weiß der Browser nicht, wie er sie behandeln soll, daher geht er davon aus, dass jeder Wert verwendet werden kann und kann sie daher nicht animieren. Wenn eine Eigenschaft jedoch eine registrierte Syntax hat, kann der Browser die Optimierung um diese Syntax herum vornehmen, einschließlich der Möglichkeit, sie zu animieren!

In diesem Beispiel wurde die benutzerdefinierte Eigenschaft --registered mit der Syntax <color> registriert und dann in einem linearen Verlauf verwendet. Diese Eigenschaft wird dann beim Hovern oder Fokussieren auf eine andere Farbe umgestellt. Beachten Sie, dass der Übergang mit der registrierten Eigenschaft funktioniert, nicht jedoch mit der nicht registrierten!

HTML

<button class="registered">Background Registered</button>
<button class="unregistered">Background Not Registered</button>

CSS

.registered {
  --registered: #c0ffee;
  background-image: linear-gradient(to right, white, var(--registered));
  transition: --registered 1s ease-in-out;
}

.registered:hover,
.registered:focus {
  --registered: #b4d455;
}

.unregistered {
  --unregistered: #c0ffee;
  background-image: linear-gradient(to right, white, var(--unregistered));
  transition: --unregistered 1s ease-in-out;
}

.unregistered:hover,
.unregistered:focus {
  --unregistered: #b4d455;
}

button {
  height: 40vh;
  display: block;
  width: 100%;
  font-size: 3vw;
}

JavaScript

window.CSS.registerProperty({
  name: "--registered",
  syntax: "<color>",
  inherits: false,
  initialValue: "red",
});

Ergebnis

Auch wenn es nicht funktional korrekt ist, ist eine gute Möglichkeit, den Unterschied zwischen der nicht registrierten Eigenschaft im obigen Beispiel und der registrierten Eigenschaft zu verstehen, der Unterschied zwischen einer <custom-ident> und einer Zahl, wenn versucht wird, height zu animieren. Sie können nicht von auto zu einer Zahl übergehen oder animieren, weil der Browser den Wert von auto erst kennt, wenn er berechnet wurde. Bei einer nicht registrierten Eigenschaft weiß der Browser ebenfalls nicht, welchen Wert sie haben könnte, bis er berechnet wird, und deshalb kann er keinen Übergang von einem Wert zum anderen einrichten. Wenn sie jedoch registriert ist, haben Sie dem Browser mitgeteilt, welchen Typ von Wert er erwarten soll, und da er das weiß, kann er die Übergänge ordnungsgemäß einrichten.

Stolpersteine

Es gibt zwei Fallstricke bei der Registrierung einer Eigenschaft. Der erste ist, dass eine Eigenschaft, sobald sie registriert wurde, nicht mehr aktualisiert werden kann, und der Versuch, sie mit JavaScript erneut zu registrieren, einen Fehler auslöst, der besagt, dass sie bereits definiert wurde.

Zweitens werden registrierte Eigenschaften im Gegensatz zu Standard-Eigenschaften nicht validiert, wenn sie geparst werden. Vielmehr werden sie validiert, wenn sie berechnet werden. Das bedeutet sowohl, dass ungültige Werte nicht als ungültig erscheinen, wenn die Eigenschaften des Elements inspiziert werden, als auch, dass das Einschließen einer ungültigen Eigenschaft nach einer gültigen Eigenschaft nicht auf die gültige Eigenschaft zurückfällt. Eine ungültige Eigenschaft wird jedoch auf ihren registrierten Standardwert zurückfallen.

Browser-Kompatibilität