1. Home
2. (X)HTML/CSS

Respect des standards et rendu homogène

The 2003-11-01 at 00:25 by Loïc d'Anterroches filed under (X)HTML/CSS and Articles.

Un standard, des rendus

Vous venez de passer une semaine à peaufiner un superbe rendu pour votre site. Vous avez fait cela en suivant à la lettre les recommandations du W3C et vous ave pris soins de bien valider votre code. Vous avez fait des tests avec Internet Explorer, parce qu’il faut bien, et Mozilla comme navigateur de référence pour le support des standards. Vous êtes content, tout va bien. Puis un jour une petite mise à jour de votre navigateur préféré fait naître un défaut d’aspect… vous faites remarquer que c’est bizarre, que normalement comme tout est valide dans le respect des normes cela ne devrait pas changer. Et là, vous vous prenez une claque, par un anonyme bien entendu, qui vous remarquer que de toute façon votre code il merde presque partout, et que en gros il est mal pensé.

Si vous vous retrouvez dans cela, pas de chance, il m’est arrivé la même chose dans les commentaires du Standblog.

Il y a des gens sans politesse, oublions, et voici un petit guide pour essayer que cela ne vous arrive pas. Ou plutôt c’est ma petite expérience avec les CSS.

Astuces de codage pour vos CSS

Organisation des fichiers CSS

Si vous regardez le code source CSS des sites de personnes faisant du design leur gagne pain, et surtout ceux qui sont connus dans le petit milieu des standard compliant blogs comme par exemple Stopdesign, A List Apart ou plus près de chez nous le blog de Olivier Meunier, vous constaterez qu’il est très structuré.

Avec XHTML et CSS on fait la séparation du contenu et de sa présentation mais dans vos fichiers CSS, faites la séparation entre structure et décoration. La structure contiendra le positionnement des éléments dans votre page, la décoration, c’est la couleur et le graphisme.

Regarde la source du site de Stopdesign vous verrez qu’il y a en pratique un fichier CSS pour la structure, et un autre pour la présentation. D’autres mettent de grandes barres de commentaires pour séparer les différentes parties, faites selon vos envies, mais faites la séparation.

Une technique à la fois

C’est là où je me suis trompé… mon problème de base est le stylage d’une liste pour qu’elle soit juste comme je voulais. Voici le code à styler :

<div id="x-pos">
   <ul>
   <li><a href="/">Accueil</a></li>
   <li><a href="/breves/">Brèves</a></li>
   <li><a href="/scripts/">Scripts</a></li>
   <li><a href="/articles/">Articles</a></li>
   <li><a href="/xhtmlcss/">XHTML/CSS</a></li>
   <li><a href="/php/">PHP</a></li>
   </ul>
</div>

Redoutablement simple, et pourtant il y a beaucoup de pièges à éviter. Comme je ne peux guère donner une règle générale, étant trop incompétent dans le domaine, je vais vous présenter mes erreurs, puis mes corrections.

Au début, pour styler la liste, j’ai utilisé un mélange de deux techniques. Et ça, c’est pas bien. J’ai mélangé une application de display: inline; pour les li et float: left; pour les liens a. Erreur fatale. Choisissez une méthode ou l’autre et pas un mélange des deux.

Un développement structuré

Ensuite quand vous mettez en place votre structure, évitez de faire comme moi, cela veut dire éviter de jouer la bidouille qui va faire marcher le design. En faisant cela vous allez ajouter trop de choses dans vos fichiers CSS et cela sera très dur à débuguer. Pensez à chaque fois à l’imbrication des éléments… Un remarquable exemple de design structuré est Sliding Doors of CSS qui présente la création de tabs.

Par exemple pour la liste, essayer d’obtenir d’abord la structure de vos liens sans toucher au propriétés des liens. Normalement la grosse partie du travail se fait entre la définition de la liste ul et des éléments de la liste li. C’était encore une de mes erreurs.

Équilibré les propriétés

Quand vous regardez l’arbre de vos éléments, vous aure quelque chose comme body > div > ul > li > a avec éventuellement plus de div. Vous pouvez styler du body jusqu’au a en mettant des identifiants ou des classes. Le truc c’est de réussir à équilibrer la répartition du stylage pour ne pas devoir compenser par exemple dans le style du li un choix au niveau du div. Il faudrait voir la composition de la page comme une toile d’impressioniste, à chaque niveau, on rajoute juste la petite pointe de style qui va dans la bonne direction, ni trop peu, ni pas assez.

Je ne vous cache pas, que je ne suis pas encore là, et que très certainement je n’y serai jamais, je laisse les professionnels faire cela.

Oui mais ta page elle s’affichait différement non ?

Oui. Aucun navigateur n’a de support parfait des recommandations du W3C. De plus les recommandations peuvent être interprétées de différentes façon par les développeurs. Cela mène naturellement à des défauts d’affichage.

Même un navigateur qui est reconnu comme supportant bien les standards a des bugs, et comme la lecture des recommandations est un art à part entière, un petit croisement avec un autre navigateur qui a aussi une bonne implémentation des recommandations permet de voir si votre design ne repose pas sur un défaut dans l’implémentation de ces dernières dans votre navigateur. Si cela passe dans 2, cela devrait être bon pour le reste… en gros…

Si vous avez un jour quelqu’un qui vous dit que coder valide c’est assurer un rendu homogène, et bien non. Si un jour un autre arrive et vous dit que cela donc revient au même que la méthode je me fous des standards et je teste dans différents navigateurs, et bien non. Il faut avancer avec les standards, car cela assure par contre que votre page pourra toujours être lue dans le futur, et en fait c’est ça l’important !

---

---