Feuilles de Styles en Cascades, Promesse contre Réalité, et un regard vers le Futur
Par Mark Newhouse
Les Feuilles de Style en Cascades (CSS) sont une technologie prometteuse, mais leur potentiel, souvent réduit à un phénomène de mode, laisse quelques concepteurs aveugles aux imperfections de la réalité. Cet article évoque les différences qui subsistent entre promesse et réalité, et vous fournit une occasion de vous former maintenant en préparation du futur.
Se jeter à l'eau
Vous en avez entendu parler dans les forums de discussion sur le WebDesign et sur les listes de diffusion. Vous avez lu des articles à propos de l'abandon des tableaux en faveur des gabarits basés sur les standards CSS sur des sites comme A List Apart et Web Reference. Peut-être avez-vous visité quelques sites qui offrent des gabarits sans tableaux prêts à l'emploi. Aussi vous creusez la question et commencez à découvrir de petites divergences d'exécution suivant les navigateurs. Vous réalisez alors que certaines de ces divergences ne sont pas si infimes.
Bidouillage du Modèle de Boîte ? "Qu'est-ce qu'un modèle de boîte ?" vous demandez-vous en râlant. " Que diable peut bien signifier ce voice family:"\"}\"";
et comment l'utilise-t-on pour créer une feuille de style ?".
Vous en êtes venu à réaliser que les CSS ne sont pas la panacée qu'elles devraient être. Un fossé énorme sépare promesse et réalité.
Combler le fossé
Mais le canyon est-il vraiment aussi large ? Vous souvenez-vous de la manière dont vous avez lutté pour maîtriser les tableaux alors que désormais vous pouvez les écrire les yeux fermés. Peut-être après tout y a-t-il quelque chose dans ce que l'on nomme CSS.
Si vous en êtes arrivés à ce stade de compréhension de l'utilisation des feuilles de style, vous n'êtes pas seul. Le confort et la familiarité des gabarits basés sur les tableaux rendent difficiles leur abandon. Et comme vous étudiez quelques-unes des promesses des CSS dans une perspective de la réalité actuelle comme dans une vision de plus long terme, j'espère avoir ici une occasion d'encourager ceux d'entre vous qui, assis sur la barrière, hésitent encore à descendre du côté des CSS et du (X)HTML bien structuré.
Je pense que vous trouverez l'herbe vraiment plus verte par ici et si vous n'aimez pas l'herbe verte - appliquez simplement un nouveau style.
Alors jetons donc un œil sur quelques promesses des CSS et voyons si nous pouvons percevoir le futur des feuilles de style dans notre boule de cristal.
Promesses, promesses
Promesse : Les feuilles de style élimineront les besoins de gabarits complexes fondés sur les tableaux.
Réalité : Même si les navigateurs supportent de mieux en mieux le standard CSS, il y a encore beaucoup de navigateurs qui ne gèrent pas suffisamment bien le positionnement pour inciter tout le monde à en changer. Et même parmi les navigateurs répandus qui permettent vraiment le positionnement, il existe suffisamment d'interprétations différentes et de mauvaises interprétations du modèle de boîte, et d'autres choses encore, pour que dans beaucoup de cas nous ne soyons pas prêts à échanger notre façon de travailler pour une autre.
Au moins les nouvelles habitudes fonctionnent. Mais tant que nos clients voudront la même apparence dans Netscape 4.x, la majorité de vos conceptions s'en tiendront à un gabarit à base de tableaux (voir le New York Public Library Online Style Guide).
Futur : Une fois que les navigateurs supporteront pleinement CSS1 et CSS2, et que les utilisateurs auront tous effectué leurs mises à jour, nous pourrons envoyer paître les méthodes de travail que nous utilisons actuellement (et serons prêts à en trouver de nouvelles pour les mauvaises interprétations de CSS3 et au delà). Si nous codons maintenant avec cet avenir en tête, il sera simple de laisser tomber les .css basiques au profit des .css avancées et nous serons aussi capables d'envoyer paître les TABLEs en faveur des DIVs.
Promesse : Les feuilles de style permettent une vraie séparation entre style et contenu.
Réalité : On préférera lire "séparation entre style et structure". Ce que les CSS permettent. Mais avec la compréhension que cette séparation est liée à la première promesse mentionnée ci-dessus. De sorte que tant que nous tiendrons à ce que les choses s'affichent de la même façon dans Netscape 4.x, nous devrons renoncer à cette séparation pendant un moment.
Le simple fait d'utiliser les CSS ne veut pas dire que vous publiez forcément de façon correctement structurée. Mais comme le proclame le validateur CSS du W3C : "Pour fonctionner comme prévu, votre feuille de style CSS a besoin d'un document correct pour faire l'analyse de son arborescence. Cela veut dire que vous devez utiliser du (X)HTML valide."
Futur : L'avenir s'y prête bien, en supposant que tout le monde saisisse les concepts de style et de structure. C'est une partie importante du mouvement des standards, et ce n'est qu'une question de temps, avant que tous, et tous les éditeurs WYSIWIG, ne produisent du (X)HTML pour structurer le document et des CSS valides pour mettre en forme.
Promesse : Les feuilles de style vous donnent un contrôle absolu sur la mise en page de votre document.
Réalité : L'utilisateur final aura toujours (et devrait toujours) avoir le dernier mot pour décider comment votre site Web s'affichera dans son navigateur. Plus tôt les concepteurs de sites accepteront cet état de fait et commenceront à concevoir pour le Web (et non pour l'impression, la télévision ou tout autre média), plus vite nous pourrons entrer dans cette nouvelle ère excitante de la conception Web. Pour ceux qui ne peuvent se faire à cette idée, il restera toujours le Flash et le PDF.
Futur : Le contrôle absolu de la mise en page d'un document n'a jamais été une vraie promesse des CSS. Il est vrai que les CSS fournissent des mécanismes pour créer des affichages précis au pixel près. Et cet affichage apparaîtra de la même manière dans tous les navigateurs appropriés - à moins que l'utilisateur final ne l'outrepasse. Puisque la plupart des utilisateurs ne savent pas comment - ni même si c'est possible - outrepasser la feuille de style de l'auteur, ils verront simplement la page comme l'auteur l'a conçue.
Promesse : L'utilisation des feuilles de style rend votre site plus accessible.
Réalité : Utilisées à bon escient, tout au long des procédures décrites dans les Web Content Accessibility Guidelines, les feuilles de style iront très loin dans l'assistance à la création de sites Web accessibles. Même si cela fait beaucoup de conditions à remplir.
Là où les feuilles de style apportent vraiment une aide importante, c'est dans la mise en page qui ne nécessite plus d'avoir recours à de complexes tableaux imbriqués pour obtenir les effets désirés. Avant les feuilles de style, si vous vouliez une bordure autour de votre contenu vous deviez imbriquer un tableau dans un autre tableau. D'autres tableaux étaient souvent ajoutés plus tard pour les menus, les menus déroulants, les images découpées et ainsi de suite, provoquant un cauchemar au niveau de l'accessibilité. Les feuilles de style seules ne résolvent pas le problème, mais elles jouent un rôle vraiment important dans sa solution.
Futur : La bonne nouvelle est que les questions de l'accessibilité sont en train d'être abordées, non seulement dans l'arène du navigateur, mais aussi dans les outils qui vous aident à construire vos sites Web. La majorité des outils actuels a tendance à s'appuyer sur les balises FONT, les tableaux et les vieux bidouillages d'espacement gif. Mais maintenant que les navigateurs modernes supportent les CSS qui remplacent ces bidouillages, les versions les plus récentes de Dreamweaver et de Golive résolvent ces problèmes.
Promesse : Les feuilles de style amaigrissent le code et accélèrent le téléchargement de la page.
Réalité : Utilisées proprement, les feuilles de style font en fait plus qu'amaigrir le code et accélérer le téléchargement des pages. Créer un style lié qui fonctionne pour toutes les pages d'un site signifie qu'il est téléchargé une fois et mis en cache par le navigateur. Les pages qui ont besoin de styles spéciaux peuvent les incorporer dans leurs en-têtes, ou dans une feuille de style liée à part.
Mieux encore, l'utilisation des feuilles de style pour la disposition élimine le recours aux tableaux complexes imbriqués. Utiliser la pseudo-classe :hover sur les liens élimine le téléchargement additionnel de javascript et d'images. Utiliser une image en arrière-plan qui ne se répète pas signifie que vous n'avez pas besoin d'ajouter un espace blanc à droite et en dessous de cette image pour prévenir la répétition de celle-ci avec les moniteurs à haute résolution. Tout cela économise de la bande passante, particulièrement sur les sites très visités.
Futur : La bonne nouvelle est que tout ceci peut être réalisé aujourd'hui. Et quand les futurs navigateurs fonctionneront correctement, nous pourrons créer du code encore plus léger en éliminant les habitudes de conception actuelles.
Promesse : Utiliser les feuilles de style garantit désormais la compatibilité des sites Web avec les futurs navigateurs et les futures versions de (X)HTML.
Réalité : Tout cela se fonde sur le fait que les futurs navigateurs se conformeront à tous les standards qui seront mis en place à l'avenir. Ce qui représente une certaine inconnue à ce jour, puisque aucun des navigateurs du moment (NDT : à la date de rédaction de l'article) n'est encore capable de faire fonctionner correctement l'ensemble du CSS1.
Futur : La clé ici est que si vos pages valident maintenant, elles valideront dans le futur, et les navigateurs de la prochaine génération comprendront comment interpréter la déclaration DOCTYPE que vous avez utilisée pour vos documents.
Promesse : Les feuilles de style vous garantissent que les pages Web fonctionnent dans tous les navigateurs.
Réalité : Il n'y a pas beaucoup d'agents utilisateurs alternatifs (NDT : UAs) pour tester cette théorie. A part le navigateur typique du PC, la plupart des UAs actuels ne comprennent pas encore les feuilles de style. Les navigateurs pour les petits écrans des terminaux comme les PDA ignorent souvent les feuilles de style. A la place, ces UAs utilisent des bidouillages à base de tableaux et réorganisent le contenu de manière linéaire pour un affichage sur les plus petits écrans. Les téléphones cellulaires utilisent un langage de balisage complètement différent. La plupart des lecteurs d'écrans et des navigateurs oraux ne sont pas encore très rapides pour utiliser les styles qui font partie du CSS2. Les fabricants de navigateurs essayent encore de travailler au mieux pour générer des styles spécifiques d'impression tels que les sauts de page.
Futur : Cela ne peut que s'améliorer. La question posée ici est à quelle vitesse ces terminaux saisiront les spécifications en cours de façon à ce que nous puissions utiliser la pleine puissance des feuilles de style pour livrer notre contenu de la manière la plus appropriée à chaque type de terminal.
Promesse : Les feuilles de style rendent vos sites Web plus faciles à maintenir.
Réalité : Quand les feuilles de style sont utilisées à bon escient, à l'intérieur d'un document correctement structuré en (X)HTML, elles rendent un site plus facile à maintenir et à mettre à jour. Il est possible de modifier tout l'aspect et le ressenti d'une page ou d'un site entier en appliquant simplement une nouvelle feuille de style. Chris Casciano a créé ainsi 20 changements sur son site durant le mois de février de cette année. Et il y a sur le Web un bon nombre d'articles décrivant différentes méthodes pour basculer les styles sur une page ou sur un site, si vous voulez faire l'essai vous-même.
Bien que ce soit indirectement relié aux feuilles de styles, l'utilisation correcte du (X)HTML structuré - au lieu des tableaux et bidouillages GIF - rend les fichiers balisés plus faciles à lire, et de ce fait, plus facile à maintenir et à mettre à jour. On perd moins de temps à chercher dans le bazar des tableaux imbriqués pour trouver le contenu qui a besoin d'être modifié. Et quand le style est contenu dans un fichier différent, vous avez moins de chances de créer des problèmes avec l'affichage pendant la mise à jour du contenu.
Futur : Le futur est là. Un document bien structuré peut avoir de multiples feuilles de style qui s'y appliquent et qui font en sorte que tout fonctionnera comme annoncé. Changer est aussi simple que le chargement d'une nouvelle feuille de style sur le serveur.
Promesse : Les feuilles de style sont marrantes à construire. Elles fournissent des défis créatifs et de nouvelles opportunités d'apprentissage.
Réalité : Quand vous démarrez simplement avec les feuilles de style, elles peuvent ne pas vous paraître très drôles, mais elles lancent sûrement un défi à votre créativité, et leur apprentissage ne s'arrête jamais. Une fois que vous aurez en tête leurs modes de fonctionnement, vous trouverez ces défis plus amusants que frustrants.
Futur : Bien qu'aucun navigateur actuel ne supporte même pas la totalité du CSS1, sans parler du CSS2, et que le W3C façonne encore les spécifications du CSS3 et au-delà, je pense que le futur sera plein de défis, d'opportunités pour en apprendre plus, tout en procurant beaucoup d'amusements.
Attention les yeux !
Les CSS ressemblent à une jeune recrue prometteuse qui n'a pas encore réalisé tout son potentiel. Nous nous attendons désormais à ce que les navigateurs évoluent et se développent suffisamment pour profiter de tout ce qu'elles ont à offrir. Quelle que soit la façon dont vous l'envisagez, le futur s'annonce brillant !
Ressources
- Digital Web Magazine's CSS resources
- A List Apart articles about CSS
- Web Reference article on CSS layouts
- Box Model Hack
- New York Public Library Online Style Guide
- Web Content Accessibility Guidelines
- Chris Casciano's CSS experiment
- Alternative Style, from A List Apart
http://www.digital-web.com/articles/css_promise_vs_reality_and_a_look_to_the_future/