Verwenden der CSS Properties and Values API

Durch die Registrierung 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.

Das folgende Beispiel registriert eine benutzerdefinierte Eigenschaft mit dem Namen --my-prop mittels CSS.registerProperty. --my-prop verwendet die CSS-Farbsyntax, hat einen Standardwert von #c0ffee und erbt seinen Wert nicht:

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

Die gleiche Registrierung kann in CSS erfolgen. Das folgende Beispiel registriert eine benutzerdefinierte Eigenschaft mit dem Namen --my-prop mittels der @property-Regel (at-rule). --my-prop verwendet die CSS-Farbsyntax, hat einen Standardwert von #c0ffee und erbt seinen Wert nicht:

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

Ein Vorteil der Registrierung einer Eigenschaft besteht darin, dass der Browser nun weiß, wie er mit Ihrer benutzerdefinierten Eigenschaft umgehen soll, z. B. bei Übergängen! Wenn eine Eigenschaft nicht registriert ist, weiß der Browser nicht, wie er sie behandeln soll, sodass er davon ausgeht, dass jeder Wert verwendet werden kann, und sie daher nicht animieren kann. Wenn eine Eigenschaft jedoch eine registrierte Syntax hat, kann der Browser diese Syntax optimieren, einschließlich der Fähigkeit, 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 Hover oder Fokus auf eine andere Farbe übergeblendet. Beachten Sie, dass der Übergang bei der registrierten Eigenschaft funktioniert, nicht jedoch bei der nicht registrierten!

Auch wenn es funktional nicht akkurat ist, könnte man den Unterschied zwischen der nicht registrierten Eigenschaft im obigen Beispiel und der registrierten Eigenschaft mit dem Unterschied zwischen einem <custom-ident> und einer Zahl vergleichen, wenn Sie versuchen, die height zu animieren. Sie können nicht von auto zu einer Zahl überblenden, da der Browser den Wert von auto nicht kennt, bis er berechnet wird. Bei einer nicht registrierten Eigenschaft weiß der Browser ebenfalls nicht, welchen Wert sie haben könnte, bis er berechnet wird. Dadurch kann kein Übergang zwischen zwei Werten eingerichtet werden. Wenn die Eigenschaft jedoch registriert ist, haben Sie dem Browser mitgeteilt, welchen Typ von Wert er erwarten sollte, und da er dies weiß, kann er die Übergänge korrekt einrichten.

Es gibt zwei Stolperfallen bei der Registrierung einer Eigenschaft. Die erste besteht darin, dass, sobald eine Eigenschaft registriert ist, es keine Möglichkeit gibt, sie zu aktualisieren, und ein erneuter Registrierungsversuch mit JavaScript einen Fehler auslöst, der besagt, dass sie bereits definiert ist.

Zweitens werden registrierte Eigenschaften im Gegensatz zu Standard-Eigenschaften nicht beim Parsen validiert. Stattdessen werden sie beim Berechnen validiert. Das bedeutet erstens, dass ungültige Werte beim Inspektieren der Eigenschaften des Elements nicht als ungültig angezeigt werden, und zweitens, dass das Einschließen einer ungültigen Eigenschaft nach einer gültigen nicht auf die gültige Eigenschaft zurückfällt. Eine ungültige Eigenschaft fällt jedoch auf ihren registrierten Standardwert zurück.