Les variables Navigateurs

CSS permet aujourd’hui de stocker des informations dans des variables. C’est- à-dire que si on utilise de nombreuses fois la même couleur, ce qui est courant, il est possible de donner un nom à cette couleur, pour ensuite utiliser ce nom à la place de la couleur.

Le nom devra commencer par deux tirets : --ma-couleur.

Pour cela, nous allons utiliser :root{}, qui va pointer à la racine du document.

:root { 
  --couleur-fond:#007DB7;  
  --padding-default:10px;  
} 

Avec ce type de syntaxe au début du fichier CSS, les variables seront accessibles/utilisables dans le fichier, et permettront de regrouper bon nombre d’éléments de la charte graphique, comme les couleurs.

Pour utiliser une variable, le code sera :

#cadreTop header { /* ou tout autre sélecteur */ 
background-color : var(--couleur-fond); 
}