Les bases
Mise en pratique
Approfondir
TP Responsive
TP Avancé
TP Restaurant : L'en-têteRéservé aux membres premiums
42 min
TP Restaurant : Bloc présentationRéservé aux membres premiums
38 min
TP Restaurant : MenuRéservé aux membres premiums
40 min
TP Restaurant : RéservationRéservé aux membres premiums
32 min
TP Restaurant : Recettes & planRéservé aux membres premiums
37 min
TP Restaurant : FooterRéservé aux membres premiums
17 min
TP Restaurant : Page recetteRéservé aux membres premiums
42 min
Aller plus loin

Dans cette vidéo nous allons voir comment utiliser les variables CSS. Les variables permettent d'éviter au maximum la répétition d'une valeur au sein d'une feuille de style et permettent d'avoir un code CSS plus flexible et dynamique. Le fonctionnement est extrèmement simple et les variables se définissent de la manière suivante :

:root {
    --primary: #CCC;
}

Le sélecteur :root permet de sélectionner l'élément racine d'une page (l'élément HTML) en offrant une plus grande spécificité de sélecteur (la règle l'emportera donc sur le simple sélecteur html).
Il est ensuite possible d'utiliser notre variable pour définir la valeur à donner à une propriété :

.btn {
    background: var(--primary);
}

Les variables peuvent ensuite redéfinie pour un sélecteur particulier, ce qui affectera ainsi tous les enfants de ce sélecteur. Par example :

.theme-vert {
    --primary: green;
}

L'ajout de la classe .theme-vert sur l'élément <body> permettra de changer la couleur de tous les éléments qui utilisent la variable --primary.

Et Internet Explorer dans tout ça ?

Si vous vous regardez sur CanIUse.com vous pourrez voir que le support des variables CSS est relativement récent et que malheureusement Internet explorer est encore une fois à la ramasse. Ce n'est cependant pas une raison pour se priver des variables. Vu qu'il ne comprend pas la règle avec var(), la navigateur va l'ignorer. Il est donc possible de mettre la même règle avec la valeur en dur avant. Vous pouvez convertir votre CSS automatiquement à l'aide d'outils comme postcss-preset-env afin que votre style se dégrade correctement sur ces navigateurs.