Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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".
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.
Trois grandes divisions : HEADER, MAIN, FOOTER
Le conteneur MAIN contient les boites ARTICLE & ASIDE.
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".
Je suis d'accord avec vous. Les couleurs sont moches.
Mais c'est volontaire !
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"
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.
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 :
C'est beaucoup plus joli dans le choix des couleurs.
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.
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".
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".