Mot-clé CSS `initial`

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis novembre 2015.

Le mot-clé CSS initial applique la valeur initiale (ou par défaut) d'une propriété à un élément. Il peut être appliqué à n'importe quelle propriété CSS, y compris la propriété raccourcie CSS all. En définissant all sur initial, toutes les propriétés CSS peuvent être rétablies à leurs valeurs initiales respectives en une seule fois, au lieu de les rétablir séparément.

Pour les propriétés héritées, la valeur initiale peut être inattendue. Vous devriez envisager d'utiliser les mots-clés inherit, unset, revert, revert-layer ou revert-rule à la place.

Exemples

Utilisation simple

Dans cet exemple, nous utilisons le mot-clé initial pour réinitialiser les valeurs des propriétés color et font-size d'un élément.

HTML

html

<p>
  Ce texte est rouge et grand.
  <em
    >Ce texte est avec la couleur initiale (typiquement noire) et la taille
    initiale (typiquement 16px).</em
  >
  Ce texte est rouge et grand à nouveau.
</p>

CSS

Nous définissons color et font-size sur l'élément <p>, puis nous définissons ces propriétés sur initial sur l'élément HTML <em> pour les réinitialiser.

css

p {
  color: red;
  font-size: 2rem;
}

em {
  color: initial;
  font-size: initial;
}

Résultat

Avec le mot-clé initial dans cet exemple, les valeurs de color et font-size sur l'élément em sont restaurées aux valeurs initiales pour color et font-size, respectivement.