Tutoriel CSS - sommaire

CSS3 : améliorations du CSS dans un avenir proche

On peut reprocher au CSS actuel 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).

Dans un futur proche ces outils devraient nativement être disponibles dans le CSS. C'est déjà le cas du module "custom properties".

Variables CSS

Le module "custom properties" est désormais implémenté par tous les navigateurs récents.
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 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; } html {margin : 0 ; padding : 0 ; } body {width : 90%; 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 : 100% ; 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".

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%

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. * {box-sizing : border-box; font-size : 12px; } /* création et initialisation de variables */ html { --largeur1 : 90% ;--largeur2 : 100%;--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"

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 : --fond1 : skyblue; --texte1 : navy ; --fond2 : blue ; --texte2 : white ; --fond3 : lavender ; --texte3 : purple;

Observez de nouveau le rendu

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

Imbrication des sélecteurs

L’imbrication est l’un des principes fondamentaux du HTML que n’offre pas encore CSS (mais que propose les préprocesseurs CSS).
Cependant le W3C y travaille et une norme ne devrait pas tarder (CSS nesting module). On peut donc espérer qu'elle soit prochainement implémentée par les navigateurs.
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 aux éléments TABLE : tableau1 & tableau2 table.tableau1 {width : 60% ;border-spacing :5px;border-collapse : collapse ;} table.tableau1 thead, table.tableau1 tfoot {background : skyblue;} table.tableau1 tbody {background : yellow;} table.tableau1 caption {height : 50px; text-transform : uppercase;} table.tableau1 th, table.tableau1 td {border : 2px solid orange;} table.tableau2 {width : 80% ; border-collapse : separate; } table.tableau2 thead, table.tableau2 tfoot {background : orange;} table.tableau2 tbody {background : pink;} 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 : 5 fois "table.tableau1" et 5 fois "table.tableau2".

La feuille de style avec imbrication des sélecteurs

Prochainement les navigateurs récents devraient être capables d'interpréter la syntaxe qui suit : /* nouvelle syntaxe avec CSS nesting module */ table.tableau1 {width : 60% ;border-spacing :5px;border-collapse : collapse ; thead, tfoot {background : skyblue;} tbody {background : yellow;} caption {height : 50px; text-transform : uppercase;} th, td {border : 1px solid orange;} } table.tableau2 {width : 80% ; border-collapse : separate; thead, tfoot {background : orange;} tbody {background : pink;} caption {height : 50px ; text-transform : capitalize; } th, td {border : 1px solid black;} }

Les redondances ont disparu. On n'écrit plus qu'une fois "table.tabeau1" et une fois "table.tableau2".