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

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.

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

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 :

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