Adaptive web design - Aaron Gustafson.pdf

ADAPTIVE WEB DESIGN Créer des sites riches avec l’amélioration progressive

Aaron Gustafson Préface de Jeffrey Zeldman

Propriété de david damour

ADAPTIVE WEB DESIGN Créer des sites riches avec l'amélioration progressive Aaron Gustafson

Traduit par Olivier Engler

Pearson France a apporté le plus plus grand soin à la réalisation réa lisation de ce livre afin de vous fournir une information inform ation complète complète et fiable. Cependant, Pearson France n’ n’assume assume de responsabilités, ni pour son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette utilisation. Les exemples ou les programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle professionnelle.. Pearson France ne pourra en aucun cas être tenu pour responsable des préjudices préjudices ou dommages de quelque nature que ce soit pouvant résulter de l’utilisation l’utilisation de ces exemples exem ples ou programmes. program mes. Tous les noms de produits ou marques cités dans da ns ce livre sont des marques déposées par leurs propriétaires respectifs.

Publié par Pearson France Immeuble Terra Nova II 74, rue r ue de Lagny 93100 93 100 Montreuil Montreu il Tél : +33 (0)1 43 62 31 00 www.pearson.fr

Traduit par Olivier Engler

ISBN : 978-2-7440-5600-0

© 2013 2013 Pearson Pears on France Tous droits réservés

Titre original : Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement, by Aaron Gustafson Authorized translation from the Authorized English language edition, entitled Adaptive Web Design: Crafting Rich Experiences with Progressiv Progressivee Enhancement by by Aaron Gustafson (ISBN 978-0-9835895-0-1), published by Easy Readers. Copyright © 2011 Aaron Gustafson. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pear Pearson son France. Copyright Pearson France.

ISBN original : 978-0-9835895-0-1 © 2011 Aaron Gustafson. All Rights reserved.

Aucune représentation ou reproduction, même partielle, pa rtielle, autre que celles prévues à l’article L. 12 122-5 2-5 2˚ 2˚ et 3˚ a) du code de la propriété intellectuelle ne peut être faite sans l’autorisation expresse de Pearson France ou, le cas échéant, sans le respect des modalités prévues à l’article L. 122-10 dudit code. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson France. FRENCH FR ENCH Language edition published published by Pearson France.

Pour Kelly

iv

ADAPTIVE WEB DESIGN

REMERCIEMENTS Sans les conseils et le soutien de tous mes amis et collègues de mon secteur d'activité, ce livre n'aurait jamais été écrit et je n'aurais jamais pu me placer dans une position me permettant d'en envisager l'écriture. Je veux donc prendre quelques instants pour leur exprimer ma sincère gratitude : Pour Molly Holzschlag et Jeffrey Zeldman qui m'ont pris sous leurs ailes et m'ont ont permis permi s de renforcer mes compétences en tant ta nt que conférencier et auteur. Et aux nombreux organisateurs de conférences et directeurs de publications qui m'ont donné l'occasion de mettre ces compétences en pratique. Pour Carolyn Wood qui m'a aidé à peaufiner mes premiers brouillons et pour Krista Stevens qui a épuré mes arguments, fluidifié ma prose et calmé le monsieur je-sais-tout au fond de moi. Pour Craig Cook et Derek Featherstone qui ont poussé à ce que mon code reste efficace et lisible. Merci aussi à tous les relecteurs qui m'ont donné de précieux conseils (et des corrections) : Dan Cederholm, Simon Collison, Kristina Halvorson, Christian Heilmann, Whitney Hess, Jeremy Keith, Dan Rubin et Jonathan Snook. Merci à l'équipe l' équipe Easy Designs Design s pour son souci des détails et son aide précieuse précieuse dans la production de ce livre : Jessica Martin, Daniel Ryan, Jessi Taylor, Matthew Turnure et Laura Helen Winn. Pour Veerle Pieters qui a trouvé du temps dans son agenda chargé afin de créer pour moi cette couverture absolument superbe. Et enfin, merci à Kelly qui m'a dégagé du temps pour écrire ce livre, qui m'a aidé à organiser mes idées et qui m'a encouragé encouragé à aller jusqu'au jusqu 'au bout.

REMERCIEMENTS

TABLE DES MATIÈRES vi

AVANT-PROPOS

1

CHAPITRE 1 PENSEZ À L'UTILISATEUR, PAS AU NAVIGATEUR

15

CHAPITRE 2 AMÉLIORATION AMÉLIORA TION PROGRESSIVE AVEC LE HTML

39

CHAPITRE 3 AMÉLIORATION AMÉLIORA TION PROGRESSIVE AVEC LE CSS

67

CHAPITRE 4 AMÉLIORATION PROGRESSIVE AVEC JAVASCRIPT

91

CHAPITRE 5 AMÉLIORATION AMÉLIORA TION PROGRESSIVE ET ACCESSIBILITÉ

109 CHAPITRE 6 À EMPORTER INDEX

v

vi

ADAPTIVE WEB DESIGN

AVANT-PROPOS Par un glorieux après-midi de mars 2006, je passai en trombe avec un ami devantt l'hôtel devan l 'hôtel Hilton du centre d'Austin d 'Austin pour rejoindre la prochaine conférence du festival SXSW Interactive quand Interactive quand un jeune inconnu nous arrêta net dans notre course. Sans même se présenter, il nous annonça qu'il était disponible pour prendre la parole lors de la conférence An Event Apart, un événement destiné aux web designers que j'avais initié trois t rois mois plus tôt avec Eric Meyer. Je me suis alors tourné vers mon ami, prenant l'air faussement enjoué de Mister Burns des Simpsons (ce qui n'est pas bon signe) et lui ai demandé : "Qui est ce jeune arriviste arr iviste impétueux, impétueux, Smithers ?" Le jeune arriviste impétueux est très vite devenu un de mes collègues les plus intimes. Au fil des mois et des ans, Aaron Gustafson a produit du code client et serveur pour quelques-uns des clients les plus exigeants de ma société. Tout aussi important, il a brillamment assuré le rôle d'éditeur technique de la troisième édition de Designing With Web Standards. Standards. Son travail consistait surtout à informer Ethan Marcotte et moi-même moi-même des choses que nous ignorions à propos des standards du Web. Imaginez ce que cela représente. Depuis cinq ans maintenant, Aaron est un éditeur rigoureux mais impartial pour la revue A List Apart ; Apart ; il aide les auteurs à atteindre leurs objectifs tout en s'assurant qu'ils restent toujours innovants, que leurs méthodes sont accessibles et sémantiques et (grâce à ses connaissances presque encyclopédiques) qu'ils créditent bien leurs prédécesseurs. Aaron a aussi rédigé des articles fondamentaux pour la revue. Enfin, oui, il a pris la parole à la conférence An Event Apart. Apart. Vu mon expérience de l'homme et mon admiration pour son savoir et ses compétences, j'ai été enthousiasmé lorsqu'Aaron m'a parlé de ce projet de livre et m'a laissé en lire li re quelques chapitres. chapitres. Ce n'est pas un livre de plus sur le web design. C'est une pièce qui manquait à la littérature fondamentale sur le sujet. Notre secteur d'activité a longtemps manqué d'un guide des meilleures pratiques de design web adaptatif adaptatif et conforme aux standards. Av Avec ec la déferlante des terminaux mobiles, les récentes améliorations des navigateurs web sur ordinateur de bureau comme sur téléphone et les nouvelles possibilités qu'apportent le HTML5, le CSS3 et les interfaces gestuelles,

AVANT-PROPOS

ceux qui conçoivent des sites web doivent plus que jamais disposer d'une source fiable leur montrant comment comment tirer au mieux profit de ces opportunités opportun ités en créant du contenu compatible avec tous les modèles de navigateurs, tous les formats d'affichage et tous les niveaux de capacités. Cette source fiable est entre vos mains. La convergence entre ces nouveaux éléments et ces nouvelles opportunités pousse les professionnels du Web à enfin envisager leur travail de design tel qu'il aurait dû l'être l' être depuis le début. début. Le design adaptatif est la voie à emprunter, emprunter, et personne ne maîtrise mieux qu'Aaron la pensée et les techniques nécessaires pour la pratiquer avec excellence. Ces techniques et cette approche sont exposées dans da ns les pages qui suivent. Vous Vous ne perdrez plus des journées entières à vous demander comment concevoir concevoir de belles pages page s web en rédigeant du code de qualité qui fonctionne pour tous les visiteurs. J'ai prévu de distribuer ce livre à tous mes étudiants, étudi ants, et à tous ceux avec lesquels j'ai ai l'occasion l 'occasion de travailler. travailler. Je vous invite à faire de même. Et maintenant, assez de préliminaires. Plongezvous dans la lecture et profitez-en bien ! Jeffrey Zeldman Auteur de Designing With Web Standards 3rd Edition

vii

CHAPITRE 1

PENSEZ À L'UTILISATEUR, PAS AU NAVIGATEUR Si vous avez avez un minimum m inimum d'expérience en design desig n web, il est fort probable probable que vous ayez entendu parler du concept "d'amélioration progressive" (ou que vous l'ayez pratiqué). Vous savez donc qu'il s'agit en matière de design web du modèle idéal vers lequel tendre. Mais Mai s qu'est-ce est-ce au juste que l'amélioration progressive ? Quelle est sa signification ? Comment doit-on la mettre en pratique ? Et de quelle manière peut-on incorporer cette approche à notre mode de travail dans un contexte d'évolution rapide des langages et des navigateurs ? Toutes ces questions sont très pertinentes et j'y réponds au long de ce livre. Comme vous le constaterez, l'amélioration progressive n'est pas un problème de gestion des différents navigateurs, ni de choix des versions versions de HTML HT ML ou de CSS qu'il faut utiliser. Il s'agit agit d'une d 'une approche approche philosophique philosophique visant à produire des situations qui permettent à vos utilisateurs d'accéder au contenu du site sans subir de contraintes technologiques. Que demander de mieux ? Tout cela semble très séduisant, mais la quantité de travail à prévoir paraît impressionnante. N'a N 'ayez yez crainte. Une fois que vous aurez assimilé le principe de l'amélioration progressive, ou, mieux encore, que vous aurez compris pourquoi cela fonctionne, vous verrez que tout cela est fort simple. Au cours de votre progression dans le livre, vous découvrirez découvrirez de nomb nombreux reux cas pratiques d'application de l'amélioration progressive qui combinent le HTML, le CSS et le JavaScript de façon à créer des sites web adaptatifs qui ne vont

2

ADAPTIVE WEB DESIGN

pas seulement convenir à vos utilisateurs, mais leur proposer une expérience utilisateur satisfaisante, et ce, quels que soient le navigateur ou l'appareil l'appareil avec lesquels ils y accéderont. Mais avant de plonger dans la pratique, il nous faut aborder le pourquoi et le comment de l'amélioration progressive, c'est-à-dire les fondements de cette philosophie.

S'ADAPTER OU PÉRIR S'il faut attaquer le sujet par la base, l'amélioration progressive repose sur un grand principe : la tolérance aux pannes. Cette tolérance aux pannes désigne la capacité d'un système à continuer à fonctionner même s'il rencontre une erreur imprévue. C'est cette capacité qui permet à un lézard de faire repousser sa queue et au cerveau humain de créer de nouvelles nouvelles connexions neuronales lorsqu'i lorsqu'ill se remet d'un d 'un traumatisme crânien. La nature se montre très friande fr iande de ce mécanisme de robustesse robustesse ou de résilience, et l'humain l' humain s'est est inspiré d' d 'elle elle en adoptant ce principe dans ses inventions, comme dans le cas des réseaux de distribution d'électricité intelligents qui évitent ou réduisent l'impact des surcharges réseau en détectant (et parfois en prévenant) les situations problématiques. Que vous utilisiez le réseau web en tant que simple visiteur de sites ou en tant que professionnel, vous profitez déjà en permanence de ce mécanisme de tolérance tolérance aux pannes. Ce principe principe est en action dans les modes d'a d 'achemicheminement des paquets de données (les ( les protocoles) protocoles) entre le navigateur client et le serveur web que vous voulez voulez visiter, et il est même intimement inti mement imbriqué imbriqué dans dan s les langages qui incarnent le Web d'aujourd'hui : le HTML et le CSS. Les spécifications de ces deux langages édictent une obligation pour les navigateurs d'ig d 'ignorer norer ce qu'ils qu'ils ne parviennent pas à interpréter. C'est C'est cette condition simple qui rend possible l'amélioration progressive. Mais nous y reviendrons dans un instant. Un autre aspect intéressant de la tolérance aux pannes est son ouverture à l'évolution. Revenons au modèle qu'est la nature : vous voyez la capacité d 'a'adapta daptation tion en action dans les régions ayant connu connu des changements climatiques ou environnementaux suffisants pour forcer les organismes vivants à choisir entre s'adapter, quitter les lieux ou périr.

CHAPITRE CHAPI TRE 1

PENSEZ À L'UTILISA L'UTILISATEUR, TEUR, PAS AU NAVIGA NAVIGATEUR TEUR

En 1977, les Îles Galapagos ont connu une sécheresse telle qu'elle a fait fortement baisser la quantité de petites graines qui constituaient la nourriture de prédilection des pinsons de Darwin (géospizes) habitant ces îles. Quatrevingt-cinq pour cent des géospizes sont morts de faim, seuls les plus gros spécimens ayant survécu. Pourquoi ? Parce qu'ils possédaient un plus grand bec capable de casser les enveloppes des graines plus grosses qui ne manquaient pas. En temps normal, ces pinsons à grand bec n'avaient aucun atout compétitif, mais avec la sécheresse, ils ont tiré avantage de la situation. Non seulement ils ont survécu, mais ils ont transmis leurs gènes aux générations suivantes qui sont évidemment dotées d'un bec plus grand.

Figure 1.1 : Compar Comparaison aison de la taille des becs des pinsons des Galapagos Galapagos ( pinsons pinsons de Darwin ou Geospiza Geospiza fortis) tirée tirée d'une illustration du livre

Zoologie du voyage voyage du H.M.S. H.M .S. Beagle, Be agle, de de John Gould. Le HTML et le CSS ont plusieurs points communs avec les pinsons de Darwin. Darw in. Ils Il s sont en effet également conçus pour être compatibles avec avec le futur, ce qui signifie que tout ce qui fonctionne aujourd'hui fonctionnera encore demain, l'an prochain et dans dix ans. Ce sont en quelque quelque sorte des pinsons parfaits : créés pour survivre quelle que soit l'ampleur des changements de l'environnement de la navigation web. Puisque ces langages ont été prévus pour évoluer dans le temps, les navigateurs web ont été forcés de se conformer aux règles de tolérance aux pannes en ignorant tout ce qu'ils ne savaient pas comprendre. C'est ce qui donne aux langages cette capacité d'évoluer et de s'adapter sans jamais craindre

3

4

ADAPTIVE WEB DESIGN

d'atteindre un point à partir duquel le contenu et le style qu'ils véhiculent risquent de devenir illisibles ou entraînent un blocage du navigateur. La tolérance aux pannes permet de visiter un site web conçu en HTML5 avec le navigateur en mode texte Lynx ou de profiter des nouveautés du CSS3 sans craindre de se rendre inaccessible aux personnes utilisant Internet Explorer 6. Il est capital de comprendre la tolérance aux pannes pour intégrer la notion d 'a'amélior mélioration ation progressive. progressive. La tolérance aux pannes permet à l'amélio l'amélioration ration progressive de fonctionner et garantit que tous les contenus diffusés sur le Web sont accessibles à tout un chacun. Puisque la tolérance aux pannes a été incorporée dès le départ dans d ans les normes des langages HTML HT ML et CSS, CSS , vous pourriez en déduire que les professionnels professionnels du Web Web (comme (comme nous) ont ont pris soin d'en reconnaître l'i l 'importance mportance et la valeur pour concevoir nos sites web. Hélas, cela n'a pas toujours été le cas.

DES FAUTES ÉLÉGANTES Pendant la première décennie du Web, ce média a beaucoup évolué. Tout au début est apparu le navigateur Mosaic du NCSA (National ( National Center for Supercomputing Applications de Applications de l'université de l'Illinois) ; c'était le premier navigateur graphique et le HTML a accueilli l'élément nommé img. Puis est arrivé l'audio, puis la vidéo, puis l'interaction. Rester en phase avec cette évolution évol ution technologique effrénée était éta it un véritable défi. Dans notre course en avant, nous en avons oublié la tolérance aux pannes en cherchant à profiter sans cesse des dernières techniques. Nombre de nos sites finissaient par ne comporter que des cartes à liens pleine page posées sur des fonds JPEG élégants. Certains devenaient dépendants des outils Flash et Director de Macromedia. Peu de sites restaient facilement utilisables et il y en a moins encore qui restaient accessibles à tous. Cette époque a donné naissance à la théorie appelée "dégradation élégante" ( graceful graceful degradation degradation).). La dégradation élégante constitue le pendant philosophique de la tolérance aux pannes, une parente superficielle et obsédée par les apparences, qui désire uniquement mettre les plus riches atours et sortir avec les beaux garçons. Dans le contexte du Web, Web, la dégradation dég radation élégante revenait à rassasier les plus récents et puissants navigateurs av avec ec des mets de choix, tout en jetant quelques



miettes aux pauvres hères qui approchaient avec leur minable navigateur d'ancienne génération. À l'époque de l'apogée de cette dégradation élégante, notre obsession était de garantir que nos sites seraient bien rendus par les navigateurs modernes les plus utilisés. Les tests de compatibilité avec les anciens navigateurs, lorsque nous en faisions, étaient repoussés au bas de notre liste de priorités. Le raisonnement était limpid li mpidee : le HTML HTM L et le CSS étant tous deux tolérants aux pannes, l'utilisateur verrait toujours quelque chose s'afficher. Mais nous ignorions que le JavaScript, comme d'autres langages de programmation, n'était pas tolérant aux pannes (si vous appelez par exemple une méthode inexistante, vous faites subir une erreur au visiteur). visiteur). Les scripts et app applications lications écrits en JavaScript doivent contenir des procédures spécifiques pour être capables de survivre aux erreurs (par exemple en tentant d'exécuter la même action par un autre moyen) ou du moins de pressentir une erreur potentielle en quittant avant qu'elle ne se produise. Rares étaient éta ient ceux qui prenaient ce genre de précautions, précautions, parce que nous étions focalisés sur la marche en avant, à l'affût du dernier jouet avec lequel nous pourrions embellir nos sites. Nous supposions que les anciens navigateurs ne permettraient qu'une expérience inférieure. Nous justifiions en considérant que le temps qu'il aurait fallu y consacrer pour au minimum s'assurer que le résultat restait décent et sans erreur n'en valait pas la peine. Bien sûr, nous gérions les erreurs les plus flagrantes, mais pour les autres, nous laissions gentiment les utilisateurs se débrouiller. (Et c'est triste à dire, mais certains parmi nous allaient jusqu'à bloquer l'entrée aux navigateurs qu'ils ne voulaient pas prendre la peine de gérer.)

ÉMERGENCE DU PRINCIPE DE TOLÉRANCE Après quelque temps, des développeurs web avisés ont commencé à réaliser que la prédilection de la dégradation élégante pour les images au détriment du contenu allait dans la mauvaise direction. Ils constatèrent que la dégradation élégante était la cause directe d'une réduction de la disponibilité et de l'accessibilité des contenus. Ces concepteurs et développeurs virent que le Web avait pour raison d'être la diffusion et la consommation de contenus

5

6

ADAPTIVE WEB DESIGN

(mots, images, vidéos, etc.) Ils décidèrent de reprendre les choses à zéro en considérant consid érant leurs marquages, leurs styles et leurs choix d'interaction d 'interaction en tenant compte de l'impact de ces choix sur la disponibilité des contenus. En réorientant leurs efforts, les développeurs ont commencé à exploiter la nature tolérante aux pannes du HTML et du CSS ainsi que le mécanisme de détection d'erreurs de JavaScript, et à comprendre qu'une expérience du visiteur positive ne devait devait pas être de type ty pe tout ou rien (c'était le cas sous l'e l 'effet ffet de la dégradation dég radation élégante). élégante). Au contraire, les technologies web pouvaient être exploitées sous forme de strates se complétant les unes les autres en offrant off rant une expérience et un niveau d'interaction de plus en plus riches. Steve Champeon du projet Web Web Standards Standard s Project a parfaitement capté l'l 'essence de cette philosophie en inventant l'expression "amélioration progressive"1.

Délicieux à tous les niveaux J'aime utili utiliser ser comme analog analogie ie de l'amélioration progressive la confiser confiserie ie M&M's. Au cœur de cette petite bille se trouve une cacahuète (vous le saviez ?) Cette cacahuète est en soi une bonne source de protéines et de graisses, un aliment que tout le monde apprécie (sauf ceux qui y sont allergiques, évidemment). De même, le contenu de notre site web doit pouvoir être consommé même sans aucun embellissement.

Figure 1.2 : Un continuum alimentaire.

Enrobez cette cacahuète de chocolat et vous obtenez une friandise qui met l'eau à la bouche et qui a bon goût, comme la cacahuète seule. De même, des contenus bien présentés et organisés grâce aux styles CSS sont souvent plus faciles à lire, et en tout cas, plus agréables à consommer.

1. http://www.he http://www.hesketh.com/publi sketh.com/publications/inclusi cations/inclusive_web_design_fo ve_web_design_for_the_future/ r_the_future/



Si nous ajoutons une coquille d'enrobage sucré, l'expérience est encore meilleure. De même, nous pouvons enrichir notre belle mise en pages avec des interactions écrites en JavaScript qui simplifient la navigation parmi les contenus ou les font apparaître d'une manière originale et attrayante. Cette comparaison est bien sûr une simplification excessive de ce qu'est l'amélioration progressive, mais elle vous procure une idée générale de son fonctionnement. Les technologies sont appliquées sous forme de strates – le HTML, puis le HTML avec le CSS, puis le HTML, le CSS et le JavaScript –, afin de fournir des expériences différentes, dont chacune est aussi pertinente que les autres (et aussi goûteuse). goûteuse). Et au centre de ces appareillages, il y a la noix : de bons contenus.

Une approche partant du centre Le Web, c'est de l'information. Tous les jours, sur tous les sites, des informations sont diffusées, demandées et collectées. Ces échanges sont devenus des éléments indispensables à la croissance du Web et vont sans aucun doute continuer à soutenir son expansion permanente jusqu'à concerner tous les aspects de notre quotidien. Puisque cela représente un aspect important du Web, l'échange d'informations doit devenir notre objectif prioritaire lors de la construction de toute interface web. L'amélioration progressive garantit que tous les contenus (les informations que diffuse le site web) restent accessibles et utilisables par n'importe qui, quelle que soit la situation géographique, le type d'appareil utilisé ou les capacités capacités du logiciel d'a d 'affichage ffichage de ces contenus. contenus. De même, les outils de collecte de contenus (formulaires web, questionnaires, etc.) profitent grandement de l'amélioration progressive, progressive, car elle leur garantit une exploi exploitation tation universelle, ce qui leur permet de mieux faire leur travail d'extraction. Par définition, l'amélioration progressive s'intéresse à l'accessibilité, mais pas dans le sens sen s limité lim ité qu'on on lui prête habituellement, à savoir savoir celui d' d 'ensemble nsemble des efforts d'aménagement visant à rendre du contenu accessible aux individus ayant des besoins particuliers (handicap moteur, cérébral ou sensitif). Notre amélioration progressive va plus loin en édictant que chacun de nous a des besoins particuliers, ces besoins pouvant évoluer au cours du temps et en fonction du contexte. Par exemple, lorsque j'accède j'accède à un site web depuis mon smartphone, smartphon e, je suis limité visuellement visuellement par la résol résolution ution et la taille de l'l'écran écran (d'autant plus avec un navigateur qui permet de zoomer) et gestuellement

7

8

ADAPTIVE WEB DESIGN

par l'interface l 'interface tactile pour activer les boutons boutons et les liens, l iens, car mes doigts sont moins précis qu'un pointeur de souris. Nous avons dit plus haut que les sites conçus dans un esprit de dégradation élégante fonctionnaient bien dans les navigateurs modernes, mais beaucoup moins bien ou pas du tout dans les navigateurs plus anciens. Dans un sens général, c'est comme si l'utilisateur visitait un parc d'attractions : les plus beaux manèges lui seraient interdits interdits parce qu'il ne fait pas la taille t aille suffisante. De même, le visiteur qui ne possède pas le "bon" navigateur va subir des problèmes probl èmes (et des erreurs) pour accéder au contenu des sites, et encore, lorsqu'i l parvient à y accéder. À l'opposé, un site web conçu en accord avec la philosophie d'amélioration progressive sera utilisable par tous, depuis tous les appareils, avec tous les navigateurs. Bien sûr, le visiteur utilisant le navigateur en mode texte Lynx n'aura pas la même expérience que celui qui possède la dernière version de Safari, mais ce sera une expérience positive et non une absence de résultat. Le contenu du site sera accessible dans une version édulcorée, ce qui n'est nullement garanti dans l'approche de dégradation élégante. Alors que leurs philosop philosophies hies sont très différentes, l'améli l 'amélioration oration progressive progressive et la dégradation élégante peuv peuvent ent facilement se confondre en termes pratiqu pratiques, es, ce qui est dommage. Pour bien souligner ces différences, j'aime utiliser cette formule : toutes les expériences conçues selon l'amélioration progressive garantissent une dégradation dég radation élégante dans les anciens navigateurs, alors que peu d'expériences conçues selon la dégradation élégante vont permettre une amélioration progressive.

Des limites ? Quelles limites ? Pendant l'âge d'or de la dégradation élégante, les sites web finissaient par ressembler aux parcs d'attractions évoqués plus haut : "Manège interdit aux personnes mesurant moins de 1,20 m de hauteur". Le Web s'était rempli (il l'est hélas encore) encore) de sites affichant fièrement une mise mis e en garde du style "Site optimisé optimi sé pour Netscape Navigator 4". 4". Nous avons abandonné cette pratique déplorable grâce à l'amélioration progressive et à la diffusion des standards web, mais ce phénomène de cloisonnement est réapparu lorsque les sites ont commencé à adopter la technique JavaScript nommée Ajax. De plus en plus de sites ont réclamé la présence de JavaScript ou même restreint l'entrée à certains modèles et versions versions de navigateurs. Nous assistions à une rediffusion rediff usion de cet épisode tant redouté de l'l ' histoire du Web Web : le retour des sales méthodes



de blocage des navigateurs et d'a d 'anti-ergon nti-ergonomie omie que nous pensions avoir avoir définitivement abandonnées. Comme "avec le temps va, tout s'en va", la ferveur autour d'Ajax s'est calmée et nous avons pu recommencer à construire (et parfois à reconstruire) des sites fondés sur Ajax conformes à l'approche l'approche d'a d 'améliora mélioration tion progressive. Mais un beau jour, il y eut la présentation d'Apple HTML5 Showcase avec ses superbes transitions et animations en CSS 2. À peine avions-nous essuyé la salive tombée sur nos bureaux que nous décidions, nombreux, nombreux, d'incorporer d' incorporer ces élégantes nouveautés dans nos sites, soit par impatience, soit sous la pression de nos clients. Conséquence : ont commencé à se multiplier des sites qui obligeaient leurs visiteurs à disposer d'une variante très récente de Webkit 3 pour être vus v us (et au au diable les quatre-vingts quatre-ving ts pour cent de navigateurs navigateur s qui n'en étaient pas dotés). Mais les concepteurs de sites ont fini par comprendre que l'adoption de technologies spécifiques allait à l'encontre de la philosophie d'amélioration progressive. Certains d'entre eux ont alors persisté en déclarant que cette philosophie était limitante et sont revenus à l'ancienne approche de dégradation élégante. Ils estimaient que l'amélioration progressive les obligeait à prendre en charge les anciens navigateurs qui n'étaient pas aussi gratifiants à utiliser. Ce que ces gens n'ont pas compris, c'est que ce n'était pas l'amélioration progressive qui les bridait, mais leur mauvaise interprétation de cette philosophie. Il faut savoir que l'amélioration progressive ne se focalise pas sur les navigateurs. Son but est de guider la conception de scénarii qui permettent aux utilisateurs d'accéder aux contenus sans subir de contraintes technologiques. L'amélioration progressive progressive ne vous demande pas de tenter de fournir la même expérience sur différents navigateurs, et ne vous empêche empêche nullement d' d 'a dopter les dernières innovations ; elle vous demande uniquement de faire honneur à vos contenus (et à vos visiteurs) en appliquant les technologies de façon 2. http://www.apple.com/html5/ 3. Webkit est le moteur de rendu visuel utilisé par de nombreux navigateurs et applications. Son support de CSS est excellent et il sait gérer certaines fonctions évoluées de CSS, comme les animations CSS, bien mieux que d'autres navigateurs. Webkit est utilisé par les navigateurs Safari d'Apple, Chrome de Google et les navigateurs Android, celui de Symbian S60, Shiira, iCab, OmniWeb, OmniWeb, Epiphany, Epiphany, pour n'en citer que quelques-uns. quelques-uns. Il I l est à la base du système WebOS de Palm et a été incorporé dans plusieurs produits Adobe parmi lesquels AIR (Adobe Integrated Runtime) et la suite CS5.

9

10

ADAPTIVE WEB DESIGN

intelligente, sous forme de plusieurs strates, pour qu'à chaque niveau, l'expérience soit concluante. Les navigateurs et les technologies surgissent puis s'étiolent. Il est tout à fait possible de combiner l'amélioration progressive et votre désir de vous montrer innovant en réalisa réalisant nt des choses étonnantes dans les navigateurs, à condition de faire des choix avisés et de ne jamais perdre de vue vos utilisateurs.

L'amélioration progressive pour un excellent service au client Supposez un instant que vous soyez serveur dans un grand restaurant. Votre travail et vos pourboires sont liés à votre attention aux détails et à la perfection de votre service. Un critère de contrôle de votre attention consiste à vérifier le niveau des verres d'eau de vos clients avant de venir les remplir. Un serveur distrait laissera les verres vides plusieurs minutes. Quelqu’un d'un peu plus concerné ne laissera pas les verres se vider plus qu'à moitié. Le serveur attentif non seulement n'attendra pas que le verre soit à moitié vide, mais il sera assez adroit pour remplir sans que le client s'en aperçoive. Vous devinez quels clients quitteront le restaurant les plus satisfaits du service. Si nous considérons seulement la bonne hydratation des clients, qui recevra le meilleur pourboire, pourboire, d'après d 'après vous ? Puisque nous sommes concepteurs et développeurs développeurs de sites web, nous devons devons tendre vers la même excellence que le serveur idéal, mais ce n'est pas simple. De même que le serveur ne peut savoir à l'avance à quel rythme ses clients vont vider leurs verres, nous ne pouvons pas prévoir les besoins de chaque visiteur de nos sites. Il nous faut les devancer. Si nous sommes vraiment concentrés, nous saurons y parvenir sans que les visiteurs se rendent compte que nous déployons tous ces efforts pour eux. Cet objectif devient aisément accessible en adoptant l'approche orientée utilisateur et contenus de l'amélioration progressive (et non l'approche de suiveur des dernières modes de la dégradation élégante).

SAISISSEZ L'OCCASION Lorsque vous démarrez un projet dans une perspective d'amélioration progressive, vous vous centrez d'abord sur les contenus, puis sur tout ce qui s'y ajoute. Cette approche par strates incarne i ncarne la l a prévenance avec laquelle vous répondez par avance aux attentes des visiteurs en gérant le contexte dans lequel se fait l'accès aux pages web. Ce contexte est lié aux possibilités du



navigateur et, dans une moindre mesure, mesu re, aux capacités capacités du matériel sur lequel il fonctionne. fonc tionne. Le but final fi nal est d 'a'adapte dapterr l'l 'expérience expérience du visiteur v isiteur en conséquence. conséquence. Le premier niveau d'expérience correspond toujours à du texte. Dans cette strate n'intervient aucune technologie remarquable ; le succès ou l'échec de la visite ne dépend que des capacités littéraires du rédacteur du contenu. Il est évident qu'un texte bien rédigé se rend ainsi universellement accessible et fait faire un pas de géant en termes d'accessibilité du contenu. Et quelles que soient les évolutions à venir du langage HTML, l'impératif de tolérance aux pannes imposée aux navigateurs dans leur interprétation du marquage HTML garantit que le contenu marqué sera toujours accessible dans son format le plus élémentaire : des chiffres et des lettres. Le deuxième niveau d'expérience correspond à la sémantique du langage HTML. Les éléments de langage et leurs attributs fournissent une description de ce que signifie le contenu et renseignent sur son contexte. Ils donnent des informations importantes comme la mise en exergue de certains termes, la source d'une citation ou la signification d'une d 'une expression expression peu familière. famil ière. R U E T A S I L I T U N O I T C A F S I T A S

Minimales

CAPACITÉS DU NAVIGATEUR

Evoluées

Figure 1.3 : Graphe de l'amélioration progressive.

Le troisième niveau d'expérience correspond à l'enrichissement audiovisuel avec les styles CSS et l'ajout d'images fixes, de sons et de vidéos. Comme le HTML,, le CSS est par nature tolérant aux pannes, les navigateurs HTML navigateurs ignorant ce qu'ils ne savent pas interpréter ; c'est en cela que l'amélioration l 'amélioration progressive est possible au niveau du langage CSS.

11

12

ADAPTIVE WEB DESIGN

Le quatrième niveau d'expérience est celui des interactions avec le visiteur. Dans le monde des standards, il s'agit presque toujours de code JavaScript, même si d' d 'autres technologies tech nologies d'interaction d' interaction web web ont été employées, employées, notamment Flash ou même les applets Java. Le dernier niveau d'expérience consiste à appliquer la spécification WAI-ARIA (Web Accessibility Initiative's Accessible Rich Internet Applications) Applications) et les règles de sémantique augmentées et meilleures meil leures pratiques qu'elle elle mentionne. Ces enrichisen richissements des pages web prennent la relève là où s'arrêtait arrêtait normalement norma lement le HTML (même si le HTML5 a incorporé dans son lexique quelques points sémantiques évolués issus d'ARIA). Ces différentes strates (qui sont autant de niveaux de support) permettent de proposer une expérience qui s'améliore progressivement d'une strate à la suivante. Ce ne sont pas les seuls scénarii que vous pouvez présenter à vos utilisateurs, mais mai s elles constituent des jalons jalons clairement identifiés sur le chemin qui va de l'expérience minimale à l'expérience exceptionnelle. L'expérience réelle d'un utilisateur peut varier à chaque niveau sur quelques points. Cela reste sans conséquence sur le service offert aux utilisateurs tant que nous, concepteurs, conc epteurs, ne perdons pas de vue v ue le principe d 'a'amélio mélioration ration progressive. progressive.

EN AVANT, TOUTE ! La suite du livre vous invite à visiter les différentes étapes sur l'autoroute de l'amélioration progressive. Nous découvrirons successivement le marquage HTML,, les styles HTML styles CSS, le JavaScript JavaScript et enfin ARIA. AR IA. Le périple sera illustré illustré par une page de démonstration démonstration qui met en prati pratique que ces techniques d'a d 'améliomélioration progressive, à l'adresse Retreats4Geeks.com. Par principe, ce livre ne prétend pas constituer une référence exhaustive des techniques d'amélioration progressive. Les exemples sont épurés et se concentrent sur leur but premier : vous présenter les meilleures pratiques pour vous permettre d'adopter sur-lechamp l'amélioration progressive dans vos projets.



Figure 1.4 : La pag pagee de présentat présentation ion d'un d 'un événement de formation sur sur le site

Retreats4Geeks.com qui sera étudiée tout au long de ce livre.

13

"La signification est dans le contenu du texte, pas dans la forme des caractères." — WIM CROUWEL

CHAPITRE 2

AMÉLIORATION PROGGRES PRO RESSIVE SIVE AVEC AVEC LE LE HTML Quand on parle de Web, le marquage HTML HTM L est incon i ncontournabl tournable. e. Il constitue la fondation de toute mise en page réussie et de toute expérience utilisateur positive. positiv e. Que vous préfériez préfériez le HTML HTM L ou son cousin plus rigoureux XHTML XHT ML,, chaque élément (balise) a un but clairement défini. La manière dont vous utilisez ces éléments a un puissant impact sur l'expérience des visiteurs, en bien ou en mal selon que vous en usiez ou en abusiez.

DU TERRAIN VAGUE AU DROIT CHEMIN Lorsque nous avons commencé à concevoir des pages web, beaucoup d'entre nous ont négligé l'importance d'un bon marquage. Ceux qui venaient du monde de la programmation ont considéré que l'apprentissage du langage HTML allait de soi, et n'ont n'ont donc jamais pris le temps d'étudier d' étudier sa sémantique particulière. Ceux qui venaient du monde de la création graphique n'ont pas non plus plus senti l'l 'importance de la sémantique. Nous nous sommes tous focalisés sur la partie présentation des pages web et avons sauté sur la balise table comme base de la technique de mise en page selon un quadrillage invisible. Nous avons ensuite trouvé des tonnes d'utilisations nouvelles de l'élément table, qui ne sont pour la plupart que des remplacements d'éléments sémantiques existants (et parfaitement gérés par les navigateurs) tels que les listes.

16

ADAPTIVE WEB DESIGN

Dans de nombreuses entreprises de la planète, les promoteurs d'une utilisation sémantique rigoureuse du langage HTML n'ont pas été entendus ; leurs arguments étaient considérés comme relevant d'une position d'intellectuels puristes, pour deux raisons principales : 1) force était de constater que les anciens sites web se présentaient toujours très bien dans les nouveaux navigateurs ; 2) comme bien des personnes ne souffrent d'aucun handicap, peu avaient eu l'occasion de ressentir l'importance d'une meilleure accessibilité au Web. Et un jour, Google est arrivé et tout a changé. D'un seul coup, le marquage sémantique redevenait un sujet important. Google a été le premier moteur de recherche prenant en compte les éléments sémantiques pour indexer les pages web. Se fondant au départ sur le très élémentaire éléme ntaire élément élément d'a d 'ancrage ncrage (a) comme pierre angulaire de son algorithme a lgorithme PageRank, Google est devenu le pionnier dans l'exploitation des marqueurs sémantiques sémantiqu es pour extraire du sens et de la pertinence des pages scrutées. Les autres moteurs de recherch recherchee ont rapidement rapidement suivi, et les moteurs de recherche se sont lancés dans la traque d'autres éléments HTML porteurs de sens dans les pages web (par exemple, les balises h1 qui contiennent normalement l'information la plus importante d'une page). Le marquage sémantique est ainsi devenu un critère significatif dans le monde des entreprises, puisque son utilisation avisée permettait d'être mieux placé dans les résultats des recherches, et en conséquence d'augmenter les chances d'entrer en contact avec de nouveaux clients.

LA FONDATION SÉMANTIQUE Si l'o l 'onn compare le contenu au substrat, le marquage sémantique est le compost que vous ajoutez ajoutez pour garantir la fertilité de votre jardin. Il enrichit enr ichit le contenu contenu en fournissant aux visiteurs des indices au sujet du contexte et des intentions de l'émetteur, l' émetteur, et en proposant des informations complémentaires complémentaires au contenu. Prenez comme exemple l'élément d'abréviation abbr. Il sert à désigner une abréviation (ou un acronyme, ce qui lui permet dorénavant de remplacer l'élément acronym) : Gatlinburg, ssee">TN TN

Dans cet extrait HTML, vous voyez comment l'élément enrichit les deux lettres "TN" en rappelant au visiteur qu'elles signifient "Tennessee".


AMÉLIORATION AMÉLIORA TION PROGRESSIVE AVEC LE HTML

Le langage HTML a évolué sans cesse pour offrir de plus en plus d'options de description des contenus que les éléments délimitent (encapsulent). La publication pub lication de la norme HTML5 HTM L5 a donné naissance à une flopée de nouvelles nouvelles options sémantiques (telles que header) et à des enrichissements de quelques éléments élémen ts préexistants (comme (comme l'l'élémen élémentt abbr déjà cité, qui remp remplace lace l'élément l 'élément acronym). Nous utiliserons au cours de ce chapitre plusieurs éléments nouveaux nouveaux ou enrichis ; j'en profiterai pour donner quelques raisons d'y recourir pour marquer les contenus. L'heure est venue de passer à la pratique.

DIRE CE QUE L'ON VEUT FAIRE SAVOIR Si vous visitez la page web de de Retreats 4 Geeks Geek s , vous pouvez vous demander par où commencer. Intéressons-nous au contenu le plus important qu'est le nom du site et la série de liens qui mènent aux différentes sections de la même page (pour l'ex l 'exemple, emple, le site ne compte qu'une une page) pag e).. 1

web montrant le nom du site et les éléments éléme nts de Figure 2.1 : La page du site web navigation. Intéressons-nous à cette page dans une approche de sémanticien, et commençons par le logo de Retreats 4 Geeks2. C'est une image, et nous . Si vous n'a n'avez vez pas encore encore téléchargé le le fichier archive archive des exemples, exemples, faites-le maintenant en vous rendant à l'adresse adaptivewebdesign.info. Cherchez le bouton Download the project files. files. 2. Oui, je sais que que vous pouvez aussi utiliser l'élément object ou définir un texte puis le remplacer par une image avec des instructions CSS, CS S, mais ma is je préfère m'en en tenir au plus simple. 1

17

18

ADAPTIVE WEB DESIGN

utilisons logiquement un élément img pour la baliser. L'élément est assez important, puisqu'il fournit un contexte pour toute la page. Nous devons donc l'incorporer l'i ncorporer à un élément élément de titre h1, l'élément l 'élément qui est réservé au contenu majeur de la page.
png"/>

Notre page d'e d 'exemp xemple le est écrite en HTML5, H TML5, mais m ais j'ai toujours été plus plus à l'aise l 'aise avec la sérialisation XML de ce langage et j'ai choisi de rester fidèle à cette syntaxe (ce dont dont témoigne la barre bar re oblique fermante de l'élément l' élément img). Il s'agit plus d'une question de préférences que d'une obligation. Au niveau des moyens moyens de navigation locale, locale , nous proposons une liste de liens qu'il faut donc marquer en tant qu'éléments de liste. L'ordre des liens devant correspondre à l'ordre des sections de contenu dans la page, nous opterons pour une liste ordonnée (ol). Chaque lien est inséré dans un élément de liste (li) à l'intérieur d'un élément d'ancrage (a) :

href="#details">Details href="#details"> Details
href="#schedule"> href="#sched ule">Schedule Schedule href="#instructors"> href="#instr uctors">Instructors Instructors href="#lodging"> href="#lodgi ng">Lodging Lodging href="#location"> href="#locat ion">Location Location

Au point où nous en sommes, nous avons avons fait les choix de marquage m arquage évidents, en profitant des possibilités sémantiques offertes par le langage HTML depuis ses origines. Voici encore un an, nous en serions restés là et aurions considéré notre en-tête en-tête comme terminé, mais le HTML5 nous permet d'a d 'aller ller plus plus avant avant au niveau de la sémantique et de l'accessibilité du contenu. Traditionnellement, nous aurions eu recours à une division de page (div ) munie d'un identifiant sémantique (id) de valeur "header" pour regrouper ces deux éléments. Vous vous souvenez sans doute que les divisions servent à regrouper des éléments, mais qu'elles ne fournissent aucun contexte pour préciser le domaine d'emploi ou la fonction du groupe (c'est d'ailleurs pourquoi nous décidons décidons de lui attribuer l'identifiant "header") " header").. Le HTML5 introduit un nouvel élément pour préciser la signification (la sémantique) d'une division. Il s'agit de l'élément header.



Un élément header sert à identifier le contenu de première importance d'une page ou d'une section de page. Il permet d'abord d'englober les en-têtes ou groupes d'en-têtes (placés dans le nouvel élément hgroup), les aides à la navigation et le contenu de sommaire ou d'introduction. Cet élément constitue de ce fait le conteneur idéal pour le titre de page et la liste des ancrages qui mènent à chacun des articles de notre page. Le langage HTML5 offre une autre option encore plus appropriée pour la navigation. Alors qu'a q u'auparav uparavant, ant, nous aurions identifié la liste ordonnée avec "nav" ou "main-nav", nous pouvons avec le HTML5 profiter de son élément nav pour exprimer expri mer de façon plus directe l'aspect sémantique que nous voulons ajouter à la liste ol en fournissant cet identifiant sémantique id. L'élément nav permet de réunir tout un groupe de liens et de fonctions de navigation pour former l'équivalent sémantique du rôle de repère de l'élément ARIA "navigation" (que nous décrirons dans le Chapitre 5). Ces ajouts étant faits, le marquage de la section devient le suivant :

.png"/>

href="#details">Details href="#details"> Details href="#schedule"> href="#sche dule">Schedule Schedule href="#instructors"> href="#inst ructors">Instructors Instructors href="#lodging"> href="#lodg ing">Lodging Lodging href="#location"> href="#loca tion">Location Location

Ce marquage fonctionnera dans tous les navigateurs, même les plus anciens, grâce à leur comportement consistant à ignorer tout ce qu'ils ne savent pas interpréter. Les navigateurs les plus récents sauront bien sûr quoi faire des éléments élémen ts nouveaux, nouveaux, mais ma is les plus anciens, comme le navigateur en mode texte Lynx, pourront trouver le contenu et l'afficher. Ce marquage sans styles ni interactivité JavaScript fonctionne et répond ainsi au deuxième niveau de

19

20

ADAPTIVE WEB DESIGN

support demandé dans l'ap support l'approche proche d'a d 'améliora mélioration tion progressive. (Souvenez-v (Souvenez-vous ous que c'est le contenu qui constitue le premier niveau, si important).

INVISIBLE ET CONSULTATIF Le marquage est déjà bien formé, mais nous avons oublié un point important qui participe à l'accessibilité : le texte palliatif (alternate text) pour remplacer l'image de logo (exprimé par l'attribut d'élément alt). Rappelons que ce genre de "texte alt"3 donne un minimum d'inform d 'informations ations au sujet sujet d'une image lorsque lorsque l'utilisateur n'a pas accès à celle-ci, soit parce qu'il a désactivé l'affichage des images,s, soit parce qu'il est malvoyant et utilise la image l a fonction de lecture audio du contenu cont enu de l'écran, l' écran, d'o d 'oùù l'importance l 'importance de cet attribut. Voici comment j'ai donc ajouté un attribut alt très simple à l'exemple : alt="Retreats s 4 Geeks" />



utiliser title pour donner à l'utilisateur des informations i nformations sur la cible de chaque lien :
Tennessee">Location

Plus bas dans la page, dans la section "location", l'attribut contexte au lien qui mène à la carte de situation :

title fournit

un

Tennessee"/>

Figure 2.2 : Vue de la section location de la page avec le pointeur de souris

sur la carte.

SÉMANTIQUE AD HOC Le langage HTML regorge d'attributs permettant d'enrichir les éléments concernés. Certains de ces attributs ont un usage dédié, et c'est le cas de alt

21

22

ADAPTIVE WEB DESIGN

et de title, mais d'autres, et ils sont nombreux, peuvent être employés pour augmenter la densité sémantique accessible avec les possibilités initiales du langage, et ce de façon moins formelle. Je veux bien sûr parler des attributs id et class. Lorsque Dave Raggett travaillait à la spécification5 du HTML HTM L 3.0, il y av avait ait introduit les nouveaux concepts de classification et d'identification, incarnés respectivement par les attributs class et id6. Ces attributs n'ont été rendus publics de façon formelle au sein du langage HTML que lors de la sortie du HTML 4.0, mais les navigateurs les ont pris en compte à peu près à la même époque que les feuilles de styles CSS (Cascading (Cascading Style Sheet). Sheet). Et le CSS a introduit deux sélecteurs très simples destinés expressément à ces deux attributs. Cela a entraîné dès le départ une certaine confusion au niveau de la compréhension de l'usage attendu des attributs class et id. Pendant des années, quasiment tous les développeurs web qui utilisaient les styles CSS ont cru à une corrélation intentionnelle entre les attributs et les sélecteurs. Ils étaient persuadés que class et id avaient été inventés pour être utilisés avec les feuilles de styles. Les blâmer serait injuste, car la norme CSS Level 1 n'offrait pas beaucoup de mécanismes pour sélectionner un élémentt ; il semblait opportun de considé élémen considérer rer les sélecteurs class (par exemple, ul.menu) et id (par exemple, div#content) comme ayant été conçus (avec leurs attributs respectifs) pour appliquer les styles de façon globale pour class et locale pour id7. Heureusement, nous savons dorénavant comment les attributs class et id doivent être utilisés. L'attribut class a été créé spécialement pour répondre 5. Le HTML HTM L 3.0 constituait une spécification ambitieuse en apportant de nombreux nouveaux nouvea ux attributs et balises, ba lises, dont la plupart ont été abandonnés au moment où la norme est arrivée à maturité avec la version HTML 3.2. Mais les deux attributs class et id ont survécu à ce grand ménage. Il est amusant de constater que certaines des constructions proposées à l'origine dans le HTML 3.0 ont refait leur apparition dans le monde du HTML, soit officiellement dans la version HTML5, soit officieusement en tant que microformats. 6. Il n'est pas pas inutile de remarquer remarquer que que class et id ont fait une brève apparition dès la spécification HTML 2 (http://www.ietf.org/rfc/rfc1866.txt), mais sans avoir été formellement définis comme attributs. Ils servaient à faire la preuve du mécanisme de tolérance à l'inconnu l' inconnu dont devaient devaient être capables capables les navigateurs en ignorant ig norant les attributs qu'ils ne reconnaissaient pas. 7. Le document de travail HTML 3 autorisait cette utilisation, utilisation, parmi d'autres d 'autres.. Il est disponible à l'adresse http://www.w3 http://www.w3.org/MarkUp/html .org/MarkUp/html3/html3.txt 3/html3.txt.



au faible nombre d'éléments disponibles dans le lexique de mots réservés du HTML : Le temps passant, les attentes des personnes évol évoluent uent et le langage HTM HTML L sera de plus en plus sollicité. Un des indices de cette tendance est la pressio pressionn ressentie pour introduire toujours toujours plus de balises. Le HTML 3.0 introduit une technique pour créer des sous-classes d'éléments de façon ouverte. Elle permet de différencier le rôle d'un élément de type paragraphe en tant que couplet d'un quatrain, ou de dénoter un terme mathématique en tant que tenseur. Cette possibilité de créer des distinctions à la volée permet de gérer des styles de rendu spécifiques ou d'envisager des mécanismes de recherche plus fins, sans pour autant compliquer le format général des documents HTML8. Le but de cet attribut est de lui faire englober une liste de sous-classes pour l'élément auquel elles sont appliquées, les classes étant listées de la plus générale à la plus spécialisée9 : >

Dans la spécification, l'attribut id a été défini pour identifier un élément individuel dans une page (et c'est pourquoi chaque élément id doit être unique dans la même page). Dans la pratique, cet identifiant a été utilisé comme point de référence pour une règle de style (#details { ... } ), pour un script (document.getElementById('details') ) et pour un ancrage (). Vous vous souvenez que nous avons utilisé cet ancrage pour la navigation plus haut dans ce même chapitre. Toutes les informations infor mations relatives à un événement (un (un stage) Retreats 4 Geeks sont réunies dans la même page. J'ai donc distribué les contenus dans plusieurs éléments article10 ayant chacun son identifiant id unique. L'élémen L' élémentt article 8. Tiré de la section "Scalability" "Scal ability" de l'avantl'avant-projet projet de norme HTML 3 (voir la note note 7). 7). 9. Cette description est visible dans le projet projet HTM HTML L 3, à chaque fois que class est défini pour un élément. 10. Sans vouloir entraîner une quelconque confusion, ajoutons que le HTML5 a aussi introduit l'élément section (qu (quee nous utiliserons un peu plus loin). En langage HTML5, HT ML5, cet élément désigne une section de contenu (vous l'aviez deviné ?). Du point de vue de la structure globale, j'aurais pu déclarer la page en tant qu'article, en faisant de chaque sous-article une section. J'ai pourtant choisi de définir plusie plusieurs urs articles, car chaque section me semblait assez

23

24

ADAPTIVE WEB DESIGN

est apparu dans HTML5 pour contrôler du contenu constituant une partie autonome auto nome du document : un article de journal, journal , un message de blog ou, comme dans notre exemple, exemple, un aspect distinct d'un d 'un sujet. sujet. Chacun des articles art icles de la page est alors ciblé par les liens de navigation en utilisant comme référence d'ancrage son identifiant id. Lorsque le visiteur clique sur un lien, cela le mène directement au contenu associé :

about">Details Details

cover">Schedule Schedule
...

>

...

...
...

Les deux attributs class et id permettent à l'auteur de concevoir sa propre sémantique en complément complément de celle définie dans dan s la spécification. spécificat ion. L'ensemble indépendante des autres pour pouvoir éventuellement faire l'objet d'une page distincte. La différence sémantique entre ces deux approches n'est normalement pas significative et dépend d'abord des préférences de l'auteur de la page.



qui en résulte enrichit le marquage en signification. Le temps aidant, cela aboutit à un ensemble de classifications et d'identifiants partagés par toute la planète (par exemple, div#header et ul#nav). Ce jeu de classifications et d'identifiants d' identifiants partagés a à son tour alimenté l'l'évo évolution lution du langage HTML (par exemple avec les ajouts tels que les éléments header et nav du HTML5, vus plus haut) et suscité l'apparition d'une série d'extensions au HTML conçues de façon collaborative et connues sous le nom de "microformats".

CONVENTIONS CODIFIÉES Les microformats sont des spécifications non officielles produites de façon collaborative pour définir les modalités de marquage de contenus de sorte à exprimer des éléments de sémantique (et des métadonnées) au-delà de ce qui est possible avec la norme HTML (ou XHTML). Par essence, un microformat formalise des conventions de codage. Ces conventions sont le fruit des réponses trouvées sur le terrain pour constituer une spécification visant à combler combler un manque ou une limitation de la norme HTML HT ML.. Par exemple, exemple, le HTML HTM L ne proposant aucune solution solution robuste pour marquer de façon précise des données de contacts professionnels ou d'évén d' événements, ements, la communauté a créé des microformats pour répondre à ces besoins spécifiques mais très courants. Le premier microformat a été suscité par le besoin d'e d 'exprimer xprimer des associations entre des individus présents sur le Web. Il a été baptisé XHTML Friends Network (abrégé Network (abrégé "XFN"). Au sens strict, ce n'était pas un microformat car le terme a été trouvé plus tard, mais XFN a constitué un parfait exemple d'extension de la sémantique sémantique du HTML HTM L dans un domaine clairement clai rement délimité. délimité. XFN a été conçu par Tantek Çelik, Matthew Mullenweg et Eric Meyer. L'astuce de ce microformat a été d'employer un attribut rarement utilisé : rel . Vous êtes sans doute familiarisé avec cet attribut rel , si vous l'avez utilisé avec l'élément link pour référencer une feuille de styles externe (rel="stylesheet"). Il permet donc de déclarer une relation entre la cible d'un ancrage et la page actuelle. L'idée de XFN était simple : si j'ai besoin de gérer un lien entre mon blog et celui d'un collègue, j'ajoute dans l'esprit XFN un attribut rel="collegue" à mon lien. Pour faire un lien avec le blog

25

26

ADAPTIVE WEB DESIGN

de mon épouse, je spécifie rel="amie coloc epouse muse amour soutien" parce qu'elle représente toutes ces qualités pour moi11. Vu ainsi, cet attribut se limite à fournir un complément d'informations concernant une relation et des détails sur la nature de ce lien vers un autre site. Cela dit, du fait que j'utilise cet attribut pour tous mes liens externes depuis mon blog, et que mes collègues font de même, nous obtenons au final un véritable réseau de liens dans lequel nous pouvons naviguer par programme, ce qui crée une foule de nouv nouvelles elles opportunités d'e d 'extraction xtraction et de réutilisation de données. C'est d'a d 'ailleurs illeurs exactement ce qui s'est produit produit : le XFN s'est répandu comme comme une traînée traî née de poudre. Les Le s concepteurs de logiciels ont ajouté ajouté ce microformat dans leurs outils outi ls de création c réation de blog (par exemple, exemple, WordPres WordPress,s, Movable Type) Type) et les créateurs des sites de Web Web social socia l (par exemple, exemple, Twitter, Twitter, Flickr, Flick r, Last.fm) ont commencé à ajouter ajouter aux pages des profils d' d 'utilisateurs une section spéciale rel="me" (regroupant les liens vers d'autres sites web). Cela a permis l'apparition d'o d 'outils utils comme Social S ocial Graph de Google pour constituer rapidement rapidement un profil complet complet d'utilisateur en partant d'une d 'une seule adresse URL12. Nous fournissons un exemple d'utilisation du microformat XFN dans da ns le pied de page footer de notre page Retreats 4 Geeks13 :

t">©2010 ©2010 Retreats 4 Geeks. All Rights Res.
Res.

Retreats 4 Geeks is an
Retreats .net/"> Easy! Designs venture. venture.

11. Waouuuuuuuuu ! 12.Pour en savoir plus sur l'API Social Graph, voyez voyez la page http://code.google.com/apis/ socialgraph/. Glenn Jones s'est servi de cette interface API dans sa superbe librairie JavaScript Jav aScript nommée Ident Engine (http://identengine.com/). Il l'a l 'a présentée présentée dans le livre l ivre A List Apart (http://www.alis http://www.alistapart.com/artic tapart.com/articles/discovering les/discovering-magic/ -magic/). 13. L' élément footer est une autre nouveauté de la spécification HTML5 prévue pour englober des "méta"-informations pour un article, une section ou une page entière : nom de l'auteur, droits intellectuels, etc.



Après avoir ainsi commencé de façon très simple (mais puissante), les microformats se sont multipliés pour répondre à de nombreux besoins très variés : gestion des informations du profil d'un individu (hCard), gestion de listes d'événements (hCalendar), syndication de contenus (hAtom), gestion de CV (hResume), gestion de données de licences d'utilisation (rel-license), protection contre les robots scruteurs (spiders (spiders)) des moteurs de recherche (rel-nofollo (rel-nofollow w) et aide au marquage (rel-tag)14. Pour accompagner le développement de ces microformats, sont apparus plusieurs outils pour les utiliser. La mention faite plus haut au Social Graph de Google vous laisse deviner que les moteurs de recherche ont commencé à tenir compte des microformats, au point parfois de classer les contenus dotés de microformats avant les autres. Les extensions de navigateurs telles qu'Operator15 et Oomph16 permettent à l'u l 'utilisateur tilisateur d'e d 'extraire xtraire et de réutiliser les contenus contenus des microformats. Vous Vous disposez en outre d'a d 'analyseurs nalyseurs de microformats pour quasiment tous les langages de programmation et des services basés Web tels qu'Optimus17 ou H2VX18, qui assurent un accès direct aux contenus des microformats des sites. Vous constatez que les microformats constituent une phase supplémentaire dans la progression continue continue vers l'l 'amélioration mélioration progressive. progressive. Ils nous permettent de rendre nos sites web encore plus utiles à nos visiteurs. Ne trouv t rouvez-vous ez-vous pas vraiment intéressant de pouvoir, à l'aide d'un outil tel qu'Operator ou d'un service tel qu'Optimus, permettre à nos utilisateurs d'importer un événement dans leur agenda ou nos coordonnées coordonnées dans leur carnet d'a d 'adresses dresses directement depuis notre page web ? Personnellement, je trouve cela formidable.

Appelle-moi quand tu veux ! Puisque notre site web de démonstration se consacre à un événement (un stage de formation), nous pouvons commencer par adopter le microformat hCalendar. Mais voyons d'abord comment appliquer ce format hCard à mon élément section dans l'élément article "Instructors". Passons en revue les principales princip ales classes définies dans hCard. 14. La page Wiki des microformats (http://microformats.org/wiki/) propose la liste des microformats avec la documentation d'utilisation. 15. http://kaply.com/weblog/operator/ 16. http://visitmix.com/labs/oomph/ 17. http://microformatique.com/optimus/ 18. http://h2vx.com/

27

28

ADAPTIVE WEB DESIGN

CL ASSE

DESCRIPTION

vcard

Indique l'utilisation du microformat hCard. (Cette classe doit être la classe de l'l'élément élément racine du contenu contenu hCard.)

fn

Abréviation de Formatted Name. Sert à englober le nom du propriétaire des données hCard.

url

Indique qu'un un lien guide g uide l'utilisateur l'utilis ateur vers une page web décrivant la personne concernée.

photo

Dénote une photographie de la personne.

org

Identifie l'entreprise ou l'organisation à laquelle appartient la personne.

role

Identifie la fonction de la personne dans l'entreprise/organisation.

Tableau 2.1 : Classes principales du microformat hCard.

Le microf microformat ormat hCard compte compte bien d'autres d 'autres options de description du profil d'un individu. Celles indiquées dans le tableau suffisent à nos besoins dans le contexte de la page d'exempl d'exemplee Retreats 4 Geeks. Geek s. Parmi ces cinq classes, cla sses, seules vcard et fn sont obligatoires. Découvrons d'abord le contenu sur lequel nous allons travailler :

Aaron Aaro n Gu Gust staf afso son n

Aaron n ha has s be been en wo work rkin ing g on th the e we web b fo for r ne near arly ly 15 years and, in that time, has cultivated a love of web standards and an in-depth knowledge of website strategy and architecture, interface design, and numerous languages (including XHTML, CSS, JavaScript, and PHP). Aaron and his wife, Kelly, own Easy! Designs , a boutique web consultancy based in Chattanooga, TN. When not neck deep in code, Aaron is usually found evangelizing his findings and sharing his knowledge and passion with others in the field.



>Aaron n ha has s tr trai aine ned d pr prof ofes essi sion onal als s at The New York Times , Gartner, and the US Environmental Protection Agency (among others), and has presented at the world's foremost web conferences, such as An Event Apart and Web We b Di Dire rect ctio ions ns. . He is Gr Grou oup p Ma Mana nage ger r of th the e Web Standards Project (WaSP) (WaSP) and and serves as an Invited Expert to the World Wide Web Consortium's Open Web Education Alliance (OWEA) (OWEA) . . He created eCSStender eCSStender , , serves as Technical Editor for A Li A List st Ap Apar art t , , is a contributing writer for .net .net Magazine Magazine, , and has filled a small library with his technical writing and editing credits. His next book, Adapti Adap tive ve We Web b De Desi sign gn: : Cr Craf afti ting ng Ri Rich ch Ex Expe peri rien ence ces s wi with th Progressive Enhancement Enhancement , , is due out in early 2011.

Vous constatez que l'élément section comprend un élément de titre h1. Ne vous en inquiétez pas, car en HTML5, chaque section produit un nouveau contexte dans lequel vous êtes autorisé à repartir du niveau de titre h1. Je devine que cela va supposer un peu de temps pour vous y habituer, mais c'est après tout très logique et cela permet bien de pallier le faible nombre de niveaux de sous-titres19. Si vous avez bien étudié cet extrait, vous savez déjà à quel endroit doit être placée chacune des classes de hCard. Je vais néanmoins les traiter une à une,

19. http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models. html#sectioning-content

29

30

ADAPTIVE WEB DESIGN

à commencer par la plus simple, "vcard". Cette classification doit correspondre à l'élément conteneur global, qui est ici l'élément section :

La classe suivante est celle qui va englober mon nom, donc "fn". Du fait que mon nom est déjà indiqué comme contenu de l'élément de titre h1, nous qualifions ce titre par la classe "fn" pour indiquer que le texte de l'élément correspond à mon nom.
Aaron Gustafson Gustafson

Passons ensuite ensuite à la classe de l'a l 'adresse dresse "url" menant à la page "Easy! " Easy! Designs" qui est un site web dont je détiens le contrôle : ... Easy! net"> Easy! Designs, ...

En descendant, nous pouvons pouvons ensuite ensu ite ajouter ajouter la classe "photo" à ma photo, qui se trouve dans un élément figure , élément élément qui a été introduit dans HTML5 HT ML5 pour héberger un contenu non fractionnable, tel qu'une image ou un dessin avec un titre en option (figcaption). Cet élément doit pouvoir être supprimé du document sans en altérer le sens :

Il nous reste à insérer les deux classes "org" et "role" "role" dans le dernier paragraphe de ma biographie, mais un problème se pose. Plusieurs entreprises et organisations sont citées. Laquelle choisir ? Et peut-on en mentionner plusieurs ? Rien dans le microformat hCard n'interdit de désigner plusieurs entités et plusieurs fonctions dans la même fiche hCard, mais en pratique rares sont les analyseurs de microformats qui vont chercher plus loin que la première occurrence rencontr rencontrée. ée. En effet, les logiciels de gestion de carnet d 'a'adresses dresses ne savent souvent souvent pas gérer plusieurs employeurs employeurs et plusieurs fonctions pour la même personne. Pour simplifier, nous allons associer ces classes cla sses à ma première fonction, celle de chef de groupe du projet des standards web (Group (Group Manager/ Web Stand St andards ards Project). Project). La classe "org" est facile à implanter, car la donnée "Web Standards Project" est déjà dans un élément. En revanche, ma fonction est indiquée dans un texte plus long sans être marquée par un élément spécifique. Pour ne cerner



que mon premier rôle avec cette classe, nous allons ajouter un élément sans signification sémantique comme b20 : ... He is > Group Manager of the Web Standards Project (WaSP) Web (WaSP) ...

Si nous regardons maintenant ma intenant le résultat global, vous pouvez constater que les aménagements liés au microformat hCard sont en fait assez limités :

Aaron Gustafson Gustafson

... Aaron and his wife, Kelly, own ... rel="external" rel="externa l" href="http: href="http://easy-design //easy-designs. s. net">Easy! net"> Easy! Designs Designs ... ...

... He is "> Group Manager of the Web Standards Web Standards Project (WaSP) (WaSP) ... ...

Pourtant, ces quelques ajouts permettent dorénavant de faire produire assez aisément un profil de ma personne par un analyseur ana lyseur de microformats. microformats.

20.Et pourquo pourquoii l'l'élément élément b ? Pourquoi pas span ? En HTML5, l'élément b a été remis à l'honneur pour englober une séquence de texte devant se démarquer visuellement du reste du paragraphe sans pour autant prendre une importance particulière. particul ière. Rien ne vous empêche d'utiliser l'élément span, mais b est plus approprié et plus bref.

31

32

ADAPTIVE WEB DESIGN

Figure 2.3 : Informations de profil extraites d'une page web avec l'outil

Operator. Un grand intérêt des microformats est que vous avez toute latitude dans la manière de les utiliser. Les noms de classes ne doivent pas nécessairement survenir dans un ordre précis (mais ils doivent être insérés dans un élément parent de la classe appropriée) et leur contenu ne doit pas obligatoirement correspondre à un format d'exportation prédéfini. Comme notre exemple le montre, le microformat hCard ne doit pas même être marqué dans une même partie comme une entrée d'annuaire ; vous pouvez en distribuer les



composants dans votre prose à la seule condition d'employer les noms class appropriés pour désigner vos classes.

Notez-le sur vos tablettes ! Une fois les données pour hCard gérées, nous pouv pouvons ons passer au microfo m icroformat rmat hCalendar présenté plus haut. Avant de procéder au marquage, découvrons quelques classes de hCalendar parmi les plus usitées.

CLASSE

DESCRIPTION

vevent

Indique l'utilisation du microformat hCalendar pour un événement. (Cette classe doit être la classe de l'élément racine du contenu hCalendar.)

dtstart

Désigne la date de début de l'événement.

dtend

Désigne la date de fin de l'événement.

summary

Désigne le nom de l'événement.

location

Désigne le lieu de déroulement de l'événement.

description

Fournit des détails sur l'événement.

Tableau 2.2 : Classes principales du microformat hCalendar.

Puisque toute la page d'e d 'exemp xemple le est dédiée à l'annon l 'annonce ce d'un d 'un événement, événement, notre processus d'injection de classes doit commencer plus haut dans l'arborescence DOM. J'ai choisi de commencer au niveau du conteneur de contenu (div#content ), auquel j'ai associé la classe racine "vevent". Plus loin, le contenu pour hCalendar sera englobé dans article#details. En appliquant ainsi la classe principale à un élément ancestral, nous disposons di sposons de toute la souplesse souplesse pour ajoute ajouterr d'autres d 'autres propriétés propriétés hCalendar hCalendar dans d 'autres éléments article :

J'ai mentionné mentionné que le premier premier élément élément (article#details) devait contenir les principales données de l'événement. Commençons par revoir le code source dans son état avant application des classes de hCalendar :
>

Join
Join us for HTML5 & CSS3

33

34

ADAPTIVE WEB DESIGN
8–10
8–10 April 2011
2011

Gatlinburg,
Gatlinburg, TN title="Tennessee"> TN

< !-- / #details -->

Ce rapide survol a sans doute suffi pour repérer les points d'injection de la plupart des classes hCalendar. Nous pouvons sur le champ insérer la balise pour le nom de l'événement, c'est-à-dire le sommaire "summary" en dialecte hCalendar :
Join
Join us for HTML5 & CSS3

Si nous progressons dans le code source, nous arrivons à la plage de dates "8-10 April 2011". De façon traditionnelle, nous aurions utilisé des éléments d 'abrévia 'abréviation tion (abbr) pour marquer ces données, données, mais le HTML5 HTM L5 a introduit un élément dédié au marquage d'une donnée temporelle qui se nomme time. Le problèmee est que pour dénoter une date de début et une date de fin, il va falloir problèm fa lloir diviser le contenu actuel en deux pour pouvoir définir deux éléments time. Même si cela paraît étranger étrang er de prime abord, le plus logique consiste à englober le seul chiffre chiff re "8" dans un premier élément élément time et la l a date compl complète ète "10 "10 April 2011" dans le second. En effet, nous supposons que ce chiffre "8" isolé est à comprendre comme le "8 avril 2011" sous forme abrégée (c'est pourquoi l'élément abbr était approprié auparavant). L'élément time permet de gérer les dates plus finement avec son attribut datetime. C'est ainsi que j'ai reformulé la date de début en entier :
11-04-08"> 8– 11-04-10"> 10 April 2011



Les seules classes obligatoires dans hCalendar sont "summary" et la date de début. Il suffirait donc d'appliquer la classe "dtstart" au premier élément time pour que le microformat soit valide. Mais puisque nous disposons d'une date de fin, définissons cette autre classe dans la foulée21 :
8 datetime="2011-04-08"> 8 – – 10 datetime="2011-04-10"> 10 April 2011 2011

Avançons un peu dans le contenu. Nous pouvons Avançons pouvons facilement coder le lieu l ieu de l'événement avec "location" puisque le stage se déroule à Gatlinburg, TN :
Gatlinburg, see">TN TN

Le dernier dern ier morceau de notre notre puzzle hCalendar correspond à la "description" " description".. Le meilleur candidat pour le contenu de cet élément est la section principale "main" de l'article :

Et voilà tout. Une fois les éléments du microformat en place, l'utilisateur l 'utilisateur peut très facilement facilement extraire l'événe l 'événement ment et l'inj l' injecter ecter dans son agenda.

21. Au moment où nous mettons sous presse, certains analyseurs de microformats ont des soucis avec les nouveaux éléments et attributs du HTML5. C'est pour cette raison qu'il est avisé de dupliquer la valeur de l'attribut datetime dans un titre de l'élément time ou d'utiliser un élément title sur un élément abbr.

35

36

ADAPTIVE WEB DESIGN

Figure 2.4 : Informations extraites de ce code source avec l'outil Operator.

Ce second exemple pratique de microformat montre comment vous pouvez directement directem ent enrichir un marquage déjà déjà significatif afin d 'a'amélio méliorer rer le service offert à l'utilisateur. De l'amélioration progressive bien comprise !



RIEN DE TEL QUE DE BONNES BASES Le concept d'amélioration progressive est souvent présenté en relation avec le CSS et le JavaScript, mais il concerne tout autant le marquage HTML. Comme ce chapitre c hapitre l'a montré, chaque fois que nous avo avons ns ajouté un élément significatif, nous avons augmenté la pertinence de la page en renforçant son accessibilité et en la rendant plus facile à trouver par les utilisateurs grâce à son meilleur statut dans les recherches organiques. Nous avons également vu comment la classification et l'identification pouvaient rendre le langage HTML encore plus expressif. Enfin, avec les microformats, nous avons vu qu'en choisissant des noms, nous augmentions la densité sémantique et la praticité du contenu ainsi marqué. Le marquage sémantique est une étape essentielle dans l'approche d'amélioration progressive ; combiné à des contenus bien formés, il constitue la fondation sur laquelle se constru construisent isent les éléments éléments d' d 'une expérience utilisateur de qualité.

37

"Le design est l'l 'esprit "Le esprit même même d'une une création humaine qui s'exprime dans chacune des couches successives qui habillent le produit ou le service." — STEVE JOBS

CHAPITRE 3

AMÉLIORATION PROGRESSIVE AVEC LE CSS Si l'on met de côté les quelques sites endormis qui se fondent encore sur des éléments font et des images GIF d' d'écartemen écartement,t, le design web est dorénav dorénavant ant mis en forme grâce aux styles CSS (Cascading (Cascading Style Sheets). Sheets). Bien sûr, vous disposez aussi des techniques fondées sur Flash, SVG et canvas , mais si vous voulez donner à vos contenus les meilleures disponibilité et accessib accessibilité, ilité, vous utilisez le HTML pour marquer le contenu et le CSS pour lui appliquer des styles visuels. Comme le HTML, le CSS est dès l'origine prévu pour être tolérant aux pannes : un navigateur qui ne comprend pas une règle de style l'ignore et poursuit son travail1 2 . En tenant compte de la façon dont le CSS a évolué, nous pouvons facilement adopter le principe d'amélioration progressive en tirant profit de cette toléran tolérance ce pour créer des strates appropriées appropriées aux capacités des différentes générations de navigateurs.

1. 2.

http://www.w3.org/TR/2009/CR-CS http://www.w3.or g/TR/2009/CR-CSS2-20090908/syn S2-20090908/syndata.html#parsi data.html#parsing-errors ng-errors http://www.w3.org/TR/2009/CR-CS http://www.w3.or g/TR/2009/CR-CSS2-20090908/syn S2-20090908/syndata.html#unsup data.html#unsupported-values ported-values

40

ADAPTIVE WEB DESIGN

CERTAINES ERREURS SONT SALUTAIRES Ceci n'étant pas un livre sur le langage CSS, je ne vais pas passer en revue toutes les options qu'il permet, mais me contenter d'un bref survol du fonctionnement de CSS, car je pense que cela vous dotera d'une profondeur de vue utile pour comprendre comment construire des architectures de sites à amélioration progressive. Fondamentalement, le CSS est une collection de jeux de règles lisibles par les humains. Chaque règle est composée d'un sélecteur et d'un d 'un bloc déclaratif regroupant une série sér ie de couples propriété-attribut (des déclarations), déclarations), qui seront appliqués à tout élément correspondant au sélecteur. p { color: red; font-weight: font-weight : bold; }

L'exemple précédent est du CSS élémentaire. Toute personne qui a utilisé le CSS (et sans doute même la plupart de ceux ne l'ayant jamais utilisé) peuventt à la simpl peuven si mplee lecture deviner devi ner que cette règle sert à sélectionner certains cert ains paragraphes, puis à forcer leur texte à apparaître en gras et en rouge. Mais si nous considérons le même exemple sous l'angle de la tolérance aux pannes, les choses sont moins simples. Lorsqu'un navigateur scrute un fichier CSS pour savoir comment afficher une page, il lit chaque règle tour à tour et tente de l'interpréter. S'il lit une règle qu'il ne sait pas gérer, cela déclenche une erreur d'analyse (parsing (parsing error). error). La plupart de ces erreurs résultent d'une mauvaise rédaction de la règle CSS (nom de propriété propriété ou valeur mal écrite, écr ite, signe de ponctuation ponctuat ion manquant, etc.), mais certaines, bien que conformes à la syntaxe du CSS, ne sont pas compréhensibles par l'analyseur. En supposant que tous les signes de ponctuation sont en place (accolades, points-virgules et deux-points), l'exemple précédent peut subir une erreur d'analyse en cinq endroits :


AMÉLIORATION AMÉLIORA TION PROGRESSIVE AVEC LE CSS

1 p { 2

3

color: red r ed; ; font-weight: bold; }

4

5

1. Sélecteur : p 2. Nom de la première propriété : color 3. Valeur de la première propriété : "red" 4. Nom de la deuxième propriété : font-weight 5. Valeur de la deuxième propriété : "bold" D'après la spécification, en cas d'erreur d'analyse de son analyseur, le navigateur doit ignorer le composant de niveau supérieur de la règle dans laquelle s'est produite l'erreur. En supposant que le navigateur ne sait pas ce que signifie le mot clé CSS de choix de couleur "red", il ignorera la déclaration color: red, mais appliquera les autres (s'il les comprend). Il en va de même pour le mot clé de graissage de font-weight nommé "bold". En revanche, si le navigateur ne comprend pas le sélecteur (p), il ignorera tout le bloc de règles, même si les déclarations individuelles qu'il contient sont de celles qu'il peut interpréter. Le principe, pri ncipe, très simple, est le suivant : personne ne pouvant prédire prédire le futur f utur de la norme CSS, il est e st indispensable que les les navigateurs ignorent les déclarations et sélecteurs dont ils ne savent que faire. Comme en HTML, cela favorise l'évolution du langage et permet d'appliquer l'amélioration progressive aux pages web avec les styles CSS. En ce qui concerne les propriétés, exploiter les erreurs d'analyse d 'analyse à votre profit profit est assez simple et cela vous ouvre quelques possibilités étonnantes. Voici un petit exemple d'utilisation du schéma de couleur RGBa de CSS3 : p { background-color: background-co lor: rgb(137, 224, 160); background-color: background-co lor: rgba(180, 246, 248, .43); }

Un navigateur lisant cette règle va normalement comprendre le sélecteur (le sélecteur de paragraphe courant p est le plus universel de tous), et donc s'aventurer dans les détails du bloc pour tomber sur la première déclaration

41

42

ADAPTIVE WEB DESIGN background-color. Cette propriété de couleur de fond de texte existe dans la

norme CSS depuis la version 1 ; le navigateur va donc la comprendre et ira en lire la valeur. Justement, les codes de couleurs RGB font aussi partie de la norme CSS depuis le début, et le navigateur saura quoi en faire. Puisque tout s'est bien passé, l'analyseur transmet la règle au navigateur qui applique background-color: rgb(137, 224, 160); à tous les paragraphes de texte concernés. L'analyseur attaque ensuite la seconde règle. Dans la seconde déclaration, la même propriété background-color est redéfinie avec une nouvelle valeur (mécanisme de cascade). Nous savons déjà que le navigateur comprend la propriété. Il va donc lire la valeur, qui utilise la convention convention de codage RGBa. Si le navigateur la comprend, la valeur est transmise à la propriété background-color en remplacement de la précédente valeur RGB. En revanche, si RGBa n'est n'est pas géré, une erreur d'analyse d 'analyse survient et le navigateur ignore toute la déclaration. Le texte concerné sera traité avec la valeur RGB pour background-color . Bien sûr, si le navigateur gère la convention RGBa, il remplace la valeur de background-color en conformité avec le mécanisme de "cascade" (premier C de l'acronyme CSS). Je vais revenir plus en détail sur ce mécanisme dans la suit du chapitre, mais voici sa règle de base : pour p our deux propriétés équivalentes (ou identiques) la dernière définition prime. Cette démonstration simple permet de voir comment on peut utiliser la nature tolérante du CSS pour incorporer sans crainte des possibilités plus sophistiquées que sauront exploiter les navigateurs les plus capables. Mais ce mécanisme n'est est pas limité au niveau des déclarations. Vous pouvez l'l 'appliquer pour masquer tout un groupe de jeux de règles au moyen d'un sélecteur plus sélectif : html[lang] p { /* Ici vient un bloc de règles très modernes */ }

Un navigateur qui qu i rencontre ce jeu de règles commence par évaluer le sélecteur. Si le navigateur sait gérer les sélecteurs basés attribut (dans l'exemple, nous désignons tous les paragraphes qui dépendent d'un élément html possédant un attribut de langage), il va entrer dans les détails des règles pour appliquer les déclarations qu'il sait gérer. Mais si le navigateur ne connaît pas les sélecteurs complexes, l'erreur d'analyse fait ignorer tout le jeu de règles.



Un exemple exemple assez fameux fa meux d' d 'emploi mploi de cette technique de distribution d istribution sélective de règles selon les capacités du navigateur (plutôt à titre d'illustration que pour son effet pratique) est la page du jardin CSS Zen Garden d'Egor Kloos intitulée "Gemination "Gemination""3.

Figure 3.1 : La page Gemination dans IE6 (en haut) et dans IE7 (en bas).

Dans ce cas d'école, Egor Kloos a conçu une structure visuelle de base destinée à la version 6 d'Internet Explorer et adopté la technique MOSe 3.

http://www.csszengarden.com/062/

43

44

ADAPTIVE WEB DESIGN

("Mozilla/ ("Mozi lla/Opera/ Opera/Safari Safari enhan enhancement cement")")4 pour permettre aux navigateurs plus récents récen ts de fournir un rendu visuel très différent. Kloos s'est servi de quelques sélecteurs élémentaires pour la mise en pages de base et d'a d 'autres utres sélecteurs sélecteur s plus complexes complexes pour les styles évolués. Voici Voici un extrait de sa technique : #intro { margin: 0; padding: 0; width: 660px; height: 80px; background: transparent url(introkop.gif) no-repeat right top; } /* ... */ body[id=css-zen-garden] #intro { position: absolute; top: 0; left: 0; float: none; margin: 0; width: 100%; height: 350px; background: none; }

Suivant l'ordre des cascades successives, le navigateur gère d'abord la première règle pour afficher la partie #intro. Il arrive ar rive ensuite à la règle plus évoluée évoluée du même #intro. Si le navigateur sait gérer les sélecteurs à attribut (qualifiés), le rendu de #intro va être radicalement changé. Dans le cas contraire, il ne change pas. Ce filtrage fondé sur les sélecteurs constitue une technique intéressante, mais perturbe les auteurs de code CSS qui oublient que l'échec d'un tel sélecteur composite (au (au moins deux instructions instr uctions de sélection séparées par des virgules) virg ules) est total : tout le bloc de règles est ignoré :

4. Dave Shea, le mainteneur actuel actuel du site CSS Zen Garden, avait introduit introduit l'expression en 2003, mais à l'arrivée d'Internet Explorer 7, il est tombé dans l'oubli parce que cette nouvelle nouve lle version ne souffrait souff rait pas des limitations lim itations de IE6 au niveau des sélecteurs. Le texte original est disponible à l'adresse http://www.mezzoblue.com/archives/2003/06/25/mose/.



p, p:not([title]) p:not([title] ) { color: red; font-style: bold; }

Dans l'l 'extrait précédent, précédent, nous retrouvons retrouvons les cinq causes d' d 'erreur possibles vues plus haut, et une cause de plus dans le deuxième sélecteur ( p:not([title])). Un navigateur qui ne comprend qu'un un des deux sélecteurs sélecteur s (le p est universel) un iversel) va ignorer la totalité du jeu de règles et non seulement la variante qui cible les seuls paragraphes de texte ne possédant pas l'attribut title. Vous pourrez trouver ce choix illogique, mais c'est exactement ainsi que la norme CSS 2.1 demande de procéder : "Toute l'instruction doit être ignorée en cas d'erreur n'importe où dans le sélecteur, quand bien même la suite du sélecteur semblerait exploitable"5. Lorsque vous savez cela, vous pouvez prendre de meilleures décisions pour comb combiner iner les sélecteurs. Une règle globale globale consiste à ne pas combiner des sélecteurs complexes complexes avec des sélecteurs simples (ce qui a été fait dans le précédent exemple), sauf si vous voulez que tous les jeux de règles ainsi délimités deviennent inaccessibles inaccessibles aux anciens navigateurs. Nous reviendrons dans quelques paragraphes à cette technique, mais après ce bref détour du côté de la spécificité. Le concept de spécificité est un autre concept majeur de CSS. Il détermine le nombre d'éléments pouvant être sélectionnés par le même sélecteur. C'est la seule technique qui permette d'outrepasser le mécanisme de cascade (nous y revenons). Certains sélecteurs sont plus sélectifs que d'autres : un sélecteur d'identifiant comme #intro est dix d ix fois plus spécifique qu'un sélecteur de classe comme vcard, lui-même plus précis qu'un sélecteur d'élément comme p)6. L'évaluation de la spécificité d'un sélecteur est la somme des spécificités de tous ses composants. Une règle dépendant d'un sélecteur spécifique aura toujours priorité sur une règle liée à un sélecteur plus large, quel que soit leur ordre d'apparition dans la cascade. Nous l'avons vu avec le sélecteur d'attribut très futé du site d'Egor Kloos : la règle la moins spécifique apparaît en dernier dans le fichier CSS, mais ma is sa priorité reste inférieure à la premiè première, re, qui est donc celle appliquée. 5. http://www.w3.or http://www.w3.org/TR/2009/CR-CS g/TR/2009/CR-CSS2-20090908/syn S2-20090908/syndata.html#ruledata.html#rule-sets sets 6. Pour en savoir plus plus sur l'évaluation l'évaluat ion du du niveau de spécificité, vous pouvez consulter l'article d'Andy Clarke "CSS Specificity Wars" (http://www.stuf http://www.stuffandnonsense.co fandnonsense.co.uk/archives/ .uk/archives/ css_specificity_wars.html).

45

46

ADAPTIVE WEB DESIGN

Il faut du temps pour bien maîtriser ce concept de spécificité des sélecteurs. Prévoyez quelques maux de tête si vous décidez d'appliquer tous vos styles en relation avec des sélecteurs très pointus (avec un sélecteur à identifiant pour chaque style). En effet, vous serez parfois forcé de définir des sélecteurs encore plus spécifiques, combinant deux identifiants. Pour vous épargner de déclencher une course à la spécificité, je vous conseille de vous retenir de rendre vos sélecteurs trop spécifiques sans raison impérieuse. Revenons au code d'Egor d' Egor Kloos. K loos. Appliquons Appliquons ce que nous venons d'apprendre d'apprendre au niveau des erreurs d'analyse dans les sélecteurs combinés ; l'objectif sera de réduire la spécificité des jeux de règles sophistiquées d'Egor sans perdre l'esprit de son travail : #intro { /* Ancienne présentation */ } /* ... */ [foo], #intro { /* Nouvelle présentation évoluée */ }

Dans cette reformulation, j'ai modifié modi fié le second jeu de règles règles en indiquant un foo o et un sélecteur combiné qui cible un élément élément possédant posséda nt un attribut nommé fo autre avec un identifiant nommé intro. L'astuce est que le premier sélecteur (celui à attribut) est un leurre. Le nom d'attribut foo est non seulement non standard, mais il n'est est utilisé nulle part dans le code HTML de la page CSS Zen Garden. L'ajout de ce sélecteur a pour seul effet de rendre le jeu de règles invisible à tous les navigateurs qui ne savent pas gérer les sélecteurs à attributs. Le point le plus important est que cette cette redéfinition ne modifie en rien r ien l'impact l' impact du sélecteur #intro : sa spécificité est la même qu'auparavant, ce qui garantit que le mécanisme de cascade continue à déterminer l'application des styles. Cette technique évoluée n'est sans doute pas celle que vous allez adopter systématiquement en CSS, mais il sera utile de vous en souvenir lorsque vous voudrez voudrez filtrer des jeux de règles sans altérer la spécificité d'un d 'un sélecteur. sélecteur. En termes de maintenance, cette technique est déconseillée déconseillée pour plus d'une règle de temps à autre. Il existe d'autres méthodes pour effectuer du filtrage en masse, et nous les découvrirons bientôt.



DIVISER POUR BIEN RÉGNER Le mécanisme de "cascade" est un concept stratégique de CSS, nous l'avons dit – comme nous avons déjà précisé que ce livre n'offrait pas de place pour un rappel exhaustif du concept de cascade. Cependant, un point peut vous permettre de devenir rapidement un expert en amélioration progressive : l'ordre. L'ordre compte, beaucoup. Toutes choses égales par ailleurs en termes de spécificité, le résultat d'une règle CSS dépend de la proximité entre la déclaration décla ration de style et son élément cible. Nous avions vu ce point dans l'exemple qui réalisait deux affectations de couleur de fond background-color . Il en va de même au niveau supérieur de deux jeux de règles : h1 { font-size: 2em; } h1 { font-size: 3em; }

Cet exemple va affecter une valeur de 3em à la propriété font-size de tous les éléments h1. Ce cas d'école définissant un second jeu de règles avec le même sélecteur juste après le premier ne se rencontrera pas souvent, mais quelque chose du même genre est moins rare. Prenons comme exemple les images de l'élémen l 'élémentt article relatif à l'hébergem l 'hébergement ent (nommé (nommé "Lodging") "Lodg ing") du site de démonstration Retreats 4 Geeks :

47

48

ADAPTIVE WEB DESIGN

Figure 3.2 : Rendu de l'article Lodging.

Voici le code source HTML de cet article :
>

Where You’ll Where You’ll Stay
Stay

>

">

>


Vous remarquez que cet élément article définit la même valeur "frame" de class pour chaque élément figure pour garantir la cohérence dans l'aspect des contours d'image. L'image principale a reçu un complément de valeur s'écrivant "focal". Cela permet d'appliquer deux règles CSS différentes de même spécificité afin afi n d'affecter d 'affecter les styles appropriés appropriés à figure.focal . Voici un exemple de définition de règles avec une redéfinition : .frame { margin: 0 auto 40px; } .focal { margin: 0 20px 25px 30px; }

Ces deux jeux jeu x de règles s'appliquent s'appliquent à l'élément l' élément figure de l'image l' image principale principale de cet élément article (et de tous les autres éléments de même nom de la page).. Les deux sélecteurs ont la même spécificité, mais puisque le second jeu page) redéfinit la propriété du premier, la valeur de la propriété margin de l'image principale (celle sélectionnée par "focal") sera de "0 20px 25px 30px" au lieu de "0 auto 40px." Dans la pratique, les feuilles de styles contiennent souvent des centaines de jeux de règles. Il devient alors facile de se faire piéger par les effets de la proximité. Pour nous en prémunir, nous pouvons adopter une approche par couches dans la conception CSS. Si nous revenons un peu en arrière, nous constatons que le design d'un site web comporte trois aspects majeurs : la typographie, les couleurs et la mise en page. Chacun de ces aspects apporte quelque chose, participant ainsi au résultat final. Pour ce qui concerne l'amélioration progressive en relation avec avec le CSS, nous pouvons adopter la même répartition en plusieurs niveaux de support bien distincts, distincts , en correspondance avec les capacités des navigateurs : la typographie, typog raphie, puis puis la typographie ty pographie avec avec des couleurs, et enfin, la typographie ty pographie avec des couleurs et une mise en page sophistiquée.

49

50

ADAPTIVE WEB DESIGN

Nous avons dit que l'ordre d'apparition des règles a son importance. Pour concevoir de façon progressive, nous devons confronter notre désir de distribuer les niveaux de conception conception à la logique de l'interprétation l 'interprétation en cascade de nos règles. D'un point de vue pratique, cela suppose d'édicter d' édicter les groupes de déclarations d'un même niveau dans un ordre défini : d'abord la typographie, puis la mise en page et enfin les couleurs. Pourquoi dans cet ordre ? Nous y reviendrons très bientôt. Vous pouvez définir ces jeux de règles dans des fichiers de feuilles de styles différents (importés ou liés) ou dans un seul gros fichier 7. L'approche multifichiers est facile à gérer et logique, mais elle a un coût en performances : il fautt rapatrier chaque fau chaque feuille de styles dans une requête HTTP distincte. De plus, certains navigateurs ne sav savent ent pas garder en cache local plus d'un nivea n iveauu de feuille de styles dans le sens descendant (celui d'une feuille importée dans une autre). autre). C'est C 'est la raison pour laquelle je trouv t rouvee l'a l 'approche pproche mono-fichier plus sensée ; c'est celle adoptée pour le site de démonstration Retreats 4 Geeks. Illustrons cette approche par niveaux de définition des styles en commençant par la situation la plus simple : sans aucun style. La Figure 3.3 montre l'aspect de la section sur l'hébergement l' hébergement (lodging lodging)) dans Safari. Safar i. Seuls les styles par défaut du navigateur sont appliqués.

7. Opter pour un fichier de feuilles de styles unique ne vous empêche empêche pas de répartir les règles dans plusieurs fichiers CSS. Il existe plusie plusieurs urs outils du côté serveur pour combiner des fichiers CSS en un seul. Vous profitez ainsi des deux avantages : vous importez les fichiers de détails de style dans un fichier squelette destiné à les accueillir, fichier que vous transmettez aux clients lors de leurs requêtes. Vous trouverez trouverez un exemple à l'adresse l 'adresse http://www.easy-reader.net/archives/2010/07/ http://www.easy-reader.net/ar chives/2010/07/11/template-bas 11/template-based-asset-mungin ed-asset-munging-ing-inexpressionengine.



Figure 3.3 : "Lodging" sans CSS.

Vous constatez que le contenu est tout à fait f ait utilisable utili sable avec avec ces styles implicites. L'apparence n'est est pas sophistiquée, sophi stiquée, mais mai s tout le contenu est lisible. En ajou ajoutant tant un niveau de règles typographiques, nous arrivons à l'aspect de la Figure 3.4.

51

52

ADAPTIVE WEB DESIGN

Figure 3.4 : "Lodging" agrémenté de styles typographiques.

L'amélioration est limitée, mais pas négligeable. Les navigateurs qui ont des soucis dans le rendu des styles de mise en page CSS disposent ainsi d'un niveau intermédiaire, ce qui est plus agréable pour les utilisateurs de ces navigateurs que les forcer de subir les inconv i nconvénients énients d'une d 'une tentative de rendu incomplète. Le niveau n iveau suivant de support support des styles est celui de la couleur. C'est celui qui est en général accessible aux navigateurs en même temps que la typographie de base (dans certains cas, cela va jusqu'aux images de fond). La Figure 3.5 montre la même page web avec les légers enrichissements apportés par la mise en couleur du même article.



Figure 3.5 : "Lodging" agrémenté de couleurs.

Nous sommes clairement dans un processus d'amélioration progressive. Le dernier niveau d'application de styles qui nous intéresse ici est celui du contrôle global de la disposition des éléments sur la page. Son résultat a été montré quelques pages plus haut dans la Figure 3.2. J'ai dit que tous ces niveaux seront défin définis is dans le même fichier que j'ai structuré en trois sections. Voici l'extrait des styles applicables aux images de l'article "Lodging" : /* =Typographie */ img { display:block; } /* =Mise en page */ @media screen { .frame .inner { border: 10px solid; } }

53

54

ADAPTIVE WEB DESIGN /* =Couleurs */ .frame .inner { background-color: backgroundcolor: rgb(227, 222, 215); border-color: border-colo r: rgb(227, 222, 215); }

Vous avez certainement noté la présence du bloc @media qui englobe les règles de style pour affichage affichag e sur écran. écra n. Cet élément n'est est pas présent fortuitement fortu itement : il garantit que tous les clients profiteront des jeux de règles concernant la typographie et les couleurs en isolant celles de l'affichage aux seuls navigateurs qui savent gérer le type de média "screen". Le même principe est facilement extensible aux impressions ou à tout autre média, mais nous verrons cela plus loin. L'élément @media a un autre avantage : les navigateurs vraiment anciens (par exemple, Netscape 4) ne le comprenant pas, ils ignorent ce bloc et nos styles de mise en page leur restent invisibles. Ces navigateurs profitent donc sans perturbation des règles de typographie et même, pour la plupart d'entre eux, de celles des couleurs. Revenons à une question laissée en suspens : pourquoi ai-je relégué les règles de couleurs en dernier ? Mon raisonnement est simple. J'adore les raccourcis CSS qui permettent de combiner plusieurs règles en une seule. Nous en avons rencontré une plus haut : border: 10px solid . Cette écriture abrégée équivaut aux quatre lignes suivantes : border-top: 10px solid; border-right: border-righ t: 10px solid; border-bottom: 10px solid; border-left: 10px solid;

Ce n'est pas tout. Chacune des ces déclarations est elle-même une version raccourcie. Par exemple, border-top: 10px solid équivaut aux trois lignes suivantes : border-top-width: 10px; border-top-style: solid; border-top-color: inherit;

Vous voyez que les raccourcis CSS réduisent fortement la complexité des feuilles de styles CSS. Supposons que dans le précédent exemple, les jeux de règles pour les couleurs aient été placés avant celles de mise en page. L'attribut border-color aurait reçu la valeur gris clair, mais le raccourci border qui arrive après dans les



règles de mise en page aurait annulé la valeur de border-color , parce que la spécificité du jeu de règles est la même et que border redéfinit toujours border-color , même de façon implicite (la valeur par défaut est "inherit", ce qui entraîne la réutilisation de la couleur en vigueur pour le texte). Voici pourquoi je conseille de placer les règles de couleurs en dernier. Les raccourcis CSS sont très pratiques. pratiques. Ils allègent l'écriture l'écr iture des jeux de règles et réduisent la longueur du fichier, fich ier, mais vous devez bien contrôler l'ordre dans lequel vous les faites fa ites appliquer. Puisque nous en sommes aux couleurs, j'en profite pour ajouter que dans certains cas, vous voudrez utiliser la couleur dans un contexte spécifique à la mise en page (par exemple pour une couleur de fond). Dans ce cas, il peut être intéressant d'isoler une sous-section de vos règles avec @media, comme nous l'avons fait pour tout le bloc de mise en page : /* =Couleur */ .frame .inner { /* Couleurs pour tous les médias */ } @media screen { .frame .inner { /* Couleurs spécifiques aux écrans */ } }

En partant des bases saines de notre infrastructure stratifiée, il devient très simple d'ajouter des modules en fonction des besoins. Voici des exemples d'effets (de style) : /* =Couleurs */ a:link, a:visited { color: rgb(180, 49, 25); } a:hover { color: rgb(235, 123, 35); } /* ... */ /* =Effets */ @media screen { a { transition-duration: transition-d uration: .5s; } }

55

56

ADAPTIVE WEB DESIGN

Vous disposez maintenant d'une bonne connaissance des techniques permettant d'exploiter le mécanisme de tolérance aux pannes de CSS pour améliorer la qualité de la navigation. Nous pouvons donc aller plus loin en ajoutant une autre couche d'enrichissements.

PETIT QUIPROQUO, GRANDS EFFETS De par sa tolérance aux pannes, le CSS est un complément presque idéal à la panoplie des outils d'amélioration progressive. L'ignorance est souvent un bien parce qu'elle nous permet de bien exploiter les nouveautés fonctionnelles et syntactiques sans craindre de perturber les navigateurs qui ne suivent pas la cadence. Mais que se passe t-il lorsqu'un navigateur croit qu'il comprend une règle, mais qu'il la comprend mal ? Oui, je veux bien bien sûr parler d'Internet d' Internet Explorer. IE9 a été lancé lorsque ce livre partait chez l'imprimeur. l 'imprimeur. De ce que j'ai pu en voir, il semble que ses auteurs ont bien répondu à leur promesse de conformité aux standards (y compris le CSS), d'une manière totalement interopérable. IE8 n'était pas non plus en retard par rapport à CSS, mais si vous repensez à IE7 et (frisson) à IE6, les choses deviennent franchement sombres. Fort heureusement, heureusement, les brillants individus i ndividus de Microsoft nous avai avaient ent concocté une technique permettant d'isoler d 'isoler facilement facilement les sections spécifiques à leurs navigateurs navigate urs dans le code CSS, Jav JavaScript aScript et même dans le marquage HTML : les commentaires conditionnels8. Il s'agit exactement de ce à quoi vous pourriez vous attendre attendre : des commentaires HTML dans un format spécial qui sont pris en compte par IE, mais ignorés par tous les autres navigateurs (après tout, ce sont des commentaires). Les commentaires conditionnels cadrent bien avec l'approche d'amélioration progressive. En effet, même si l'améliora l 'amélioration tion progressive n'est est pas directement d irectement dépendante du type de navigateur, certains navigateurs ont besoin qu'on les aide un peu à répondre aux attentes des utilisateurs. Les commentaires conditionnels permettent aux concepteurs de cibler une ou plusieurs plusieurs versions d'IE d' IE.. En voici un court exemple d'utilisation :

8.

http://msdn.microsoft.com/enhttp://msdn.m icrosoft.com/en-us/library/ms53 us/library/ms537512(VS.85).asp 7512(VS.85).aspx x



.css"/>

Dans ce bref extrait, nous demandons en première première ligne lig ne d'inclure d 'inclure notre fichier CSS principal (main.css). Nous demandons ensuite d'inclure d' inclure de façon conditionnelle une feuille de styles dédiée à IE9, au moyen de la syntaxe if IE 9. Nous y reviendrons, mais intéressons-nous d'abord aux trois instructions suivantes. La première cible IE8 et les versions antérieures (l'expression if lte IE 8 signifie "si inférieur ou égal à IE8"), la deuxième cible IE7 et les versions antérieures avec if lte IE 7 , et la dernière ne concerne que la version 6 et antérieures. Si elles sont présentées dans cet ordre, ces commentaires simplifient l'application des styles CSS spécifiques : les correctifs (patches ( patches)) que vous appliquez à une version plus récente d'IE se propagent aux versions antérieures. Quel intérêt ? Si la version IE7 souffrait souff rait d'un problème, il est fort probable que le problème existait déjà dans IE6. Venons-en au commentaire conditionnel d' d 'IE9. E 9. Il I l ne cible que cette cette version du navigateur. Nous Nous aurions pu ratisser large comme pour les versions antérieures, mais IE9 constitue une importante évolution par rapport à IE8, y compris au niveau du support de CSS. Les problèmes qu'il présente ayant beaucoup moins de chances de concerner les versions antérieures, nous leur épargnons l'analyse de ces règles complémentaires. Nous aurions pu procéder de même pour IE8, car son support CSS est très différent de celui d'IE7 et il n'hérite que de peu de problèmes de son prédécesseur. Mais puisque nous devions appliquer app liquer quelques quelques filtres pour IE, IE , nous avons choisi de ne les écrire écri re qu'une fois.

57

58

ADAPTIVE WEB DESIGN

QUITTER LA BASE Le réseau web forme une vraie rupture par rapport aux supports d'information que nous connaissions jusque-là. Ce n'est pas un nouveau médium imprimé, ni de la télé télévision, vision, ni de la radio, ni un jeu vidéo, un kiosque ou une application, mais un hybride de tous ces médias – et plus encore. Devant ce constat, l'organisme de normalisation W3C a défini des possibilités de cibler un média en particulier. Nous en avons profité plus haut dans le bloc @media, mais vous êtes sans san s doute plus habitué habitué à vous servir de déclarations media avec des feuilles de styles liées ou imbriquées (grâce à l'attribut media) ou en tant que suffixe des instructions instr uctions @import. C'est le W3C qui est le gardien de la liste des types de médias officielle, mais il n'est pas réfractaire à l'enrichir en réponse aux évolutions technologiques. Pour le moment, moment, cette liste li ste officielle normalise l'app l'application lication de styles CSS aux médias suivants : écran d' d 'ordinateur, imprimé, télévisions, terminaux portables, et dans les contextes des assistants d'a d 'accessib ccessibilité ilité tels que les lecteurs d'écrans, d 'écrans, les imprimantes de braille, et les appareils à retour de force. En l'absence d'indication d' indication de média cible, le choix impli i mplicite cite est l'écran l 'écran d'ordinateur, "screen" "screen".. Au départ, les désignations de médias cibles sont univoques, mais comme avec les sélecteurs, vous pouvez combiner plusieurs noms de médias en les séparant par des virgules virg ules (la virgule vi rgule a l'effe l 'effett d'un d 'un OU logique). logique). Dans l'exemple l'exemple qui suit, le fichier main.css sera appliqué appliqué aux deux types ty pes de médias méd ias "print" et "screen" :

Les désignations de médias sont tolérantes aux pannes, mais le mécanisme de tolérance est assez différent de celui qui s'applique aux sélecteurs (n'en redoutez aucune confusion) : face à un type de média inconnu dans une liste multiple à virgules, les types inconnus sont simplement ignorés et ignorés et les types connus sont pris en charge9. Hélas, dans le cas des déclarations déclarations de médias pour @import, les versions versions d'IE d 'IE antérieures à la version 8 sèment la zizanie même pour les types de médias qu'elles reconnaissent. C'est une raison de plus de s'en tenir à @media, sauf lorsque vous voulez vraiment masquer certaines règles pour ce navigateur : 9. La spécification CSS 2.1 ( http://www.w3.org/TR/2009/CR-CSS2-20090908/media. html#media-types) aborde ce sujet pour @media et pour @import, mais elle est sans voix pour le cas similaire des styles liés et incorporés. Cela dit, tous les navigateurs gèrent les désignations de médias en HTML de façon homogène.



@import ‘not-for-IE7 ‘not-for-IE7-or-below.css -or-below.css' ' screen; @media screen, print, refrigerator { /* IE va pouvoir accéder à ces règles */ }

Les désignations de médias sont très puissantes, puisqu'elles permettent de créer des mises en page adaptées aux médias cibles. Un des premiers à avoir utilisé cette technique est Eric Meyer. En l'an 2000, il nous a montré comment abandonner les pages écran "adaptées aux imprimantes" imprima ntes" en ajoutant ajoutant une feuille feu ille de styles spécifique à une sortie sur imprimante, disponible dans toutes les pages web10. Deux ans plus tard, Eric a étendu ce principe en nous montrant comment utiliser du CSS avancé (tel que du contenu généré à la demande) pour améliorer progressivement cette expérience11. Revenons à notre feuille de styles principale. Nous pouvons assez aisément y ajouter ajouter un support d'autres d'autres médias grâce notre infrastructure infrastr ucture stratifiée : /* =Typographie */ /* Typographie pour tous les médias */ @media screen { /* Typographie réservée aux écrans */ } @media print { /* Typographie réservée aux imprimantes */ } /* =Mise en page (Layout) */ /* Mise en page pour tous les médias */ @media screen { /* Mise en page réservée aux écrans */ } @media print { /* Mise en page réservée aux imprimantes */ } /* =Couleurs */ /* Couleurs pour tous les médias */ @media screen { /* Couleurs réservées aux écrans */ } @media print { /* Couleurs réservées aux imprimantes */ }

10. http://meyerweb http://meyerweb.com/eric/artic .com/eric/articles/webrev/2000 les/webrev/200001.html 01.html 11. http://www.alis http://www.alistapart.com/arti tapart.com/articles/goingtopri cles/goingtoprint/ nt/

59

60

ADAPTIVE WEB DESIGN

Une autre approche consiste à regrouper tous les styles d'imprimantes dans la même déclaration @media en fin de fichier : /* =Typographie */ /* Typographie pour tous les médias */ @media screen { /* Typographie réservée aux écrans */ } /* =Mise en page */ /* Mise en page pour tous les médias */ @media screen { /* Mise en page réservée aux écrans */ } /* =Couleurs */ /* Couleurs pour tous les médias */ @media screen { /* Couleurs réservées aux écrans */ } /* =Impression */ @media print { /* Redéfinitions globales réservées aux imprimantes */ }

Dans le cas de l'impression, ce regroupement dans une déclaration @media est logique, mais mai s il est préférable de distribuer les déclarations pour les autres médias. Chaque projet étant différent, vous n'aurez n'aurez qu'à faire des essais et voir ce qui convient le mieux.

Des déclarations de médias d'avant-garde Quelques années après le support de l'indépendance des médias, le W3C a renchéri en introduisant les requêtes de médias, une sorte de désignation de média anabolisée. Ces requêtes fournissent des détails au sujet de l'environnement du poste utilisateur, comme la largeur de la fenêtre du navigateur ou son orientation (portrait ou paysage). La puissance des requêtes de médias vous permet d'adapter d'adapter finement vos designs à des terminaux term inaux spécifiques. Elles représentent de ce fait un outil indispensable de plus pour l'amélioration progressive.



Grâce à une requête de média (que vous pouvez placer partout où vous placez des désignations de médias normales), vous ajoutez dans une page un jeu de règles adaptées aux capacités du logiciel log iciel agent utilisateur. util isateur. Voyons Voyons un exemple : @media (min-width:1025px) { /* ... */ }

Ce groupe de jeux de règles n'entre en vigueur vig ueur que si la largeur largeu r de fenêtre du navigateur est égale ou supérieure à 1 025 pixels. Le module CSS3 qui définit les requêtes de médias a atteint le niveau Candidate Recommendation au Recommendation au milieu de l'année l 'année 2009. Il stipul stipulee comment récupérer les dimensions de la fenêtre de navigateur, parmi d' d 'autres paramètres du terminal (orientation, nombre de couleurs affichables, résolution, etc.). Actuellement, le standard ne gère pas encore toutes les propriétés, mais il y en a assez pour que la technique soit digne d'intérêt. d 'intérêt. Les requêtes de médias reprennent la syntaxe de désignation de média standard en y ajoutant l'opérateur ET logique avec "and" et l'opérateur de négation avec "not". "not". Ils I ls vous donnent un u n supplément de souplesse pour cibler le média. Pour une cible écran de largeur supérieure à 1 024 pixels, nous écrirons : screen and (min-width:1025px) . Pour tous les médias sauf les imprimantes, nous écrirons : not print. Cependant, il n'y a pas d'opérateur OU. De ce fait, fa it, vous ne pouvez pas rédiger des requêtes conditionnelles aussi complexes comp lexes qu'avec avec un langage de programmation program mation (comme (comme dans d ans l'exp l 'expression ression A et B ou B et C, mais pas A et C). Mais pour obtenir l'effet de l'opérateur OU, il suffit d'u d 'utiliser tiliser une virgule. virg ule. Voici une requête de média composite assez complète suivie de commentaires en décrivant le fonctionnement : @media screen and (min-device(min-device-width:1024px width:1024px) ) and (max-width:989px), screen and (max-device(max-device-width:480px) width:480px), , screen and (max-device-width:480px) and (orientation:landscape), screen and (min-device-width:481px) and (orientation:portrait) { /* Mise en page pour fenêtre de navigateur de moins de 990 pixels

ou iPhone sous iOS3 ou iOS4 (ou équivalent) en mode Paysage ou iPad (ou équivalent) en mode Portrait */ }

61

62

ADAPTIVE WEB DESIGN

Nous pouvons maintenant retoucher notre feuille feuil le de styles avec des requêtes de médias de sorte sor te à améliorer progressivement notre notre page en définissant défin issant une mise en page fondamentale applicable applicable aux anciens navigateurs et aux tablettes. J'ai ensuite aj ajusté usté cette mise en page pour l'ada l'adapter pter aux naviga navigateurs teurs sur écran écran de bureau comme aux petits écrans des téléphones portables : /* =Mise en page minimale */ @media screen { /* ... */ } /* =Mise en page complète */ @media screen and (min-width:1025px) { /* ... */ } /* =Mise en page étroite */ @media screen and (max-width:7 (max-width:765px) 65px) { /* ... */ }

La Figure 3.6 3 .6 montre l'aspect des trois mises en page. Certaines différenc d ifférences es sont drastiques entre médias (par exemple, les modalités de navigation) et d'autres plus subtiles (comme la fiche de contact au format carte postale qui s'ajuste en largeur à l'écran). Sans entrer dans les détails de ces différences, nous constatons que les requêtes de médias permettent de créer des mises en page vraiment adaptatives uniquement par des styles CSS. Pour en savoir plus au sujet des mises en page adaptatives, consultez la bibliographie en fin de Chapitre 6.



ÉTROIT

NORMAL/TABLETTE

@media screen and (max-width:765px) (max-width:7 65px) { /* ... */ }

LARGE

@media screen { /* ... */ }

@media screen and (min-width:1025px) { /* ... */ }

Figure 3.6 : Trois mises en page gérées par des requêtes de médias.

63

64

ADAPTIVE WEB DESIGN

LA RICHESSE À TOUS LES ÉTAGES Nous avons avons découvert plusieurs plusieurs techniques techn iques pour exploiter le langage CSS en vue d'amélior d 'améliorer er progressivement progressivement nos pages web. Certaines Certai nes de ces techniques, techn iques, comme l'utilisation fructueuse des erreurs d'analyse, sont d'un emploi si simple et si courant que vous allez sans doute les adopter immédiatement. D'autres, comme la séparation séparat ion en niveaux des règles de styles, peuvent vous demander d'infléchir vos pratiques actuelles ou vous paraître totalement nouvelles. En combinant finement ces techniques, niveau par niveau, vous êtes assuré d'offrir à vos visiteurs une expérience de navigation optimale, quel que soit le navigateur et le terminal d'accès.

"Je n'accepte accepte pas d'adopter adopter un un outil avant d'être assuré que je m'en servirai bien. Faire à moitié dans ce domaine est pire que ne rien faire. Les gens ne veulent pas d'une interaction de mauvaise qualité." — SETH GODIN

CHAPITRE 4

AMÉLIORATION PROGGRES PRO RESSIVE SIVE AVEC AVEC JAVASCRIPT Le 7 février 2011, peu de temps après que le groupe Gawker Media a lancé le nouvel habillage unifié de ses différents sites (Lifehacker, Gizmodo, etc.), les visiteurs de ces sites tombèrent sur un bel écran vide (voir Figure 4.1). La nouvelle plate-forme était entièrement fondée sur JavaScript pour le chargement de contenu dans les pages. Une erreur dans le code JavaScript a fait que toutes les pages étaient affichées vides1. Cette erreur unique a entraîné une "indisponib " indisponibilité" ilité" de tous les sites (même si les serveurs restaient opérationnels) de Gawker, ce qui leur a fait perdre des milliers de pages vues et d'affichages de bannières publicitaires. Cette perte sèche leur aurait été épargnée s'ils avaient tenu compte des principes d'amélioration progressive.

1. Cette avarie avarie est racontée dans la page http://blogs.wsj.com/digits/2011/02/07/gawkeroutage-causing-twitter-stir/ . Jeremy Keith et Mike Isolani ont fourni des commentaires au sujet de la fiabilité JavaScript des sites Gawker ( http://adactio.com/journal/4346/ et http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs, respectivement). J'ai ajouté mon grain de sel s el à l 'a'affaire ffaire (http://easy-reader.net/archives/2011/02/09/ you-cant-rely-on-javascript/).

68

ADAPTIVE WEB DESIGN

Figure 4.1 : Le site Lifehacker. Vide.

Rares sont les outils à pouv pouvoir oir rivaliser avec avec JavaScript JavaScript quand il s'agit d'a d 'animer nimer des pages web. Ce langage permet de créer des interactions sophistiquées et des interfaces dynamiques. Les concepteurs web en sont depuis longtemps convaincus et se sont jetés sur l'opportunité pour produire des pages plus attrayantes, pour valider les formulaires, etc. De nos jours, un développeur JavaScript Jav aScript n'a aucun mal ma l à créer quel quelque que chose d' d'étonnant étonnant en accor accordd av avec ec l 'approche d'améliora d 'amélioration tion progressive. progressive. Il n'en en a pas tou toujours jours été ainsi. Du milieu mil ieu à la fin des années 1990, écrire écri re du JavaScript JavaScript était considéré comme de la magie noire. Pour chaque bribe de code HTML un peu moins limpide, nous aboutissions en général à dix fois pire en JavaScript parce que les deux navigateurs phares de l'époque, Netscape et Internet Explorer, avaient deux interprétations interpré tations du langage HTML HTM L2 suffisamment divergentes pour que toutes les sections vraiment captivantes deviennent horribles à rédiger. 2. Le langage JavaScript a été inventé inventé par Brendan Brendan Eich. Il a vu le jour en en tant que sous-système sous-système de Netscape 2 fin 1995. 1995. Microsoft a ensuite ensu ite créé son dialecte de JavaScript sous le nom "JScript" (pour des raisons de droits intellectuels) intellect uels) et l'a lancé au cours de l'été l' été 1996 avec Internet Explorer 3 (le premier navigateur à avoir intégré un support des styles CSS).


AMÉLIORATION AMÉLIORA TION PROGRESSIVE AVEC JAV JAVASCRIPT ASCRIPT

Un exemple : pour trouver un élément (par exemple, #location ) dans un document (au sens strict, dans le DOM, Document Object Model), il fallait deux conventions différentes : document.layers['location']; // Netscape document.layers['location']; // document.all['location']; // IE

Cette cacophonie nous a obligés obligés à écrire écri re quasiment tous nos scripts deux fois, ou au moins à les truffer tru ffer de fourches (des (des points où le script prend une voie ou une autre selon le navigateur détecté), et nous avons fini par nous y perdre. Comme décrit dans le Chapitre 2, la fin des années 1990 a été une période frénétique sur le Web : c'était la guerre des navigateurs. Chaque nouvelle version de Netscape et de Microsoft IE proposait de nouvelles fonctions aux développeurs, dans l'espoir de capter la plus grande part de marché possible parmi les navigateurs. Cette course à la suprématie a causé bien des soucis aux développeurs ; les deux variantes incompatibles de JavaScript nous ont obligés à passer tellement de temps à ajuster les divergences que nous perdions de vue la façon dont fonctionnait le langage et omettions d'apprendre à bien l'articuler avec le HTML et le CSS. Un jour, jour, l'l 'a ssociatio ssociationn ECMA (European (European Computer Manufacturers Association) Association) a standardisé Jav JavaScript aScript3 et l'o l 'organisme rganisme W3C W3C a diffusé diff usé sa spécification DOM. Les sables mouvants sur lesquels nous bâtissions ont enfin laissé place à du sol stable sur lequel nous allions pouvoir envisager de meilleures façons de réaliser les choses : document.getElementById( document.get ElementById('location'); 'location'); // // DOM unifié

3. Netscape a soumis JavaScript à ECMA International comme candidat à un standard en 1996. La version standardisée de JavaScript a été nommée "ECMAScript", mais nous utilisons toujours le nom JavaScript, JavaScript, sauf s auf lorsque nous voulons parler de sa spécification.

69

70

ADAPTIVE WEB DESIGN

QUITTER QUIT TER SA ZONE DE CONFORT Une des premières leçons apprises une fois la poussière retombée était que le langage JavaScript n'était pas la panacée pour l'interaction sur le Web. En fait, le langage n'était pas si fiable que cela. En effet, même une fois que le W3C W3C a standardisé standardi sé le modèle DOM et que les navigateurs ont tous intégré le standard du langage, les divergences subsistaient ; elles étaient assez nomb nombreuses reuses entre les implé implémentatio mentations ns pour qu'il soit impossiblee de présupposer la disponibilité de certaines méthodes, notamment impossibl celles, vitales, de traversée de la structure arborescente du DOM, document. getElementById() (pour accéder aux éléments d'après leur identifiant) et document.getElementsByTagName() (pour les trouver d'après leur nom). En outre, même lorsqu'un navigateur supportait totalement la norme JavaScript, l'utilisateur (ou l'administrateur informatique de son entreprise) gardait le dernier mot en décidant ou pas d 'act 'activ iver er JavaScript JavaScript sur le poste client4. Nous avons fini par comprendre que le support de JavaScript JavaScr ipt n'allait allait pas de soi et avons commencé à reformuler notre code source, à le rendre plus limpide, plus facile à maintenir, et plus apte à gérer l'éventuelle absence ou difficulté d 'a'accès ccès au langage Ja JavaScript. vaScript. IntéressonsIntéressons-nous nous aux concepts concepts discutés di scutés à cette époque pour mieux m ieux comprendre comment bien exploiter exploiter JavaScript JavaScript dans da ns une approche progressive. Attention : À partir d'ici, nous allons lire du code source JavaScript. N'ayez crainte si vous n'en avez jamais écrit ni lu, car je vais faire mon possible pour expliquer ce qui se passe à chaque étape pour que vous ne perdiez pas le fil, même si le l e code semble être écrit en sanscrit. sanscrit.

4. Pour les administrateurs informatiques, activer activer ou pas JavaScript JavaScript était d 'ab 'abord ord un problème problème de sécurité, mais les utilisateurs ont longtemps été invités à le désactiver pour éviter les fenêtres surgissantes (popups) et publicités. Il est très facile de désactiver JavaScript en accédant aux préférences du navigateur, mais il peut être bloqué par un pare-feu ou désactivé pour toutes les applications par les administrateurs.



Vers 100 % de fabilité Il n'était pas rare d'écrire d' écrire (ou de lire) lire) à l'époque l 'époque des débuts débuts de JavaScript JavaScript des gestionnaires d'événements onclick (du code exécuté exécuté en réaction à un clic sur su r un élément de la page) qui définissaient des liens sans cible5 : Easy! Designs Designs

Si JavaScript est activé, le lien de l'exemple précédent provoque l'appel à une fonction sur mesure nommée newWin() , en lui transmettant la valeur "http://easy-designs.net/" . L'ex L'exécution écution de la fonction provoque l'a l 'affichage ffichage de la page visée dans une nouvelle fenêtre. En revanche, si JavaScript est désactivé, le lien n'a aucun aucun effet (nous en avions parlé en discutant di scutant des identifiants dans le Chapitre 2). L'élément href pointe sur un identifiant id vide. Quel est l'intérê l' intérêtt d'un d 'un lien qui ne fonctionne fonctionne pas en l'absence l 'absence de JavaScript JavaScript ? Cela m'amène amène à présenter ma première maxime de l 'amélioration progressive avec JavaScript : 1. Vérifez que tout le contenu reste acces accessible sible et que que toutes les actions

indispensables restent opérationnelles même lorsque le JavaScript est désactivé.

Le lien l ien de l'ex l 'exemple emple contrevient à cette règle (les sites de Gawker également), mais c'est le cas de la majorité des sites web créés à la fin des années 1990 avec JavaScript. Le Web semblait infecté de sites réclamant le JavaScript qui l'imposaient aux utilisateurs. Autrement dit, à cette époque le JavaScript était envahissant. Les développeurs ont pris conscience du problème et ont commencé à promouvoir une utilisation moins péremptoire de JavaScript. Note : Je ne me fais pas ici l'avocat des fenêtres popup ou de l'ouverture non désirée désir ée de d e fenêtres par JavaScript JavaScript,, car ces techniques causent causent des d es soucis d 'a'acces cces-sibilité et d'utilisation. En revanche, j'ai choisi cet exemple car il montre bien l'évolution des pratiques d'écriture JavaScript d'une façon qui sera assez facile à suivre. Soyez assuré que ce que vous apprendrez en suivant notre exemple sera applicable à tout autre projet JavaScript. 5. Parmi les variations de cette vieille technique, technique, citons le pseudo-protoco pseudo-protocole le javascript (par exemple, ) et celle que je préférais, l'utilisation combinée de ce pseudo-protocole et d'un gestionnaire d'événement inline (par exemple, onclick="maFonction();">).

71

72

ADAPTIVE WEB DESIGN

Se montrer discret Le JavaScript discret (unobstrusive (unobstrusive)) est une expression globale qui désigne une façon de programmer rendant la présence du JavaScript non indispensable. Il garantit que le visiteur pourra pour ra accéder à toutes les pages et réaliser les opérations demandées en n'ayant ayant recours recours qu'a q u'aux ux éléments de base en langage HTML et au protocole HTTP. La partie JavaScript vient s'ajouter à cette base pour enrichir la page. Cela vous rappelle quelque chose ? Le JavaScript discret s'accorde très bien avec l'approche d'amélioration progressive, parce qu'il cantonne le code JavaScript Ja vaScript à un rôl rôlee d 'améliora 'amélioration tion fonctionnelle, fonctionnelle, et n'en n'en fait plus un acteur incontournable. Voici comment nous reformulons nos liens en JavaScript discret pour qu'ils supportent suppo rtent l'absence l 'absence de JavaScript : Easy! false;"> Easy! Designs Designs

Dorénavant, le lien pointe sur une adresse URL, Dorénavant, UR L, ce qui lui assure de mener quelque part sans JavaScript. Si le JavaScript est présent, cliquer sur le lien lance la fonction newWin() , qui reçoit la valeur de l'attribut href (autrement dit, la valeur DOM this.href). L'autre grande différence de cette nouvelle version est que le gestionnaire onclick renvo renvoie ie la valeur faux (" ( "return false"), ce qui annule l'action l 'action par défaut défaut de l'évé l' événeme nement nt (l'a (l 'affichage ffichage de la page visée), visée), puisque cette action HTML ferait doublon. Nous venions venions ainsi de faire un premier grand pas dans la gestion d'une indisponibilité de JavaScript, mais avions chemin faisant compris qu'il devait y avoir de meilleures solutions à ce genre de scénarii. Simplifer la maintenance Dans la prochaine étape d'évolution de ce code, nous exploitons l'antique rel l (nous en avons parlé au Chapitre 2) pour extraire le code attribut re JavaScript Ja vaScript inline afin afi n de le renvoye renvoyerr dans un fichier externe, ce qui apporte deux bénéfices : 1) cela ajoute du sens au lien et 2) cela simplifie la maintenance des sites, puisque les programmeurs n'ont qu'un endroit JavaScript à retoucher pour que la modification modi fication se propage à la totalité du site (c'est est le même argument que nous avions avancé pour externaliser les feuilles de styles avec l'attribut style).



Voici le code HTML reformulé : ns.net/"> Easy! Designs

Il devient alors très facile d'appliquer ce gestionnaire d'événement à ce lien et à tous les au autres tres liens identifiés "external" : var links = document.get document.getElementsByTag ElementsByTagName( Name( 'a' ), rel, i = links.length links.length; ; while ( i-- ) { rel = links[i].get links[i].getAttribute('re Attribute('rel'); l'); if ( rel && rel.match( /\bexternal\b/ ) ) { links[i].onclick links[i].onc lick = function(){ newWin( this.href ); return false; }; } }

Toutes ces conditions if et boucles while pouvant rebuter certains lecteurs, je vous propose une visite guidée fonctionnelle de ce script : il regroupe dans une variable links tous les liens trouvés dans la page, puis les visite un à un en commençant par le dernier (étrangement, c'est un peu plus rapide qu'en sens direct). Si le lien possède un attribut attr ibut rel dont la valeur est "external" "external ", une fonction anonyme est associée à l'événement onclick du lien. Cette fonction va appeler la fonction newWin() ( (en en lui transmettant la valeur de l'a l 'attribut ttribut href du lien, comme dans la l a version précédente) précédente) tout en provoquant, par renv renvoi oi de false, l'abandon de l'action par défaut du clic. Nous avons trouvé une solution satisfaisante et la plus discrète possible. En 2006, Jeremy Keith a donné le nom Hijax à cette technique. Ce nom est intéressant : il combine le terme "hijack" (détournement), qui désigne la prise de pouvoir du fonctionnement normal du lien, et le nom "Ajax", qui est le mécanisme JavaScript permettant une interaction entre la page web et le serveur sans requérir une réactualisation de la page dans le navigateur. Nous ne savions pas à l'époque qu'Ajax, alors en pleine courbe ascendante, allait nous obliger à retravailler la question sur un ou deux points au au niveau de la gestion d'événements JavaScript.

73

74

ADAPTIVE WEB DESIGN

Gagner en souplesse Notre vieille technique d'affectation de gestionnaires d'événements ne tenait plus la route face à l'adoption à vaste échelle d'Ajax 6 et d'autres techniques pour modifier modi fier le contenu d' d 'une page web à la l a volée. Voici Voici pourquoi : au moment où du nouveau nouveau contenu contenu est inj i njecté ecté dans la page actuelle, et qu'il contient un lien marqué rel="external", notre fonction spéciale n'a plus aucune chance d'être d' être associée à un gestionnaire d'événeme d 'événement nt onclick. Le script a normalement déjà déjà été exécuté lors du chargement initial de la page (window.onload()), donc avant injection du nouveau lien par Ajax. Nous affrontions là un vrai problème. Nous faisions apparaître le risque que deux liens en théorie t héorie identiques se comportent différemment en pratique. Ne serait-ce pas un problème d'ergonomie ? Une solution évidente que certains certai ns ont alors prônée consiste tout simplement à forcer une nouvelle exécution du script à chaque fin d'injection de données HTML par Ajax. L'idée était trop bonne, car les appels à répétition de la même fonction ralentissaient ralentissa ient sensiblement le navigateur, qui devait à chaque fois analyser tous les liens présents dans la page. Christian Heilmann nous a alors rappelé fort à propos que tout événement déclenchéé en relation avec un élément déclench élément entraînait la trave traversée rsée de l'a l 'arbre rbre DOM depuis l'élémen l' élémentt racine (html) jusqu'à jusqu' à l'l'élé élémen mentt cible cible (phase (phase de capture d'événement),), puis une seconde fois dans l'autre nement l 'autre sens (p (phase hase de bullage, bubbling bubbling))7. Autrement dit, l'événement onClick d'un lien est géré deux fois pour chaque élément éléme nt dans l 'a'arboresc rborescence ence entre racine et cible cible8 ( (voir voir Figure 4.2). Il est plus 6. La technologie XMLHttpRequest est celle que nous utilisons pour soumettre des requêtes au serveur afin d'en d 'envoyer voyer et de recevoir recevoir des données sans sa ns forcer le navigateur à recharger/ recharg er/ réactualiser la page. Elle fut inventée chez Microsoft pour le logiciel Outlook Web Access, introduite ensuite dans IE5, puis adoptée par tous les autres navigateurs et dorénavant en cours de standardisation par le W3C. XMLHttpRequest est l'épine dorsale d'Ajax (Asynchronous JavaScript and XML), XML), mais elle n'est pas cantonnée au langage XML. Le "A" d'Ajax signifie sig nifie "asynchrone", "asynchrone", parce que l'utilisateur n'a pas besoin d 'at 'attendre tendre le retour de la réponse et peut continuer à interagir avec la page pendant que le script scr ipt rapatrie des données du serveur. 7. http://icant. http://icant.co.uk/sandbox/ev co.uk/sandbox/eventdelegation/ entdelegation/ 8. En fait, pas deux fois dans tous les navigateurs. Le modèle de gestion d'événements de de Microsoft, appliqué dans toutes les versions d'IE avant la 9, ne sait gérer que la phase de bullage en remontée d'arbre d'un événement. Le modèle standard du W3C supporte la phase de capture et celle de bullage.



efficace de se placer en attente de l'événement au niveau d'un élément situé plus haut haut dans l'a l 'arboresc rborescence ence DOM (cela (cela permet d'a d 'associer ssocier un seul gestiongestionnaire plutôt que des dizaines). Cela permet aussi de déclencher des actions pour du contenu dynamique, ce qui nous aide à gérer les problèmes de liens similaires qui div d ivergent. ergent. Flux des événements html head header

Phase de capture Phase de bullage Éléments concernés

body section

footer p

“Retreats 4 Geeks is an“

p a

“venture.“

Captures es et bullag bullages es d'événeme d 'événements. nts. Figure 4.2 : Captur Ce concept a été diffusé sous le terme de délégation d'événement, puisque le même gestionnaire gestionna ire pouvait détecter des événements et déclencher des ordres dépendants de l'élément l 'élément déclencheur et pour son compte. Voici Voici une reformulation compacte de l'exemple xemple précédent en utilisant la délégation d' d 'événement : document.body.onclick = function( e ) { document.body.onclick // Harmonisation des modèles d'événements e = ( e ) ? e : event; var el = e.target || e.srcElement, rel; // Liens externes rel = el.getAttrib el.getAttribute( ute( 'rel' ); if ( el.nodeName.toLowerCase() == 'a' && rel && rel.match( /\bexternal\b/ ) ) { newWin( el.href ); // Annulation de l'action par défaut if (e.preventD (e.preventDefault) efault) { e.preventDefault(); } else { e.returnValue e.returnValu e = false; } } };

75

76

ADAPTIVE WEB DESIGN

Dans ce code, nous associons un gestionnaire d'événement à l'événement onclick de l'élément l' élément principal principal body, ce qui établit l 'a'auditeur. uditeur. Dans ce dernier, dernier, nous cherchons l'élément cible (celui qui a été cliqué) puis vérifions que c'est un élément d'ancrage (a) doté d'un attribut rel dont la valeur est la chaîne "external". Si toutes ces conditions sont remplies, nous appelons la fonction newWin(), puis annulons l'a l 'action ction par défaut défaut de l'évé l' événemen nement.t. Cet exemple est spécifique, mais il montre pourquoi nous devons continuer à faire évoluer notre approche des interactions fondées sur JavaScript. En augmentant notre compréhension de JavaScript, nous obtenons des avantages en termes d' d 'amélioration progressive. progressive. Notre code devient plus plus efficace et moins envahissant. Cela nous aide aussi à simplifier la maintenance et à augmenter les performances.

FAIRE LE NÉCESSAIRE Arrivé en ce point, vous avez une certaine idée de ce qu'est du JavaScript discret, mais nous n'avons pour le moment considéré l'expérience utilisateur que du point de vue du document. Dans de nombreux domaines, les interactions sont bien meilleures avec JavaScript que sans. Ainsi, la validation de saisie de formulaire sur le poste client permet d'informer immédiatement l'utilisateur l'utilisate ur des erreurs ou oub oublis lis de saisie sans l'l 'obliger obliger à transmettre d'abord d 'abord les données au serveur.



Figure 4.3 : Contrôle de disponibilité d'un pseudo dans Twitter.com.

Nous savons qu'une de nos contraintes est de garantir que l'interface peut fonctionner sans JavaScript, mais comment faire lorsque le fonctionnement de JavaScript requiert des marquages spécifiques ? La réponse m'amène à formuler ma deuxième maxime d'amélioration progressive avec JavaScript :

2. Utilisez JavaScript JavaScript pour générer les balises balises supplémentaires supplémentaires dont le script a besoin. be soin. JavaScrip Java Scriptt est vraim vraimen entt do doué ué pou pourr gén génér érer er et modifi modifier er des balis balises es en tem temps ps rée réel.l. Lorsque vous devez enrichir une interface à l'aide de JavaScript, commencez par un groupe initial de balises et de styles signifiants et pratiques, puis réalisez par le script les modifications HTML et CSS pour aboutir à votre nouvelle interface, mais seulement une fois que vous avez vérifié qu'elle fonctionne sans erreurs. Voyons un exemple de mise en pratique de ces conseils en revenant à la page Retreats 4 Geeks.

77

78

ADAPTIVE WEB DESIGN

Figure 4.4 : La page web Retreats 4 Geeks.

Un de mes objectifs ici était d'utiliser de façon efficace l'espace limité des terminaux termin aux nomades. Les translations (navigation horizontale) sont exploitables exploitables sur un petit écran, mais les zones cibles seront trop réduites pour être sélectionnées sans effort. Je pourrais bien sûr basculer l'affichage pour proposer une navigation verticale, ce qui permettrait d'offrir des liens plus spacieux, mais cela dévorerait dévorerait trop de surface d'écran. d 'écran. Une troisième approche consiste à créer une liste déroulante (dropdown (dropdown),), soit en CSS, soit avec un élément select . La liste en CSS pur est tentante, mais l'autre l 'autre a l'avantage l 'avantage de présenter présenter à l'utilisateur une interface interface qui lui sera familière. J'opte donc pour l'élément select. Je pars du marqu marquage age HTML du Cha Chapi pitre tre 2 pour pour vous vous guider dans la la créati création on d'un script qui va convertir le contenu de l'élément nav en un élément select seulement lorsque les dimensions de l'écran deviennent inférieures à une valeur plancher. Pour que le code reste assez simple à étudier, j'exploite la librairie jQuery JavaScript9. Les librairies, fort pratiques, apportent toutes faites des dizaines ou centaines de fonctions répondant aux besoins les plus courants (comme l'ajout et la suppression d'une classe class). Ne vous inquiétez pas à la lecture du code ; je vais commenter son fonctionnement. 9.

http://jQuery.com



Nous isolons isolons d'a d 'abord bord le script dans une fonction anonyme anonyme10 qui sera exécutée dès que les données du DOM seront disponibles, mais avant que soient téléchargées téléchar gées les images, fichiers CSS et vidéos (à (à l'instant l' instant onDOMReady ). Cela rend l'affichage de la page plus vif que si l'on doit attendre que tout ait été rapatrié (à l'instant window.onload). Toute la suite du code sera placée dans les limites de cette fonction : $(function(){ // Les choses intéressantes seront ici. });

Nous pouvons pouvons créer les variables dont nous aurons besoin. Nous les regroupons reg roupons dans une déclara déclaration tion var par souci de compacité (concept de minification)11. var $window = $(window), $old_nav = $('#top nav > *'), $links = $old_nav.fi $old_nav.find('a'), nd('a'), showing = 'old', trigger = 765, $new_nav, $option, timer = null;

// // // // // // //

Référence à la fenêtre Récupère la navigation Récupère les liens Suivi de l'action en cours Largeur plancher de fenêtre Utilisées plus loin Un timer sera requis

Les commentaires doivent vous éclairer sur l'utilité de chaque variable. Même si vous connaissez jQuery, vous pouvez vous demander pourquoi je stocke les éléments dans des variables locales au lieu de faire directement référence aux expressions fondées sur jQuery (comme dans $('#top nav> *') ) lorsquee nous en avons besoin. En fait, j'ai de bonnes raisons de trav lorsqu t ravailler ailler ainsi : les références locales réduisent l'impact l' impact de l'exécution du script sur les perfor per for-mances parce que l'a l 'affectation ffectation n'est est faite qu'une qu'une fois et non à chaque rencontre rencontre d'une utilisation de $(). Pour ne pas confondre les résultats de jQuery avec les autres variables, j'ai fait débuter chaque nom de variable associée par le signe dollar ($). Ces techniques techn iques sont employées employées tout au long du script scr ipt ; ce sont de bonnes pratiques pratiques qu'il est conseill conseilléé d 'a'adop dopter. ter. Les variables étant en place, vous pourriez pourriez penser penser que le moment est venu de passer au noyau dur du script, mais il reste une précaution à coder avant d'exécuter le code : vérifier que les éléments requis sont bien présents : 10.Une fonction anonyme n'est rien d'autre d 'autre qu'une fonction qui ne possède poss ède pas de nom. 11. http://www.alis http://www.alistapart.com/arti tapart.com/articles/javascript cles/javascript-minification-p -minification-part-II/ art-II/

79

80

ADAPTIVE WEB DESIGN if ( $old_nav.length && $links.length ) { // Nous savons que les éléments DOM existent, // et nous pouvons les utiliser. }

Il est capital de tester les dépendances et j'j 'y reviendrai dans la section sect ion suivante. Passons maintenant à ce noyau dur. dur. Nous commençons par générer la nouvelle navigation fondée sur select en créant le bloc select, puis son premier élément option : $new_nav = $(''); $option = $('') .appendTo($new_nav);

Une fois que nous disposons di sposons du nouveau marquage, nous pouvo p ouvons ns balayer la liste des liens récoltés (dans $links) pour construire une optio optionn pour chacun d'eux en répétant l'élém l' élément ent option que nous venons de coder : $links.each(function(){ var $a = $(this); $option.clone() .attr( 'value', $a.attr('href') ) .text( $a.text() ) .appendTo( $new_nav ); });

Une fois tous les éléments options créés et ajoutés à select , nous terminons en ajoutant ajoutant des retouches retouches de marquage et en configurant config urant le gestionnaire pour l'événement select onchange : $new_nav = $new_nav .wrap('
') .parent() .delegate('select', .delegate('s elect', 'change', function(){ window.location window.locat ion = $(this).val() $(this).val(); ; });

Il s'agit ici d'une version un peu simplifiée du vrai code de la page Retreats 4 Geeks (j'ai notamment supprimé quelques astuces de gestion des sauts par # dans les adresses URL). Le but est de vous laisser vous concentrer sur l'essentiel. Dans les trois premières lignes, nous imbriquons notre select ($new_nav) dans un élémen élémentt div, puis réaffectons ce div à la variable var iable $new_nav en sorte que l'ensemble soit vu par JavaScript comme un paquet complet. Dans la ligne suivante, j'utilise la délégation d'événement (décrite plus haut) pour pouvoir surveiller l'événement onchange depuis un point plus élevé



de l'arbre DOM (en fait, du niveau de l'élément div). Nous associons une fonction anonyme à l'événement pour injecter une nouvelle adresse dans la barre d'a d 'adresse dresse du navigateur (ce (ce qui fait afficher a fficher la nouvell nouvellee section de page ou une autre page, selon le type de lien). Et voilà ! Nous avons codé une navigation opérationnelle basée select. Voyons maintenant comment comment l'ajouter l 'ajouter à la page quand les conditions en sont remplies. remplies. Nous créons une autre fonction nommée toggleDisplay(), qui surveille la largeur de fenêtre du navigateur navigateur et active un style de navigation ou l 'autre : function toggleDisplay() { var width = $window.widt $window.width(); h(); if ( showing == 'old' && width <= trigger ) { $old_nav.replaceWith($new_nav); showing = 'new'; } else if ( showing == 'new' && width > trigger ) { $new_nav.replaceWith($old_nav); showing = 'old'; } }

Ici aussi, le script est un peu allégé, mais l'essentiel y est : la navigation est changée si le plancher de largeur de fenêtre est franchi (trigger) et si le style de navigation actuel n'est pas déjà le bon (selon la valeur de showing). Avec cette fonction, il nous suffit de l'exécuter une fois pour initialiser les variables et afficher le bon style de navigation dès le départ. Nous pouvons ensuite l'associer à l'événement de fenêtre onresize : toggleDisplay(); // Initialise le bon style $window.resize(function(){ if ( timer ) { clearTimeout(timer); } timer = setTimeout( toggleDisplay, 100 ); });

Vous pourriez vous demander pourquoi je ne transmets pas directement toggleDisplay() comme gestionnaire d'événement ? Sachez que cela provoquerait de multiples exécutions de la fonction (plusieurs centaines de fois) pendant que l'utilisateur retaille sa fenêtre de navigateur. Pour limiter le nombre d'exécutions (et éviter de surcharger le processeur du poste client), le gestionnaire se fonde sur une minuterie (timer) pour n'appeler toggleDisplay() q qu' u'a près 100 100 millisecondes. millisecondes. Si la fonction est déclenchée déclenchée à répétition pendant une retaille de fenêtre, cela provoque la destruction de la variable timer pour la recréer et repartir à zéro. C'est ce qui permet de n'appeler

81

82

ADAPTIVE WEB DESIGN toggleDisplay() qu'une fois par retaille (sauf si l'utilisateur déplace sa souris

vrai ment lentement). vraiment lentement). Résultat ? Un excellent exemple d'amélioration progressive avec Javascript.

Figure 4.5 : Une navigation basée select sur iPhone.

Cet exemple simple prouve que JavaScript est en mesure de générer ce dont le script a besoin tout en écartant écar tant tout le superflu. Vous Vous pourriez étendre cette fonction pour qu'elle elle soit encore moins dépendante du balisage en permettant de transmettre dynamiquement à la fonction un point de départ racine (qui est ici le niveau des éléments enfants de nav). Je vous laisse chercher la réponse. Expérimentez !

RESTER EXCELLENT Nous avons dit que la plupart des techniques d'amélioration progressive au niveau HTML et CSS étaient assez simples et faisaient peut-être déjà partie de vos pratiques antérieures. En revanche, l'amélioration progressive en JavaScript est un peu plus complexe, car JavaScript ne peut pas être aussi tolérant du fait que c'est un langage de programmation. Les langages HTML et CSS décrivent du contenu et en organisent le rendu visuel dans une fenêtre de navigateur. Le langage JavaScript s'en distingue, car



il exécute des commandes dans le navigateur. Puisqu'ils dépendent de la bonne réalisation d'une séquence d'act d 'actions, ions, les programmes JavaScript se bloquent bloquent dès qu'ils rencontrent une erreur. Les causes de ces erreurs vont de la simple faute de frappe à la boucle de répétition dont on ne sort jamais. Dans tous les cas, lorsque vous écrivez du code qui ne convient pas au module interpréteur de JavaScript du navigateur, vous recevez recevez en pleine face un bon b on gros message messa ge d'erreur, mais vos clients aussi. S'en passer serait salutaire. Nous savons que la mise en place de l'amélioration progressive n'est pas un processus binaire qui se limite à évalu évaluer er si la technol technologie ogie espérée existe ou non sur le poste client. L'expérience utilisateur est au contraire variable à chaque niveau selon les capacités de son navigateur. Si ce dernier sait gérer dès le départ la convention de couleurs RGBa, mais pas les arrondis d'angles, ce n'est est pas menaçant au point d'em d 'empêcher pêcher l'utilisateur l'util isateur de prendre connaissance connaissa nce du contenu. Nous devons adopter la même approche pour JavaScript ; abandonner tout manichéisme. Sans vouloir abuser des métaphores culinaires, il nous faut proposer les technologies à la carte en distribuant les fonctions en petits paquets autonomes et bien délimités. Ces scripts multiples peuvent vérifier leurs dépendances et décider de se poursuivre seulement si l'environnement d'exécution et la page visée leur sont favorables. Le précédent script de navigation fondé sur select donne un bon exemple de mise en pratique de la première partie de ce concept ; il est entièrement autonome. Cependant, il ne prend pas les précautions requises pour vérifier ses nombreuses dépendances, parmi lesquelles la présence de l'incontournable jQuery. Pour y parvenir, il nous faut enchâsser le tout dans une instruction conditionnelle : if ( typeof( jQuery ) != 'undefined' ) { // Le code existant se place ici }

Dans ce test, nous vérifions que l'objet nommé jQuery existe dans l'environnement d'exécution, et cet objet est créé si la librairie jQuery est disponible, ce qui détermine la valeur de "undefined". Le test de dépendance est une technique vitale, qui vous évite de laisser survenir une erreur sur le poste client, sans compter que cela peut vivifier le fonctionnement du navigateur en empêchant l'exécution inutile de certains blocs de code.

83

84

ADAPTIVE WEB DESIGN

Voici un autre exemple qui pourra vous sembler familier : if ( document.getElementById ) { // Code dépendant de document.getElementById() document.getElementById() ici }

Nous nous assurons ainsi que la méthode de traversée de l'arbre DOM document.getElementById() existe avant de tenter d'y faire appel. Vous vous souvenez que que nous avions utilisé util isé cette approche dans l'exemp l'exemple le de délégation d'événement lors du test de event.preventDefault(). Revenons au test de la librairie jQuery. Voyons Voyons si nous pouvons être plus précis en cherchant à connaître la version de jQuery, précaution indispensable si vous utilisez une méthode qui n'est apparue que dans une version récente de la librairie. Il est en général plus efficace de tester l'existence d'une méthode en particulier, mais le test de version devient approprié pour une version de librairie qui entraîne un remaniement profond profond de l'interface l' interface de programmation API pour une méthode qui existait auparavant : if ( typeof( jQuery ) != 'undefined' && parseFloat( jQuery.fn.jquery jQuery.fn.jquery ) >= 1.4 ) { /* Code dépendant de jQuery 1.4 au minimum ici */ }

Le test de dépendance vous évite les situations d'e d 'erreur rreur et plus vous l'e l 'effectuez ffectuez tôt, plus vous économisez l'espace mémoire et le processeur lorsque le poste du client ne dispose pas de l'environnement requis pour profiter de vos scripts. jQuery n'est pas la seule dépendance de ce script scr ipt : vous vous souvenez souvenez que nous avions tenu compte de ses dépendances au balisage lors du test de longueur des deux listes $old_nav et $links : if ( $old_nav.length && $links.length ) {

Une fois cet autre test en place, le script va gentiment se terminer s'il s'i l constate ne pas pouvoir fonctionner. Il ne perd pas de temps à créer des éléments ou à implanter un gestionnaire d'événement inutilement. En vous inspirant de l'exemple, vous trouverez des centaines d'occasions d'interroger d' interroger l'environnement l'environnement du navigateur navigateur et la configuration de la page pour décider de lancer ou pas un script. Vous pouvez tester l'existence d'un objet, les dépendances aux balises, la disponibilité d'une méthode ou d'un cookie, le support Ajax, etc. Il n'y a aucune raison de se priver d'ajouter le code de



test pour que les scripts repartent illico d'où ils viennent en toute discrétion s'ils se sentent indésirables. Le concept de test des dépendances est analogue aux requêtes de média du CSS. Puisque P uisque nous venons d'en parler, il nous faut voir maintenant comment bien gérer les interactions entre les scripts et les styles CSS.

EXÉCUTER AVE AVECC STYLE ST YLE Le CSS est un volet des dépendances de script dont nous n'avons pas encore parlé. Dans neuf cas sur dix, si votre code JavaScript interagit avec le modèle DOM, vous devez devez gérer le CSS d'une manière ou d' d 'une autre. autre. Dans l'l 'approche d'amélioration progressive, il faut choisir la meilleure manière d'appliquer et de contrôler les styles en JavaScript. Vous ne voudriez pas créer des interfaces qui perturberaient l'utilisateur par un fonctionnement défectueux. Nous reviendrons sur ce sujet plus loin. Notre compréhension des modalités d'interaction entre JavaScript et CSS a beaucoup évolué évolué au cours des dernières années. année s. Dans les débu débuts ts du JavaScript, la gestion des styles était quasiment absente des scripts ; tout était écrit en ligne par modification de l'attribut style des éléments : function highlight() { var el = document.getElementById( 'message' ); el.style.color = '#f00'; el.style.backgroundColor el.style.bac kgroundColor = '#ffcfcf'; }

Du point de vue de la maintenance du code, cette façon de faire est une catastrophe. Au moindre changement de l'aspect ou de la structure, vous deviez aussi trouver un spécialiste du JavaScript. Efficacité nulle et viol de la règle de séparation des couches fonctionnelles : en mélangeant présentation et comportement, on rend le travail plus difficile dans les deux univers. L'étape d'évolution suivante a consisté à stocker les données qui évoluent dans des variables, soit dans le script, soit en transmettant ces données dans un objet de configuration (en conservant sous le coude des valeurs par défaut au cas où cette configuration serait contournée) : function highlight( config ) { var el = document.getElementById( 'message' ); el.style.color el.style.col or = config.color || '#f00'; el.style.backgroundColor el.style.bac kgroundColor = config.backg config.backgroundColor roundColor

85

86

ADAPTIVE WEB DESIGN || '#ffcfcf'; } highlight({ color: '#ebebeb', backgroundColor: backgroundC olor: 'black' });

La mise à jour des chaînes ne requiert dorénavant que quelques connaissances élémentaires en JavaScript, et toutes les règles de styles sont réunies en un seul endroit,t, facilitant ainsi endroi ai nsi la maintenance. Nous avons cependant constaté qu'il était beaucoup plus efficace d'extraire les données des styles dans un fichier externe, puis de le solliciter en travaillant avec la classe de l'élément de page visé : function highlight() { document.getElementById( 'message' ) .className += ' highlight'; }

Cela réduit le volume de code requis pour obtenir l'effet et entraîne moins de manipulations du modèle DOM (l'effet sur les performances est énorme). De plus, le CSS peut alors être retouché sans que l'on ait à modifier le code JavaScript Ja vaScript qui utilise utilise ces styles. Je ne vais pas m'e m'engager ngager dans l'intéress l' intéressante ante discussion discussion au sujet sujet des manières manières possibles de combiner scripts et styles tout en conservant assez de séparation entre les deux domaines12. Je considère plus important de passer un peu de temps à découvrir quand et comment appliquer efficacement des styles depuis un script. Ces points sont d'une grande importance et font donc l'objet de ma troisième et dernière maxime de l'amélioration progressive avec JavaScript :

3. Appliquer Appliquer les styles st yles seulem seulement ent le moment venu. venu. Nous l'avons l 'avons déjà dit, les scripts qui explo ex ploitent itent les données DOM demandent en général certaines modifications des styles, que ce soit pour déplier/replier le contenu d'un élément, mettre mett re en exergue exerg ue les nouveaux contenus ou ajouter ajouter des effets visuels à une interface glisser-déposer. Ce domaine d'exploitation des styles est tout à fait recommandable, mais les développeurs ont souvent 12.J'ai donné un aperçu de ce sujet dans un article ar ticle nommé "Keeping " Keeping the hot side hot and the cold side side cold" dans Scroll Magazine Maga zine (http://scrollmagazine.com/number-1/keeping-thehot-side-hot).



pris l'habitude d'appliquer les styles de chaque widget avant de savoir si ce widget va effectivement être utilisé. Prenons en guise d'exemple un widget accordéon à géométrie variable. Dans ce type d' d 'interface utilisateur, les blocs de contenu contenu sont masqués et seul l'onglet de chacun est visible. Si les styles de masquage des sections de contenus sont appliqués par défaut et qu'il s'avère ensuite que le script ne peut pas être exécuté, l'utilisateur ne peut plus cliquer sur les onglets pour afficher les détails. Les styles auront auront été la cause d'une perte d 'a'accessi ccessibilité bilité aux contenus contenus pour la simple raison qu'ils ont été appliqués trop tôt. En revanche, si c'est le script qui déclenche l'application des styles de l'état initiall une fois que son exécution a été confirmée, initia confir mée, il n'y aura pas de problème. problème. Si le script scr ipt ne peut pas être exécuté, les styles du widget ne sont pas appliqués appliqués et le contenu reste visible, donc utilisable. En optant pour cette approche d'application des styles, vous gérez un jeu de règles pour le contenu lorsque le widget n'est pas utilisable, et un second lorsqu'il l'est, optimisant ainsi les deux situations. Cela est-il possible ? Je réponds oui, c'est de l'amélioration progressive mise en œuvre à la perfection.

Figure 4.6 : Un widget accordéon avec la première section dépliée et les trois

autres repliées. Si l'on clique dans un onglet/titre d'une autre section, elle est dépliée et la précédente est repliée. repliée.

87

88

ADAPTIVE WEB DESIGN

Une technique efficace pour gérer ce genre de styles d'interface conditionnelle consiste à associer une classe "d'activation" à l'élément racine du widget. Le tableau suivant donne quelques exemples.

STRATÉGIE

CLASSE "SUSPENDUE" CL ASSE "ACTIVÉE"

Ajout d'un suffixe "-on" à la .accordion classe de base

.accordion-on

Ajout d'une autre classe

.auto-submit

.auto-submit.active

Changement de forme de la classe

.replace-me

.replaced

'acti ctivati vation" on".. Tableau 4.1 : Exploitation d'une classe "d 'a Cette précaution vous assure de ne jamais appliquer de style avant qu'il soit devenu nécessaire. Un autre souci lié à l'application des styles en JavaScript est le risque de collisions. Il est capital d'isoler vos scripts les uns des autres pour éviter des doublons doubl ons de variables, de fonctions ou de méthodes. De même, il est e st conseillé d'isoler les styles de script des autres styles. Vous ne pouvez pas prévoir quels autres noms de classes seront en vigueur v igueur sur su r une page (surtout si vous concevez des scripts que d'autres vont réutiliser). Si vous n'isolez pas bien vos noms de styles, ils peuv p euvent ent déborder déborder et occuper l'espac l 'espacee sémantique du reste de la page (ils risqueraient d'être appliqués à des éléments de manière fortuite). Pour isoler vos noms de styles, faites débuter le nom de chaque sélecteur par un marqueur repérable repérable qui aura très peu de chances d' d 'entraîner ntraîner un conflit confl it avec avec un autre élément class ou id dans la page. Personnellement, je fais commencer les noms par celui de l'objet JavaScript concerné. Si je conçois par exemple WidgetAccordeon deon , je peux classer un widget accordéon nommé fort à propos WidgetAccor l'élément racine activé sous le nom "WidgetAccordeon-on", puis déduire mes styles de ce radical : .WidgetAccordeon-on .heading { /* Styles de titrage */ } .WidgetAccordeon-on .content-block { /* Styles des blocs de contenu */ }



.WidgetAccordeon-on .content-bloc .WidgetAccordeon-on .content-block.collapsed k.collapsed { /* Styles des blocs de contenu repliés */ }

Dans le sens inverse, il y a de faibles chances qu'une règle de style extérieure vienne polluer le contenu du widget à cause des particularités de la spécificité et de la cascade. En anticipant ces problèmes, vous pouvez prendre les mesures adéquates en rendant vos sélecteurs encore plus spécifiques ou, plus radicalement, en définissant définissa nt explicitement explicitement chacune des propriétés à contrôler dans le widget au lieu de laisser les valeurs par défaut.

PLANIFICATION ET RETENUE Il est indéniable que l'amélioration progressive en relation avec JavaScript suppose sup pose plus d'efforts d'efforts qu'avec q u'avec le CSS et le HTML. HTM L. En prenant le temps de réfléchir aux nombreux facteurs qui influent sur la qualité de l'expérience des utilisateurs, cela deviendra vite une seconde nature. Au moindre doute, rappelez-vous les trois maximes : 1. Vérifiez que tout le contenu contenu reste accessibl accessiblee et que que toutes les actions indispensables restent opérationnelles même lorsque le JavaScript est désactivé. 2. Utilisez le JavaScript JavaScript pour générer les balises supplémentaires supplémentaires dont dont le script a besoin. 3. Appliquez les styles seulement le le moment moment venu. venu. En étant mieux armé pour tirer t irer le profit profit maximal maxim al de la puissance de JavaScript, JavaScript, vous êtes certain de prendr prendree les meilleures décisions et d' d 'obtenir des sites encore plus ergonomiques.

89

"Il faut bien "Il bien des efforts efforts pour se bâtir une bonne réputation, mais une seule mauvaise action fait tout perdre." — BENJAMIN FRANKLIN

CHAPITRE 5

AMÉLIORATION PROOGRES PR RESSIVE SIVE ET ACCESSIBILITÉ En février 2006, 2006 , l'a l 'associatio ssociationn nationale des aveugles aveugles des États-Unis États-Unis a inten intenté té un procès contre la société Target Target en raison de l'impossibili l 'impossibilité té d'accéder d 'accéder à son site web. Un mois plus tard, le procès a été transféré à la cour fédérale (à la demande de Target). La société a tenté de faire rejeter la plainte, mais elle a eu tort, puisque le procès est devenu une action collective que Target a finalement éteinte en 2008 en payant plus de 6 millions de dollars US (sans compter com pter les frais d 'avocat 'avocat).). Cette somme est remarquable quand on la rapproche de la raison première du procès : Target n'avait tout simplement pas pris la peine de gérer les problèmes prob lèmes d'a d 'accessibilité ccessibilité aux handicapés, dont dont ils avaient pourtant été avertis avertis au préalable. Il n'y avait pas de texte de rechange recha nge alt pour les images, ils utilisaient énormément les mosaïques d'images avec liens et obligeaient à utiliser la souris pour valider les formulaires. Ces différents petits soucis auraient pu être réglés rapidement et facilement pour bien moins que 6 millions de dollars. Personnellement, j'aurais réglé le problème contre quelques billets de 100. Si vous n'avez avez pas encore été confronté à l'a l 'accessi ccessibilité, bilité, qui est dans le cadre de ce chapitre chapitre la mesure de facilité d'utilisation d 'utilisation d'un site par les gens souffrant souff rant de handicaps et et par les technologies technologies d'a d 'assistance ssistance correspondantes correspondantes1, vous pourriez 1. Les technologies d'a d 'assistance ssistance sont très variées. Les non-vo non-voyants yants utilisent des des logiciels de de lecture audio du contenu de l'écran. l'écra n. Ceux dont la vision v ision est faible peuvent zoomer sur le texte dans le navigateur. Les malentendants utilisent des sous-titrages pour les vidéos.

92

ADAPTIVE WEB DESIGN

prendre peur parce qu'il faut tenir compte de nombreux critères. Même si vous êtes un des utilisateurs ayant des "besoins spéciaux", il est fort probable que votre expérience et que vos capacités ne soient pas les mêmes que celles des autres. Vous Vous pouvez par exemple souffrir souffr ir de daltonisme élémentaire (a (absence bsence de vision du rouge et du vert), vert), mais de façon moins lourde lourde que d'autres. d 'autres. Même avec ce handicap, vous ne pourrez pas aisément vous mettre à la place de personnes qui souffrent de tétranopie (incapacité de voir le bleu et le jaune). Si vous vous intéressez aux problèmes problèmes d'a d 'accessibilité, ccessibilité, que ce soit parce que vous vous voulez que votre message puisse être accessible par le plus de gens possible, ou parce que vous ne voulez pas que quelqu'un reste sur la touche, vous devrez apparemment vous imposer une telle pression pour que les choses soient parfaites qu'il ne peut en résulter qu'une appréhension certaine. Vous serez heureux d' d 'apprendre qu'en en choisissant de concevoir et de développer développer des sites web web dans l'approche l 'approche d'a d 'améliora mélioration tion progressive, progressive, vous améliorez améliorez aussi l 'accessibilité 'accessibilité.. En effet, l'a l 'amélior mélioration ation progressive progressive vous invite invite à conc concevo evoir ir vos sites web d'abord au service du contenu, ce qui vous amènera en général à prendre pren dre la décision appro appropriée priée en termes d 'a'accessi ccessibilité. bilité. Mais il y a bien sûr toujours tou jours moyen moyen d'a d 'amélio méliorer rer les choses, et c'est c'est la raison d'être d' être de ce chapitre.

ENFIN, TU ME VOIS Une des techniques JavaScript les plus utilisées consiste à masquer et cacher du contenu. Cela sert à concevoir des interfaces à onglets, des éléments pliables et repliables, des gadgets en accordéon. Vous Vous en trouverez partout. En soi, cette pratique n'est pas critiquable, mais rares sont les personnes qui savent à quel point les choix faits pour cacher du contenu contenu ont une influence influence sur l'l 'a ccessibilité de ce contenu contenu par les technologies d'a d 'assistance ssistance telles telles que les lecteurs d'écran. Le tableau qui suit présente les différents mécanismes disponibles pour cacher du contenu, chacun ayant un impact différent sur la page résultante.


AMÉLIORATION AMÉLIORA TION PROGRESSIVE ET ACCESSIBILITÉ

EFFET D'ACCESSIBILITÉ

RÈGLES RÈ GLES CSS

EFFET VISUEL

visibility: hidden;

L'élément est masqué sans être supprimé du flux de données (il occupe l'espace correspondant).

Ce contenu est ignoré par les lecteurs lecteu rs d'écran. d 'écran.

display: none;

L'élément est supprimé du flux et masqué, l'espace correspondant étant récupéré.

Le contenu est ignoré par les lecteurs lecteu rs d'écran. d 'écran.

height: 0; width: 0; overflow: hidden;

L'élément est replié et le contenu est masqué.

Le contenu est ignoré par les lecteurs lecteu rs d'écran.

text-indent: -999em;

Le contenu est décalé pour sortir de l'écran, ce qui le masque, mais les liens peuvent cibler les éléments actifs. De plus, la translation négative peut être insuffisante pour bien cacher le contenu.

Les lecteurs d'écran ont accès aux contenus, mais seulement au texte et aux éléments inline.

position: absolute; left: -999em;

Le contenu est supprimé Les lecteurs d'écran ont du flux normal et décalé du accès au contenu. côté gauche. L'espace occupé est réduit.

Mécanismes mes de d e masquage de contenu. Tableau 5.1 : Mécanis Les deux premières techniques sont les plus utilisées. display: none; est exploitée par quasiment toutes les librairies JavaScript de notre planète, et par la plupart des widgets JavaScript prédéfinis. Ces deux approches vous conviendront si vous ne voulez pas que le contenu masqué soit lu par les lecteurs d'écran. Dans le cas contraire, si vous voulez que le contenu soit lu, même masqué, c'est la dernière option qu'il faut adopter. Si vous avez prévu de concevoir votre propre propre librairie Jav JavaScript, aScript, la technique techn ique consistant à placer du contenu contenu en dehors dehors des limites de l'l'écran écran est assez simpl si mplee à mettre en place. Cela devient en revanche beaucoup plus difficile si vous vous fondez sur une librairie JavaScript préprogrammée telle que jQuery ou Prototype. En effet, cela suppose de pouvoir redéfinir certains éléments internes à la librairie. Vous pouvez cependant parvenir à vos fins avec un zeste d'intelligenc d' intelligence. e.

93

94

ADAPTIVE WEB DESIGN

En effet, la plupart des librairies possèdent dans le cadre de leurs fonctions d'animation un mécanisme permettant de définir une fonction de rappel (callback function). function). Ce genre de fonction est transmis par pa r vous à une fonction de la librairie (ou à une méthode d'un objet), à charge pour cet objet de déclencher l'exécution de la fonction à un certain moment. Si vous avez déjà utilisé JavaScript pour charger du contenu via Ajax, vous connaissez le concept de fonction de rappel qui permet d'effec d 'effectuer tuer certains traitements en attendant que les données demandées reviennent du serveur. En général, les librairies Jav JavaScript aScript proposent une fonction de rappel capable de s'exécuter exécuter à la fin d'une d 'une certaine activité. Certaines Cert aines offrent off rent en complément complément des points d' d 'a ncrage à d' d 'autres étapes de l'exécution xécution d'une routine, par exempl exemplee avantt son commencement. avan commencement. Dans tous les cas, même sans ces ancrages complécomplémentaires, vous pouvez créer des mécanismes de masquage plus accessibles. Prenons comme exemple l'extrait suivant fondé sur jQuery : (function(){ var $button = $('#myButton'), $text = $('#myText'), visible = true; $button.click(function(){ if ( visible ) { $text.slideUp('fast'); } else { $text.slideDown('fast'); } visible = ! visible; }); })();

Ce script cherche deux éléments nommés #myButton e ett #myText, en les affectant à deux variables locales nommées $button et $text, respectivement. Il définit ensuite une troisième variable locale nommée visible qui permet de suivre l'état courant des choses. Le script affecte ensuite un gestionnaire d'événements onclick à l'élémen l 'élémentt #myButton pour inverser la visibilité de #myText en modifiant sa hauteur. Très simple, non ? Ce script fonctionne comme prévu, sauf que jQuery utilise display: none lorsque vous appelez slideUp(). En conséque conséquence, nce, #myText est masqué par une méthode qui en empêche la lecture par un lecteur d'écran. Nous pouvons effectuer une légère retouche à ce code pour ajo ajouter uter une classe class e qui nous appartient afin de rendre le contenu masqué plus accessible :



(function(){ var $button = $('#myButton' $('#myButton'), ), $text = $('#myText') $('#myText'), , visible = true; $button.click(function(){ if ( visible ) { $text.slideUp('fast',function(){ $text.addClass('accessibl $text.addCla ss('accessibly-hidden') y-hidden') .slideDown(0); }); } else { $text.slideUp(0,function(){ $text.removeClass('accessibly-hidden') .slideDown('fast'); }); } visible = ! visible; }); })();

Cette version du script est très proche de la précédente : lorsque le contenu est masqué, la librairie librairie peut gérer l'a l 'animation. nimation. La différence est que le le script inverse ensuite l'état de complétion de notre classe personnalisée nommée "accessibly-hidden" "accessibl y-hidden".. C' C'est ce qui permet per met de maintenir ma intenir le contenu accessible aux technologies technol ogies d 'a'assistance. ssistance. Les étapes sont inversées lorsqu'il lorsqu'il s'agit de réafficher le contenu. Il est masqué par le script avant que la classe ne soit supprimée, puis l'animation est réalisée. L'avantage de cette approche est qu'elle vous laisse maître de la méthode de gestion du masquage du contenu, au lieu de dépendre de ce que permet la librairie JavaScript. Vous pouvez ainsi facilement faire évoluer votre classe "accessibly-hidden" pour qu'elle adopte une autre technique ou une version améliorée. Vous n'avez plus à attendre que les auteurs de la librairie procèdent à la mise à jour du mécanisme de masquage (s'ils acceptent de le faire). Tout cela suppose bien sûr que vous vouliez masquer du contenu de l'écran tout en le maintenant accessible accessible aux anciens appareils appareils d'a d 'assistance. ssistance. Si vous ne voulez pas que le contenu soit lu par un lecteur d'écran, vous pouvez utiliser display: none , mais ce n'est n'est pas la meilleure app approche, roche, car vous n'avez avez dans dan s ce cas aucun moyen simple de faire savoir à l'utilisateur que du nouveau contenu contenu est disponible. Pour offrir le meilleur service à vos utilisateurs, mieux vaut adopter les rôles et les statuts qui sont définis dans la spécification WAI-ARIA

95

96

ADAPTIVE WEB DESIGN

ou ARIA en abrégé (Web ( Web Accessibility Initiative's Accessible Rich Internet Applications))2. Applications Masquer du contenu avec ARIA est très simple, puisqu'il suffit d'adopter l'attribut aria-hidden.
"true">Devinez Devinez ? Je suis masqué mais accessible grâce à ARIA.
ARIA.

ARIA propose une série de rôles, d'états et de propriétés prédéfinis qui peuvent s'avérer avérer très utiles pour pou r concevoir un site fortement fondé sur su r JavaScript. Et certains éléments seront utiles pour construire des applications très interactives. interac tives. Découvrons-l Découvrons-les es d 'abord.

EMBAUCHER DES GUIDES Un des nombreux aspects par lesquels ARIA améliore l'accessibilité d'une page web consiste à proposer des rôles de repères et de structures. str uctures. La L a plupart de ces rôles constitue une formalisation des éléments sémantiques que nous avons av ons tenté d'appliquer d 'appliquer depuis depuis des années an nées à des éléments HTML HTM L en ajoutant ajoutant une classification sémantique et des identifiants (nous l'avions évoqué dans le Chapitre 2). Les rôles de repère et de structure d'ARIA (ainsi que les rôles de widgets que nous verrons bientôt) doivent être affectés à des éléments au moyen de l'attribut nommé role. Je sais ce que vous allez dire : role n'est pas un attribut reconnu dans HTML 4.x, 4 .x, ni dans XHTML X HTML 1.x. C'est vrai. ARIA aj ajoute oute un certain nombre nombre d 'attr 'attribu ibuts ts au lexique lexique du HTML. HTM L. Il I l en résulte que vous vous ne pourrez pas valider vos pages avec les mêmes définitions de type de document que d'habitude. Pour valider valider des pages utilisant ARIA dans l'un l 'un de ces deux langages, il vous faudra utiliser un nouveau jeu de DTD3 ou bien faire le saut vers HTML5 qui reconnaît les attributs du type role. Voici un premier exemple utilisant ARIA :

2. http://www.w3.org/TR/wai-aria/ 3. Pour HTM HTML L 4.01 4.01 plus plus WAI-ARI WAI-ARIA, A, le DOCTYPE est
html PUBLIC "-//W3C//

DTD HTML+ARIA 1.0//EN" "http://www.w3.org/WAI/ARIA/sc "http://www.w3.org/WAI/ARIA/schemata/html4-ari hemata/html4-aria-1.dtd"> a-1.dtd">. Pour le XHTML plus WAI-ARIA, le DOCTYPE est ria-1.dtd">.



tion">
Details Details

Schedule Schedule

Instructors Instructors

Lodging Lodging

Location Location

Vous reconnaissez le code HTML du Chapitre 2, puisque c'est celui des éléments de navigation de la page Retreats 4 Geeks. La seule différence est l'ajout à l'élément ol d'un attribut role dont la valeur est "navigation". Vous aurez deviné que le repère ARIA AR IA nommé "navigation" "navigation" permet de préciser qu'un un élément élém ent fait partie d'un d 'un mécanisme de navigation dans la page. Tous les rôles de repérage d'ARIA fournissent des informations concernant les différentes régions de la page et permettent de naviguer navig uer globalement. globalement. Certaines technologies d'assistance permettent à l'utilisateur d'accéder à ces repères ; il peut ainsi naviguer directement d'une région à l'autre avec le clavier ou un autre moyen. Ces repères sont les successeurs logiques de cette flopée de liens "aller à"4. En revanche, les rôles structurels sont des outils d'organisation proches des éléments HTML5 tels que section et article. Vous vous souvenez peut-être peut-être que dans d ans l'l 'exemple xemple original, origin al, nous avions englobé l'l'élémen élémentt de navigation ol dans un u n nouvel nouvel élément élément HTML5 HT ML5 nommé nav. Une brèvee réflexion vous permettra de conclure que cet élément nav est équivalen brèv équ ivalentt au niveau sémantique au rôle rôle de repère de "navigation" "navigation".. Sachez dès à présent que ce n'est pas le seul domaine de chevauchement entre HTML5 et ARIA.

Redondant et raisonnable Les deux spécifications (HTML5 et ARIA) ARI A) ont progressé progressé de façon indépendante au cours de la même période. Chacune a cherché à répondre aux problèmes prob lèmes qu'elle elle considérait comme les plus urgents dans la l a norme actuelle du HTML.. (De là, la redondance inévitab HTML inévitable. le.)) La spécification ARIA est à l'heure l' heure actuelle un peu plus mûre pour devenir une recommandation que HTML5. La plupart de ces caractéristiques particulières sont de ce fait incorporées au projet HTML5, dont la spécification continue d'évoluer. Nous pouvons sans 4. Les liens "Aller "Aller à" sont ceux qui permettent de sauter directement directement à une autre autre région de la page avec un ancrage. Ce sont s ont ceux qui portent port ent des légendes du style "Aller "Aller au contenu" ou "Aller au menu". menu". Ils étaient éta ient très utilisés depuis des années, années , mais les rôles de repères ARIA AR IA les rendent redondants.

97

98

ADAPTIVE WEB DESIGN

grand risque r isque nous attendre attendre à ce que les deux spécifications aient aient suffisamment fusionné pour qu'il n'y ait quasiment plus de redondances au moment où HTML5 aura atteint le statut Candidate Recommendation. Pour l'instant, il reste beaucou beaucoupp de doublons doublons entre entre ARIA AR IA et HTML5, HT ML5, d'abord d 'abord au niveau des rôles structurels, et un peu moins au niveau des rôles de repères. Le Tabl ableau eau 5.2 donne un aperçu comparatif entre la sémantique traditionnelle, t raditionnelle, le rôle ARIA équivalent et l'élément HTML5 qui atteint le même objectif, s'il existe.

SÉMANTIQUE RÔLE ARIA AD-HOC #header, #top

banner

ÉLÉMENT HTML5 header

(approx.)

SIGNIFICATION Région de la page ciblée au niveau site et non au niveau page

#main, #content

main

aucun

Contenu focalisé dans le document

#extra, .sidebar

complementary, note

aside

Section complémentaire du document reliée au contenu principal (le contenu "complementary" reste significatif, même séparé du principal). pri ncipal).

#footer, #bottom

contentinfo

footer

Région contenant des informations au sujet s ujet du du document

#nav

navigation

nav

Région contenant des liens de navigation

.hentry

article

article

Région de la page constituant une section indépendante du document

Tableau 5.2 : Comparaison entre sémantique traditionnelle, rôle ARIA et

élément HTML5 éventuel. Pour l'instant, on remarque des allers-retours entre la communauté définissant le HTML5 et les défenseurs de l'accessibilité. La question est de savoir comment gérer la redondance. En termes pratiques, même si vous avez



opté pour les équivalences sémantiques HTML5 du ARIA, il est conseillé d'ajouter les rôles de repères ARIA en doublons parce que toutes les technologies d'assistance ne gèrent pas les éléments HTML5 correspondants. En revanche, pour les rôles structurels, vous faites comme bon vous semble, car ce sont des éléments d'organisation qui n'entrent pas en ligne de compte pour les technologies technologies d'a d 'assistance ssistance aux aux utilisateurs. Une rapide rapide lecture du code source de la page Retreats 4 Geeks permet per met de voir cette redondance dans les éléments nav et footer . Lorsque les technologies d 'a'assistance ssistance seront seront mises à jour pour HTML5, HT ML5, nous pourrons supprimer supprimer les attributs de rôles devenus inutiles et éclaircir un peu notre code. En plus des doublons avec HTML5, ARIA comporte plusieurs rôles qui dupliquent la sémantique disponible depuis longtemps en HTML. C'est par exemple le cas des rôles de repères et de structures ARIA suivants : columnheader , definition , form, heading, img , list , listitem , row , rowheader et separator. Certains Certain s d'e d 'entre ntre eux sont en équivale équivalence nce univoque univoque avec le HTML HTM L (par exemple, e xemple,""form"), alors que d'autres d 'autres sont des variantes plus générales de ce dont nous disposons en HTML (par exemple, "list"). Alors que l'on peut aisément concéder qu'il y ait quelques chevauchements entre ARIA et HTML5 en raison de leur développement parallèle, vous pourriez vous demander pourquoi ARIA cherche à recréer des éléments sémantiques qui existent en HTML HTM L depuis plus de de dix ans. La L a réponse est très directe : pour une raison rai son ou une autre, certaines entreprises entreprises (Google ) aiment employer un balisage non sémantique (par exemple, div ) comme structure de base de l'interface, en exploitant JavaScript pour que le résultat ressemble à un contrôle HTML natif. Rien que pour cette raison, ARIA définit des rôles qui sont en chevauchement. Vous ne me verrez jamais utiliser un élément div dans un rôle de formulaire "form" (j'utilise tout simplement un élément form, merci). Mais on ne discute pas des Goo et des couleurs… Nous avions dit plus haut que la page Retreats 4 Geeks employait plusieurs des éléments HTML5 équivalents en termes sémantiques aux rôles de repères et de structures d'ARIA (nav, footer, article). Nous avons ajouté l'équivalent en rôle ARIA afin d'être certains de servir le plus grand nombre de visiteurs. (Rappelons qu'il s'agit bien de l'objectif primordial de l'amélioration progressive).. Mais progressive) Mai s nous n'en avons avons pas fini. fi ni. Comme Com me le montre le Tableau Tableau 5.2, l'équivalent sémantique du rôle ARIA "banner" en élément header du HTML5

99

100

ADAPTIVE WEB DESIGN

peut se discuter. Pour être absolument absolument clair dans le service ser vice que je rends à mes visiteurs, j'ai donc ajouté ce rôle :
">

Le seul rôle que nous n'avons pas encore abordé pour l'instant (il n'est pas encore géré en HTML5) correspond à "main". Il permet de désigner le contenu focalisé du document. Dans le Chapitre 2, j'avais choisi d'englober dans un élément section les différents éléments article de la page. J'avais choisi le même élément comme racine de notre micro-format hCalendar hCalendar.. Cet élément section rêve d'endosser le rôle de "main" :

Ces deux simples retouches nous ont permis de prendre en compte tous les rôles de repères qu'il semble utile d'exploiter d'exploiter dans le site Retreats 4 Geeks. Au passage, nous avons avons amélioré l'accessibilité l 'accessibilité globale globale de la page en permettant aisément aux utilisateurs des technologies d'assistance de naviguer dans le document.

INDISPENSABLES INDICES ? La spécification ARIA ARI A fournit aux utilisateurs les moyens moyens de naviguer dans les documents, mais elle propose d'autres d 'autres fonctions fonctions utiles, et notamment une collection colle ction de rôles et d'états d' états de widgets. Un rôle de widget (un widget (un composant d'interface) correspond à la description du rôle d'un élément. Ces rôles sont en général classés en deux catégories : ceux qui s'intéressent à la structure et les autres. En d'autres termes, il y a ceux des conteneurs et ceux des contenus que sont les composants. Les Le s conteneurs sont les éléments qui hébergent les composants d'un widget de l'interface. Prenons comme exemple l'interface à onglets de la Figure 5.1. Une interface à onglets se fonde sur deux parties : une liste d'onglets et une collection de panneaux correspondant à ces onglets. Il en résulte trois rôles distincts en ARIA AR IA : les onglets qui portent le rôle de "tab", la liste d'o d 'onglets nglets qui porte le rôle de "tablist", et le panneau correspondant à chaque onglet qui porte le rôle de "tabpanel". Les deux rôles "tab" et "tabpanel" sont des rôles de composants alors que "tablist" est un rôle de conteneur (la liste qui contient les onglets).



Figure 5.1 : Exemple d'interface d 'interface à onglets. onglets.

La spécification ARIA ARI A définit toute une série de rôles de widgets. Cela vous permet de construire des contrôles complexes de formulaires (par exemple, des curseurs de réglage et des sélecteurs numériques rotatifs) ou bien des menus arborescents, des boîtes de dialogue modales ou même des interfaces glisser-déposer, et tout cela en garantissant l'accessibilité. Au niveau des rôles de structures, ARIA AR IA permet de redéfinir un éléme élément nt HTML n'ayant ayant aucun sens pour qu'il en prenne un en termes fonctionnels.
n"> Je ne suis pas un vrai bouton, mais je fais comme si sur le web

Tout cela est très prometteur, mais pour qu'un widget fonctionne, il faut du code JavaScript. Habituellement, c'est un contexte auquel l'accessibilité n'a pas accès. La principale raison pour laquelle les techniques du type Ajax ne s'entendent pas très bien avec l'accessibilité est liée au fait que le langage HTML ne propose aucun mécanisme permettant au code JavaScript d'informer l'utilisateur (ou la technique d'assistance qu'il a choisie) en temps réel, hormis les deux techniques très élémentaires et intrusives que sont alert() et confirm() (on pourrait les comparer à des perturbateurs qui crient du fond de la classe).

101

102

ADAPTIVE WEB DESIGN

Dans ARIA, la gestion du contexte est confiée à des "états". Un état ARIA correspond à un groupe d'attributs pouvant être appliqués à quasiment tous les éléments. Certain Cer tainss états sont globaux (ils s'appliquent appliquent à tous les éléments), éléments), alors que d'autres sont spécifiques au contexte de certains widgets. Tous ces états portent un nom commençant par "aria-". Ils transmettent des informations utiles au visiteur concernant ce qui a changé pour un u n élément désigné. Saviez-vous que vous connaissiez déjà l'un des ces états : aria-hidden ? Cet attribut aria-hidden a été vu en début de chapitre. Il accepte une valeur booléennee ("true" ou "false") et indique à l'a booléenn l 'agent gent du poste poste client ou la technotechnologie d'assistance s'il faut ou non faire connaître à l'utilisateur le contenu concerné. Parmi les autres états ARIA prédéfinis, nous pouvons citer ariadisabled, aria-expanded, aria-invalid, aria-pressed et aria-selected. Si nous revenons à l'interface à onglets de la Figure 5.1, nous pouvons tirer profit de l'état aria-hidden pour contrôler l'état des panneaux et de l'état aria-selected pour gérer l'état l' état des onglets. onglets. Mais la spécification ARIA va plus loin encore. Elle définit des attributs d'états, d' états, mais également éga lement un certain nombre de de propriétés pouvant pouvant être associées à un élément. Citons notamment aria-label, aria-labelledby, aria-readonly et aria-required . La lecture de cette liste vous permet de deviner que la plupart de ces propriétés sont destinées aux composants des formulaires, bien que certaines (par exemple aria-controls) puissent s'appliquer à notre interface à onglets. Vous vous doutez sans doute qu' aria-controls a besoin d'une référence id comme paramètre. Cet identifiant doit correspondre à l'élément dont le contenu ou la présence est contrôlé par un autre élément auquel l'attribut est appliqué. app liqué. Dans notre interface à onglets, c'est l'ong l 'onglet let qui contrôle le panneau associé (comme le montre la Figure 5.2). Une fois que cette relation entre onglets et panneau est établie, nous pouvons établir une autre relation, en exploitant aria-labelledby . Le fonctionnement est exactement le même que pour aria-controls.



role="tab" id="recipe-0-tab" aria-controls="recipe-0"

role="tabpanel" id="recipe-0" aria-labelledby="recipe-0-tab"

Figure 5.2 : Grâce aux propriétés ARIA, AR IA, nous pouvons mettre en relation les

différents composants différents composants de d e l'interface. l 'interface. Les états et les propriétés ARIA aident beaucoup à maintenir l'utilisateur informé. Voyons un autre concept ARIA qui est simple et dont l'intérêt pratique est évident : les régions actives (Liv (Livee Regions Region s).

MAIS C'EST VIVANT ! L'apparition du mécanisme Ajax et de la recrudescence du JavaScript ont eu pour résultat qu'une des choses les plus désagréables dans l'expérience utilisateur est devenue la mise à jour en temps réel de certaines régions d'une page. Cela entraîne de nombreux problèmes d'usage, les deux principaux étant les suivants suivants : 1) les technologies d'a d 'assistance ssistance n'étaient n'étaient pas informées des changements et n'avaient aucun moyen d'informer l'utilisateur à leur tour ; et 2) un utilisateur qui effectue un zoom ou qui défile sur un appareil à petit écran n'est pas informé des mises à jour du contenu qui se produisent en dehors de la zone affichée. La spécification ARIA propose un attribut qui résout directement ce problème : aria-live.

103

104

ADAPTIVE WEB DESIGN

Le plus étonnant dans aria-live est sa simplicité. Il suffit d'appliquer cet attribut à un élément pour contrôler quand et comment sa mise à jour est communiquée à l'utilisateur. L'attribut aria-live accepte l'une des trois valeurs suivantes : 1. "off " lorsque les mises à jour sont fréquentes et de peu d'importance, comme dans dan s le cas d'un flux flu x dynamique dynam ique de votre compte Twitter Twitter (n'est-ce est-ce pas ?) ; 2. "polite " pour les mises à jour assez importantes pour en informer l'utilisateur lorsqu lorsqu'il 'il ne fait rien d'autre, d 'autre, ce qui peut être le cas des grands titres d'un magazine web lorsqu'ils sont mis à jour ; 3. "assertive" pour les mises à jour suffisamment importantes pour devoir être immédiatement imméd iatement annoncées, ce qui est le cas des messages de validation de formulaire. Dans notre site Retreats 4 Geeks, nous pouvons valablement appliquer l'attribut aria-live au formulaire de contact :
aria-live="assertive">

Cette simple retouche permet de garantir que l'utilisateur sera informé de toute erreur pendant le remplissage remplissage du formulaire et d 'avoir la confirmation que le formulaire a bien été transmis.

ADOPTION ET MANQUE MANQUESS Depuis son lancement, ARIA a fait l'objet d'un bon accueil de la communauté web. Au jour où nous écrivons ceci, tous les grands navigateurs ont incorporé une certaine dose de support ARIA, de même pour les outils de lecture d'écran répandus tels que JAWS, Windows Eyes, NVDA et Orca. De grandes entreprises comme IBM, IBM , Sun Microsystems, Adobe, Yahoo! Yahoo! et Google travaillent d'arrache-pied à augmenter l'efficacité et l'exhaustivité d'ARIA. La communauté JavaScript a aussi adopté ARIA, ARI A, les deux outils outi ls Dojo Dijits5 et jQuery UI6 ayant incorporé les rôles, états et propriétés ARIA dans leurs composants. La spécification est encore en cours de développement et aucune mise en place n'est encore complète, mais les progrès sont permanents. 5. 6.

http://dojotoolkit.org/widgets http://jqueryui.com/



Ce serait péché de ma part de ne pas mentionner le principal problème qui empêchee ARIA empêch AR IA de se fondre harmonieusement harmonieusement dans notre approch approchee d'a d 'amémélioration progressive, tout du moins au niveau des rôles et des états des widgets. widg ets. En effet, nous ne disposons d' d 'aucun moyen moyen de tester la disponibilité du support support ARIA ARI A dans le navigateur ou dans la technologie technologie d' d 'a ssistance. Nous Nous ne pouvons pouvons donc pas bien décider comment exploiter au mieux chaque widget. Derek Featherstone avait soulevé ce problème dans son excellent article pour le site A List Apart sous le titre "ARIA and Progressive Enhancement7". J'J 'en conseille la lecture à tous ceux qui veulent mieux comprendre ce problème. Pour le moment, aucune solution n'a encore été trouvée, mais croisons les doigts.

LES RACCOURCIS CLAVIER, C'EST BIEN Le dernier dern ier sujet sujet que je veux aborder avant avant de clore ce chapitre est l'l 'accessibilité au moyen du clavier. L'utilisation systématique de la souris et la multiplication des appareils tactiles tels que les tablettes font qu'il est assez facile d'oublier notre bon vieux clavier, ce qui serait une grav g ravee erreur. Le clavier reste un outil extrêmement pratique, et il constitue l'interface de prédilection de la plupart des utilisateurs non-voyants tout autant que des utilisateurs chevronnés. Nous avons appris beaucoup en ce qui concerne le clavier au cours des dernières années. Nous avons tout d'abord compris que les touches d'accès constituaient une bonne idée, mais que dans la pratique ce n'était pas si intéressant8. Nous avons également compris qu'une application trop rigoureuse de l'attribut tabindex pouvait plonger les utilisateurs dans une frénésie de sauts d'un élément élément à l'autre l 'autre (et un énervement énervement certain)9. Ce que nous avons surtout découvert, c'est que nous pouvions nous servir du code JavaScript pour modifier dynamiquement la valeur de l'attribut tabindex pour simplifier le cheminement de l'utilisateur parmi les différents composants d'un widget complexe, comme c'est le cas d'une interface à onglets ou d'un formulaire en accordéon. À quoi correspond cette technique appelée jonglage tabindex ? Au cours de l 'a nnée 2005 20 05 (on n'n'a pas retrouvé l'origine exacte), quelqu' quelqu'un un a découvert qu'en en donnant la valeur "-1 "-1" à l 'a'attribut ttribut tabindex d d'un 'un élément, élément, cela écartait l'élément l 'élément 7. 8. 9.

http://alistapart.com/articles http://alistapa rt.com/articles/aria-and-progr /aria-and-progressive-enhancem essive-enhancement/ ent/ http://www.wats.ca/show.php?contentid=32 http://webaim.org/techniques/k http://webaim.o rg/techniques/keyboard/tabinde eyboard/tabindex x

105

106

ADAPTIVE WEB DESIGN

de la séquence de focalisation par la touche TAB dans le document10. Ce qui est intéressant, c'est que bien que le composant concerné ne fasse plus partie de la séquence de tabulation dans le document, on peut encore le cibler en code JavaScript (avec element.focus()), ce qui ouvre de nouvelles nouvelles possibilités pour contrôler précisément l'expérience de l'utilisateur. Parcourons un scénario typique en revisitant l'interface à onglets présentée un peu plus haut : 1. L'utilisateur arrive dans l'interface l'i nterface à onglets et et actionne la touche touche TAB de son clavier, ce qui focalise sur le premier onglet (qui est associé au panneau actuellement affiché) a ffiché).. 2. S' S'ilil actionne actionne à nou nouveau veau la touche touche TAB ou le bouton du clavier tactile, le focus passe à l'élément de contenu ciblable suivant en quittant la section des onglets. Cela ne l'emmène pas à l'onglet suivant dans la liste. 3. S' S'ilil maintient la touch touchee MAJ tout en actionnant la touche TAB, il revient dans la liste des onglets et réactive l'onglet courant. 4. Il peut utiliser utiliser les flèches flèches du curseur curseur pour circuler circuler parmi les différents différents onglets de la liste, en affichant à chaque fois le panneau correspondant. 5. S' S'ilil actionne la touch touchee ENTRÉE pendant qu'il navigue dans la liste des onglets, il focalise sur le panneau correspondant à l'onglet actif. Je reco reconnais nnais que que cela cela représ représente ente beau beaucou coupp d'utilisation d'utilisation de la touch touchee TAB (et un défi remarquable). Cependant, en jouant bien avec tabindex et en ajoutant un peu de code JavaScript, vous y arrivez aisément. Voici comment : 1. Vous commencez par affecter la valeur "-"-1" au tabindex de chacun des onglets et panneaux, ce qui les écarte de la séquence de tabulation de la page. 2. Vous réaffectez ensuite ensu ite la valeur valeur "0" "0" à l'onglet courant pour le rapatrier rapatrier dans la séquence de tabulation à sa position par défaut. 3. En JavaScript, JavaScript, vous pouvez pouvez ensuite régler dynam dynamiquement iquement la propriété propriété tabindex de chacun des onglets en fonction des commandes frappées au clavier par l'utilisateur, par exemple les touches gauche, droite, haut et bas. Vous permettez ainsi à l'utilisateur de se déplacer facilement dans l'interface. 10.Ce comportement a été particulièrement intéressant parce que, selon la spécification spéci fication du W3C, tabindex ne pouvait accepter une valeur qu'entre 0 et 32 767.



Voici un extrait de la méthode nommée swap() de TabInterface qui montre comment jongler avec tabindex (v (vous ous y trouv t rouvez ez également un peu de manipuma nipulation des attributs attributs ARIA ARI A et d'interversio d 'interversionn d'éléments d 'éléments class) : function swap( e ) { // ... // Désactivation du panneau et de l'onglet actifs removeClassName( removeClassN ame( old_tab, 'active' ); old_tab.setAttribute( old_tab.setA ttribute( 'aria-selected', 'false' ); old_tab.setAttribute( old_tab.setA ttribute( 'tabindex', '-1' ); removeClassName( removeClassN ame( old_folder, 'visible' ); old_folder.setAttribute( old_folder.s etAttribute( 'aria-hidden', 'true' ); // Activation du nouveau panneau et onglet addClassName( addClassName ( tab, 'active' ); tab.setAttribute( tab.setAttri bute( 'aria-selected', 'true' ); tab.setAttribute( tab.setAttri bute( 'tabindex', '0' ); addClassName( addClassName ( new_folder, 'visible' ); new_folder.setAttribute( 'aria-hidden', 'false' ); // ... }

Pour voir voir cette technique techn ique en pleine action, allez découvrir TabInterface.js TabInterface.js sur sur le site Github11.

AGISSEZ… ACCESSIBLE L'a ccessibilité est un sujet complexe. complexe. Un peu de temps est nécessaire nécessa ire pour vous y habituer, mais cela deviendra ensuite une seconde nature. Comme toutes les autres techniques de ce livre, l 'a'accessi ccessibilité bilité devra de préférence préférence être app appliquée liquée en plusieurs niveaux, afin de construire l'interface utilisateur progressivement. Vous pourrez ainsi créer un résultat qui répondra aux attentes de tous vos utilisateurs.

11. http://github.c http://github.com/easy-designs om/easy-designs/TabInterface.j /TabInterface.js s

107

"Quand tu veux construire un bateau, ne commence pas par rassembler du bois, couper des planches et distribuer du travail, mais réveille au sein des hommes le désir de la mer grande et belle." — ANTOINE DE SAINT-EXUPERY

CHAPITRE 6

À EMPORT EMPORTER ER

Nous avons visité bien des aspects durant cette courte promenade ensemble. Nous avons vu l'amélioration progressive en action, en partant d'un simple document texte pour aboutir à une page web attrayante, fonctionnelle et restant accessible à tous. Le rythme de croisière a été soutenu, mais nous espérons que vous repartez avec une idée plus précise de ce qu'est l'amélioration progressive, progressive, pourquoi cela fonctionne et comment l'i l 'incorporer ncorporer dans vos prochains projets, au niveau conception et développement. Vous avez peut-être déjà mis en pratique certaines techniques. Bien que ce livre soit de pagination réduite et que nous ayons la chance de pouvoir pouv oir faire appe appell à un excellent concepteur concepteur d'index, d 'index, vous pourriez aisément a isément ne plus savoir où a été abordé un concept que vous voudriez revoir. Je fournis fourni s à cet effet dans les pages suivantes un rap rapide ide résumé des principales pri ncipales techniques présentées, avec des conseils d'utilisation. Cette checklist de l'amélioration progressive vous permettra de vérifier que vous tenez compte avec toute la considération requise des aspects essentiels de l'a l 'amélio mélioration ration progressiv progressive. e. À votre tour de mettre tout cela en pratique en concevant des choses superbes !

110

ADAPTIVE WEB DESIGN

LA CHECKLIST DE L'AMÉLIORATION PROGRESSIVE Contenu & HTML (Chapitre 2) ❏

UN MANUSCRIT MAN USCRIT/TAPUSCRIT /TAPUSCRIT BIEN RÉDIGÉ ET NE PERDANT PAS SON SENS LORSQU'IL EST LU PAR UN LECTEUR L ECTEUR ÉCRAN AUDIO

Il s'agit du niveau fondamental de l'expérience utilisateur ; il doit faire l'objet de tous vos soins. Nous donnons quelques pistes dans la bibliographie. ❏

CHOISISSEZ VOS ÉLÉMENTS HTML EN FONCTION DE LEUR SIGNIFICATION

Le simple fait de tirer profit de la sémantique standard des éléments (balises) HTML repr représente ésente un grand pas vers une meilleure accessiaccessibilité (et optimise le travail des moteurs de recherche). ❏

EXPLOITEZ LES MICRO-FORMATS POUR PALLIER LES MANQUES DU HTML

Les micro-formats forment des extensions au lexique HTML et sont reconnus par de nombreux navigateurs et plusieurs moteurs de recherche. ❏

SERVEZ-VOUS DES CLASSIFICATIONS POUR REGROUPER DES ÉLÉMENTS QUI SERVEZ-VOUS PARTICIPENT À LA MÊME FONCTION

La classification (au (au moyen de l'attr l 'attribu ibutt class, par exemple) donne du sens aux éléments HTML pour lesquels le standard n'en fournit pas assez et lorsqu'il n'existe pas de micro-format approprié. ❏

IDENTIFIEZ LES ÉLÉMENTS STRUCTURANTS

L'identification (par exemple par l'utilisation de l'attribut id) est une excellente solution pour ajouter du contexte à une région de page ou une instance spécifique d'un d 'un élément élément de classification.


À EMPORTER

CSS (Chapitre 3) ❏

VÉRIFIEZ MINUTIEUSEMENT VOS SÉLECTEURS COMPOSITES

Vous prenez des risques en mélangeant des sélecteurs de niveaux de complexité comp lexité très différents, di fférents, car lorsque le navigateur ne comprend pas un des sélecteurs, il ignore tout le jeu de règles. Cela devient en revanche une bonne astuce si votre but est de masquer tout un jeu de règles pour les anciens navigateurs. ❏

ORGANISEZ VOS RÈGLES CSS EN PENSANT AU MÉCANISME M ÉCANISME DE CASCADE

L'ordre d'apparition est significatif. Une bonne organisation de vos règles de styles vous aidera à concevoir une structure à amélioration progressive, ce qui rendra votre code CSS plus facile à maintenir. ❏

MASQUEZ LES JEUX DE RÈGLES CSS RÉCENTES AUX ANCIENS NAVIGATEURS

Un des plus puissants outils CSS pour masquer sélectivement sélectivement des jeux de règles est le bloc @media. ❏

GÉREZ LES DIVERGENCES D'IE AVEC AVEC DES COMMENTAIRES COMMEN TAIRES CONDITIONNELS

Les anciennes versions d'Internet Explorer sont réputées pour leurs imperfections. Les Commentaires Conditionnels du type

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

Adaptive web design - Aaron Gustafson.pdf

Recommend Documents

Aaron Aaro n Gu Gust staf afso son n

Aaron Gustafson Gustafson

Aaron Gustafson Gustafson

Join

Join us for HTML5 & CSS3