Mark Newhouse / Traduction Christophe Ducamp - le samedi 14 09 2002
Regard Vers le Futur
Lien de référence : http://www.digital-web.com/features/feature_2002-06.shtml
Article en cours de traduction destiné à nourrir
la base des articles de pompage.net. --> URL
provisoire. Cherche relecteurs. Merci. ![[La Grenouille ne m'appartient pas... Retrouvez-là sur Fréquences Grenouilles (http://www.enf-conservatoires.org/fs%20intro.htm). Je recherche le Designer...]](../Images/frog.gif)
Feuilles de Styles en Cascades, Promesse vs. Réalité, et Regard vers le Futur
Par Mark Newhouse
Les Feuilles de Style en Cascades (CSS) sont une technologie avec beaucoup de promesses, mais leurs potentiels souvent tendances laissent quelques concepteurs aveuglés par le 2x4 connu comme réalité (NDT ??? ...) Cet article évoque les différences, et produit un cas pour vous enseigner à vous-même maintenant en vue de la préparation du futur.
Se mouiller les pieds
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 vous avez visité quelques sites qui offrent des gabarits sans tableaux prêts à l'emploi. Aussi plongez-vous un petit peu plus profond et commencez à découvrir de petites divergences d'exécution par le navigateur. Puis vous réalisez que quelques-unes de ces divergences ne sont pas si infimes.
Modèle de
Bidouillage de Boîte ? "Qu'est-ce qu'un modèle
de boîte ?" vous vous demandez en râlant. "Et au
diable, que signifie ce voice family."\"}\""; et comment cela
s'utilise pour créer une Feuille de Style ?".
Vous en êtes venu à réaliser que les CSS ne
sont pas la panacée telles qu'elles devraient
l'être. Il y a un gouffre énorme entre promesse et
réalité.
Fermer la brèche
Mais est-ce que le canyon est vraiment aussi large ? Souvenez-vous comment vous ferrailliez pour maîtriser les tableaux ? Et maintenant vous pouvez les écrire les yeux fermés. Peut-être y a t'il quelque chose dans ce truc CSS après tout.
Si vous en êtes arrivé à ce stade de compréhension de l'utilisation des feuilles de styles, vous n'êtes pas seul. Le confort et la familiarité des gabarits basés sur les tableaux rendent difficiles leur abandon. Comme vous étudiez quelques-unes des promesses des CSS tant dans une perspective de réalité actuelle que de vision à plus long terme, j'espère pouvoir vous fournir un cas pour encourager tous ceux parmi vous qui s'escriment à descendre vers la face cachée 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.
Tiens, jetons un oeil sur quelques promesses des CSS et voyons si nous pouvons percevoir dans la boule de cristal le futur des feuilles de style.
Promesses, promesses
Promesse : les Feuilles de Style élimineront les besoins de gabarits complexes fondés sur les tableaux.
Réalité : Même si le support du navigateur pour les gabarits-CSS se dirige vers une ferme amélioration, il y a encore beaucoup de navigateurs qui ne manoeuvrent pas suffisamment bien le positionnement pour inciter tout le monde à en changer. Et même parmi les navigateurs populaires qui permettent vraiment le positionnement, il existe différentes interprétations et mauvaises interprétations du modèle boîte et d'autres choses, que dans beaucoup de cas nous ne sommes pas prêts à modifier nos façons de travailler pour une autre. Au moins les nouvelles habitudes valident. Mais tant que nos client veulent les regarder dans Nestscape 4.x, vous vous accrocherez à bâtir la majorité de vos conceptions sur un gabarit basique tableau (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é les mises à jour, nous pourrons envoyez paître les manières de travailler que nous utilisons actuellement (et serons prêts à en trouver de nouvelles pour les mauvaises interprétations de CSS-3 et au delà). Si nous codons maintenant avec ce futur en tête, il sera aussi simple de laisser tomber les .css basiques en faveur des .css avancées. Nous serons aussi capables d'envoyer paître les TABLEs en faveur des DIVs.
Promesse : Les Feuilles de Style permettent une vraie séparation du style et du contenu.
Réalité : On préférera lire "séparation du style et de la structure". Et les CSS le permettent, mais avec la compréhension que c'est plus proche de la première promesse mentionnée ici. 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. Et simplement parce qu'utiliser les CSS ne veut pas dire que vous publiez forcément votre structure correctement. Comme le proclame le validateur CSS du W3C : "Pour fonctionner comme prévue, votre feuille de style CSS a besoin d'un document correct pour faire l'analyse de l'arbre. Cela veut dire que vous devriez 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 structure. C'est une partie importante du mouvement des standards, et ce sera une question de calendrier, avant que tous, et tous les éditeurs WYSIWIG, produisent du XHTML pour structurer le document et des CSS valides pour mettre en forme le document.
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 Web accepteront cet état de fait et commenceront à concevoir pour le Web (et pas pour l'impression, la télévision ou tout autre média), plus vite nous pourrons nous rendre dans cette nouvelle ère excitante et encore nouvelle de la conception Web. Pour ceux qui ne pourront se faire à cette idée, il restera toujours Flash et PDF.
Futur : Le contrôle absolu de la mise en page d'un document n'a pas été vraiment une promesse passagère des CSS. Il est vrai que les CSS fournissent des mécanismes pour créer un gabarit précis et fondé sur une précision au pixel près. Et ce gabarit paraîtra le même dans tous les agents (terminaux ?) appropriés pour l'utilisateur -- à moins que l'utilisateur final ne l'outrepasse. Depuis que la plupart des utilisateurs finaux ne savent pas comment - voire même pourraient -- outrepasser la feuille de style de l'auteur, la plupart verront simplement la page comme l'auteur l'a conçue.
Promesse : Utiliser les feuilles de style rend votre site plus accessible.
Réalité : Utilisées à bon escient, tout au long des procédures décrites dans Web Content Accessibility Guidelines, les feuilles de style iront loin dans l'assistance à la création de sites Web accessibles. Cela fait beaucoup de conditions. Là où les feuilles de style rendent vraiment une grande aide c'est dans la mise en page sans recourir aux tableaux imbriqués et complexes 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. La plupart des 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 d'accessibilité. Les feuilles de style seules ne résolvent pas le problème, mais jouent vraiment un rôle important dans la solution.
Futur : La bonne nouvelle est que les dénouements 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. Le lot courant des outils a tendance à s'appuyer sur les balises FONT, le tableau et les vieux bidouillages de spacer gif. Mais maintenant que les navigateurs modernes supportent les CSS qui remplacent ces bidouillages, les versions les plus récentes de Dreamweaver et Golive abordent ces dénouements (ndt ???).
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 ces styles spéciaux peuvent les incorporer dans leurs en-têtes, ou dans une feuille de style liée à part.
Mais encore, l'utilisation des feuilles de style pour le gabarit é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 l'image d'arrière-plan pour prévenir la répétition de celles-ci avec les grands moniteurs à haute résolution. Tout cela économise de la bande passante, particulièrement sur les sites encombrés (NDT : ???especially when multiplied over many site visitors ?).
Futur : La bonne nouvelle est que la plupart de ces trucs peuvent être réalisés aujourd'hui. Et quand les futurs navigateurs pratiqueront cela proprement, nous pourrons créer du code encore plus léger en éliminant les habitudes en cours.
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. C'est encore un peu une inconnue à ce jour, pas un navigateur à ce jour n'est même 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 futurs navigateurs 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/agents utilisateurs.
Réalité : Il n'y a pas beaucoup d'alternatives d'agents utilisateurs (NDT : terminaux utilisateurs ???) (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 UA utilisent des bidouillages 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 code 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 telle manière que nous puissions utiliser la pleine puissance des feuilles de style pour livrer notre contenu de la manière la plus appropriée pour 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 correctement, à 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 (look and feel) d'une page ou d'un site en entier en appliquant simplement une nouvelle feuille de style. Chris Casciano a créé ainsi 20 changements à son site durant le mois de février cette année. Et il y a un nombre d'articles sur le Web décrivant différentes méthodes pour basculer les styles sur une page ou 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 codés plus faciles à lire, et de ce fait, plus facile à maintenir et mettre à jour. Il y a moins de temps perdu à 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 le gabarit pendant la mise à jour du contenu.
Futur : Le futur est ici. Un document bien structuré peut avoir de multiples feuilles de style qui s'appliquent et des choses qui fonctionneront comme annoncées. La modification se réduit à l'envoi vers le serveur d'une nouvelle feuille de style.
Promesse : Les feuilles de style sont marrantes à travailler, 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 mettent sûrement un défi à votre créativité, et l'apprentissage ne s'arrête jamais. Et une fois que vous avez en tête leurs modes de fonctionnement, vous trouverez ces défis plus amusants que frustrants.
Futur : Aucun navigateur actuel ne supportant même la totalité du CSS1, laissez de côté le CSS2 et le W3 sortir les spécifications pour le CSS3 et au-delà, je pense que le futur sera plein de défis, d'opportunités pour en apprendre plus, et tout en procurant beaucoup d'amusements.
Mise à l'ombre
CSS est la jeune recrue prometteuse qui n'a pas réalisé tout son potentiel. Ainsi, nous attendons que les navigateurs évoluent et se développent suffisamment pour profiter de tout ce que les CSS 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
New York Public Library Online Style Guide
Web Content Accessibility Guidelines
Chris Casciano's CSS experiment
Alternative Style, from A List Apart
CSS
style - structure - standards
Une histoire de frustrations, difficultés et récompenses sans fin.![[langue française - Gaule]](../Pictures/flag-fr.gif){kind=small}
![[page faite avec CityDesk]](../Images/MadeWithCityDesk.gif){kind=small}