initial-value
Baseline
2024
Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Der initial-value Deskriptor der @property At-Regel gibt den Anfangswert für die registrierte CSS benutzerdefinierte Eigenschaft an. Es ist ein erforderlicher Deskriptor, es sei denn, der Wert des syntax Deskriptors ist die universelle Syntax (*). Wenn erforderlich, aber fehlend oder ungültig, 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 syntax Deskriptor angegebenen Typ entspricht. Zum Beispiel, wenn syntax <color> ist, 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 berechnungsunabhängigen 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 berechnungsunabhängig — 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
Setzen eines Anfangswerts für eine benutzerdefinierte Eigenschaft
Dieses Beispiel zeigt, wie eine benutzerdefinierte Eigenschaft --my-color mit einem anfänglichen Farbwert von #c0ffee definiert wird. Dieser Anfangswert wird verwendet, wenn die Eigenschaft nicht vererbt wird (inherits: false) und kein anderer Wert auf dem Element festgelegt 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
| Specification |
|---|
| CSS Properties and Values API Level 1 # initial-value-descriptor |