initial-value
Baseline
2024
Newly available
Depuis July 2024, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
Le descripteur CSS initial-value de la règle @ @property définit la valeur initiale pour la propriété personnalisée CSS enregistrée.
Ce descripteur est obligatoire sauf si la valeur du descripteur syntax est la syntaxe universelle (*).
S'il est requis mais absent ou invalide, la règle @property entière est ignorée.
Syntaxe
/* Définit la valeur initiale de couleur */
initial-value: rebeccapurple;
/* Définit la valeur initiale de longueur */
initial-value: 2rem;
Valeurs
Une valeur qui correspond au type définit dans le descripteur syntax.
Par exemple, si syntax est <color>, alors la valeur de initial-value doit être une valeur color valide.
Définition formelle
| En lien avec les règles @ | @property |
|---|---|
| Valeur initiale | n/a (required) |
| Valeur calculée | comme spécifié |
Syntaxe formelle
initial-value =
<declaration-value>?
Exemples
Définir une valeur initiale pour une propriété personnalisée
Cet exemple montre comment définir une propriété personnalisée --my-color avec une valeur initiale de couleur #c0ffee. Cette valeur initiale sera utilisée lorsque la propriété n'est pas héritée (inherits: false) et qu'aucune autre valeur n'est définie sur l'élément.
@property --my-color {
syntax: "<color>";
inherits: false;
initial-value: #c0ffee;
}
En utilisant JavaScript CSS.registerProperty() :
window.CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
inherits: false,
initialValue: "#c0ffee",
});
Spécifications
| Specification |
|---|
| CSS Properties and Values API Level 1 # initial-value-descriptor |
Compatibilité des navigateurs
Voir aussi
- Autres descripteurs de
@property:inheritsetsyntax - API Propriétés et valeurs CSS
- API Peinture CSS
- API Typage de modèle d'objet CSS
- API Houdini