Accueil

Traduction

Tutoriel CSS - sommaire

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

CSS3 : variables dans la feuille de style

Le code HTML d'une page web

Trois grandes divisions : HEADER, MAIN, FOOTER

Le conteneur MAIN contient les boites ARTICLE & ASIDE.

La feuille de style : première solution

Il s'agit d'une feuille de style classique ; les valeurs des propriétés sont des constantes.

Notez que les "enfants" de la boite MAIN (ARTICLE & ASIDE) sont disposés avec la méthode "flexbox".
Notez aussi que les boites seront "border-box".

Observez le rendu !

Je suis d'accord avec vous. Les couleurs sont moches.
Mais c'est volontaire !

Deuxième solution : feuille de style avec des variables

Nous allons créé et utiser des variables CSS dans la feuille.
En particulier pour définir les couleurs. Ainsi on pourra facilement et très rapidement faire des tests.

Via le sélecteur html on définit des variables qui seront utilisables pour toute la page.
Le nom d'une variable CSS doit toujours commencer par deux tirets. Le nom d'une variable ne peut comporter le caractère "espace".
Exemple de création et initialisation de variables :

Pour utiliser une variable comme valeur d'une propriété il faut l'entourer de la fonction var().
Exemple d'utilisation d'une variable préfinie :

Et si on manipule une variable qui n'a pas été définie ?
La fonction var() admet un deuxième paramètre !

La couleur "lime / navy" sera utilisée par le navigateur s'il ne trouve pas les variables "--fond3 / --texte3"

Observez le rendu !

Le rendu est strictement identique à celui avec une feuille de style classique.
Bien évidemment les variables CSS peuvent être utilisées dans le cadre d'une feuille de style externe.

Intérêt pratique

Pour modifier l'apparence de la page il suffit de changer les valeurs initiales des variables. Donc vous ne modifiez que la deuxième règle de style (celle qui débute avec le sélecteur "html").

Changements opérés dans cette règle de style :

Observez de nouveau le rendu

C'est beaucoup plus joli dans le choix des couleurs.