Sémantique et cascades de styles

La semaine dernière, ma boîte m’a envoyée en formation CSS. Vous connaissez les CSS ? Cascading Style Sheet : « feuilles de style en cascade », soit la façon propre de développer un site web, pas comme les tableaux imbriqués que j’ai appris à faire à une autre époque, qui font des pages avec un code de milliers de lignes de long où l’information est noyée dans les éléments de mise en forme.

Avec les CSS, le code ne présente (théoriquement) que de l’information linéaire et hiérarchisée et des marqueurs sémantiques, qui décrivent la fonction de l’objet concerné et pas son apparence. Car tous les éléments cosmétiques, de présentation, de mise en forme, de position, de navigation, tous les éléments graphiques, qui ne relèvent pas de l’informatif, sont externalisés dans une feuille de style, que l’on peut modifier à l’envi. Tout cela s’inscrit dans ce que l’on appelle le web sémantique.

Il faut avoir connu le HTML alambiqué et confus des tableaux imbriqués avec déclarations javascript interminables pour être sensible à la beauté de ces pages au code épuré grâce aux CSS. De la même façon peut-être, il faut avoir connu l’ivresse des mots à 5 syllabes, des phrases savamment tournées et des récits-fleuves où l’informatif côtoie le descriptif, les digressions, la poésie, l’esbroufe, pour être sensible à la pureté d’une écriture vraie et sans fioritures.

Il y a une autre notion essentielle dans les CSS : celle de cascade. Pourquoi feuilles de style « en cascade » ?

Avant de répondre à ça j’ai envie de vous parler de Six Feet Under, série tv dont deux des personnages les plus intéressants sont Billy et Brenda, frère et sœur trentenaires. Dans un épisode de la saison 3, leur mère leur raconte que quand ils étaient enfants, ils commençaient systématiquement leurs phrases par des conjonctions, ce qui donnait par exemple « Mais, Papa, quand on discutait tout à l’heure tu nous as dit… », ou « Et, Maman, on pourrait aller faire ceci… », si bien que leur père disait que vivre avec eux revenait à écouter la phrase la plus longue de l’histoire de l’Univers.

Ce qui nous ramène aux CSS. Car le code source d’une page web est un peu comme une phrase unique, loin de rivaliser avec la plus longue de l’histoire de l’Univers sans doute, mais parfois très longue quand même. Les balises neutres et marqueurs sémantiques vont hiérarchiser l’information, les styles vont la mettre en forme et en scène.

On parle alors de cascades, car de multiples styles peuvent coexister dans une même page, parfois encapsulés les uns dans les autres avec des rapports de parenté et d’hérédité, parfois définis par le créateur de la page dans une feuille de style (par exemple « je veux que tel titre ait telle couleur et telle image de fond »), parfois définis par l’utilisateur dans les préférences de son navigateur (par exemple « je veux que le texte s’affiche en taille maximale »), et tous ces styles se combinent, selon tout un tas de règles. La plupart du temps, c’est le plus précis qui a parlé qui a raison. Mais si deux éléments de précision équivalente s'affrontent, c’est le dernier qui a parlé qui a raison.

Et si, dans le cas de rapports de parenté, les propriétés des éléments parents s’appliquent aux éléments enfants, quand on définit des propriétés propres aux éléments enfants et contradictoires avec les éléments parents en revanche celles des éléments enfants se substituent à celles des parents. Et oui, c'est très évolutionniste !

Une dernière chose concernant les CSS : elles participent de l’accessibilité d’un site web. On fait une feuille de style différente pour chaque type de support (écran d’ordi ou de tv, smartphone, imprimante, projecteur…), si bien que la forme du contenu s’adapte au média utilisé.

Alors, que diriez-vous d’écrire un roman CSS, sémantique, épuré, linéaire, à l’apparat entièrement externalisé dans des archives, implacable et darwinien, dont on éditerait une version classique pour l’impression, une version enrichie d’illustrations pour la lecture écran, une version découpée en petits paragraphes et petits chapitres pour la lecture iPad, une version audio pour l’exploitation sur téléphone, etc. ?...