Blog Webatou, le Web accessible à tous

Il y a un mois, le W3C fêtait le 10ème anniversaire des feuilles de style en cascade (CSS) ^[1]

Dans le communiqué de presse, on pouvait lire :

La communauté des concepteurs confirme que l’utilisation des feuilles de style en cascade joue en faveur de l’esthétique des sites, tout en facilitant la création et en réduisant le coût déclare Bert Bos, responsable de l’activité Style du W3C et co-auteur de la spécification devenue la norme CSS niveau 1, publiée le 17 décembre 1996.

Pour mes lecteurs qui ne le connaissent pas encore : une rapide explication de l'effet magique des feuilles de style.
Pour ceux qui veulent faire leurs premiers pas : le cours CSS débutant.
Et pour ceux qui veulent approfondir le sujet : les articles du collectif OpenWeb, les traductions de l'équipe Pompage (et notamment l'excellente série CSS : on reprend tout à zéro !), les tutoriels d'Alsacréations.

Le W3C a profité de l'occasion pour mettre en ligne la nouvelle version de son outil de validation des feuilles de style traduite en plusieurs langues, dont le français (présentation par Karl Dubost : The Fuji CSS Validator release).

Une nouvelle caractéristique de taille : la prise en compte par défaut de la spécification CSS2.1 qui est le résultat de la confrontation de CSS2.0 (périmé) et de l'implémentation dans les navigateurs.

CSS niveau 2 révision 1 (CSS 2.1) inclut l’ensemble des fonctions CSS1 et ajoute le positionnement spatial, la numérotation automatique, les sauts de page, l'écriture bi-directionnelle (de droite à gauche ou de gauche à droite), ainsi que d’autres fonctionnalités. (extrait du communiqué de presse)

Pourquoi valider ?

Attention, si vous suivez mon conseil et validez vos feuilles de style sans valider aussi votre code (X)HTML, cela n'aurait pas beaucoup de sens ! Ne négligez donc surtout pas cette remarque sur la page d'accueil du validateur :

Si vous souhaitez valider une feuille de style incorporée dans un document (X)HTML, vous devriez d'abord vérifier la validité de votre document (X)HTML.

En complément, si vous proposez un flux RSS ou Atom à vos visiteurs, un passage par le FEED Validation Service s'impose aussi.

Certains affirment que l'essentiel est de vérifier que l'affichage est bon dans les navigateurs les plus utilisés. C'est oublier une caractéristique importante de ces logiciels : ils sont conçus pour corriger un certain nombre d'erreurs de code. Mais ils ne le font pas tous de la même manière et la gestion des erreurs par un navigateur peut être modifiée à l'occasion du passage à une nouvelle version. Cela signifie que, si tout va bien pour vos pages au moment de votre vérification, rien ne garanti qu'il en sera toujours de même plus tard. Une syntaxe correcte permet d'éviter d'éventuelles futures mauvaises surprises.

Une autre caractéristique souvent méconnue : les règles de vos CSS s'appliquent non pas au code (X)HTML que vous avez écrit mais à celui qui aura été interprété (et éventuellement corrigé) par le navigateur. Là aussi, la seule manière d'éviter de mauvaises surprises, c'est de ne pas compter sur le laxisme des navigateurs et de ne leur proposer qu'un code valide qu'ils n'auront pas à corriger.

La validation ne doit pas être considérée comme un objectif en soi mais comme un des moyens d'atteindre notre véritable objectif, un site de qualité. Et à ce titre, il faut en user et en abuser régulièrement au cours de l'élaboration du site (et pas seulement lorsqu'il est terminé). Ce qui pourrait faire croire à une perte de temps permet en réalité souvent d'en gagner quand il s'agit de résoudre des problèmes d'affichage en éliminant d'office certaines causes possibles.

Il convient aussi de ne pas confondre valide (syntaxe correcte) et conforme (structure correcte et logique du contenu, utilisation des balises adéquates avec des attributs judicieusement définis). Une page peut donc passer avec succès le test du validateur (et permettre à son auteur d'afficher fièrement le logo du W3C) mais présenter une lamentable soupe de balises.
Appliquée aux feuilles de style, cette approche peut concerner les avertissements donnés par le validateur. L'exemple le plus souvent évoqué est celui de la couleur de fond non définie dans une règle de style : alors qu'elle semble superflue dans la majorité des cas, son absence peut poser problème lors de l'utilisation d'une feuille de style personnelle par le visiteur (la suppression ou la modification des couleurs peut rendre le texte illisible).