Verwendung der CSS Properties and Values API

Registrierung einer benutzerdefinierten Eigenschaft

Die Registrierung einer benutzerdefinierten Eigenschaft ermöglicht es Ihnen, dem Browser mitzuteilen, 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 namens --my-prop unter Verwendung von CSS.registerProperty. --my-prop wird die CSS-Farbsyntax verwenden, es wird einen Standardwert von #c0ffee haben, und es wird seinen Wert nicht erben:

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 namens --my-prop unter Verwendung der @property At-Regel. --my-prop wird die CSS-Farbsyntax verwenden, es wird einen Standardwert von #c0ffee haben, und es wird seinen Wert nicht erben:

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

Verwendung registrierter benutzerdefinierter Eigenschaften

Ein Vorteil der Registrierung einer Eigenschaft ist, dass der Browser jetzt weiß, wie er Ihre benutzerdefinierte Eigenschaft in Dingen wie Übergängen behandeln soll! 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 diese Syntax optimieren, einschließlich der Möglichkeit, sie zu animieren!

In diesem Beispiel wurde die benutzerdefinierte Eigenschaft --registered unter Verwendung der Syntax <color> registriert und dann in einem linearen Verlauf verwendet. Diese Eigenschaft wird dann bei Hover oder Focus auf eine andere Farbe übergegangen. Beachten Sie, dass der Übergang mit der registrierten Eigenschaft funktioniert, aber nicht 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 vollständig korrekt ist, eine gute Möglichkeit, über den Unterschied zwischen der nicht registrierten Eigenschaft im obigen Beispiel und der registrierten Eigenschaft nachzudenken, ist der Unterschied zwischen einem <custom-ident> und einer Zahl, wenn versucht wird, height zu animieren. Sie können nicht von auto zu einer Zahl übergehen oder animieren, da der Browser den Wert von auto nicht kennt, bis er berechnet wird. Bei einer nicht registrierten Eigenschaft weiß der Browser ebenso wenig, welchen Wert sie haben könnte, bis er berechnet wird, und kann deshalb keinen Übergang von einem Wert zum anderen festlegen. Wenn sie jedoch registriert ist, haben Sie dem Browser mitgeteilt, welchen Typ von Wert er erwarten soll, und weil er das weiß, kann er die Übergänge ordnungsgemäß einrichten.

Überraschungen

Es gibt zwei Überraschungen bei der Registrierung einer Eigenschaft. Die erste ist, dass, sobald eine Eigenschaft registriert ist, es keine Möglichkeit gibt, sie zu aktualisieren, und der Versuch, sie erneut mit JavaScript zu registrieren, einen Fehler auslöst, der anzeigt, dass sie bereits definiert wurde.

Zweitens, im Gegensatz zu Standard-Eigenschaften werden registrierte Eigenschaften nicht validiert, wenn sie analysiert 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, und dass das Hinzufügen einer ungültigen Eigenschaft nach einer gültigen nicht auf die gültige Eigenschaft zurückfällt. Eine ungültige Eigenschaft wird jedoch auf ihren registrierten Standardwert zurückfallen.

Browser-Kompatibilität

Siehe auch

• Registrieren von benutzerdefinierten Eigenschaften mit CSS