Par Peter-Paul Koch
Publié le 2 octobre 2002 sur www.digital-web.com
Les temps ont changé pour le mieux depuis l'arrivée des standards pour le Web. Nous pouvons écrire des scripts ou des déclarations CSS, confiants que Mozilla, Explorer et Opera les interpréteront à peu près de la même manière. Cette confiance est un luxe énorme par rapport à ce que nous avons connu, il y a quelques années à peine.
Toutes les incompatibilités entre les navigateurs modernes n'ont pas disparu, nous devons toujours faire attention aux navigateurs poussiéreux, aussi. Que devrions-nous faire ? Ignorez les incompatibilités comme si elles n'existaient pas ?... Détecter les navigateurs indésirables et ignorer leurs utilisateurs ?...
...ou, bien, pouvons-nous apprivoiser les incompatibilités et les navigateurs inhabituels en contournant les problèmes qu'ils posent ?
Décision importante
Il y a un an, j'ai dessiné un site qui rendait plus mal dans Netscape 4 que dans des navigateurs plus puissants. Je l'ai fait parce que j'ai voulu bénéficier du CSS tout en l'appliquant à une conception démodée de site, sans me préoccuper des navigateurs... chiants.
C'était pourtant une décision importante. Elevé avec l'axiome que n'importe quel design devrait rendre, au pixel près, dans tous les navigateurs majeurs, l'incompatibilité avec Netscape 4 me paraissait inconcevable.
Je m'attendais, nerveux, à des critiques du genre : "ton design est mal implémenté" ou "tu ne savais pas ce que tu faisais". Heureusement, personne n'a vérifié le site dans Netscape 4.
Je n'ai compris que plus tard que même s'ils avaient vérifié le site dans Netscape, cela ne les aurait pas soucié de toute manière car j'ai réussi à contourner les problèmes tout en m'acquittant de ce pour quoi j'ai été payé : le site était lisible et la navigation fonctionnait. Dans Netscape 4, le site se dégradait avec élégance.
Dégradation gracieuse
Indépendamment du fait que le terme "gracieux" est le plus... heu... gracieux du Glossaire du Web, "la dégradation gracieuse" est une technique simple mais puissante. La première étape pour l'adopter avec succès consiste à "penser fluide" : admettre que l'interface de navigateurs est imprévisible.
La "dégradation gracieuse" signifie que votre site Web continue de fonctionner même quand il est vu dans un navigateur qui ignore les effets sophistiqués (pas de CSS dans Netscape 3, aucune image dans un navigateur vocal). Ajoutez les effets que vous aimez, assurez-vous juste que le site est utilisable sans eux.
La "dégradation gracieuse" a deux règles de base:
- N'importe quel navigateur doit pouvoir accéder au contenu de site.
- N'importe quel navigateur doit pouvoir naviguer sur le site.
Regardez vos pages HTML sans activer le CSS, ni le Javascript. Le texte reste-il lisible ? Le contenu de page est-il toujours ordonné logiquement ? Tous les liens fonctionnent-ils comme prévu ? Si oui, vous avez bâti une base fluide pour votre site.
Maintenant vous pouvez y ajouter des couches supplémentaires, sans cesser de "penser fluide". Comment le site va-t-il rendre sur des écrans plus petits ? La navigation fonctionnera-t-elle sans le DHTML ? L'implémentation du CSS n'est-elle pas douteuse ? Comment rendra le site si certains effets passent mais pas tous ? Et si tout allait mal en même temps ?
Ne vous inquiétez pas de réponses, poser les questions est beaucoup plus important. Prenez un jour supplémentaire pour votre prochain site, puis une demi-journée pour celui d'après. Pondérez les questions. En arrivant à votre troisième site, vous constaterez que les réponses sont déjà dans votre tête.
Sortir de boîte
La pensée fluide vous aidera à contourner des bogues et de petites incompatibilités, aussi. A titre d'exemple, jetons un coup d'oeil sur les modèles contradictoires de boîte (box) de CSS. Indiiscutablement, c'est un des problèmes les plus complexes de compatibilité entre les navigateurs dans le contexte de programmation CSS telle qu'elle est pratiquée aujourd'hui.
- Dans le modèle de box de W3C, la largeur d'une boîte est déterminée par la largeur de la zone contenu, à l'exclusion de padding et de border.
- Selon Microsoft, la largeur d'un box inclut la largeur de contenu aussi bien que de padding et de border.
Mozilla et Opera se tiennent à la norme de W3C, Explorer utilise le modèle de Microsoft. Ainsi, en tant que réalisateurs de sites, nous avons une nouvelle incompatibilité de navigateurs à résoudre.
Il est possible de commuter Explorer 6 au mode standard de W3C en utilisant judicieusement les déclarations DOCTYPE. Réciproquement, il est possible de commuter Mozilla au mode de Microsoft. Enfin une parade CSS est également disponible.
Ainsi nous disposons de l'abondance d'outils pour contourner les problèmes complexes... mais ne pouvons-nous pas nous en tenir à la simplicité ?
La manière la plus simple d'éviter le problème d'incompatibilité de modèles de box est de s'assurer que le rendu de votre site n'en est pas tributaire. Si votre box a une largeur fixe, un padding de 5px et un border de 1px, Explorer le montrera 12px plus petit que les autres navigateurs. Si la mise en page est assez fluide pour s'adapter à cette différence, vous n'avez pas besoin de vous inquiéter.
Parfois, il n'y a pas beaucoup de place pour la fluidité. Commencez alors par vous demander si votre mise en page n'est pas trop complexe... Les webdesigners novices montrent parfois la tendance à penser de manière trop rigide, et à imaginer que leur site doit rendre partout exactement comme il l'ont créé. Dans ces cas, une quick lesson in liquid design est la meilleure solution.
Conclusion
Selon ma vision, la dégradation gracieuse et le liquid design sont tous deux des sous-ensembles de la même pensée liquide : l'un explique comment contourner les problèmes de conformité de navigateurs aux standards de W3C, l'autre nous aide à passer outre la conception "au pixel près".
Pensez fluide. Le Web n'est pas un support fixe. Il est imprévisible. Il fera des choses inattendues à votre site. Le mieux que vous puissiez faire est de suivre le courant.
Misez sur la simplicité. La fluidité du Web n'est pas le problème, elle est la solution. Si vous acceptez que votre site ne sera jamais vu exactement comme vous le voudriez, vous comprendrez l'esprit du Web et de ses standards.
Au sujet de l'auteur :
Peter-Paul Koch est un développeur hollandais indépendant. Il écrit des articles et entretien le site de Quirksmode.org . Il administre également des listes de diffusion de WDF et de WDF-DOM .