Tutoriel CSS - sommaire

Améliorations récentes du CSS

On pouvait reprocher au CSS de ne pas être assez ergonomique. La maintenance d'une feuille de style peut s'avérer chronophage. Aussi des préprocesseurs CSS sont proposés aux développeurs web.
Un préprocesseur CSS est un programme qui permet de générer du CSS ; un préprocessur dispose de quelques fonctionnalités qui n'existent pas en CSS pur, telles que variables, mixin, sélecteur d'imbrication, etc.
Le plus célèbre est SASS. Le développeur écrit un pseudo code CSS simplifié et structuré (règles de style imbriquées, variables, etc. ) puis procède à la compilation de ce fichier (extension .scss) pour obtenir la feuille de style interprétable par le navigateur (fichier css).

Les navigateurs viennent d'implémenter deux modules : custom properties & CSS nesting module.

Variables CSS ou module "custom properties"

Vous pouvez donc créer et manipuler des variables dans votre feuille de style comme nous allons le voir dans l'exemple qui suit.

Le code HTML d'une page web

Trois grandes divisions : HEADER, MAIN, FOOTER

Le conteneur MAIN contient les boites ARTICLE & ASIDE.

La mise en forme - première solution

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

La feuille de style

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

Si ces subtilités vous échappent, retournez au menu pour visiter les pages intitulées :
• "la nouvelle propriété box-sizing"
• "CSS - révolution dans le positionnement"

Vous constatez que l'on rencontre plusieurs fois les mêmes valeurs dans la feuille :
• couleurs : darkblue et red ; lime et navy ; pink et purple
• marges : 10px & 5px ;
• largeurs de boites : 900px & 50%

Le rendu

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

La mise en forme - deuxième solution

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

La feuille de style

Commentaires

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édé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" ou "navy" sera utilisée par le navigateur s'il ne trouve pas les variables "--fond3" ou "--texte3"

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

Opérons des changements dans la définition des variables !

Le rendu

C'est beaucoup plus joli dans le choix des couleurs.
La mise à jour de la feuille de style a été simple et très rapide !

Imbrication des sélecteurs

L’imbrication est l’un des principes fondamentaux du HTML que n’offrait pas encore CSS (mais que propose les préprocesseurs CSS).
Cependant le W3C y travaille et une norme a été établie : CSS nesting module.
Outre la suppression des doublons, l'imbrication des sélecteurs améliore la lisibilité du code et facilite donc la maintenance.

Une feuille de style classique

La feuille de style décrit la mise en forme pour deux classes spécifiques à l'élément TABLE. table.tableau1 {width : 60% ;border-spacing :5px;border-collapse : collapse ; ...} table.tableau1 caption {height : 30px; text-transform : uppercase;} table.tableau1 th, table.tableau1 td {border : 2px solid orange;} table.tableau2 {width : 80% ; border-collapse : separate; ... } table.tableau2 caption {height : 30px ; text-transform : capitalize; } table.tableau2 th, table.tableau2 td {border : 1px solid black;}

Il y a énormément de redondances dans les sélecteurs : 4 fois "table.tableau1" et 4 fois "table.tableau2".
Cette redondance serait encore plus importante si nous avions prévu une mise en forme pour les sous-parties d'un tableau : sélecteurs thead, tbody,tfoot.

La feuille de style avec imbrication des sélecteurs

Code du document HTML "imbrication.htm"

Dans la feuille de style je factorise "table.tableau1" et "table.tableau2". ... <style> /* nouvelle syntaxe avec CSS nesting module */ * {font-size : 14px ; font-family : arial; } table.tableau1 {width : 60% ; border-spacing :5px; border-collapse : collapse ; background : skyblue; margin : 10px auto; & caption {height : 30px; text-transform : uppercase;} & th, td {border : 2px solid navy;} } table.tableau2 {width : 80% ; border-collapse : separate; background : pink; margin : 10px auto; & caption {height : 30px ; text-transform : capitalize; } & th, td {border : 1px solid black;} } </style></head> <body> <table class ='tableau1'> <caption>Tableau 1</caption> <tr> <th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> </tr> <tr> <td>contenu cellule</td><td>contenu cellule</td><td>contenu cellule</td> </tr> ... </table> <table class ='tableau2'> <caption>Tableau 2 de la page web</caption> <tr><th>en-tête colonne 1</th><th>en-tête colonne 2</th><th>en-tête colonne 3</th> ...

Observez bien la feuille de style !
"table.tableau1" n'est cité qu'une fois mais emploi du caractère &
"table.tableau2" n'est cité qu'une fois mais emploi du caractère &
Il ne suffit pas d'utiliser &, il faut aussi imbriquer les accolades.

Le rendu du document

Comme vous pouvez le constater le module CSS nesting est désormais implémenté par les navigateurs Chrome et Firefox.