CSS3 : variables dans la feuille de style

Le code HTML d'une page web

<body> <header> <h1>Titre principal</h2> <h2>Zone de navigation</h2> <button>menu1</button><button>menu2</button><button>menu3</button><button>menu4</button> </header> <main> <article> <h2>Titre article</h2> <p>Texte dans article ... <br>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla ... <h3>Tableau</h3> <table> <tr><th>col 1 </th><th>col 2</th></tr> <tr><td>...</td><td>...</td></tr> <tr><td>...</td><td>...</td></tr> <tr><td>...</td><td>...</td></tr> </table> <h3>Image</h3> <img class ="grand" src ="../images/bikini6.jpg" > </article> <aside> <h2>Boite aside</h2> <p>Texte dans aside ... <br>Blabla ... <br>Blabla ... <br>Blabla ... <br>Blabla .. </aside> </main> <footer> <h2>boite footer</h2> <a>Retour menu</a> </footer> </body>

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.

* {box-sizing : border-box; font-size : 12px; }
body {width : 1200px; margin : auto ;  }
h1,h2{background : darkblue ; color : red ; text-align : center; margin-top : 10px;   }
h3 {background : lime ; color : navy ; text-align : center; font-size : 120%; }
h1 {font-size : 200%; line-height : 50px; }
h2 {font-size : 150%; line-height : 40px;}
button {background : lime ; color : navy ; line-height : 30px; width : 20% ; margin : 1%; font-size : 110%; }
p {background : pink ; color : purple; padding : 5px ; margin : 5px ; font-size : 110%;  }
table {background : lime ; color : navy; width : 50% ; margin : auto;  }
a {display : inline-block ; background : pink ; color : purple; font-size : 120%;  }
img.grand {width : 50%; display : block; margin : auto; }
main {width : 900px; margin: auto;display : flex; flex-direction : row ; }
article {width : 70% ; }
aside {width : 30%; }

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".

Le rendu

Observez le rendu sur un grand écran (page non responsive) !

Deuxième solution : feuille de style avec des variables

Nous allons créé et utiser des variables CSS dans la feuille.

* {box-sizing : border-box; font-size : 12px; }

/* création et initialisation de variables */
html { --largeur1 : 1200px ;--largeur2 : 900px;--largeur3 : 50%; 
--fond1 : darkblue; --texte1 : red ;
--fond2 : pink ; --texte2 : purple ;
--fond3 : lime ; --texte3 : navy; 
--marge1 : 10px; --marge2 : 5px;    }

/* règles de style avec utilisation des variables définies  */
body {width : var(--largeur1); margin : auto ;  }
h1,h2{background : var(--fond1) ; color : var(--texte1) ; text-align : center; line-height : 40px ; margin-top : var(--marge1); font-size : 150%;   }
h3 {background : var(--fond3) ; color : var(--texte3) ; text-align : center; line-height : 20px ; font-size : 120%; }
h1 {font-size : 200%; line-height : 50px; }
h2 {font-size : 150%; line-height : 40px;}
button {background : var(--fond3) ; color : var(--texte3) ; line-height : 30px; width : 20% ; margin : 1%; font-size : 110%; }
table {background : var(--fond3) ; color : var(--texte3); width : var(--largeur3); width : var(--largeur3;); margin : auto;  }
a {display : inline-block ; background : var(--fond3) ; color :var(--texte3); font-size : 110%;   }
img.grand {width : var(--largeur3); display : block; margin : auto; }
p {background : var(--fond2) ; color : var(--texte2); padding : var(--marge2) ; margin : var(--marge2); font-size : 120%;  }
main {width : var(--largeur2); margin: auto;display : flex; flex-direction : row ; }
article {width : 70% ; }
aside {width : 30%; }

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 :

--fond1 : darkblue; --texte1 : red ;

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 :

background : var(--fond3) ; color : var(--texte3) ;

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

background : var(--fond3, lime) ; color : var(--texte3,navy) ;

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

Le rendu avec la feuille de style contenant des variables

Observez le rendu sur un grand écran (page non responsive) !

Le rendu est strictement identique à celui avec une feuille de style classique.
Bien évidemment les variables CSS peuvent être utilisées pour un fichier CSS (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 :

 
--fond1 : skyblue; --texte1 : navy ;
--fond2 : blue ; --texte2 : white ;
--fond3 : lavender ; --texte3 : purple;
Observez les changements dans la mise en page !
Retour menu