initial-value CSS-@regel-Deskriptor
Baseline
2024
Neu verfügbar
Seit July 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Der initial-value-Deskriptor der @property @regel spezifiziert den Initialwert für die registrierte CSS-Custom-Property.
Es ist ein erforderlicher Deskriptor, es sei denn, der Wert des Deskriptors syntax ist die universelle Syntax (*).
Wenn er erforderlich, aber fehlend oder ungültig ist, ist die gesamte @property-Regel ungültig und wird ignoriert.
Syntax
/* Set initial color value */
initial-value: rebeccapurple;
/* Set initial length value */
initial-value: 16px;
Werte
Ein Wert, der dem im Deskriptor syntax spezifizierten Typ entspricht.
Zum Beispiel, wenn syntax <color> ist, dann muss der initial-value ein gültiger color-Wert sein.
Wenn der Wert des syntax-Deskriptors nicht die universelle Syntaxdefinition ist, muss der initial-value-Deskriptor einen computationally independent Wert haben. Das bedeutet, der Wert kann in einen berechneten Wert umgewandelt werden, ohne von anderen Werten abhängig zu sein, außer von "globalen" Definitionen, die unabhängig von CSS sind. Zum Beispiel ist 10px computationally independent—es ändert sich nicht, wenn es in einen berechneten Wert umgewandelt wird. 2in ist ebenfalls gültig, da 1in immer 96px entspricht. 3em ist jedoch nicht gültig, da der Wert eines em von der font-size des Elternteils abhängig ist.
Formale Definition
| Zugehörige @-Regel | @property |
|---|---|
| Anfangswert | n/a (required) |
| Berechneter Wert | wie angegeben |
Formale Syntax
initial-value =
<declaration-value>?
Beispiele
Festlegen eines Initialwerts für eine benutzerdefinierte Eigenschaft
Dieses Beispiel zeigt, wie eine benutzerdefinierte Eigenschaft --my-color mit einem anfänglichen Farbwert von #c0ffee definiert wird. Dieser Initialwert wird verwendet, wenn die Eigenschaft nicht geerbt wird (inherits: false) und kein anderer Wert auf dem Element gesetzt ist.
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
Verwendung von JavaScript CSS.registerProperty():
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
Spezifikationen
| Spezifikation |
|---|
| CSS Properties and Values API Level 1 # initial-value-descriptor |