initial-value

Der initial-value-Deskriptor der @property at-rule spezifiziert den Anfangswert für die registrierte CSS-Custom-Eigenschaft. Er ist ein erforderlicher Deskriptor, es sei denn, der Wert des syntax-Deskriptors ist die universelle Syntax (*). Falls 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 syntax-Deskriptor angegebenen Typ entspricht. Wenn syntax beispielsweise <color> ist, muss der initial-value ein gültiger color-Wert sein.

Wenn der Wert des syntax-Deskriptors nicht die Definition der universellen Syntax ist, muss der initial-value-Deskriptor einen rechnerisch unabhängigen Wert aufweisen. Das bedeutet, der Wert kann in einen berechneten Wert umgewandelt werden, ohne von anderen Werten abhängig zu sein, außer für "globale" Definitionen, die von CSS unabhängig sind. Beispielsweise ist 10px rechnerisch unabhängig – er ändert sich nicht, wenn er 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

Formale Syntax

initial-value = 
 <declaration-value> ? 

Beispiele

Festlegen eines Anfangswertes für eine benutzerdefinierte Eigenschaft

Dieses Beispiel zeigt, wie eine benutzerdefinierte Eigenschaft --my-color mit einem Anfangswert der Farbe #c0ffee definiert wird. Dieser Anfangswert wird verwendet, wenn die Eigenschaft nicht vererbt wird (inherits: false) und kein anderer Wert für das 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

Browser-Kompatibilität

Siehe auch

• Andere @property-Deskriptoren: inherits und syntax
• CSS Properties and Values API
• CSS Painting API
• CSS Typed Object Model
• Houdini APIs