Pourquoi utiliser des styles CSS ?

J’ai eu, depuis la sortie de Dreamweaver MX 2004, l’occasion de présenter ses fonctions à de nombreux utilisateurs de Dreamweaver, tant novices que pros. Comme pour toute démonstration de produit, j’en chante très rapidement les louanges, ce qui est le cas de Dreamweaver MX 2004 et de ses nouvelles fonctions CSS.

Un novice m’a récemment posé une question qui, je dois l’avouer, m’a laissé perplexe. Il a simplement demandé « Pourquoi devrais-je utiliser des styles CSS ? ». C’est à cet instant que j’ai réalisé qu’alors que les avantages sont évidents pour la plupart d’entre nous qui travaillons quotidiennement avec le langage HTML et les styles CSS, ce n’est pas forcément le cas pour de nombreux utilisateurs. Ou, tout au moins, ils peuvent ne pas être au courant de tous les avantages des styles CSS. Cet article est, en gros, la forme écrite de ma réponse à cette question.

Débuts des styles CSS

Avant d’étudier les nombreux avantages des styles CSS, il est bon d’en rappeler un peu l’histoire. Le W3C, l’organisme contrôlant le web, a recommandé l’utilisation des styles CSS en décembre 1996, dans le cadre de la spécification CSS Level 1, CSS qui décrit les attributs devant être utilisés dans les pages HTML. Ces attributs remplaçaient les balises font et autres balises traditionnelles de définition de styles tels que couleurs et bordures. En mai 1998, le W3C a ratifié la spécification CSS Level 2, qui comprend des fonctions supplémentaires et de nouveaux attributs de positionnement. Ces attributs remplaçaient l’usage incorrect de la balise table pour la présentation des éléments d’une page. La version la plus récente de la spécification CSS est CSS 2.1, qui définit certains attributs avec une plus grande précision et on supprime d’autres peu utilisés dans les navigateurs actuels.

Malheureusement, comme c’est souvent le cas des nouvelles technologies, l’adoption de la spécification CSS a été relativement lente. Une des principales raisons de cette lenteur était due aux navigateurs et, par conséquent, les designers web en charge de créer des sites pour ces navigateurs. Netscape Navigator NN était, à l’époque de l’établissement de la spécification CSS, le navigateur le plus commun et n’offrait qu’un support minimal des styles CSS. Alors que Microsoft n’avait ajouté qu’un support également minimal des styles CSS à la version 3 de son navigateur, la plupart des designers web l’auteur de cet article y compris programmaient leurs pages avec NN comme plate-forme de référence.

Les éditeurs de navigateurs ont, au fil des ans et avec chaque version, étendu le support des styles CSS. A l’heure actuelle, Internet Explorer 6, Netscape Navigator 7, Mozilla, Opera et Safari supportent tous la spécification CSS. Ce qui ne veut pas pour autant dire que le travail des designers et des développeurs web en ait été grandement simplifié. Alors que les navigateurs mentionnés ci-dessus supportent la spécification CSS Level 2, ils ne le font pas tous avec le même degré de conformité. Dans certains cas, certains attributs sont même sujets de frustration. En d’autres termes, vous devrez respecter l’adage « tester et tester fréquemment ». Cependant, si vous vous en tenez aux attributs de base des spécifications CSS, vos pages seront affichées correctement.

Mais pourquoi avoir créé la spécification CSS ? Quelles en sont les conséquences pour les applications et sites web créés en HTML ? Mon opinion est que vous pouvez diviser le besoin de styles CSS et les avantages en trois domaines principaux : souplesse, rendu et accessibilité.

Souplesse

Je suis certain que pratiquement tous les designers et développeurs web ont eu un moment de panique lorsqu’un de leurs clients leur a demandé une « petite modification » d’une page résultat d’un travail de mise en page méticuleux et contenant de nombreux tableaux imbriqués. Une requête aussi simple que « pouvez-vous déplacer cette image de quelques millimètres vers la gauche » ou aussi importante que « je n’aime pas ces en-têtes ; pouvez-vous en changer la taille et, pendant que vous y êtes, en changer la couleur ? ». Dans le cas de quelques pages, c’est peut-être l’affaire d’une petite heure. Dans le cas d’un site plus complet, c’est une autre histoire.

Mais quelle est la raison de cette panique dans une telle situation ? Le code, qui définit l’apparence de nos pages, est en fait une partie intrinsèque de la page. Par exemple, prenez n’importe quelle page et comptez le nombre de balises font et table. S’il était possible de supprimer ces éléments du code ou de l’enregistrer à l’extérieur de la page, les modifications pourraient être effectuées à partir d’un emplacement centralisé. Et c’est là l’intérêt des styles CSS.

Les feuilles de styles externes permettent d’appliquer les modifications nécessaires sans toucher aux pages mêmes du site, en mettant simplement la ou les feuilles de styles à jour.

Imaginez un peu comme il serait difficile de déplacer les éléments de navigation de votre site du côté gauche de la page au côté droit la page dans une mise en page traditionnelle basée sur des tableaux. Cela prendrait des heures... Si, par contre, vous aviez choisi d’utiliser les attributs de positionnement CSS plus communément connus sous le nom de CSS-P , la simple modification de l’attribut "float" ou de l’attribut "position" dans la feuille de styles externe suffirait pour mettre votre page à jour. Un avantage supplémentaire : vous avez mis toute les pages de votre site basées sur cette feuille de styles à jour en une seule opération !

Rendu

Le haut débit étant maintenant pratiquement à la portée de tous, les développeurs ne font plus forcément attention autant que nécessaire au rendu d’une page dans un navigateur. Il est cependant important de ne pas oublier que votre public peut encore utiliser une connexion à faible débit. La mise en page traditionnelle basée sur des tableaux est un des principaux facteurs de la lenteur de chargement des pages. En effet, le navigateur, qui reçoit la page du serveur, doit d’abord examiner et interpréter la structure complexe des tableaux imbriqués. Il doit d’abord trouver le bloc de contenu le plus imbriqué et « remonter » le code jusqu’au container le plus élevé, la balise body. C’est seulement à la fin de cette opération que le navigateur peut afficher les contenus à l’écran.

Avec les styles CSS, le navigateur peut tout de suite procéder à l’affichage, dès l’arrivée des contenus du serveur, étant donné la quantité réduite de code de présentation contenue dans la page.

L’utilisation de feuilles de styles externes présente également un avantage moins évident. Avec l’approche traditionnelle basée sur tableaux, les navigateurs doivent récupérer, analyser et afficher chaque page de façon individuelle. En d’autres termes, le navigateur fait autant d’efforts pour afficher la 30ème page de votre site que la première.

Si, cependant, la présentation du site est basée sur des feuilles de styles externes, la première page invite le navigateur à mettre les fichiers de styles en cache. Les pages suivantes qui utilisent ces feuilles de styles sont donc chargées plus rapidement.

Un autre avantage au moment de l’affichage me rappelle le film Amadeus. Dans ce film, Mozart demande à l’empereur ce qu’il pense d’un de ses opéras. L’empereur répond simplement : « trop de notes ». Dans le cas du web, c’est aussi un problème – les notes étant tout bonnement le code HTML. Plus il y a de code, plus le temps nécessaire à l’analyse de la page est élevé.

On a tous entendu parler d’applications de bureautique qui créent du code de mauvaise facture, plein d’informations inutiles qui n’aident à rien dans l’affichage du document. Même si vous, en tant qu’utilisateur de Dreamweaver, ce n’est pas vraiment votre problème, vous pouvez tout de même utiliser un « nombre trop élevé de notes ». La conception basée sur des tableaux en est un exemple.

Lorsque vous implémentez les styles CSS dans vos pages, vous participez à la réduction de la quantité de code. Le simple fait de supprimer toutes les balises de police de certaines pages peut avoir un effet important sur la quantité de code. Et, en passant entièrement au format CSS-P, il est possible, dans certains cas, de réduire la quantité de code de 50 % ! Moins de code = chargement plus rapide des pages.

Accessibilité

On parle beaucoup de l’accessibilité. Alors que la plupart des développeurs savent qu’ils devraient penser un peu plus à l’accessibilité de leurs sites, ce sont souvent ceux qui y sont forcés qui respectent cette pratique. Nombreux sont ceux qui pensent encore que le simple fait d’ajouter des balises telles que les balises alt des images suffit amplement. L’accessibilité ne se réduit pas à ces quelques changements et l’utilisation des styles CSS simplifie la création de sites accessibles.

L’une des principales questions liées à l’accessibilité – et un domaine dans lequel les styles CSS peuvent faire une différence – est la façon dont les technologies d’assistance telles que les logiciels d’analyse d’écran « lisent » une page. Les mises en page traditionnelles basées sur des tableaux rendent la lecture très difficile. La confusion est accrue par l’imbrication des différents tableaux : en lire le contenu ou les ignorer ? Y retourner une fois le reste de la page lu ou non ?

La plupart des utilisateurs peuvent rapidement repérer les contenus qui les intéressent et ignorer les éléments de navigation ou d’autres éléments placés en haut de la page. Une personne malvoyante n’a pas ce luxe. Elle doit attendre que le logiciel d’analyse d’écran ait fini d’interpréter les informations superflues placées entre le haut de la page et les contenus intéressants.

Les techniques actuelles permettant d’indiquer aux logiciels d’analyse d’écran qu’ils doivent ignorer les éléments de navigation obligent à l’ajout de liens aux images de la barre de navigation ou aux autres contenus. Ces techniques, bien que fonctionnant correctement, peuvent également prêter à confusion est être détectées par tous les visiteurs. Les styles CSS permettent de définir des éléments invisibles, à vos yeux comme à ceux de la souris. Le logiciel d’analyse d’écran peut alors utiliser ces éléments pour naviguer plus rapidement et de façon plus efficace dans le document.

Les styles CSS éliminent le code de présentation, ce qui simplifie la tâche du logiciel d’analyse d’écran, qui ne trouve plus que des contenus réels. En outre, l’utilisation du format CSS-P vous permet de vous concentrer sur la « fluidité » des contenus. La mise en ordre logique des éléments prend alors plus d’importance.

La lecture de ce document vous a permis de suivre un « flux » d’information. Mais, dans le cas de l’exemple de tableaux imbriqués, avec une mise en page sur plusieurs colonnes, ce paragraphe aurait pu se trouver dans le coin supérieur droit de la page. Un logiciel d’analyse d’écran n’aurait pas pu savoir qu’il aurait dû attendre la fin de l’article pour le lire.

Le format CSS-P permettrait également au navigateur d’afficher ce paragraphe dans le coin supérieur droit de la fenêtre, alors que la position du paragraphe dans le code HTML du document se trouverait toujours à cet endroit dans le code source. Votre site n’en devient que plus accessible.

Conclusion et étapes suivantes

Voilà. J’espère vous avoir convaincu des avantages des styles CSS. Sans mentionner qu’il n’y a pas beaucoup à apprendre. C’est pourquoi je vous encourage à consulter quelques articles supplémentaires sur les styles CSS publiés sur le centre des développeurs de Macromedia ; vous y trouverez des informations confirmant l’avantage des styles CSS et qui peuvent vous servir de guide d’implémentation. Je compte également publier d’autres didacticiels dans les semaines et mois à venir. En attendant : amusez-vous bien !