Adaptive Web Design - Aaron Gustafson PDF

Proprit de david damour <damourlalchimiste@gmail.
com> customer 272758 at 2014-04-04 14:08:47 +0200 272758

Crer des sites riches
avec lamlioration progressive
ADAPTIVE
WEB DESIGN
Aaron Gustafson
Prface de Jeffrey Zeldman
Le Web est en perptuelle mutation : ses supports et ses usages, sa porte et ses
applications ne cessent de changer et d'voluer. Si vous travaillez dans le Web, vous
avez certainement entendu parler lamlioration progressive (progressive
enhancement). Mais que recouvre rellement cette notion ? Comment la rendre
oprante dans son travail de dveloppement quotidien et dans le design de ses sites ?
Dans ce guide, Aaron Gustafson fait la gense de lamlioration progressive, explique
ses origines, sa philosophie, son fonctionnement et propose de nombreuses
techniques de mise en uvre pour les langages HTML, CSS et JavaScript. Grce
lamlioration progressive, vous remettrez les contenus au cur de vos
dveloppements, de faon proposer des expriences qui servent les utilisateurs
plutt que les navigateurs. Vous donnerez accs vos contenus sans limite
technologique, pour les supports dhier, daujourdhui et de demain.
Adaptive Web Design constitue non seulement lexplication la plus claire et la plus
lgante de lamlioration progressive que jaie jamais lue, mais en plus, ce livre est
bourr de savoir-faire pratiques qui viennent s'installer directement dans votre
nocortex, grce au style chaleureux et amical d'Aaron.
Jeremy Keith, auteur de HTML5 pour les web designers
Enn. Lamlioration progressive explique avec un parfait quilibre entre thorie et
pratique.
Dan Cederholm, auteur de CSS3 pour les web designers
Aaron Gustafson a plus de 15 ans dexprience dans le Web et a dvelopp une connaissance
profonde des standards du web, de larchitecture des sites, des stratgies de contenu et du
design dinterface. Il dirige le Web Standards Projects (WaSP), est expert technique pour
A List Apart, et contribue rgulirement .Net Magazine.
Proprit de david damour <damourlalchimiste@gmail.com> customer 272758 at 2014-04-04 14:08:47 +0200 272758
ADAPTIVE
WEB DESIGN
avec l'amlioration progressive
Aaron Gustafson
Traduit par Olivier Engler
ADAPWEB.indb 1 17/04/13 12:47
Pearson France a apport le plus grand soin la ralisation de ce livre afn de vous
fournir une information complte et fable. Cependant, Pearson France nassume
de responsabilits, ni pour son utilisation, ni pour les contrefaons de brevets ou
atteintes aux droits de tierces personnes qui pourraient rsulter de cette utilisation.
Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour
illustrer les descriptions thoriques. Ils ne sont en aucun cas destins une utili-
sation commerciale ou professionnelle.
Pearson France ne pourra en aucun cas tre tenu pour responsable des prjudices
ou dommages de quelque nature que ce soit pouvant rsulter de lutilisation de ces
exemples ou programmes.
Tous les noms de produits ou marques cits dans ce livre sont des marques dposes
par leurs propritaires respectifs.
Publi par Pearson France
Immeuble Terra Nova II
74, rue de Lagny
93100 Montreuil
Tl : +33 (0)1 43 62 31 00
www.pearson.fr

Traduit par Olivier Engler

2013 Pearson France
Tous droits rservs
Titre original : Adaptive Web Design:
Crafting Rich Experiences with
Progressive Enhancement, by Aaron
Gustafson

Authorized translation from the
Englishlanguage edition, entitled Adaptive
WebDesign: Crafting Rich Experiences
with Progressive Enhancement by Aaron
Gustafson (ISBN 978-0-9835895-0-1),
published by Easy Readers. Copyright
2011 Aaron Gustafson. All rightsreserved.
No part of this book may bereproduced
or transmitted in any formor by any
means, electronic ormechanical, including
photocopying,recording or by any infor-
mation storageretrieval system, without
permissionfrom Pearson France.
Copyright PearsonFrance.
ISBN original: 978-0-9835895-0-1
2011 Aaron Gustafson.
All Rights reserved.
Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues larticle L. 122-5 2
et 3 a) du code de la proprit intellectuelle ne peut tre faite sans lautorisation expresse de Pearson
France ou, le cas chant, sans le respect des modalits prvues larticle 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 Language edition published by Pearson France.
ADAPWEB.indb 2 17/04/13 12:47
ISBN : 978-2-7440-5600-0
Pour Kelly
ADAPWEB.indb 3 17/04/13 12:47
iv ADAPTIVE WEB DESIGN
REMERCIEMENTS
Sans les conseils et le soutien de tous mes amis et collgues 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 sincre gratitude:
Pour Molly Holzschlag et Jefrey Zeldman qui m'ont pris sous leurs ailes et
m'ont permis de renforcer mes comptences en tant que confrencier et auteur.
Et aux nombreux organisateurs de confrences et directeurs de publications
qui m'ont donn l'occasion de mettre ces comptences en pratique.
Pour Carolyn Wood qui m'a aid peaufner mes premiers brouillons et
pour Krista Stevens qui a pur mes arguments, fuidif 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 efcace et lisible. Merci aussi tous les relecteurs qui m'ont donn de
prcieux conseils (et des corrections) : Dan Cederholm, Simon Collison,
Kristina Halvorson, Christian Heilmann, Whitney Hess, Jeremy Keith, Dan
Rubin et Jonathan Snook.
Merci l'quipe Easy Designs pour son souci des dtails et son aide prcieuse
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 afn de
crer pour moi cette couverture absolument superbe.
Et enfn, merci Kelly qui m'a dgag du temps pour crire ce livre, qui m'a
aid organiser mes ides et qui m'a encourag aller jusqu'au bout.
ADAPWEB.indb 4 17/04/13 12:47
TABLE DES MATIRES NP
REMERCIEMENTS v
TABLE DES MATIRES
vi AVANT-PROPOS
1 CHAPITRE 1
PENSEZ L'UTILISATEUR, PAS AU NAVIGATEUR
15 CHAPITRE 2
AMLIORATION PROGRESSIVE AVEC LE HTML
39 CHAPITRE 3
AMLIORATION PROGRESSIVE AVEC LE CSS
67 CHAPITRE 4
AMLIORATION PROGRESSIVE AVEC JAVASCRIPT
91 CHAPITRE 5
AMLIORATION PROGRESSIVE ET ACCESSIBILIT
109 CHAPITRE 6
EMPORTER
INDEX
ADAPWEB.indb 5 17/04/13 12:47
vi ADAPTIVE WEB DESIGN
AVANT-PROPOS
Par un glorieux aprs-midi de mars 2006, je passai en trombe avec un ami
devant l'htel Hilton du centre d'Austin pour rejoindre la prochaine conf-
rence du festival SXSW Interactive quand un jeune inconnu nous arrta
net dans notre course. Sans mme se prsenter, il nous annona qu'il tait
disponible pour prendre la parole lors de la confrence An Event Apart, un
vnement destin aux web designers que j'avais initi trois mois plus tt 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 imptueux, Smithers?"
Le jeune arriviste imptueux est trs vite devenu un de mes collgues les
plus intimes. Au fl des mois et des ans, Aaron Gustafson a produit du
code client et serveur pour quelques-uns des clients les plus exigeants de
ma socit. Tout aussi important, il a brillamment assur le rle d'diteur
technique de la troisime dition de Designing With Web Standards. Son
travail consistait surtout informer Ethan Marcotte et moi-mme des choses
que nous ignorions propos des standards du Web. Imaginez ce que cela
reprsente. Depuis cinq ans maintenant, Aaron est un diteur rigoureux
mais impartial pour la revue A List Apart ; il aide les auteurs atteindre
leurs objectifs tout en s'assurant qu'ils restent toujours innovants, que leurs
mthodes sont accessibles et smantiques et (grce ses connaissances
presque encyclopdiques) qu'ils crditent bien leurs prdcesseurs. Aaron
a aussi rdig des articles fondamentaux pour la revue. Enfn, oui, il a pris
la parole la confrence An Event Apart.
Vu mon exprience de l'homme et mon admiration pour son savoir et ses
comptences, j'ai t enthousiasm lorsqu'Aaron m'a parl de ce projet de
livre et m'a laiss en lire quelques chapitres. Ce n'est pas un livre de plus sur
le web design. C'est une pice qui manquait la littrature fondamentale
sur le sujet. Notre secteur d'activit a longtemps manqu d'un guide des
meilleures pratiques de design web adaptatif et conforme aux standards. Avec
la dferlante des terminaux mobiles, les rcentes amliorations des naviga-
teurs web sur ordinateur de bureau comme sur tlphone et les nouvelles
possibilits qu'apportent le HTML5, le CSS3 et les interfaces gestuelles,
ADAPWEB.indb 6 17/04/13 12:47
TABLE DES MATIRES NP
AVANT-PROPOS vii
ceux qui conoivent des sites web doivent plus que jamais disposer d'une
source fable leur montrant comment tirer au mieux proft de ces opportunits
en crant du contenu compatible avec tous les modles de navigateurs, tous
les formats d'afchage et tous les niveaux de capacits. Cette source fable
est entre vos mains.
La convergence entre ces nouveaux lments et ces nouvelles opportunits
pousse les professionnels du Web enfn envisager leur travail de design tel
qu'il aurait d l'tre depuis le dbut. Le design adaptatif est la voie emprunter,
et personne ne matrise mieux qu'Aaron la pense et les techniques nces-
saires pour la pratiquer avec excellence. Ces techniques et cette approche sont
exposes dans les pages qui suivent. Vous ne perdrez plus des journes entires
vous demander comment concevoir de belles pages web en rdigeant du code
de qualit qui fonctionne pour tous les visiteurs. J'ai prvu de distribuer ce livre
tous mes tudiants, et tous ceux avec lesquels j'ai l'occasion de travailler. Je
vous invite faire de mme. Et maintenant, assez de prliminaires. Plongez-
vous dans la lecture et proftez-en bien!
Jefrey Zeldman
Auteur de Designing With Web Standards 3rd Edition
ADAPWEB.indb 7 17/04/13 12:47
Proprit de david damour <damourlalchimiste@gmail.com> customer 272758 at 2014-04-04 14:08:47 +0200 272758 ADAPWEB.indb 8 17/04/13 12:47
CHAPI TRE 1
PENSEZ L'UTILISATEUR,
PAS AU NAVIGATEUR
Si vous avez un minimum d'exprience en design web, il est fort probable que
vous ayez entendu parler du concept "d'amlioration progressive" (ou que vous
l'ayez pratiqu). Vous savez donc qu'il s'agit en matire de design web du modle
idal vers lequel tendre. Mais qu'est-ce au juste que l'amlioration progressive?
Quelle est sa signifcation? Comment doit-on la mettre en pratique? Et de
quelle manire peut-on incorporer cette approche notre mode de travail dans
un contexte d'volution rapide des langages et des navigateurs?
Toutes ces questions sont trs pertinentes et j'y rponds au long de ce livre.
Comme vous le constaterez, l'amlioration progressive n'est pas un problme
de gestion des difrents navigateurs, ni de choix des versions de HTML ou de
CSS qu'il faut utiliser. Il s'agit d'une approche philosophique visant produire
des situations qui permettent vos utilisateurs d'accder au contenu du site
sans subir de contraintes technologiques.
Que demander de mieux? Tout cela semble trs sduisant, mais la quantit
de travail prvoir parat impressionnante. N'ayez crainte. Une fois que vous
aurez assimil le principe de l'amlioration 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 dcouvrirez de nombreux cas
pratiques d'application de l'amlioration progressive qui combinent le HTML,
le CSS et le JavaScript de faon crer des sites web adaptatifs qui ne vont
ADAPWEB.indb 1 17/04/13 12:47
2 ADAPTIVE WEB DESIGN
pas seulement convenir vos utilisateurs, mais leur proposer une exprience
utilisateur satisfaisante, et ce, quels que soient le navigateur ou l'appareil avec
lesquels ils y accderont.
Mais avant de plonger dans la pratique, il nous faut aborder le pourquoi et
le comment de l'amlioration progressive, c'est--dire les fondements de cette
philosophie.
S'ADAPTER OU PRIR
S'il faut attaquer le sujet par la base, l'amlioration progressive repose sur un
grand principe: la tolrance aux pannes.
Cette tolrance aux pannes dsigne la capacit d'un systme continuer
fonctionner mme s'il rencontre une erreur imprvue. C'est cette capacit
qui permet un lzard de faire repousser sa queue et au cerveau humain de
crer de nouvelles connexions neuronales lorsqu'il se remet d'un traumatisme
crnien. La nature se montre trs friande de ce mcanisme de robustesse ou
de rsilience, et l'humain s'est inspir d'elle en adoptant ce principe dans ses
inventions, comme dans le cas des rseaux de distribution d'lectricit intel-
ligents qui vitent ou rduisent l'impact des surcharges rseau en dtectant
(et parfois en prvenant) les situations problmatiques.
Que vous utilisiez le rseau web en tant que simple visiteur de sites ou en
tant que professionnel, vous proftez dj en permanence de ce mcanisme
de tolrance aux pannes. Ce principe est en action dans les modes d'achemi-
nement des paquets de donnes (les protocoles) entre le navigateur client et le
serveur web que vous voulez visiter, et il est mme intimement imbriqu dans
les langages qui incarnent le Web d'aujourd'hui: le HTML et le CSS. Les
spcifcations de ces deux langages dictent une obligation pour les naviga-
teurs d'ignorer ce qu'ils ne parviennent pas interprter. C'est cette condition
simple qui rend possible l'amlioration progressive. Mais nous y reviendrons
dans un instant.
Un autre aspect intressant de la tolrance aux pannes est son ouverture
l'volution. Revenons au modle qu'est la nature : vous voyez la capacit
d'adaptation en action dans les rgions ayant connu des changements clima-
tiques ou environnementaux sufsants pour forcer les organismes vivants
choisir entre s'adapter, quitter les lieux ou prir.
ADAPWEB.indb 2 17/04/13 12:47
CHAPITRE 1 PENSEZ L'UTILISATEUR, PAS AU NAVIGATEUR 3
En 1977, les les Galapagos ont connu une scheresse telle qu'elle a fait
fortement baisser la quantit de petites graines qui constituaient la nourriture
de prdilection des pinsons de Darwin (gospizes) habitant ces les. Quatre-
vingt-cinq pour cent des gospizes sont morts de faim, seuls les plus gros
spcimens ayant survcu. Pourquoi ? Parce qu' ils possdaient 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 comptitif, mais avec la scheresse, ils ont tir avantage de la situation.
Non seulement ils ont survcu, mais ils ont transmis leurs gnes aux gnra-
tions suivantes qui sont videmment dotes d'un bec plus grand.
Figure 1.1 : Comparaison de la taille des becs des pinsons des Galapagos
(pinsons de Darwin ou Geospiza fortis) tire d'une illustration du livre
Zoologie du voyage du H.M.S. Beagle, de John Gould.
Le HTML et le CSS ont plusieurs points communs avec les pinsons de
Darwin. Ils sont en efet galement conus pour tre compatibles avec le futur,
ce qui signife que tout ce qui fonctionne aujourd' hui fonctionnera encore
demain, l'an prochain et dans dix ans. Ce sont en quelque sorte des pinsons
parfaits: crs pour survivre quelle que soit l'ampleur des changements de
l'environnement de la navigation web.
Puisque ces langages ont t prvus pour voluer dans le temps, les naviga-
teurs web ont t forcs de se conformer aux rgles de tolrance 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
ADAPWEB.indb 3 17/04/13 12:47
d'atteindre un point partir duquel le contenu et le style qu'ils vhiculent
risquent de devenir illisibles ou entranent un blocage du navigateur. La
tolrance aux pannes permet de visiter un site web conu en HTML5 avec
le navigateur en mode texte Lynx ou de profter des nouveauts du CSS3 sans
craindre de se rendre inaccessible aux personnes utilisant Internet Explorer6.
Il est capital de comprendre la tolrance aux pannes pour intgrer la notion
d'amlioration progressive. La tolrance aux pannes permet l'amlioration
progressive de fonctionner et garantit que tous les contenus difuss sur le
Web sont accessibles tout un chacun.
Puisque la tolrance aux pannes a t incorpore ds le dpart dans les normes
des langages HTML et CSS, vous pourriez en dduire que les professionnels
du Web (comme nous) ont pris soin d'en reconnatre l'importance et la valeur
pour concevoir nos sites web. Hlas, cela n'a pas toujours t le cas.
DES FAUTES LGANTES
Pendant la premire dcennie du Web, ce mdia a beaucoup volu. Tout
au dbut est apparu le navigateur Mosaic du NCSA (National Center for
Supercomputing Applications de l'universit de l'Illinois); c'tait le premier
navigateur graphique et le HTML a accueilli l'lment nomm img. Puis
est arriv l'audio, puis la vido, puis l'interaction. Rester en phase avec cette
volution technologique efrne tait un vritable df. Dans notre course en
avant, nous en avons oubli la tolrance aux pannes en cherchant profter
sans cesse des dernires techniques. Nombre de nos sites fnissaient par ne
comporter que des cartes liens pleine page poses sur des fonds JPEG
lgants. Certains devenaient dpendants 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 thorie appele "dgradation lgante"
(graceful degradation).
La dgradation lgante constitue le pendant philosophique de la tolrance
aux pannes, une parente superfcielle et obsde par les apparences, qui dsire
uniquement mettre les plus riches atours et sortir avec les beaux garons.
Dans le contexte du Web, la dgradation lgante revenait rassasier les plus
rcents et puissants navigateurs avec des mets de choix, tout en jetant quelques
ADAPWEB.indb 4 17/04/13 12:47
miettes aux pauvres hres qui approchaient avec leur minable navigateur
d'ancienne gnration.
l'poque de l'apoge de cette dgradation lgante, notre obsession tait de
garantir que nos sites seraient bien rendus par les navigateurs modernes les
plus utiliss. Les tests de compatibilit avec les anciens navigateurs, lorsque
nous en faisions, taient repousss au bas de notre liste de priorits.
Le raisonnement tait limpide: le HTML et le CSS tant tous deux tolrants
aux pannes, l'utilisateur verrait toujours quelque chose s'afcher. Mais nous
ignorions que le JavaScript, comme d'autres langages de programmation,
n'tait pas tolrant aux pannes (si vous appelez par exemple une mthode
inexistante, vous faites subir une erreur au visiteur). Les scripts et applications
crits en JavaScript doivent contenir des procdures spcifques pour tre
capables de survivre aux erreurs (par exemple en tentant d'excuter la mme
action par un autre moyen) ou du moins de pressentir une erreur potentielle
en quittant avant qu'elle ne se produise.
Rares taient ceux qui prenaient ce genre de prcautions, parce que nous tions
focaliss sur la marche en avant, l'aft du dernier jouet avec lequel nous
pourrions embellir nos sites. Nous supposions que les anciens navigateurs ne
permettraient qu'une exprience infrieure. Nous justifions en considrant
que le temps qu'il aurait fallu y consacrer pour au minimum s'assurer que le
rsultat restait dcent et sans erreur n'en valait pas la peine. Bien sr, nous
grions les erreurs les plus fagrantes, mais pour les autres, nous laissions
gentiment les utilisateurs se dbrouiller. (Et c'est triste dire, mais certains
parmi nous allaient jusqu' bloquer l'entre aux navigateurs qu'ils ne voulaient
pas prendre la peine de grer.)
MERGENCE DU PRINCIPE DE
TOLRANCE
Aprs quelque temps, des dveloppeurs web aviss ont commenc raliser
que la prdilection de la dgradation lgante pour les images au dtriment
du contenu allait dans la mauvaise direction. Ils constatrent que la dgra-
dation lgante tait la cause directe d'une rduction de la disponibilit et
de l'accessibilit des contenus. Ces concepteurs et dveloppeurs virent que
le Web avait pour raison d'tre la difusion et la consommation de contenus
ADAPWEB.indb 5 17/04/13 12:47
(mots, images, vidos, etc.) Ils dcidrent de reprendre les choses zro en
considrant leurs marquages, leurs styles et leurs choix d'interaction en tenant
compte de l'impact de ces choix sur la disponibilit des contenus.
En rorientant leurs eforts, les dveloppeurs ont commenc exploiter la
nature tolrante aux pannes du HTML et du CSS ainsi que le mcanisme
de dtection d'erreurs de JavaScript, et comprendre qu'une exprience du
visiteur positive ne devait pas tre de type tout ou rien (c'tait le cas sous l'efet
de la dgradation lgante). Au contraire, les technologies web pouvaient tre
exploites sous forme de strates se compltant les unes les autres en ofrant une
exprience et un niveau d'interaction de plus en plus riches. Steve Champeon
du projet Web Standards Project a parfaitement capt l'essence de cette philo-
sophie en inventant l'expression "amlioration progressive"
1
.
Dlicieux tous les niveaux
J'aime utiliser comme analogie de l'amlioration progressive la confserie
M&M's. Au cur de cette petite bille se trouve une cacahute (vous le
saviez ?) Cette cacahute est en soi une bonne source de protines et de
graisses, un aliment que tout le monde apprcie (sauf ceux qui y sont aller-
giques, videmment). De mme, le contenu de notre site web doit pouvoir tre
consomm mme sans aucun embellissement.
Figure 1.2 : Un continuum alimentaire.
Enrobez cette cacahute de chocolat et vous obtenez une friandise qui met
l'eau la bouche et qui a bon got, comme la cacahute seule. De mme, des
contenus bien prsents et organiss grce aux styles CSS sont souvent plus
faciles lire, et en tout cas, plus agrables consommer.
1. http://www.hesketh.com/publications/inclusive_web_design_for_the_future/
ADAPWEB.indb 6 17/04/13 12:47
Si nous ajoutons une coquille d'enrobage sucr, l'exprience est encore
meilleure. De mme, nous pouvons enrichir notre belle mise en pages avec
des interactions crites en JavaScript qui simplifent la navigation parmi les
contenus ou les font apparatre d'une manire originale et attrayante.
Cette comparaison est bien sr une simplifcation excessive de ce qu'est
l'amlioration progressive, mais elle vous procure une ide gnrale de son
fonctionnement. Les technologies sont appliques sous forme de strates le
HTML, puis le HTML avec le CSS, puis le HTML, le CSS et le JavaS-
cript , afn de fournir des expriences difrentes, dont chacune est aussi
pertinente que les autres (et aussi goteuse). 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 informa-
tions sont difuses, demandes et collectes. Ces changes sont devenus des
lments 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 reprsente un aspect important du Web, l'change d'informa-
tions doit devenir notre objectif prioritaire lors de la construction de toute
interface web. L'amlioration progressive garantit que tous les contenus (les
informations que difuse le site web) restent accessibles et utilisables par
n'importe qui, quelle que soit la situation gographique, le type d'appareil
utilis ou les capacits du logiciel d'afchage de ces contenus. De mme, les
outils de collecte de contenus (formulaires web, questionnaires, etc.) proftent
grandement de l'amlioration progressive, car elle leur garantit une exploitation
universelle, ce qui leur permet de mieux faire leur travail d'extraction.
Par dfnition, l'amlioration progressive s'intresse l'accessibilit, mais pas
dans le sens limit qu'on lui prte habituellement, savoir celui d'ensemble des
eforts d'amnagement visant rendre du contenu accessible aux individus
ayant des besoins particuliers (handicap moteur, crbral ou sensitif). Notre
amlioration 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'accde un site web depuis mon
smartphone, je suis limit visuellement par la rsolution et la taille de l'cran
(d'autant plus avec un navigateur qui permet de zoomer) et gestuellement
ADAPWEB.indb 7 17/04/13 12:47
par l'interface tactile pour activer les boutons et les liens, car mes doigts sont
moins prcis qu'un pointeur de souris.
Nous avons dit plus haut que les sites conus dans un esprit de dgradation
lgante fonctionnaient bien dans les navigateurs modernes, mais beaucoup
moins bien ou pas du tout dans les navigateurs plus anciens. Dans un sens
gnral, c'est comme si l'utilisateur visitait un parc d'attractions : les plus
beaux manges lui seraient interdits parce qu'il ne fait pas la taille sufsante.
De mme, le visiteur qui ne possde pas le "bon" navigateur va subir des
problmes (et des erreurs) pour accder au contenu des sites, et encore, lorsqu'il
parvient y accder.
l'oppos, un site web conu en accord avec la philosophie d'amlioration
progressive sera utilisable par tous, depuis tous les appareils, avec tous les
navigateurs. Bien sr, le visiteur utilisant le navigateur en mode texte Lynx
n'aura pas la mme exprience que celui qui possde la dernire version de
Safari, mais ce sera une exprience positive et non une absence de rsultat.
Le contenu du site sera accessible dans une version dulcore, ce qui n'est
nullement garanti dans l'approche de dgradation lgante.
Alors que leurs philosophies sont trs difrentes, l'amlioration progressive et
la dgradation lgante peuvent facilement se confondre en termes pratiques,
ce qui est dommage. Pour bien souligner ces difrences, j'aime utiliser cette
formule : toutes les expriences conues selon l'amlioration progressive
garantissent une dgradation lgante dans les anciens navigateurs, alors que
peu d'expriences conues selon la dgradation lgante vont permettre une
amlioration progressive.
Des limites ? Quelles limites ?
Pendant l'ge d'or de la dgradation lgante, les sites web fnissaient par
ressembler aux parcs d'attractions voqus plus haut: "Mange interdit aux
personnes mesurant moins de 1,20m de hauteur". Le Web s'tait rempli (il
l'est hlas encore) de sites afchant frement une mise en garde du style "Site
optimis pour Netscape Navigator4". Nous avons abandonn cette pratique
dplorable grce l'amlioration progressive et la difusion des standards
web, mais ce phnomne de cloisonnement est rapparu lorsque les sites ont
commenc adopter la technique JavaScript nomme Ajax. De plus en plus
de sites ont rclam la prsence de JavaScript ou mme restreint l'entre
certains modles et versions de navigateurs. Nous assistions une redifusion
de cet pisode tant redout de l'histoire du Web: le retour des sales mthodes
ADAPWEB.indb 8 17/04/13 12:47
de blocage des navigateurs et d'anti-ergonomie que nous pensions avoir dfni-
tivement abandonnes.
Comme "avec le temps va, tout s'en va", la ferveur autour d'Ajax s'est calme
et nous avons pu recommencer construire (et parfois reconstruire) des
sites fonds sur Ajax conformes l'approche d'amlioration progressive. Mais
un beau jour, il y eut la prsentation d'Apple HTML5 Showcase avec ses
superbes transitions et animations en CSS
2
. peine avions-nous essuy la
salive tombe sur nos bureaux que nous dcidions, nombreux, d'incorporer ces
lgantes nouveauts dans nos sites, soit par impatience, soit sous la pression
de nos clients. Consquence : ont commenc se multiplier des sites qui
obligeaient leurs visiteurs disposer d'une variante trs rcente de Webkit
3

pour tre vus (et au diable les quatre-vingts pour cent de navigateurs qui n'en
taient pas dots).
Mais les concepteurs de sites ont fni par comprendre que l'adoption de
technologies spcifques allait l'encontre de la philosophie d'amlioration
progressive. Certains d'entre eux ont alors persist en dclarant que cette
philosophie tait limitante et sont revenus l'ancienne approche de dgra-
dation lgante. Ils estimaient que l'amlioration progressive les obligeait
prendre en charge les anciens navigateurs qui n'taient pas aussi gratifants
utiliser. Ce que ces gens n'ont pas compris, c'est que ce n'tait pas l'amlio-
ration progressive qui les bridait, mais leur mauvaise interprtation de cette
philosophie.
Il faut savoir que l'amlioration progressive ne se focalise pas sur les naviga-
teurs. Son but est de guider la conception de scnarii qui permettent aux
utilisateurs d'accder aux contenus sans subir de contraintes technologiques.
L'amlioration progressive ne vous demande pas de tenter de fournir la mme
exprience sur difrents navigateurs, et ne vous empche nullement d'adopter
les dernires innovations; elle vous demande uniquement de faire honneur
vos contenus (et vos visiteurs) en appliquant les technologies de faon
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 grer certaines fonctions volues 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, Epiphany, pour n'en citer que quelques-uns. Il est
la base du systme WebOS de Palm et a t incorpor dans plusieurs produits Adobe
parmi lesquels AIR (Adobe Integrated Runtime) et la suite CS5.
ADAPWEB.indb 9 17/04/13 12:47
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'amlioration progressive et
votre dsir de vous montrer innovant en ralisant des choses tonnantes dans
les navigateurs, condition de faire des choix aviss et de ne jamais perdre
de vue vos utilisateurs.
L'amlioration progressive pour un excellent service au client
Supposez un instant que vous soyez serveur dans un grand restaurant.
Votre travail et vos pourboires sont lis votre attention aux dtails et la
perfection de votre service. Un critre de contrle de votre attention consiste
vrifer le niveau des verres d'eau de vos clients avant de venir les remplir.
Un serveur distrait laissera les verres vides plusieurs minutes. Quelquun
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 aperoive. Vous
devinez quels clients quitteront le restaurant les plus satisfaits du service. Si
nous considrons seulement la bonne hydratation des clients, qui recevra le
meilleur pourboire, d'aprs vous?
Puisque nous sommes concepteurs et dveloppeurs de sites web, nous devons
tendre vers la mme excellence que le serveur idal, mais ce n'est pas simple.
De mme que le serveur ne peut savoir l'avance quel rythme ses clients
vont vider leurs verres, nous ne pouvons pas prvoir les besoins de chaque
visiteur de nos sites. Il nous faut les devancer. Si nous sommes vraiment
concentrs, nous saurons y parvenir sans que les visiteurs se rendent compte
que nous dployons tous ces eforts pour eux. Cet objectif devient aisment
accessible en adoptant l'approche oriente utilisateur et contenus de l'am-
lioration progressive (et non l'approche de suiveur des dernires modes de la
dgradation lgante).
SAISISSEZ L'OCCASION
Lorsque vous dmarrez un projet dans une perspective d'amlioration
progressive, vous vous centrez d'abord sur les contenus, puis sur tout ce qui
s'y ajoute. Cette approche par strates incarne la prvenance avec laquelle vous
rpondez par avance aux attentes des visiteurs en grant le contexte dans
lequel se fait l'accs aux pages web. Ce contexte est li aux possibilits du
ADAPWEB.indb 10 17/04/13 12:47
navigateur et, dans une moindre mesure, aux capacits du matriel sur lequel il
fonctionne. Le but fnal est d'adapter l'exprience du visiteur en consquence.
Le premier niveau d'exprience correspond toujours du texte. Dans cette
strate n'intervient aucune technologie remarquable; le succs ou l'chec de
la visite ne dpend que des capacits littraires du rdacteur du contenu. Il
est vident qu'un texte bien rdig se rend ainsi universellement accessible
et fait faire un pas de gant en termes d'accessibilit du contenu. Et quelles
que soient les volutions venir du langage HTML, l'impratif de tolrance
aux pannes impose aux navigateurs dans leur interprtation du marquage
HTML garantit que le contenu marqu sera toujours accessible dans son
format le plus lmentaire: des chifres et des lettres.
Le deuxime niveau d'exprience correspond la smantique du langage
HTML. Les lments de langage et leurs attributs fournissent une description
de ce que signife 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 signifcation d'une expression peu familire.
Minimales Evolues
CAPACITS DU NAVIGATEUR
S
A
T
I
S
F
A
C
T
I
O
N

U
T
I
L
I
S
A
T
E
U
R
Figure 1.3 : Graphe de l'amlioration progressive.
Le troisime niveau d'exprience correspond l'enrichissement audiovisuel
avec les styles CSS et l'ajout d'images fxes, de sons et de vidos. Comme le
HTML, le CSS est par nature tolrant aux pannes, les navigateurs ignorant
ce qu'ils ne savent pas interprter; c'est en cela que l'amlioration progressive
est possible au niveau du langage CSS.
ADAPWEB.indb 11 17/04/13 12:47
Le quatrime niveau d'exprience est celui des interactions avec le visiteur.
Dans le monde des standards, il s'agit presque toujours de code JavaScript,
mme si d'autres technologies d'interaction web ont t employes, notamment
Flash ou mme les applets Java.
Le dernier niveau d'exprience consiste appliquer la spcifcation WAI-ARIA
(Web Accessibility Initiative's Accessible Rich Internet Applications) et les rgles de
smantique augmentes et meilleures pratiques qu'elle mentionne. Ces enrichis-
sements des pages web prennent la relve l o s'arrtait normalement le HTML
(mme si le HTML5 a incorpor dans son lexique quelques points smantiques
volus issus d'ARIA).
Ces difrentes strates (qui sont autant de niveaux de support) permettent
de proposer une exprience qui s'amliore progressivement d'une strate la
suivante. Ce ne sont pas les seuls scnarii que vous pouvez prsenter vos
utilisateurs, mais elles constituent des jalons clairement identifs sur le chemin
qui va de l'exprience minimale l'exprience exceptionnelle. L'exprience
relle d'un utilisateur peut varier chaque niveau sur quelques points. Cela
reste sans consquence sur le service ofert aux utilisateurs tant que nous,
concepteurs, ne perdons pas de vue le principe d'amlioration progressive.
EN AVANT, TOUTE !
La suite du livre vous invite visiter les difrentes tapes sur l'autoroute de
l'amlioration progressive. Nous dcouvrirons successivement le marquage
HTML, les styles CSS, le JavaScript et enfn ARIA. Le priple sera illustr
par une page de dmonstration qui met en pratique ces techniques d'amlio-
ration progressive, l'adresse Retreats4Geeks.com. Par principe, ce livre ne
prtend pas constituer une rfrence exhaustive des techniques d'amlioration
progressive. Les exemples sont purs et se concentrent sur leur but premier:
vous prsenter les meilleures pratiques pour vous permettre d'adopter sur-le-
champ l'amlioration progressive dans vos projets.
ADAPWEB.indb 12 17/04/13 12:47
Figure 1.4 : La page de prsentation d'un vnement de formation sur le site
Retreats4Geeks.com qui sera tudie tout au long de ce livre.
ADAPWEB.indb 13 17/04/13 12:47
"La signification est dans le
contenu du texte, pas dans la
forme des caractres."
WIM CROUWEL
ADAPWEB.indb 14 17/04/13 12:47
CHAPI TRE 2
AMLIORATION
PROGRESSIVE AVEC LE
HTML
Quand on parle de Web, le marquage HTML est incontournable. Il constitue
la fondation de toute mise en page russie et de toute exprience utilisateur
positive. Que vous prfriez le HTML ou son cousin plus rigoureux XHTML,
chaque lment (balise) a un but clairement dfni. La manire dont vous
utilisez ces lments a un puissant impact sur l'exprience 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 nglig l' importance d'un bon marquage. Ceux qui venaient du
monde de la programmation ont considr que l'apprentissage du langage
HTML allait de soi, et n'ont donc jamais pris le temps d'tudier sa smantique
particulire. Ceux qui venaient du monde de la cration graphique n'ont pas
non plus senti l'importance de la smantique. Nous nous sommes tous focaliss
sur la partie prsentation 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'lment
table, qui ne sont pour la plupart que des remplacements d'lments sman-
tiques existants (et parfaitement grs par les navigateurs) tels que les listes.
ADAPWEB.indb 15 17/04/13 12:47
Dans de nombreuses entreprises de la plante, les promoteurs d'une utili-
sation smantique rigoureuse du langage HTML n'ont pas t entendus ;
leurs arguments taient considrs comme relevant d'une position d'intellec-
tuels puristes, pour deux raisons principales: 1) force tait de constater que
les anciens sites web se prsentaient toujours trs bien dans les nouveaux
navigateurs; 2) comme bien des personnes ne soufrent 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 smantique redevenait un sujet important.
Google a t le premier moteur de recherche prenant en compte les lments
smantiques pour indexer les pages web. Se fondant au dpart sur le trs
lmentaire lment d'ancrage (a) comme pierre angulaire de son algorithme
PageRank, Google est devenu le pionnier dans l'exploitation des marqueurs
smantiques pour extraire du sens et de la pertinence des pages scrutes. Les
autres moteurs de recherche ont rapidement suivi, et les moteurs de recherche
se sont lancs dans la traque d'autres lments 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 smantique est
ainsi devenu un critre signifcatif dans le monde des entreprises, puisque
son utilisation avise permettait d'tre mieux plac dans les rsultats des
recherches, et en consquence d'augmenter les chances d'entrer en contact
avec de nouveaux clients.
LA FONDATION SMANTIQUE
Si l'on compare le contenu au substrat, le marquage smantique est le compost
que vous ajoutez pour garantir la fertilit de votre jardin. Il enrichit le contenu
en fournissant aux visiteurs des indices au sujet du contexte et des intentions
de l'metteur, et en proposant des informations complmentaires au contenu.
Prenez comme exemple l'lment d'abrviation abbr. Il sert dsigner une
abrviation (ou un acronyme, ce qui lui permet dornavant de remplacer
l'lment acronym):
Gatlinburg, <abbr title="Tennessee">TN</abbr>
Dans cet extrait HTML, vous voyez comment l'lment enrichit les deux
lettres "TN" en rappelant au visiteur qu'elles signifent "Tennessee".
ADAPWEB.indb 16 17/04/13 12:47
CHAPITRE 2 AMLIORATION PROGRESSIVE AVEC LE HTML 17
Le langage HTML a volu sans cesse pour ofrir de plus en plus d'options
de description des contenus que les lments dlimitent (encapsulent). La
publication de la norme HTML5 a donn naissance une fope de nouvelles
options smantiques (telles que header) et des enrichissements de quelques
lments prexistants (comme l'lment abbr dj cit, qui remplace l'lment
acronym). Nous utiliserons au cours de ce chapitre plusieurs lments nouveaux
ou enrichis ; j'en profterai 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 Retreats 4 Geeks
1
, vous pouvez vous demander
par o commencer. Intressons-nous au contenu le plus important qu'est le
nom du site et la srie de liens qui mnent aux difrentes sections de la mme
page (pour l'exemple, le site ne compte qu'une page).
Figure 2.1 : La page du site web montrant le nom du site et les lments de
navigation.
Intressons-nous cette page dans une approche de smanticien, et
commenons par le logo de Retreats 4 Geeks
2
. C'est une image, et nous
1. Si vous n'avez pas encore tlcharg le fchier archive des exemples, faites-le maintenant
en vous rendant l'adresse adaptivewebdesign.info. Cherchez le bouton Download the
project fles.
2. Oui, je sais que vous pouvez aussi utiliser l'lment object ou dfnir un texte puis le
remplacer par une image avec des instructions CSS, mais je prfre m'en tenir au plus simple.
ADAPWEB.indb 17 17/04/13 12:47
utilisons logiquement un lment img pour la baliser. L' lment est assez
important, puisqu' il fournit un contexte pour toute la page. Nous devons
donc l'incorporer un lment de titre h1, l'lment qui est rserv au contenu
majeur de la page.
<h1><img src="i/logo.png"/></h1>
Notre page d'exemple est crite en HTML5, mais j'ai toujours t plus l'aise
avec la srialisation XML de ce langage et j'ai choisi de rester fdle cette
syntaxe (ce dont tmoigne la barre oblique fermante de l'lment img). Il s'agit
plus d'une question de prfrences que d'une obligation.
Au niveau des moyens de navigation locale, nous proposons une liste de liens
qu'il faut donc marquer en tant qu'lments de liste. L'ordre des liens devant
correspondre l'ordre des sections de contenu dans la page, nous opterons
pour une liste ordonne (ol). Chaque lien est insr dans un lment de liste
(li) l'intrieur d'un lment d'ancrage (a):
<ol>
<li><a href="#details">Details</a></li>
<li><a href="#schedule">Schedule</a></li>
<li><a href="#instructors">Instructors</a></li>
<li><a href="#lodging">Lodging</a></li>
<li><a href="#location">Location</a></li>
</ol>
Au point o nous en sommes, nous avons fait les choix de marquage vidents,
en proftant des possibilits smantiques ofertes par le langage HTML depuis
ses origines. Voici encore un an, nous en serions rests l et aurions considr
notre en-tte comme termin, mais le HTML5 nous permet d'aller plus avant
au niveau de la smantique et de l'accessibilit du contenu.
Traditionnellement, nous aurions eu recours une division de page (div)
munie d'un identifant smantique (id) de valeur "header" pour regrouper
ces deux lments. Vous vous souvenez sans doute que les divisions servent
regrouper des lments, mais qu'elles ne fournissent aucun contexte pour
prciser le domaine d'emploi ou la fonction du groupe (c'est d'ailleurs pourquoi
nous dcidons de lui attribuer l'identifant "header"). Le HTML5 introduit un
nouvel lment pour prciser la signifcation (la smantique) d'une division.
Il s'agit de l'lment header.
ADAPWEB.indb 18 17/04/13 12:47
Un lment header sert identifer le contenu de premire importance d'une
page ou d'une section de page. Il permet d'abord d'englober les en-ttes
ou groupes d'en-ttes (placs dans le nouvel lment hgroup), les aides la
navigation et le contenu de sommaire ou d'introduction. Cet lment constitue
de ce fait le conteneur idal pour le titre de page et la liste des ancrages qui
mnent chacun des articles de notre page.
Le langage HTML5 ofre une autre option encore plus approprie pour la
navigation. Alors qu'auparavant, nous aurions identif la liste ordonne avec
"nav" ou "main-nav", nous pouvons avec le HTML5 profter de son lment
nav pour exprimer de faon plus directe l'aspect smantique que nous voulons
ajouter la liste ol en fournissant cet identifant smantique id. L' lment
nav permet de runir tout un groupe de liens et de fonctions de navigation
pour former l'quivalent smantique du rle de repre de l'lment ARIA
"navigation" (que nous dcrirons dans le Chapitre5).
Ces ajouts tant faits, le marquage de la section devient le suivant:
<header>

<h1><img src="i/logo.png"/></h1>
<nav>
<ol>
</ol>
</nav>
</header>
Ce marquage fonctionnera dans tous les navigateurs, mme les plus anciens,
grce leur comportement consistant ignorer tout ce qu'ils ne savent pas
interprter. Les navigateurs les plus rcents sauront bien sr quoi faire des
lments nouveaux, mais les plus anciens, comme le navigateur en mode texte
Lynx, pourront trouver le contenu et l'afcher. Ce marquage sans styles ni
interactivit JavaScript fonctionne et rpond ainsi au deuxime niveau de
ADAPWEB.indb 19 17/04/13 12:47
support demand dans l'approche d'amlioration progressive. (Souvenez-vous
que c'est le contenu qui constitue le premier niveau, si important).
INVISIBLE ET CONSULTATIF
Le marquage est dj 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'lment alt). Rappelons que ce genre
de "texte alt"
3
donne un minimum d'informations au sujet d'une image lorsque
l'utilisateur n'a pas accs celle-ci, soit parce qu'il a dsactiv l'afchage des
images, soit parce qu'il est malvoyant et utilise la fonction de lecture audio du
contenu de l'cran, d'o l'importance de cet attribut.
Voici comment j'ai donc ajout un attribut alt trs simple l'exemple:
<h1><img src="i/logo.png" alt="Retreats 4 Geeks"/></h1>
Lorsque l'image est un logo ou qu'elle donne une information indispensable
pour comprendre l'objectif de la page ou pour dcider de faire une action
majeure, il faut systmatiquement penser fournir du texte pour l'attribut
alt. Dans les autres cas (images d'illustration), vous pouvez tout fait laisser
l'attribut alt vide (alt=""). J'irais mme jusqu' conseiller de fournir un attribut
alt vide pour toute image d'agrment, donc non vitale, et ce pour deux raisons:
1) personne n'prouve le besoin de lire ou d'entendre lire des choses aussi
pathtiques que "Vue d'un homme souriant qui lance un frisbee son Golden
Retriever", et personne n'a envie de rdiger ce genre de texte palliatif; 2) les
lecteurs audio d'cran lisent le texte qu'ils trouvent dans les attributs alt, mais
ignorent les images dont cet attribut est vide
4
.
De mme que l'attribut alt fournit du contenu de secours une image, l'attribut
title permet de donner des informations complmentaires pour un lment.
Dans le cas des liens de navigation de notre prcdent exemple, nous pouvons
3. Certaines personnes deviennent nerveuses en entendant parler de "balise alt" ou de "alt
tag", car les balises (lments) et les attributs de balises sont deux choses trs difrentes
(les attributs s'appliquent la balise ouvrante d'un lment). Si vous vous surprenez en
train de vouloir parler de balise pour alt, corrigez-vous et dites bien "attribut alt" ou "texte
alt".
4. Les lecteurs d'crans prononcent le seul mot "image" lorsqu' ils rencontrent une image qui
n'est pas dote d'un attribut alt. Ayez donc la dlicatesse d'ajouter cet attribut systmati-
quement, vide ou non.
ADAPWEB.indb 20 17/04/13 12:47
utiliser title pour donner l'utilisateur des informations sur la cible de chaque
lien:
<li><a href="#location" title="Get the 411 on Gatlinburg,
Tennessee">Location</a></li>
Plus bas dans la page, dans la section "location", l'attribut title fournit un
contexte au lien qui mne la carte de situation:
<a href="http://maps.google.com/..." title="View
Gatlinburg, Tennessee on Google Maps">
<img src="http://maps.google.com/..." alt="A map
showing the location of Gatlinburg, Tennessee"/>
</a>
Figure 2.2 : Vue de la section location de la page avec le pointeur de souris
sur la carte.
SMANTIQUE AD HOC
Le langage HTML regorge d'attributs permettant d'enrichir les lments
concerns. Certains de ces attributs ont un usage ddi, et c'est le cas de alt
ADAPWEB.indb 21 17/04/13 12:47
et de title, mais d'autres, et ils sont nombreux, peuvent tre employs pour
augmenter la densit smantique accessible avec les possibilits initiales du
langage, et ce de faon moins formelle. Je veux bien sr parler des attributs
id et class.
Lorsque Dave Raggett travaillait la spcifcation
5
du HTML3.0, il y avait
introduit les nouveaux concepts de classifcation et d'identifcation, incarns
respectivement par les attributs class et id
6
. Ces attributs n'ont t rendus
publics de faon formelle au sein du langage HTML que lors de la sortie du
HTML4.0, mais les navigateurs les ont pris en compte peu prs la mme
poque que les feuilles de styles CSS (Cascading Style Sheet). Et le CSS
a introduit deux slecteurs trs simples destins expressment ces deux
attributs. Cela a entran ds le dpart une certaine confusion au niveau de
la comprhension de l'usage attendu des attributs class et id.
Pendant des annes, quasiment tous les dveloppeurs web qui utilisaient les
styles CSS ont cru une corrlation intentionnelle entre les attributs et les
slecteurs. Ils taient persuads que class et id avaient t invents pour
tre utiliss avec les feuilles de styles. Les blmer serait injuste, car la norme
CSS Level 1 n'ofrait pas beaucoup de mcanismes pour slectionner un
lment; il semblait opportun de considrer les slecteurs class (par exemple,
ul.menu) et id (par exemple, div#content) comme ayant t conus (avec leurs
attributs respectifs) pour appliquer les styles de faon globale pour class et
locale pour id
7
.
Heureusement, nous savons dornavant comment les attributs class et id
doivent tre utiliss. L'attribut class a t cr spcialement pour rpondre
5. Le HTML 3.0 constituait une spcifcation ambitieuse en apportant de nombreux
nouveaux attributs et balises, dont la plupart ont t abandonns au moment o la norme
est arrive maturit avec la version HTML 3.2. Mais les deux attributs class et id
ont survcu ce grand mnage. Il est amusant de constater que certaines des construc-
tions proposes l'origine dans le HTML3.0 ont refait leur apparition dans le monde
du HTML, soit ofciellement dans la version HTML5, soit ofcieusement en tant que
microformats.
6. Il n'est pas inutile de remarquer que class et id ont fait une brve apparition ds la
spcifcation HTML 2 (http://www.ietf.org/rfc/rfc1866.txt), mais sans avoir t
formellement dfnis comme attributs. Ils servaient faire la preuve du mcanisme de
tolrance l' inconnu dont devaient tre capables les navigateurs en ignorant les attributs
qu' ils ne reconnaissaient pas.
7. Le document de travail HTML3 autorisait cette utilisation, parmi d'autres. Il est dispo-
nible l'adresse http://www.w3.org/MarkUp/html3/html3.txt.
ADAPWEB.indb 22 17/04/13 12:47
au faible nombre d'lments disponibles dans le lexique de mots rservs du
HTML:
Le temps passant, les attentes des personnes voluent et le langage HTML
sera de plus en plus sollicit. Un des indices de cette tendance est la pression
ressentie pour introduire toujours plus de balises. Le HTML3.0 introduit
une technique pour crer des sous-classes d'lments de faon ouverte.
Elle permet de difrencier le rle d'un lment de type paragraphe en tant
que couplet d'un quatrain, ou de dnoter un terme mathmatique en tant
que tenseur. Cette possibilit de crer des distinctions la vole permet
de grer des styles de rendu spcifques ou d'envisager des mcanismes
de recherche plus fns, sans pour autant compliquer le format gnral des
documents HTML
8
.
Le but de cet attribut est de lui faire englober une liste de sous-classes pour
l'lment auquel elles sont appliques, les classes tant listes de la plus
gnrale la plus spcialise
9
:
<a href="..." title="...">
<img class="illustration map" src="..." alt="..."/>
</a>
Dans la spcifcation, l'attribut id a t dfni pour identifer un lment
individuel dans une page (et c'est pourquoi chaque lment id doit tre
unique dans la mme page). Dans la pratique, cet identifant a t utilis
comme point de rfrence pour une rgle de style (#details { ... }), pour
un script (document.getElementById('details')) et pour un ancrage (<a
href="#details">). Vous vous souvenez que nous avons utilis cet ancrage
pour la navigation plus haut dans ce mme chapitre.
Toutes les informations relatives un vnement (un stage) Retreats 4 Geeks
sont runies dans la mme page. J'ai donc distribu les contenus dans plusieurs
lments article
10
ayant chacun son identifant id unique. L' lment article
8. Tir de la section "Scalability" de l'avant-projet de norme HTML3 (voir la note7).
9. Cette description est visible dans le projet HTML3, chaque fois que class est dfni
pour un lment.
10. Sans vouloir entraner une quelconque confusion, ajoutons que le HTML5 a aussi introduit
l'lment section (que nous utiliserons un peu plus loin). En langage HTML5, cet lment
dsigne une section de contenu (vous l'aviez devin ?). Du point de vue de la structure
globale, j'aurais pu dclarer la page en tant qu'article, en faisant de chaque sous-article une
section. J'ai pourtant choisi de dfnir plusieurs articles, car chaque section me semblait assez
ADAPWEB.indb 23 17/04/13 12:47
est apparu dans HTML5 pour contrler du contenu constituant une partie
autonome du document: un article de journal, un message de blog ou, comme
dans notre exemple, un aspect distinct d'un sujet. Chacun des articles de la
page est alors cibl par les liens de navigation en utilisant comme rfrence
d'ancrage son identifant id. Lorsque le visiteur clique sur un lien, cela le
mne directement au contenu associ:
<body>
<header>
<h1><img src="/2010/retreat-js/i/logo.png"
alt="Retreats 4 Geeks"/></h1>
<nav>
<ol>
<li><a href="#details" title="Find out what
this retreat is all about">Details</a></li>
<li><a href="#schedule" title="Get familiar
with what this retreat will cover">Schedule
</a></li>
...
</ol>
</nav>
</header>
<div id="content">
<article id="details">...</article>
<article id="schedule">...</article>
...
</div>
</body>
Les deux attributs class et id permettent l'auteur de concevoir sa propre
smantique en complment de celle dfnie dans la spcifcation. L'ensemble
indpendante des autres pour pouvoir ventuellement faire l'objet d'une page distincte.
La difrence smantique entre ces deux approches n'est normalement pas signifcative et
dpend d'abord des prfrences de l'auteur de la page.
ADAPWEB.indb 24 17/04/13 12:47
qui en rsulte enrichit le marquage en signifcation. Le temps aidant, cela
aboutit un ensemble de classifcations et d'identifants partags par toute
la plante (par exemple, div#header et ul#nav). Ce jeu de classifcations et
d'identifants partags a son tour aliment l'volution du langage HTML (par
exemple avec les ajouts tels que les lments header et nav du HTML5, vus
plus haut) et suscit l'apparition d'une srie d'extensions au HTML conues
de faon collaborative et connues sous le nom de "microformats".
CONVENTIONS CODIFIES
Les microformats sont des spcifcations non ofcielles produites de faon
collaborative pour dfnir les modalits de marquage de contenus de sorte
exprimer des lments de smantique (et des mtadonnes) au-del de ce
qui est possible avec la norme HTML (ou XHTML). Par essence, un micro-
format formalise des conventions de codage. Ces conventions sont le fruit
des rponses trouves sur le terrain pour constituer une spcifcation visant
combler un manque ou une limitation de la norme HTML. Par exemple, le
HTML ne proposant aucune solution robuste pour marquer de faon prcise
des donnes de contacts professionnels ou d'vnements, la communaut a cr
des microformats pour rpondre ces besoins spcifques mais trs courants.
Le premier microformat a t suscit par le besoin d'exprimer des associations
entre des individus prsents sur le Web. Il a t baptis XHTML Friends
Network (abrg "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 smantique du HTML dans un domaine clairement dlimit.
XFN a t conu 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' lment link pour rfrencer une feuille de styles externe
(rel="stylesheet"). Il permet donc de dclarer une relation entre la cible
d'un ancrage et la page actuelle. L' ide de XFN tait simple: si j'ai besoin
de grer un lien entre mon blog et celui d'un collgue, j'ajoute dans l'esprit
XFN un attribut rel="collegue" mon lien. Pour faire un lien avec le blog
ADAPWEB.indb 25 17/04/13 12:47
de mon pouse, je spcife rel="amie coloc epouse muse amour soutien"
parce qu'elle reprsente toutes ces qualits pour moi
11
.
Vu ainsi, cet attribut se limite fournir un complment d' informations
concernant une relation et des dtails 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 collgues font de mme, nous obtenons au fnal un
vritable rseau de liens dans lequel nous pouvons naviguer par programme,
ce qui cre une foule de nouvelles opportunits d'extraction et de rutilisation
de donnes.
C'est d'ailleurs exactement ce qui s'est produit: le XFN s'est rpandu comme
une trane de poudre. Les concepteurs de logiciels ont ajout ce microformat
dans leurs outils de cration de blog (par exemple, WordPress, Movable Type)
et les crateurs des sites de Web social (par exemple, Twitter, Flickr, Last.fm)
ont commenc ajouter aux pages des profls d'utilisateurs une section spciale
rel="me" (regroupant les liens vers d'autres sites web). Cela a permis l'appa-
rition d'outils comme Social Graph de Google pour constituer rapidement un
profl complet d'utilisateur en partant d'une seule adresse URL
12
.
Nous fournissons un exemple d'utilisation du microformat XFN dans le pied
de page footer de notre page Retreats 4 Geeks
13
:
<footer>

<p id="copyright">©2010 Retreats 4 Geeks. All Rights
Res.</p>
<p>Retreats 4 Geeks is an
<a rel="me" href="http://easy-designs.net/">
Easy! Designs
</a> venture.</p>
</footer>
11. Waouuuuuuuuu!
12. Pour en savoir plus sur l'API Social Graph, voyez la page http://code.google.com/apis/
socialgraph/. Glenn Jones s'est servi de cette interface API dans sa superbe librairie
JavaScript nomme Ident Engine (http://identengine.com/). Il l'a prsente dans le livre
A List Apart (http://www.alistapart.com/articles/discovering-magic/).
13. L' lment footer est une autre nouveaut de la spcifcation HTML5 prvue pour
englober des "mta"-informations pour un article, une section ou une page entire: nom
de l'auteur, droits intellectuels, etc.
ADAPWEB.indb 26 17/04/13 12:47
Aprs avoir ainsi commenc de faon trs simple (mais puissante), les micro-
formats se sont multiplis pour rpondre de nombreux besoins trs varis:
gestion des informations du profl d'un individu (hCard), gestion de listes
d'vnements (hCalendar), syndication de contenus (hAtom), gestion de CV
(hResume), gestion de donnes de licences d'utilisation (rel-license), protection
contre les robots scruteurs (spiders) des moteurs de recherche (rel-nofollow) et
aide au marquage (rel-tag)
14
.
Pour accompagner le dveloppement 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
dots de microformats avant les autres. Les extensions de navigateurs telles
qu' Operator
15
et Oomph
16
permettent l'utilisateur d'extraire et de rutiliser
les contenus des microformats. Vous disposez en outre d'analyseurs de micro-
formats pour quasiment tous les langages de programmation et des services
bass Web tels qu'Optimus
17
ou H2VX
18
, qui assurent un accs direct aux
contenus des microformats des sites.
Vous constatez que les microformats constituent une phase supplmentaire
dans la progression continue vers l'amlioration progressive. Ils nous permettent
de rendre nos sites web encore plus utiles nos visiteurs. Ne trouvez-vous pas
vraiment intressant de pouvoir, l'aide d'un outil tel qu'Operator ou d'un
service tel qu'Optimus, permettre nos utilisateurs d'importer un vnement
dans leur agenda ou nos coordonnes dans leur carnet d'adresses directement
depuis notre page web? Personnellement, je trouve cela formidable.
Appelle-moi quand tu veux !
Puisque notre site web de dmonstration se consacre un vnement (un
stage de formation), nous pouvons commencer par adopter le microformat
hCalendar. Mais voyons d'abord comment appliquer ce format hCard mon
lment section dans l'lment article "Instructors". Passons en revue les
principales classes dfnies 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/
ADAPWEB.indb 27 17/04/13 12:47
CLASSE DESCRIPTION
vcard Indique l'utilisation du microformat hCard. (Cette classe doit tre la
classe de l'lment racine du contenu hCard.)
fn Abrviation de Formatted Name. Sert englober le nom du propri-
taire des donnes hCard.
url Indique qu'un lien guide l'utilisateur vers une page web dcrivant la
personne concerne.
photo Dnote une photographie de la personne.
org Identife l'entreprise ou l'organisation laquelle appartient la
personne.
role Identife la fonction de la personne dans l'entreprise/organisation.
Tableau 2.1 :Classes principales du microformat hCard.
Le microformat hCard compte bien d'autres options de description du profl
d'un individu. Celles indiques dans le tableau sufsent nos besoins dans le
contexte de la page d'exemple Retreats 4 Geeks. Parmi ces cinq classes, seules
vcard et fn sont obligatoires.
Dcouvrons d'abord le contenu sur lequel nous allons travailler:
<section id="aaron-gustafson">

<figure>
<img src="i/aaron-gustafson.jpg" alt=""/>
</figure>
<h1>Aaron Gustafson</h1>
<p>Aaron has been working on the web for nearly
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
<a rel="external" href="http://easy-designs.net">Easy! Designs</a>,
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.
</p>
ADAPWEB.indb 28 17/04/13 12:47

<p>Aaron has trained professionals at
<cite>The New York Times</cite>, 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 Directions. He is Group Manager of the
<a rel="external" href="http://webstandards.org">
Web Standards Project (WaSP)</a> and
serves as an Invited Expert to the World Wide Web
Consortium's
<a rel="external" href="http://www.w3.org/2005/Incubator/owea/">
Open Web Education Alliance (OWEA)</a>.
He created
<a rel="external" href="http://ecsstender.org">eCSStender</a>,
serves as Technical Editor for
<a rel="external" href="http://alistapart.com">
<cite>A List Apart</cite></a>,
is a contributing writer for
<a rel="external" href="http://netmag.co.uk">
<cite>.net Magazine</cite></a>, and has filled a small
library with his technical writing and editing
credits. His next book,
<cite>Adaptive Web Design: Crafting Rich Experiences with
Progressive Enhancement</cite>,
is due out in early 2011.
</p>

</section>
Vous constatez que l'lment section comprend un lment de titre h1. Ne
vous en inquitez 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 aprs tout trs logique et cela permet bien de pallier le faible nombre de
niveaux de sous-titres
19
.
Si vous avez bien tudi cet extrait, vous savez dj quel endroit doit tre
place chacune des classes de hCard. Je vais nanmoins les traiter une une,
19. http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.
html#sectioning-content
ADAPWEB.indb 29 17/04/13 12:47
commencer par la plus simple, "vcard". Cette classifcation doit correspondre
l'lment conteneur global, qui est ici l'lment section:
<section id="aaron-gustafson" class="vcard">
La classe suivante est celle qui va englober mon nom, donc "fn". Du fait que
mon nom est dj indiqu comme contenu de l'lment de titre h1, nous
qualifons ce titre par la classe "fn" pour indiquer que le texte de l'lment
correspond mon nom.
<h1 class="fn">Aaron Gustafson</h1>
Passons ensuite la classe de l'adresse "url" menant la page "Easy! Designs"
qui est un site web dont je dtiens le contrle:
... <a class="url" rel="external" href="http://easy-designs.
net">Easy! Designs</a>, ...
En descendant, nous pouvons ensuite ajouter la classe "photo" ma photo, qui
se trouve dans un lment figure, lment qui a t introduit dans HTML5
pour hberger un contenu non fractionnable, tel qu'une image ou un dessin
avec un titre en option (figcaption). Cet lment doit pouvoir tre supprim
du document sans en altrer le sens:
<figure>
<img class="photo" src="i/aaron-gustafson.jpg" alt=""/>
</figure>
Il nous reste insrer les deux classes "org" et "role" dans le dernier paragraphe
de ma biographie, mais un problme se pose. Plusieurs entreprises et organi-
sations sont cites. Laquelle choisir? Et peut-on en mentionner plusieurs?
Rien dans le microformat hCard n'interdit de dsigner plusieurs entits et
plusieurs fonctions dans la mme fche hCard, mais en pratique rares sont
les analyseurs de microformats qui vont chercher plus loin que la premire
occurrence rencontre. En efet, les logiciels de gestion de carnet d'adresses
ne savent souvent pas grer plusieurs employeurs et plusieurs fonctions pour la
mme personne. Pour simplifer, nous allons associer ces classes ma premire
fonction, celle de chef de groupe du projet des standards web (Group Manager/
Web Standards Project).
La classe "org" est facile implanter, car la donne "Web Standards Project"
est dj dans un lment. En revanche, ma fonction est indique dans un
texte plus long sans tre marque par un lment spcifque. Pour ne cerner
ADAPWEB.indb 30 17/04/13 12:47
que mon premier rle avec cette classe, nous allons ajouter un lment sans
signifcation smantique comme b
20
:
... He is <b class="role">Group Manager</b> of the <a class="org"
href="http://webstandards.org">Web Standards Project (WaSP)</a>
...
Si nous regardons maintenant le rsultat global, vous pouvez constater que les
amnagements lis au microformat hCard sont en fait assez limits:
<section id="aaron-gustafson" class="vcard">

<figure>
<img class="photo" src="/events/2011/html5-
css3/i/aaron-gustafson.jpg" alt=""/>
</figure>
<h1 class="fn">Aaron Gustafson</h1>

<p>... Aaron and his wife, Kelly, own <a class="url"
rel="external" href="http://easy-designs.
net">Easy! Designs</a> ...</p>

<p>... He is <b class="role">Group Manager</b> of the
<a class="org" rel="external" href="http://
webstandards.org">Web Standards Project
(WaSP)</a> ...</p>

</section>
Pourtant, ces quelques ajouts permettent dornavant de faire produire assez
aisment un profl de ma personne par un analyseur de microformats.
20. Et pourquoi l' lment b ? Pourquoi pas span ? En HTML5, l' lment b a t remis
l' honneur pour englober une squence de texte devant se dmarquer visuellement du
reste du paragraphe sans pour autant prendre une importance particulire. Rien ne vous
empche d'utiliser l'lment span, mais b est plus appropri et plus bref.
ADAPWEB.indb 31 17/04/13 12:47
Figure 2.3 : Informations de profl extraites d'une page web avec l'outil
Operator.
Un grand intrt des microformats est que vous avez toute latitude dans la
manire de les utiliser. Les noms de classes ne doivent pas ncessairement
survenir dans un ordre prcis (mais ils doivent tre insrs dans un lment
parent de la classe approprie) et leur contenu ne doit pas obligatoirement
correspondre un format d'exportation prdfni. Comme notre exemple
le montre, le microformat hCard ne doit pas mme tre marqu dans une
mme partie comme une entre d'annuaire; vous pouvez en distribuer les
ADAPWEB.indb 32 17/04/13 12:47
composants dans votre prose la seule condition d'employer les noms class
appropris pour dsigner vos classes.
Notez-le sur vos tablettes !
Une fois les donnes pour hCard gres, nous pouvons passer au microformat
hCalendar prsent plus haut. Avant de procder au marquage, dcouvrons
quelques classes de hCalendar parmi les plus usites.
CLASSE DESCRIPTION
vevent Indique l'utilisation du microformat hCalendar pour un v-
nement. (Cette classe doit tre la classe de l'lment racine du
contenu hCalendar.)
dtstart Dsigne la date de dbut de l'vnement.
dtend Dsigne la date de fn de l'vnement.
summary Dsigne le nom de l'vnement.
location Dsigne le lieu de droulement de l'vnement.
description Fournit des dtails sur l'vnement.
Tableau 2.2 : Classes principales du microformat hCalendar.
Puisque toute la page d'exemple est ddie l'annonce d'un vnement, notre
processus d' injection de classes doit commencer plus haut dans l'arbores-
cence 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 lment ancestral, nous disposons de toute la souplesse
pour ajouter d'autres proprits hCalendar dans d'autres lments article:
<div id="content" class="vevent">
J'ai mentionn que le premier lment (article#details) devait contenir les
principales donnes de l'vnement. Commenons par revoir le code source
dans son tat avant application des classes de hCalendar:
<article id="details">

<header>
<h1>Join us for HTML5 & CSS3</h1>

ADAPWEB.indb 33 17/04/13 12:47
<p>8–10 April 2011</p>

<p>Gatlinburg, <abbr title="Tennessee">TN</abbr></p>

</header>
<figure>
<img src="i/mountains.jpg" alt=""/>
</figure>

<section class="main">

</section>
</article>
Ce rapide survol a sans doute suf pour reprer les points d'injection de la
plupart des classes hCalendar. Nous pouvons sur le champ insrer la balise
pour le nom de l'vnement, c'est--dire le sommaire "summary" en dialecte
hCalendar:
<h1>Join us for <b class="summary">HTML5 & CSS3</b></h1>
Si nous progressons dans le code source, nous arrivons la plage de dates
"8-10 April 2011". De faon traditionnelle, nous aurions utilis des lments
d'abrviation (abbr) pour marquer ces donnes, mais le HTML5 a introduit un
lment ddi au marquage d'une donne temporelle qui se nomme time. Le
problme est que pour dnoter une date de dbut et une date de fn, il va falloir
diviser le contenu actuel en deux pour pouvoir dfnir deux lments time.
Mme si cela parat tranger de prime abord, le plus logique consiste englober
le seul chifre "8" dans un premier lment time et la date complte "10 April
2011" dans le second. En efet, nous supposons que ce chifre "8" isol est
comprendre comme le "8 avril 2011" sous forme abrge (c'est pourquoi
l'lment abbr tait appropri auparavant). L' lment time permet de grer les
dates plus fnement avec son attribut datetime. C'est ainsi que j'ai reformul
la date de dbut en entier:
<p>
<time datetime="2011-04-08">8</time>–
<time datetime="2011-04-10">10 April 2011</time>
</p>
ADAPWEB.indb 34 17/04/13 12:47
Les seules classes obligatoires dans hCalendar sont "summary" et la date de
dbut. Il sufrait donc d'appliquer la classe "dtstart" au premier lment time
pour que le microformat soit valide. Mais puisque nous disposons d'une date
de fn, dfnissons cette autre classe dans la foule
21
:
<p>
<time class="dtstart" datetime="2011-04-08">8</time>–
<time class="dtend" datetime="2011-04-10">10 April 2011</time>
</p>
Avanons un peu dans le contenu. Nous pouvons facilement coder le lieu de
l'vnement avec "location" puisque le stage se droule Gatlinburg, TN:
<p class="location">Gatlinburg,
<abbr title="Tennessee">TN</abbr>
</p>
Le dernier morceau de notre puzzle hCalendar correspond la "description".
Le meilleur candidat pour le contenu de cet lment est la section principale
"main" de l'article:
<section class="main description">

</section>
Et voil tout. Une fois les lments du microformat en place, l'utilisateur peut
trs facilement extraire l'vnement et l'injecter dans son agenda.
21. Au moment o nous mettons sous presse, certains analyseurs de microformats ont des
soucis avec les nouveaux lments 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'lment time ou
d'utiliser un lment title sur un lment abbr.
ADAPWEB.indb 35 17/04/13 12:47
Figure 2.4 : Informations extraites de ce code source avec l'outil Operator.
Ce second exemple pratique de microformat montre comment vous pouvez
directement enrichir un marquage dj signifcatif afn d'amliorer le service
ofert l'utilisateur. De l'amlioration progressive bien comprise!
ADAPWEB.indb 36 17/04/13 12:47
RIEN DE TEL QUE DE BONNES BASES
Le concept d'amlioration progressive est souvent prsent en relation avec
le CSS et le JavaScript, mais il concerne tout autant le marquage HTML.
Comme ce chapitre l'a montr, chaque fois que nous avons ajout un lment
signifcatif, nous avons augment la pertinence de la page en renforant son
accessibilit et en la rendant plus facile trouver par les utilisateurs grce
son meilleur statut dans les recherches organiques. Nous avons galement
vu comment la classifcation et l'identifcation pouvaient rendre le langage
HTML encore plus expressif. Enfn, avec les microformats, nous avons vu
qu'en choisissant des noms, nous augmentions la densit smantique et la
praticit du contenu ainsi marqu.
Le marquage smantique est une tape essentielle dans l'approche d'am-
lioration progressive ; combin des contenus bien forms, il constitue la
fondation sur laquelle se construisent les lments d'une exprience utilisateur
de qualit.
ADAPWEB.indb 37 17/04/13 12:47
"Le design est l'esprit mme
d'une cration humaine qui
s'exprime dans chacune
des couches successives qui
habillent le produit ou le
service."
STEVE JOBS
ADAPWEB.indb 38 17/04/13 12:47
CHAPI TRE 3
AMLIORATION
PROGRESSIVE
AVEC LE CSS
Si l'on met de ct les quelques sites endormis qui se fondent encore sur des
lments font et des images GIF d'cartement, le design web est dornavant
mis en forme grce aux styles CSS (Cascading Style Sheets). Bien sr, vous
disposez aussi des techniques fondes sur Flash, SVG et canvas, mais si vous
voulez donner vos contenus les meilleures disponibilit et accessibilit, vous
utilisez le HTML pour marquer le contenu et le CSS pour lui appliquer des
styles visuels.
Comme le HTML, le CSS est ds l'origine prvu pour tre tolrant aux
pannes : un navigateur qui ne comprend pas une rgle de style l'ignore et
poursuit son travail
1 2
. En tenant compte de la faon dont le CSS a volu,
nous pouvons facilement adopter le principe d'amlioration progressive en
tirant proft de cette tolrance pour crer des strates appropries aux capacits
des difrentes gnrations de navigateurs.
1. http://www.w3.org/TR/2009/CR-CSS2-20090908/syndata.html#parsing-errors
2. http://www.w3.org/TR/2009/CR-CSS2-20090908/syndata.html#unsupported-values
ADAPWEB.indb 39 17/04/13 12:47
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 fonction-
nement de CSS, car je pense que cela vous dotera d'une profondeur de vue
utile pour comprendre comment construire des architectures de sites amlio-
ration progressive.
Fondamentalement, le CSS est une collection de jeux de rgles lisibles par
les humains. Chaque rgle est compose d'un slecteur et d'un bloc dclaratif
regroupant une srie de couples proprit-attribut (des dclarations), qui seront
appliqus tout lment correspondant au slecteur.
p {
color: red;
font-weight: bold;
}
L'exemple prcdent est du CSS lmentaire. Toute personne qui a utilis
le CSS (et sans doute mme la plupart de ceux ne l'ayant jamais utilis)
peuvent la simple lecture deviner que cette rgle sert slectionner certains
paragraphes, puis forcer leur texte apparatre en gras et en rouge. Mais si
nous considrons le mme exemple sous l'angle de la tolrance aux pannes,
les choses sont moins simples.
Lorsqu'un navigateur scrute un fchier CSS pour savoir comment afcher une
page, il lit chaque rgle tour tour et tente de l'interprter. S'il lit une rgle
qu'il ne sait pas grer, cela dclenche une erreur d'analyse (parsing error). La
plupart de ces erreurs rsultent d'une mauvaise rdaction de la rgle CSS
(nom de proprit ou valeur mal crite, signe de ponctuation 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 prcdent peut subir une erreur
d'analyse en cinq endroits:
ADAPWEB.indb 40 17/04/13 12:47
CHAPITRE 3 AMLIORATION PROGRESSIVE AVEC LE CSS 41
p {
color: red;
font-weight: bold;
}
1
2 3
4 5
1. Slecteur: p
2. Nom de la premire proprit: color
3. Valeur de la premire proprit: "red"
4. Nom de la deuxime proprit: font-weight
5. Valeur de la deuxime proprit: "bold"
D'aprs la spcification, en cas d'erreur d'analyse de son analyseur, le
navigateur doit ignorer le composant de niveau suprieur de la rgle dans
laquelle s'est produite l'erreur.
En supposant que le navigateur ne sait pas ce que signife le mot cl CSS de
choix de couleur "red", il ignorera la dclaration color: red, mais appliquera
les autres (s'il les comprend). Il en va de mme pour le mot cl de graissage
de font-weight nomm "bold". En revanche, si le navigateur ne comprend
pas le slecteur (p), il ignorera tout le bloc de rgles, mme si les dclarations
individuelles qu'il contient sont de celles qu'il peut interprter.
Le principe, trs simple, est le suivant: personne ne pouvant prdire le futur de
la norme CSS, il est indispensable que les navigateurs ignorent les dclarations
et slecteurs dont ils ne savent que faire. Comme en HTML, cela favorise
l'volution du langage et permet d'appliquer l'amlioration progressive aux
pages web avec les styles CSS.
En ce qui concerne les proprits, exploiter les erreurs d'analyse votre proft
est assez simple et cela vous ouvre quelques possibilits tonnantes. Voici un
petit exemple d'utilisation du schma de couleur RGBa de CSS3:
p {
background-color: rgb(137, 224, 160);
background-color: rgba(180, 246, 248, .43);
}
Un navigateur lisant cette rgle va normalement comprendre le slecteur
(le slecteur de paragraphe courant p est le plus universel de tous), et donc
s'aventurer dans les dtails du bloc pour tomber sur la premire dclaration
ADAPWEB.indb 41 17/04/13 12:47
background-color. Cette proprit de couleur de fond de texte existe dans la
norme CSS depuis la version1; 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 dbut, et le navigateur saura quoi en faire. Puisque
tout s'est bien pass, l'analyseur transmet la rgle au navigateur qui applique
background-color: rgb(137, 224, 160); tous les paragraphes de texte
concerns. L'analyseur attaque ensuite la seconde rgle.
Dans la seconde dclaration, la mme proprit background-color est
redfnie avec une nouvelle valeur (mcanisme de cascade). Nous savons
dj que le navigateur comprend la proprit. Il va donc lire la valeur, qui
utilise la convention de codage RGBa. Si le navigateur la comprend, la valeur
est transmise la proprit background-color en remplacement de la prc-
dente valeur RGB. En revanche, si RGBa n'est pas gr, une erreur d'analyse
survient et le navigateur ignore toute la dclaration. Le texte concern sera
trait avec la valeur RGB pour background-color.
Bien sr, si le navigateur gre la convention RGBa, il remplace la valeur de
background-color en conformit avec le mcanisme de "cascade" (premier C
de l'acronyme CSS). Je vais revenir plus en dtail sur ce mcanisme dans la
suit du chapitre, mais voici sa rgle de base: pour deux proprits quivalentes
(ou identiques) la dernire dfnition prime.
Cette dmonstration simple permet de voir comment on peut utiliser la
nature tolrante du CSS pour incorporer sans crainte des possibilits plus
sophistiques que sauront exploiter les navigateurs les plus capables. Mais ce
mcanisme n'est pas limit au niveau des dclarations. Vous pouvez l'appliquer
pour masquer tout un groupe de jeux de rgles au moyen d'un slecteur plus
slectif:
html[lang] p {
/* Ici vient un bloc de rgles trs modernes */
}
Un navigateur qui rencontre ce jeu de rgles commence par valuer le slecteur.
Si le navigateur sait grer les slecteurs bass attribut (dans l'exemple, nous
dsignons tous les paragraphes qui dpendent d'un lment html possdant un
attribut de langage), il va entrer dans les dtails des rgles pour appliquer les
dclarations qu'il sait grer. Mais si le navigateur ne connat pas les slecteurs
complexes, l'erreur d'analyse fait ignorer tout le jeu de rgles.
ADAPWEB.indb 42 17/04/13 12:47
Un exemple assez fameux d'emploi de cette technique de distribution slective
de rgles selon les capacits du navigateur (plutt titre d'illustration que
pour son efet pratique) est la page du jardin CSS Zen Garden d'Egor Kloos
intitule "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 conu une structure visuelle de base
destine la version 6 d'Internet Explorer et adopt la technique MOSe
3. http://www.csszengarden.com/062/
ADAPWEB.indb 43 17/04/13 12:47
("Mozilla/Opera/Safari enhancement")
4
pour permettre aux navigateurs plus
rcents de fournir un rendu visuel trs difrent.
Kloos s'est servi de quelques slecteurs lmentaires pour la mise en pages
de base et d'autres slecteurs plus complexes pour les styles volus. 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 gre d'abord la premire
rgle pour afcher la partie #intro. Il arrive ensuite la rgle plus volue du
mme #intro. Si le navigateur sait grer les slecteurs attribut (qualifs),
le rendu de #intro va tre radicalement chang. Dans le cas contraire, il ne
change pas.
Ce fltrage fond sur les slecteurs constitue une technique intressante, mais
perturbe les auteurs de code CSS qui oublient que l'chec d'un tel slecteur
composite (au moins deux instructions de slection spares par des virgules)
est total: tout le bloc de rgles est ignor:
4. Dave Shea, le mainteneur actuel du site CSS Zen Garden, avait introduit l'expression
en 2003, mais l'arrive d'Internet Explorer7, il est tomb dans l'oubli parce que cette
nouvelle version ne soufrait pas des limitations de IE6 au niveau des slecteurs. Le texte
original est disponible l'adresse http://www.mezzoblue.com/archives/2003/06/25/mose/.
ADAPWEB.indb 44 17/04/13 12:47
p,
p:not([title]) {
color: red;
font-style: bold;
}
Dans l'extrait prcdent, nous retrouvons les cinq causes d'erreur possibles vues
plus haut, et une cause de plus dans le deuxime slecteur (p:not([title])).
Un navigateur qui ne comprend qu'un des deux slecteurs (le p est universel)
va ignorer la totalit du jeu de rgles et non seulement la variante qui cible les
seuls paragraphes de texte ne possdant pas l'attribut title.
Vous pourrez trouver ce choix illogique, mais c'est exactement ainsi que la
norme CSS2.1 demande de procder: "Toute l'instruction doit tre ignore
en cas d'erreur n' importe o dans le slecteur, quand bien mme la suite
du slecteur semblerait exploitable"
5
. Lorsque vous savez cela, vous pouvez
prendre de meilleures dcisions pour combiner les slecteurs. Une rgle globale
consiste ne pas combiner des slecteurs complexes avec des slecteurs simples
(ce qui a t fait dans le prcdent exemple), sauf si vous voulez que tous les
jeux de rgles ainsi dlimits deviennent inaccessibles aux anciens navigateurs.
Nous reviendrons dans quelques paragraphes cette technique, mais aprs
ce bref dtour du ct de la spcifcit.
Le concept de spcifcit est un autre concept majeur de CSS. Il dtermine
le nombre d'lments pouvant tre slectionns par le mme slecteur. C'est
la seule technique qui permette d'outrepasser le mcanisme de cascade (nous
y revenons). Certains slecteurs sont plus slectifs que d'autres: un slecteur
d'identifant comme #intro est dix fois plus spcifque qu'un slecteur de classe
comme vcard, lui-mme plus prcis qu'un slecteur d'lment commep)
6
.
L' valuation de la spcifcit d'un slecteur est la somme des spcifcits de
tous ses composants. Une rgle dpendant d'un slecteur spcifque aura
toujours priorit sur une rgle lie un slecteur plus large, quel que soit
leur ordre d'apparition dans la cascade. Nous l'avons vu avec le slecteur
d'attribut trs fut du site d'Egor Kloos: la rgle la moins spcifque apparat
en dernier dans le fchier CSS, mais sa priorit reste infrieure la premire,
qui est donc celle applique.
5. http://www.w3.org/TR/2009/CR-CSS2-20090908/syndata.html#rule-sets
6. Pour en savoir plus sur l'valuation du niveau de spcifcit, vous pouvez consulter l'article
d'Andy Clarke "CSS Specifcity Wars" (http://www.stuffandnonsense.co.uk/archives/
css_specificity_wars.html).
ADAPWEB.indb 45 17/04/13 12:47
Il faut du temps pour bien matriser ce concept de spcifcit des slecteurs.
Prvoyez quelques maux de tte si vous dcidez d'appliquer tous vos styles
en relation avec des slecteurs trs pointus (avec un slecteur identifant
pour chaque style). En efet, vous serez parfois forc de dfnir des slecteurs
encore plus spcifques, combinant deux identifants. Pour vous pargner de
dclencher une course la spcifcit, je vous conseille de vous retenir de
rendre vos slecteurs trop spcifques sans raison imprieuse.
Revenons au code d'Egor Kloos. Appliquons ce que nous venons d'apprendre
au niveau des erreurs d'analyse dans les slecteurs combins; l'objectif sera
de rduire la spcifcit des jeux de rgles sophistiques d'Egor sans perdre
l'esprit de son travail:
#intro {
/* Ancienne prsentation */
}
/* ... */
[foo], #intro {
/* Nouvelle prsentation volue */
}
Dans cette reformulation, j'ai modif le second jeu de rgles en indiquant un
slecteur combin qui cible un lment possdant un attribut nomm foo et un
autre avec un identifant nomm intro. L'astuce est que le premier slecteur
(celui attribut) est un leurre. Le nom d'attribut foo est non seulement non
standard, mais il n'est utilis nulle part dans le code HTML de la page CSS
Zen Garden. L'ajout de ce slecteur a pour seul efet de rendre le jeu de rgles
invisible tous les navigateurs qui ne savent pas grer les slecteurs attributs.
Le point le plus important est que cette redfnition ne modife en rien l'impact
du slecteur #intro: sa spcifcit est la mme qu'auparavant, ce qui garantit
que le mcanisme de cascade continue dterminer l'application des styles.
Cette technique volue n'est sans doute pas celle que vous allez adopter
systmatiquement en CSS, mais il sera utile de vous en souvenir lorsque
vous voudrez fltrer des jeux de rgles sans altrer la spcifcit d'un slecteur.
En termes de maintenance, cette technique est dconseille pour plus d'une
rgle de temps autre. Il existe d'autres mthodes pour efectuer du fltrage
en masse, et nous les dcouvrirons bientt.
ADAPWEB.indb 46 17/04/13 12:47
DIVISER POUR BIEN RGNER
Le mcanisme de "cascade" est un concept stratgique de CSS, nous l'avons
dit comme nous avons dj prcis que ce livre n'ofrait pas de place pour
un rappel exhaustif du concept de cascade. Cependant, un point peut vous
permettre de devenir rapidement un expert en amlioration progressive :
l'ordre.
L'ordre compte, beaucoup.
Toutes choses gales par ailleurs en termes de spcifcit, le rsultat d'une
rgle CSS dpend de la proximit entre la dclaration de style et son lment
cible. Nous avions vu ce point dans l'exemple qui ralisait deux afectations
de couleur de fond background-color. Il en va de mme au niveau suprieur
de deux jeux de rgles:
h1 {
font-size: 2em;
}
h1 {
font-size: 3em;
}
Cet exemple va afecter une valeur de 3em la proprit font-size de tous
les lments h1. Ce cas d'cole dfnissant un second jeu de rgles avec le
mme slecteur juste aprs le premier ne se rencontrera pas souvent, mais
quelque chose du mme genre est moins rare. Prenons comme exemple les
images de l'lment article relatif l'hbergement (nomm "Lodging") du site
de dmonstration Retreats 4 Geeks:
ADAPWEB.indb 47 17/04/13 12:47
Figure 3.2 : Rendu de l'article Lodging.
Voici le code source HTML de cet article:
<article id="lodging">

<header>
<h1>Where You’ll Stay</h1>
</header>

<figure class="frame focal">
<img class="inner" src="i/lodge.jpg"
alt="" title="..."/>
</figure>

<section class="main">

</section>

<aside class="extra">
<ul class="gallery">
<li>
<figure class="frame">
<img class="inner" src="i/room.jpg"
alt="" title="..."/>
ADAPWEB.indb 48 17/04/13 12:47
</figure>
</li>

</ul>
</aside>

</article>
Vous remarquez que cet lment article dfnit la mme valeur "frame" de
class pour chaque lment figure pour garantir la cohrence dans l'aspect
des contours d'image. L' image principale a reu un complment de valeur
s'crivant "focal". Cela permet d'appliquer deux rgles CSS difrentes de
mme spcifcit afn d'afecter les styles appropris figure.focal. Voici un
exemple de dfnition de rgles avec une redfnition:
.frame {
margin: 0 auto 40px;
}
.focal {
margin: 0 20px 25px 30px;
}
Ces deux jeux de rgles s'appliquent l'lment figure de l'image principale
de cet lment article (et de tous les autres lments de mme nom de la
page). Les deux slecteurs ont la mme spcifcit, mais puisque le second jeu
redfnit la proprit du premier, la valeur de la proprit margin de l'image
principale (celle slectionne 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 rgles. Il devient alors facile de se faire piger par les efets de la
proximit. Pour nous en prmunir, nous pouvons adopter une approche par
couches dans la conception CSS.
Si nous revenons un peu en arrire, 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
rsultat fnal. Pour ce qui concerne l'amlioration progressive en relation avec
le CSS, nous pouvons adopter la mme rpartition en plusieurs niveaux de
support bien distincts, en correspondance avec les capacits des navigateurs:
la typographie, puis la typographie avec des couleurs, et enfn, la typographie
avec des couleurs et une mise en page sophistique.
ADAPWEB.indb 49 17/04/13 12:47
Nous avons dit que l'ordre d'apparition des rgles a son importance. Pour
concevoir de faon progressive, nous devons confronter notre dsir de
distribuer les niveaux de conception la logique de l'interprtation en cascade
de nos rgles. D'un point de vue pratique, cela suppose d'dicter les groupes de
dclarations d'un mme niveau dans un ordre dfni: d'abord la typographie,
puis la mise en page et enfn les couleurs. Pourquoi dans cet ordre? Nous y
reviendrons trs bientt.
Vous pouvez dfnir ces jeux de rgles dans des fchiers de feuilles de styles
difrents (imports ou lis) ou dans un seul gros fchier
7
. L'approche multi-
fchiers est facile grer et logique, mais elle a un cot en performances: il
faut rapatrier chaque feuille de styles dans une requte HTTP distincte. De
plus, certains navigateurs ne savent pas garder en cache local plus d'un niveau
de feuille de styles dans le sens descendant (celui d'une feuille importe dans
une autre). C'est la raison pour laquelle je trouve l'approche mono-fchier plus
sense; c'est celle adopte pour le site de dmonstration Retreats 4 Geeks.
Illustrons cette approche par niveaux de dfnition des styles en commenant
par la situation la plus simple: sans aucun style. La Figure3.3 montre l'aspect
de la section sur l'hbergement (lodging) dans Safari. Seuls les styles par dfaut
du navigateur sont appliqus.
7. Opter pour un fchier de feuilles de styles unique ne vous empche pas de rpartir les
rgles dans plusieurs fchiers CSS. Il existe plusieurs outils du ct serveur pour combiner
des fchiers CSS en un seul. Vous proftez ainsi des deux avantages: vous importez les
fchiers de dtails de style dans un fchier squelette destin les accueillir, fchier que
vous transmettez aux clients lors de leurs requtes. Vous trouverez un exemple l'adresse
http://www.easy-reader.net/archives/2010/07/11/template-based-asset-munging-in-
expressionengine.
ADAPWEB.indb 50 17/04/13 12:47
Figure 3.3 : "Lodging" sans CSS.
Vous constatez que le contenu est tout fait utilisable avec ces styles implicites.
L'apparence n'est pas sophistique, mais tout le contenu est lisible. En ajoutant
un niveau de rgles typographiques, nous arrivons l'aspect de la Figure3.4.
ADAPWEB.indb 51 17/04/13 12:47
Figure 3.4 : "Lodging" agrment de styles typographiques.
L'amlioration est limite, mais pas ngligeable. Les navigateurs qui ont des
soucis dans le rendu des styles de mise en page CSS disposent ainsi d'un
niveau intermdiaire, ce qui est plus agrable pour les utilisateurs de ces
navigateurs que les forcer de subir les inconvnients d'une tentative de rendu
incomplte.
Le niveau suivant de support des styles est celui de la couleur. C'est celui qui
est en gnral accessible aux navigateurs en mme temps que la typographie
de base (dans certains cas, cela va jusqu'aux images de fond). La Figure3.5
montre la mme page web avec les lgers enrichissements apports par la mise
en couleur du mme article.
ADAPWEB.indb 52 17/04/13 12:47
Figure 3.5 : "Lodging" agrment de couleurs.
Nous sommes clairement dans un processus d'amlioration progressive.
Le dernier niveau d'application de styles qui nous intresse ici est celui du
contrle global de la disposition des lments sur la page. Son rsultat a t
montr quelques pages plus haut dans la Figure3.2.
J'ai dit que tous ces niveaux seront dfnis dans le mme fchier 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;
}
}
ADAPWEB.indb 53 17/04/13 12:47
/* =Couleurs */
.frame .inner {
background-color: rgb(227, 222, 215);
border-color: rgb(227, 222, 215);
}
Vous avez certainement not la prsence du bloc @media qui englobe les rgles
de style pour afchage sur cran. Cet lment n'est pas prsent fortuitement:
il garantit que tous les clients profteront des jeux de rgles concernant la
typographie et les couleurs en isolant celles de l'afchage aux seuls navigateurs
qui savent grer le type de mdia "screen". Le mme principe est facilement
extensible aux impressions ou tout autre mdia, mais nous verrons cela
plus loin.
L' lment @media a un autre avantage : les navigateurs vraiment anciens
(par exemple, Netscape4) ne le comprenant pas, ils ignorent ce bloc et nos
styles de mise en page leur restent invisibles. Ces navigateurs proftent donc
sans perturbation des rgles de typographie et mme, pour la plupart d'entre
eux, de celles des couleurs.
Revenons une question laisse en suspens: pourquoi ai-je relgu les rgles
de couleurs en dernier? Mon raisonnement est simple. J'adore les raccourcis
CSS qui permettent de combiner plusieurs rgles en une seule. Nous en
avons rencontr une plus haut: border: 10px solid. Cette criture abrge
quivaut aux quatre lignes suivantes:
border-top: 10px solid;
border-right: 10px solid;
border-bottom: 10px solid;
border-left: 10px solid;
Ce n'est pas tout. Chacune des ces dclarations est elle-mme 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 rduisent fortement la complexit des
feuilles de styles CSS.
Supposons que dans le prcdent exemple, les jeux de rgles pour les couleurs
aient t placs avant celles de mise en page. L'attribut border-color aurait
reu la valeur gris clair, mais le raccourci border qui arrive aprs dans les
ADAPWEB.indb 54 17/04/13 12:47
rgles de mise en page aurait annul la valeur de border-color, parce que
la spcifcit du jeu de rgles est la mme et que border redfnit toujours
border-color, mme de faon implicite (la valeur par dfaut est "inherit", ce
qui entrane la rutilisation de la couleur en vigueur pour le texte). Voici
pourquoi je conseille de placer les rgles de couleurs en dernier. Les raccourcis
CSS sont trs pratiques. Ils allgent l'criture des jeux de rgles et rduisent
la longueur du fchier, mais vous devez bien contrler l'ordre dans lequel vous
les faites appliquer.
Puisque nous en sommes aux couleurs, j'en profte pour ajouter que dans
certains cas, vous voudrez utiliser la couleur dans un contexte spcifque
la mise en page (par exemple pour une couleur de fond). Dans ce cas, il peut
tre intressant d'isoler une sous-section de vos rgles avec @media, comme
nous l'avons fait pour tout le bloc de mise en page:
/* =Couleur */
.frame .inner {
/* Couleurs pour tous les mdias */
}
@media screen {
.frame .inner {
/* Couleurs spcifiques aux crans */
}
}
En partant des bases saines de notre infrastructure stratife, il devient trs
simple d'ajouter des modules en fonction des besoins. Voici des exemples
d'efets (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: .5s;
}
}
ADAPWEB.indb 55 17/04/13 12:47
Vous disposez maintenant d'une bonne connaissance des techniques
permettant d'exploiter le mcanisme de tolrance aux pannes de CSS pour
amliorer 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 tolrance aux pannes, le CSS est un complment presque idal
la panoplie des outils d'amlioration progressive. L' ignorance est souvent un
bien parce qu'elle nous permet de bien exploiter les nouveauts 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 rgle, mais qu'il la comprend mal? Oui, je veux bien sr parler d'Internet
Explorer.
IE9 a t lanc lorsque ce livre partait chez l'imprimeur. De ce que j'ai pu en
voir, il semble que ses auteurs ont bien rpondu leur promesse de conformit
aux standards (y compris le CSS), d'une manire totalement interoprable.
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, les brillants individus de Microsoft nous avaient concoct
une technique permettant d'isoler facilement les sections spcifques leurs
navigateurs dans le code CSS, JavaScript et mme dans le marquage HTML:
les commentaires conditionnels
8
. Il s'agit exactement de ce quoi vous pourriez
vous attendre: des commentaires HTML dans un format spcial qui sont pris
en compte par IE, mais ignors par tous les autres navigateurs (aprs tout, ce
sont des commentaires).
Les commentaires conditionnels cadrent bien avec l'approche d'amlioration
progressive. En efet, mme si l'amlioration progressive n'est pas directement
dpendante du type de navigateur, certains navigateurs ont besoin qu'on les
aide un peu rpondre aux attentes des utilisateurs. Les commentaires condi-
tionnels permettent aux concepteurs de cibler une ou plusieurs versions d'IE.
En voici un court exemple d'utilisation:
8. http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
ADAPWEB.indb 56 17/04/13 12:47
<link rel="stylesheet" href="c/main.css"/>

<!--[if lte IE 8]><link rel="stylesheet"
Dans ce bref extrait, nous demandons en premire ligne d'inclure notre fchier
CSS principal (main.css). Nous demandons ensuite d'inclure de faon condi-
tionnelle une feuille de styles ddie IE9, au moyen de la syntaxe if IE9.
Nous y reviendrons, mais intressons-nous d'abord aux trois instructions
suivantes. La premire cible IE8 et les versions antrieures (l'expression if lte
IE 8 signife "si infrieur ou gal IE8"), la deuxime cible IE7 et les versions
antrieures avec if lte IE 7, et la dernire ne concerne que la version6 et
antrieures. Si elles sont prsentes dans cet ordre, ces commentaires simpli-
fent l'application des styles CSS spcifques : les correctifs (patches) que
vous appliquez une version plus rcente d'IE se propagent aux versions
antrieures. Quel intrt? Si la version IE7 soufrait d'un problme, il est fort
probable que le problme existait dj dans IE6.
Venons-en au commentaire conditionnel d'IE9. Il ne cible que cette version du
navigateur. Nous aurions pu ratisser large comme pour les versions antrieures,
mais IE9 constitue une importante volution par rapport IE8, y compris
au niveau du support de CSS. Les problmes qu'il prsente ayant beaucoup
moins de chances de concerner les versions antrieures, nous leur pargnons
l'analyse de ces rgles complmentaires. Nous aurions pu procder de mme
pour IE8, car son support CSS est trs difrent de celui d'IE7 et il n'hrite
que de peu de problmes de son prdcesseur. Mais puisque nous devions
appliquer quelques fltres pour IE, nous avons choisi de ne les crire qu'une fois.
ADAPWEB.indb 57 17/04/13 12:47
QUITTER LA BASE
Le rseau web forme une vraie rupture par rapport aux supports d' infor-
mation que nous connaissions jusque-l. Ce n'est pas un nouveau mdium
imprim, ni de la tlvision, ni de la radio, ni un jeu vido, un kiosque ou une
application, mais un hybride de tous ces mdias et plus encore. Devant ce
constat, l'organisme de normalisation W3C a dfni des possibilits de cibler
un mdia en particulier. Nous en avons proft plus haut dans le bloc @media,
mais vous tes sans doute plus habitu vous servir de dclarations media avec
des feuilles de styles lies ou imbriques (grce l'attribut media) ou en tant
que sufxe des instructions @import.
C'est le W3C qui est le gardien de la liste des types de mdias ofcielle, mais
il n'est pas rfractaire l'enrichir en rponse aux volutions technologiques.
Pour le moment, cette liste ofcielle normalise l'application de styles CSS aux
mdias suivants: cran d'ordinateur, imprim, tlvisions, terminaux portables,
et dans les contextes des assistants d'accessibilit tels que les lecteurs d'crans,
les imprimantes de braille, et les appareils retour de force. En l'absence
d'indication de mdia cible, le choix implicite est l'cran d'ordinateur, "screen".
Au dpart, les dsignations de mdias cibles sont univoques, mais comme avec
les slecteurs, vous pouvez combiner plusieurs noms de mdias en les sparant
par des virgules (la virgule a l'efet d'un OU logique). Dans l'exemple qui suit,
le fchier main.css sera appliqu aux deux types de mdias "print" et "screen":
<link rel="stylesheet" href="main.css" media="screen, print"/>
Les dsignations de mdias sont tolrantes aux pannes, mais le mcanisme
de tolrance est assez difrent de celui qui s'applique aux slecteurs (n'en
redoutez aucune confusion): face un type de mdia inconnu dans une liste
multiple virgules, les types inconnus sont simplement ignors et les types
connus sont pris en charge
9
.
Hlas, dans le cas des dclarations de mdias pour @import, les versions d'IE
antrieures la version8 sment la zizanie mme pour les types de mdias
qu'elles reconnaissent. C'est une raison de plus de s'en tenir @media, sauf
lorsque vous voulez vraiment masquer certaines rgles pour ce navigateur:
9. La spcification 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 lis et incorpors. Cela dit, tous les navigateurs grent les
dsignations de mdias en HTML de faon homogne.
ADAPWEB.indb 58 17/04/13 12:47
@import not-for-IE7-or-below.css' screen;
@media screen, print, refrigerator {
/* IE va pouvoir accder ces rgles */
}
Les dsignations de mdias sont trs puissantes, puisqu'elles permettent de
crer des mises en page adaptes aux mdias cibles. Un des premiers avoir
utilis cette technique est Eric Meyer. En l'an 2000, il nous a montr comment
abandonner les pages cran "adaptes aux imprimantes" en ajoutant une feuille
de styles spcifque une sortie sur imprimante, disponible dans toutes les
pages web
10
. Deux ans plus tard, Eric a tendu ce principe en nous montrant
comment utiliser du CSS avanc (tel que du contenu gnr la demande)
pour amliorer progressivement cette exprience
11
.
Revenons notre feuille de styles principale. Nous pouvons assez aisment
y ajouter un support d'autres mdias grce notre infrastructure stratife:
/* =Typographie */
/* Typographie pour tous les mdias */
@media screen {
/* Typographie rserve aux crans */
}
@media print {
/* Typographie rserve aux imprimantes */
}
/* =Mise en page (Layout) */
/* Mise en page pour tous les mdias */
@media screen {
/* Mise en page rserve aux crans */
}
@media print {
/* Mise en page rserve aux imprimantes */
}
/* =Couleurs */
@media screen {
/* Couleurs rserves aux crans */
}
@media print {
/* Couleurs rserves aux imprimantes */
}
10. http://meyerweb.com/eric/articles/webrev/200001.html
11. http://www.alistapart.com/articles/goingtoprint/
ADAPWEB.indb 59 17/04/13 12:47
Une autre approche consiste regrouper tous les styles d'imprimantes dans
la mme dclaration @media en fn de fchier:
/* =Typographie */
/* Typographie pour tous les mdias */
@media screen {
/* Typographie rserve aux crans */
}
/* =Mise en page */
/* Mise en page pour tous les mdias */
@media screen {
/* Mise en page rserve aux crans */
}
/* =Couleurs */
@media screen {
/* Couleurs rserves aux crans */
}
/* =Impression */
@media print {
/* Redfinitions globales rserves aux imprimantes */
}
Dans le cas de l'impression, ce regroupement dans une dclaration @media
est logique, mais il est prfrable de distribuer les dclarations pour les autres
mdias. Chaque projet tant difrent, vous n'aurez qu' faire des essais et voir
ce qui convient le mieux.
Des dclarations de mdias d'avant-garde
Quelques annes aprs le support de l'indpendance des mdias, le W3C a
renchri en introduisant les requtes de mdias, une sorte de dsignation de
mdia anabolise. Ces requtes fournissent des dtails au sujet de l'environ-
nement du poste utilisateur, comme la largeur de la fentre du navigateur ou
son orientation (portrait ou paysage). La puissance des requtes de mdias
vous permet d'adapter fnement vos designs des terminaux spcifques. Elles
reprsentent de ce fait un outil indispensable de plus pour l'amlioration
progressive.
ADAPWEB.indb 60 17/04/13 12:47
Grce une requte de mdia (que vous pouvez placer partout o vous placez
des dsignations de mdias normales), vous ajoutez dans une page un jeu de
rgles adaptes aux capacits du logiciel agent utilisateur. Voyons un exemple:
@media (min-width:1025px) {
/* ... */
}
Ce groupe de jeux de rgles n'entre en vigueur que si la largeur de fentre du
navigateur est gale ou suprieure 1025pixels.
Le module CSS3 qui dfnit les requtes de mdias a atteint le niveau
Candidate Recommendation au milieu de l'anne 2009. Il stipule comment
rcuprer les dimensions de la fentre de navigateur, parmi d'autres paramtres
du terminal (orientation, nombre de couleurs afchables, rsolution, etc.).
Actuellement, le standard ne gre pas encore toutes les proprits, mais il y
en a assez pour que la technique soit digne d'intrt.
Les requtes de mdias reprennent la syntaxe de dsignation de mdia
standard en y ajoutant l'oprateur ET logique avec "and" et l'oprateur de
ngation avec "not". Ils vous donnent un supplment de souplesse pour cibler
le mdia. Pour une cible cran de largeur suprieure 1 024 pixels, nous
crirons : screen and (min-width:1025px). Pour tous les mdias sauf les
imprimantes, nous crirons: not print. Cependant, il n'y a pas d'oprateur
OU. De ce fait, vous ne pouvez pas rdiger des requtes conditionnelles aussi
complexes qu'avec un langage de programmation (comme dans l'expression A
et B ou B et C, mais pas A et C). Mais pour obtenir l'efet de l'oprateur OU,
il suft d'utiliser une virgule.
Voici une requte de mdia composite assez complte suivie de commentaires
en dcrivant le fonctionnement:
@media
screen and (min-device-width:1024px) and
(max-width:989px),
screen and (max-device-width:480px),
screen and (max-device-width:480px) and
(orientation:landscape),
screen and (min-device-width:481px) and
(orientation:portrait) {
/* Mise en page pour fentre de navigateur de moins
de 990pixels
ou iPhone sous iOS3 ou iOS4 (ou quivalent) en mode Paysage
ou iPad (ou quivalent) en mode Portrait */
}
ADAPWEB.indb 61 17/04/13 12:47
Nous pouvons maintenant retoucher notre feuille de styles avec des requtes
de mdias de sorte amliorer progressivement notre page en dfnissant une
mise en page fondamentale applicable aux anciens navigateurs et aux tablettes.
J'ai ensuite ajust cette mise en page pour l'adapter aux navigateurs sur cran
de bureau comme aux petits crans des tlphones portables:
/* =Mise en page minimale */
@media screen {
/* ... */
}
/* =Mise en page complte */
@media screen and (min-width:1025px) {
/* ... */
}
/* =Mise en page troite */
@media screen and (max-width:765px) {
/* ... */
}
La Figure3.6 montre l'aspect des trois mises en page. Certaines difrences
sont drastiques entre mdias (par exemple, les modalits de navigation) et
d'autres plus subtiles (comme la fche de contact au format carte postale qui
s'ajuste en largeur l'cran). Sans entrer dans les dtails de ces difrences,
nous constatons que les requtes de mdias permettent de crer 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 fn
de Chapitre6.
ADAPWEB.indb 62 17/04/13 12:47

Figure 3.6 : Trois mises en page gres par des requtes de mdias.
@media screen and (min-width:1025px) {
/* ... */
}
TROIT NORMAL/TABLETTE
LARGE
@media screen and
(max-width:765px) {
/* ... */
}
@media screen {
/* ... */
}
ADAPWEB.indb 63 17/04/13 12:47
LA RICHESSE TOUS LES TAGES
Nous avons dcouvert plusieurs techniques pour exploiter le langage CSS en
vue d'amliorer progressivement nos pages web. Certaines de ces techniques,
comme l'utilisation fructueuse des erreurs d'analyse, sont d'un emploi si simple
et si courant que vous allez sans doute les adopter immdiatement. D'autres,
comme la sparation en niveaux des rgles de styles, peuvent vous demander
d' infchir vos pratiques actuelles ou vous paratre totalement nouvelles.
En combinant fnement ces techniques, niveau par niveau, vous tes assur
d'ofrir vos visiteurs une exprience de navigation optimale, quel que soit
le navigateur et le terminal d'accs.
ADAPWEB.indb 64 17/04/13 12:47
"Je n'accepte pas d'adopter 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
ADAPWEB.indb 66 17/04/13 12:47
CHAPI TRE 4
AMLIORATION
PROGRESSIVE AVEC
JAVASCRIPT
Le 7 fvrier 2011, peu de temps aprs que le groupe Gawker Media a lanc
le nouvel habillage unif de ses difrents sites (Lifehacker, Gizmodo, etc.),
les visiteurs de ces sites tombrent sur un bel cran vide (voir Figure 4.1).
La nouvelle plate-forme tait entirement fonde sur JavaScript pour le
chargement de contenu dans les pages. Une erreur dans le code JavaScript
a fait que toutes les pages taient afches vides
1
. Cette erreur unique a
entran une "indisponibilit" de tous les sites (mme si les serveurs restaient
oprationnels) de Gawker, ce qui leur a fait perdre des milliers de pages vues
et d'afchages de bannires publicitaires. Cette perte sche leur aurait t
pargne s'ils avaient tenu compte des principes d'amlioration progressive.
1. Cette avarie est raconte dans la page http://blogs.wsj.com/digits/2011/02/07/gawker-
outage-causing-twitter-stir/. Jeremy Keith et Mike Isolani ont fourni des commentaires
au sujet de la fabilit 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 l 'afaire (http://easy-reader.net/archives/2011/02/09/
you-cant-rely-on-javascript/).
ADAPWEB.indb 67 17/04/13 12:47
Figure 4.1 : Le site Lifehacker. Vide.
Rares sont les outils pouvoir rivaliser avec JavaScript quand il s'agit d'animer
des pages web. Ce langage permet de crer des interactions sophistiques et
des interfaces dynamiques. Les concepteurs web en sont depuis longtemps
convaincus et se sont jets sur l'opportunit pour produire des pages plus
attrayantes, pour valider les formulaires, etc. De nos jours, un dveloppeur
JavaScript n'a aucun mal crer quelque chose d'tonnant en accord avec
l 'approche d'amlioration progressive. Il n'en a pas toujours t ainsi.
Du milieu la fn des annes 1990, crire du JavaScript tait considr comme
de la magie noire. Pour chaque bribe de code HTML un peu moins limpide,
nous aboutissions en gnral dix fois pire en JavaScript parce que les deux
navigateurs phares de l'poque, Netscape et Internet Explorer, avaient deux
interprtations du langage HTML
2
sufsamment divergentes pour que toutes
les sections vraiment captivantes deviennent horribles rdiger.
2. Le langage JavaScript a t invent par Brendan Eich. Il a vu le jour en tant que sous-systme de
Netscape2 fn 1995. Microsoft a ensuite cr son dialecte de JavaScript sous le nom "JScript"
(pour des raisons de droits intellectuels) et l'a lanc au cours de l't 1996 avec Internet Explorer3
(le premier navigateur avoir intgr un support des styles CSS).
ADAPWEB.indb 68 17/04/13 12:47
CHAPITRE 4 AMLIORATION PROGRESSIVE AVEC JAVASCRIPT 69
Un exemple : pour trouver un lment (par exemple, #location) dans un
document (au sens strict, dans le DOM, Document Object Model), il fallait
deux conventions difrentes:
document.layers['location']; // Netscape
document.all['location']; // IE
Cette cacophonie nous a obligs crire quasiment tous nos scripts deux fois,
ou au moins les trufer de fourches (des points o le script prend une voie ou
une autre selon le navigateur dtect), et nous avons fni par nous y perdre.
Comme dcrit dans le Chapitre2, la fn des annes 1990 a t une priode
frntique sur le Web : c'tait la guerre des navigateurs. Chaque nouvelle
version de Netscape et de Microsoft IE proposait de nouvelles fonctions aux
dveloppeurs, dans l'espoir de capter la plus grande part de march possible
parmi les navigateurs. Cette course la suprmatie a caus bien des soucis
aux dveloppeurs; les deux variantes incompatibles de JavaScript nous ont
obligs passer tellement de temps ajuster les divergences que nous perdions
de vue la faon dont fonctionnait le langage et omettions d'apprendre bien
l 'articuler avec le HTML et le CSS.
Un jour, l'association ECMA (European Computer Manufacturers Association)
a standardis JavaScript
3
et l'organisme W3C a difus sa spcifcation DOM.
Les sables mouvants sur lesquels nous btissions ont enfn laiss place du
sol stable sur lequel nous allions pouvoir envisager de meilleures faons de
raliser les choses:
document.getElementById('location'); // DOM unifi
3. Netscape a soumis JavaScript ECMA International comme candidat un standard en
1996. La version standardise de JavaScript a t nomme "ECMAScript", mais nous
utilisons toujours le nom JavaScript, sauf lorsque nous voulons parler de sa spcifcation.
ADAPWEB.indb 69 17/04/13 12:47
QUITTER SA ZONE DE CONFORT
Une des premires leons apprises une fois la poussire retombe tait que
le langage JavaScript n'tait pas la panace pour l'interaction sur le Web. En
fait, le langage n'tait pas si fable que cela.
En efet, mme une fois que le W3C a standardis le modle DOM et que les
navigateurs ont tous intgr le standard du langage, les divergences subsis-
taient; elles taient assez nombreuses entre les implmentations pour qu'il soit
impossible de prsupposer la disponibilit de certaines mthodes, notamment
celles, vitales, de traverse de la structure arborescente du DOM, document.
getElementById() (pour accder aux lments d'aprs leur identifant) et
document.getElementsByTagName() (pour les trouver d'aprs leur nom). En
outre, mme lorsqu'un navigateur supportait totalement la norme JavaScript,
l'utilisateur (ou l 'administrateur informatique de son entreprise) gardait le
dernier mot en dcidant ou pas d'activer JavaScript sur le poste client
4
.
Nous avons fni par comprendre que le support de JavaScript n'allait pas de soi
et avons commenc reformuler notre code source, le rendre plus limpide,
plus facile maintenir, et plus apte grer l'ventuelle absence ou difcult
d'accs au langage JavaScript. Intressons-nous aux concepts discuts cette
poque pour mieux comprendre comment bien exploiter JavaScript dans 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 fl,
mme si le code semble tre crit en sanscrit.
4. Pour les administrateurs informatiques, activer ou pas JavaScript tait d'abord un problme
de scurit, mais les utilisateurs ont longtemps t invits le dsactiver pour viter les
fentres surgissantes (popups) et publicits. Il est trs facile de dsactiver JavaScript en
accdant aux prfrences du navigateur, mais il peut tre bloqu par un pare-feu ou
dsactiv pour toutes les applications par les administrateurs.
ADAPWEB.indb 70 17/04/13 12:47
Vers 100 % de fabilit
Il n'tait pas rare d'crire (ou de lire) l'poque des dbuts de JavaScript des
gestionnaires d'vnements onclick (du code excut en raction un clic sur
un lment de la page) qui dfnissaient des liens sans cible
5
:
<a href="#" onclick="newWin( 'http://easy-designs.net/' );">Easy!
Designs</a>
Si JavaScript est activ, le lien de l'exemple prcdent provoque l 'appel
une fonction sur mesure nomme newWin(), en lui transmettant la valeur
"http://easy-designs.net/". L'excution de la fonction provoque l 'afchage
de la page vise dans une nouvelle fentre. En revanche, si JavaScript est
dsactiv, le lien n'a aucun efet (nous en avions parl en discutant des identi-
fants dans le Chapitre2). L'lment href pointe sur un identifant id vide.
Quel est l'intrt d'un lien qui ne fonctionne pas en l 'absence de JavaScript?
Cela m'amne prsenter ma premire maxime de l 'amlioration progressive
avec JavaScript:
1. Vrifez que tout le contenu reste accessible et que toutes les actions
indispensables restent oprationnelles mme lorsque le JavaScript
est dsactiv.
Le lien de l'exemple contrevient cette rgle (les sites de Gawker galement),
mais c'est le cas de la majorit des sites web crs la fn des annes 1990
avec JavaScript. Le Web semblait infect de sites rclamant le JavaScript
qui l'imposaient aux utilisateurs. Autrement dit, cette poque le JavaScript
tait envahissant. Les dveloppeurs ont pris conscience du problme et ont
commenc promouvoir une utilisation moins premptoire de JavaScript.
Note : Je ne me fais pas ici l 'avocat des fentres popup ou de l'ouverture non
dsire de fentres par JavaScript, car ces techniques causent des soucis d'acces-
sibilit et d'utilisation. En revanche, j'ai choisi cet exemple car il montre bien
l'volution des pratiques d'criture JavaScript d'une faon 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, citons le pseudo-protocole javascript (par
exemple, <a href="javascript:maFonction();">) et celle que je prfrais, l'utilisation
combine de ce pseudo-protocole et d'un gestionnaire d'vnement inline (par exemple,
<a href="javascript:void(null)" onclick="maFonction();">).
ADAPWEB.indb 71 17/04/13 12:47
Se montrer discret
Le JavaScript discret (unobstrusive) est une expression globale qui dsigne
une faon de programmer rendant la prsence du JavaScript non indispen-
sable. Il garantit que le visiteur pourra accder toutes les pages et raliser les
oprations demandes en n'ayant recours qu'aux lments 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 trs bien
avec l 'approche d'amlioration progressive, parce qu' il cantonne le code
JavaScript un rle d'amlioration fonctionnelle, et n'en fait plus un acteur
incontournable.
Voici comment nous reformulons nos liens en JavaScript discret pour qu'ils
supportent l 'absence de JavaScript:
<a href="http://easy-designs.net/" onclick="newWin( this.href );
return false;">Easy! Designs</a>
Dornavant, le lien pointe sur une adresse URL, ce qui lui assure de mener
quelque part sans JavaScript. Si le JavaScript est prsent, cliquer sur le lien
lance la fonction newWin(), qui reoit la valeur de l 'attribut href (autrement
dit, la valeur DOM this.href). L'autre grande difrence de cette nouvelle
version est que le gestionnaire onclick renvoie la valeur faux ("return false"),
ce qui annule l 'action par dfaut de l'vnement (l 'afchage de la page vise),
puisque cette action HTML ferait doublon.
Nous venions ainsi de faire un premier grand pas dans la gestion d'une indis-
ponibilit de JavaScript, mais avions chemin faisant compris qu'il devait y
avoir de meilleures solutions ce genre de scnarii.
Simplifer la maintenance
Dans la prochaine tape d'volution de ce code, nous exploitons l'antique
attribut rel (nous en avons parl au Chapitre 2) pour extraire le code
JavaScript inline afn de le renvoyer dans un fchier externe, ce qui apporte
deux bnfces: 1) cela ajoute du sens au lien et 2) cela simplife la mainte-
nance des sites, puisque les programmeurs n'ont qu'un endroit JavaScript
retoucher pour que la modifcation se propage la totalit du site (c'est le mme
argument que nous avions avanc pour externaliser les feuilles de styles avec
l 'attribut style).
ADAPWEB.indb 72 17/04/13 12:47
Voici le code HTML reformul:
<a rel="external" href="http://easy-designs.net/">Easy! Designs</
a>
Il devient alors trs facile d'appliquer ce gestionnaire d'vnement ce lien
et tous les autres liens identifs "external":
var links = document.getElementsByTagName( 'a' ),
rel, i = links.length;
while ( i-- ) {
rel = links[i].getAttribute('rel');
if ( rel && rel.match( /\bexternal\b/ ) ) {
links[i].onclick = function(){
newWin( this.href );
return false;
};
}
}
Toutes ces conditions if et boucles while pouvant rebuter certains lecteurs,
je vous propose une visite guide fonctionnelle de ce script: il regroupe dans
une variable links tous les liens trouvs dans la page, puis les visite un un
en commenant par le dernier (trangement, c'est un peu plus rapide qu'en
sens direct). Si le lien possde un attribut rel dont la valeur est "external", une
fonction anonyme est associe l'vnement onclick du lien. Cette fonction
va appeler la fonction newWin() (en lui transmettant la valeur de l'attribut href
du lien, comme dans la version prcdente) tout en provoquant, par renvoi de
false, l 'abandon de l 'action par dfaut du clic.
Nous avons trouv une solution satisfaisante et la plus discrte possible. En
2006, Jeremy Keith a donn le nom Hijax cette technique. Ce nom est
intressant: il combine le terme "hijack" (dtournement), qui dsigne la prise
de pouvoir du fonctionnement normal du lien, et le nom "Ajax", qui est le
mcanisme JavaScript permettant une interaction entre la page web et le
serveur sans requrir une ractualisation 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 niveau de la
gestion d'vnements JavaScript.
ADAPWEB.indb 73 17/04/13 12:47
Gagner en souplesse
Notre vieille technique d'afectation de gestionnaires d'vnements ne tenait
plus la route face l 'adoption vaste chelle d'Ajax
6
et d'autres techniques
pour modifer le contenu d'une page web la vole. Voici pourquoi: au moment
o du nouveau contenu est inject dans la page actuelle, et qu'il contient un lien
marqu rel="external", notre fonction spciale n'a plus aucune chance d'tre
associe un gestionnaire d'vnement onclick. Le script a normalement dj
t excut lors du chargement initial de la page (window.onload()), donc avant
injection du nouveau lien par Ajax.
Nous afrontions l un vrai problme. Nous faisions apparatre le risque que
deux liens en thorie identiques se comportent difremment en pratique. Ne
serait-ce pas un problme d'ergonomie?
Une solution vidente que certains ont alors prne consiste tout simplement
forcer une nouvelle excution du script chaque fn d'injection de donnes
HTML par Ajax. L'ide tait trop bonne, car les appels rptition de la
mme fonction ralentissaient sensiblement le navigateur, qui devait chaque
fois analyser tous les liens prsents dans la page.
Christian Heilmann nous a alors rappel fort propos que tout vnement
dclench en relation avec un lment entranait la traverse de l'arbre DOM
depuis l'lment racine (html) jusqu' l'lment cible (phase de capture d'v-
nement), puis une seconde fois dans l'autre sens (phase de bullage, bubbling)
7
.
Autrement dit, l'vnement onClick d'un lien est gr deux fois pour chaque
lment dans l 'arborescence entre racine et cible
8
(voir Figure4.2). Il est plus
6. La technologie XMLHttpRequest est celle que nous utilisons pour soumettre des requtes
au serveur afn d'envoyer et de recevoir des donnes sans forcer le navigateur recharger/
ractualiser la page. Elle fut invente chez Microsoft pour le logiciel Outlook Web Access,
introduite ensuite dans IE5, puis adopte par tous les autres navigateurs et dornavant
en cours de standardisation par le W3C. XMLHttpRequest est l' pine dorsale d'Ajax
(Asynchronous JavaScript and XML), mais elle n'est pas cantonne au langage XML. Le
"A" d'Ajax signife "asynchrone", parce que l'utilisateur n'a pas besoin d'attendre le retour
de la rponse et peut continuer interagir avec la page pendant que le script rapatrie des
donnes du serveur.
7. http://icant.co.uk/sandbox/eventdelegation/
8. En fait, pas deux fois dans tous les navigateurs. Le modle de gestion d'vnements de
Microsoft, appliqu dans toutes les versions d'IE avant la 9, ne sait grer que la phase de
bullage en remonte d'arbre d'un vnement. Le modle standard du W3C supporte la
phase de capture et celle de bullage.
ADAPWEB.indb 74 17/04/13 12:47
efcace de se placer en attente de l'vnement au niveau d'un lment situ
plus haut dans l 'arborescence DOM (cela permet d'associer un seul gestion-
naire plutt que des dizaines). Cela permet aussi de dclencher des actions
pour du contenu dynamique, ce qui nous aide grer les problmes de liens
similaires qui divergent.
Figure 4.2 : Captures et bullages d'vnements.
Ce concept a t difus sous le terme de dlgation d'vnement, puisque le
mme gestionnaire pouvait dtecter des vnements et dclencher des ordres
dpendants de l'lment dclencheur et pour son compte. Voici une reformu-
lation compacte de l'exemple prcdent en utilisant la dlgation d'vnement:
document.body.onclick = function( e ) {
// Harmonisation des modles d'vnements
e = ( e ) ? e : event;
var el = e.target || e.srcElement, rel;
// Liens externes
rel = el.getAttribute( 'rel' );
if ( el.nodeName.toLowerCase() == 'a' &&
rel && rel.match( /\bexternal\b/ ) ) {
newWin( el.href );
// Annulation de l'action par dfaut
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
};
html
footer section header
head body
p p
a Retreats 4 Geeks is an venture.
Phase de capture
Phase de bullage
lments concerns
Flux des vnements
ADAPWEB.indb 75 17/04/13 12:47
Dans ce code, nous associons un gestionnaire d'vnement l'vnement
onclick de l'lment principal body, ce qui tablit l'auditeur. Dans ce dernier,
nous cherchons l'lment cible (celui qui a t cliqu) puis vrifons que c'est
un lment d'ancrage (a) dot d'un attribut rel dont la valeur est la chane
"external". Si toutes ces conditions sont remplies, nous appelons la fonction
newWin(), puis annulons l 'action par dfaut de l'vnement.
Cet exemple est spcifque, mais il montre pourquoi nous devons continuer
faire voluer notre approche des interactions fondes sur JavaScript. En
augmentant notre comprhension de JavaScript, nous obtenons des avantages
en termes d'amlioration progressive. Notre code devient plus efcace et moins
envahissant. Cela nous aide aussi simplifer la maintenance et augmenter
les performances.
FAIRE LE NCESSAIRE
Arriv en ce point, vous avez une certaine ide de ce qu'est du JavaScript
discret, mais nous n'avons pour le moment considr l'exprience utilisateur
que du point de vue du document. Dans de nombreux domaines, les interac-
tions sont bien meilleures avec JavaScript que sans. Ainsi, la validation de
saisie de formulaire sur le poste client permet d'informer immdiatement
l'utilisateur des erreurs ou oublis de saisie sans l'obliger transmettre d'abord
les donnes au serveur.
ADAPWEB.indb 76 17/04/13 12:47
Figure 4.3 : Contrle 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 spcifques ? La rponse m'amne
formuler ma deuxime maxime d'amlioration progressive avec JavaScript:
2. Utilisez JavaScript pour gnrer les balises supplmentaires dont
le script a besoin.
JavaScript est vraiment dou pour gnrer et modifer des balises en temps rel.
Lorsque vous devez enrichir une interface l 'aide de JavaScript, commencez
par un groupe initial de balises et de styles signifants et pratiques, puis ralisez
par le script les modifcations HTML et CSS pour aboutir votre nouvelle
interface, mais seulement une fois que vous avez vrif qu'elle fonctionne
sans erreurs.
Voyons un exemple de mise en pratique de ces conseils en revenant la page
Retreats 4 Geeks.
ADAPWEB.indb 77 17/04/13 12:47
Figure 4.4 : La page web Retreats 4 Geeks.
Un de mes objectifs ici tait d'utiliser de faon efcace l'espace limit des
terminaux nomades. Les translations (navigation horizontale) sont exploitables
sur un petit cran, mais les zones cibles seront trop rduites pour tre slec-
tionnes sans efort. Je pourrais bien sr basculer l 'afchage pour proposer
une navigation verticale, ce qui permettrait d'ofrir des liens plus spacieux,
mais cela dvorerait trop de surface d'cran.
Une troisime approche consiste crer une liste droulante (dropdown),
soit en CSS, soit avec un lment select. La liste en CSS pur est tentante,
mais l 'autre a l 'avantage de prsenter l'utilisateur une interface qui lui sera
familire. J'opte donc pour l'lment select.
Je pars du marquage HTML du Chapitre2 pour vous guider dans la cration
d'un script qui va convertir le contenu de l'lment nav en un lment select
seulement lorsque les dimensions de l'cran deviennent infrieures une
valeur plancher. Pour que le code reste assez simple tudier, j'exploite la
librairie jQuery JavaScript
9
. Les librairies, fort pratiques, apportent toutes
faites des dizaines ou centaines de fonctions rpondant aux besoins les
plus courants (comme l 'ajout et la suppression d'une classe class). Ne vous
inquitez pas la lecture du code; je vais commenter son fonctionnement.
9. http://jQuery.com
ADAPWEB.indb 78 17/04/13 12:47
Nous isolons d'abord le script dans une fonction anonyme
10
qui sera excute
ds que les donnes du DOM seront disponibles, mais avant que soient
tlcharges les images, fchiers CSS et vidos ( l'instant onDOMReady). Cela
rend l 'afchage 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 place dans
les limites de cette fonction:
$(function(){
// Les choses intressantes seront ici.
});
Nous pouvons crer les variables dont nous aurons besoin. Nous les regroupons
dans une dclaration var par souci de compacit (concept de minifcation)
11
.
var
$window = $(window), // Rfrence la fentre
$old_nav = $('#top nav > *'), // Rcupre la navigation
$links = $old_nav.find('a'), // Rcupre les liens
showing = 'old', // Suivi de l'action en cours
trigger = 765, // Largeur plancher de fentre
$new_nav, $option, // Utilises plus loin
timer = null; // Un timer sera requis
Les commentaires doivent vous clairer sur l'utilit de chaque variable.
Mme si vous connaissez jQuery, vous pouvez vous demander pourquoi je
stocke les lments dans des variables locales au lieu de faire directement
rfrence aux expressions fondes sur jQuery (comme dans $('#top nav> *'))
lorsque nous en avons besoin. En fait, j'ai de bonnes raisons de travailler ainsi:
les rfrences locales rduisent l'impact de l'excution du script sur les perfor-
mances parce que l'afectation n'est faite qu'une fois et non chaque rencontre
d'une utilisation de $(). Pour ne pas confondre les rsultats de jQuery avec
les autres variables, j'ai fait dbuter chaque nom de variable associe par le
signe dollar ($). Ces techniques sont employes tout au long du script; ce sont
de bonnes pratiques qu'il est conseill d'adopter.
Les variables tant en place, vous pourriez penser que le moment est venu
de passer au noyau dur du script, mais il reste une prcaution coder avant
d'excuter le code: vrifer que les lments requis sont bien prsents:
10. Une fonction anonyme n'est rien d'autre qu'une fonction qui ne possde pas de nom.
11. http://www.alistapart.com/articles/javascript-minification-part-II/
ADAPWEB.indb 79 17/04/13 12:47
if ( $old_nav.length && $links.length ) {
// Nous savons que les lments DOM existent,
// et nous pouvons les utiliser.
}
Il est capital de tester les dpendances et j'y reviendrai dans la section suivante.
Passons maintenant ce noyau dur. Nous commenons par gnrer la nouvelle
navigation fonde sur select en crant le bloc select, puis son premier lment
option:
$new_nav = $('<select></select>');
$option = $('<option>-- Navigation --</option>')
.appendTo($new_nav);
Une fois que nous disposons du nouveau marquage, nous pouvons balayer la
liste des liens rcolts (dans $links) pour construire une option pour chacun
d'eux en rptant l'lment 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 lments options crs et ajouts select, nous terminons
en ajoutant des retouches de marquage et en confgurant le gestionnaire pour
l'vnement select onchange:
$new_nav = $new_nav
.wrap('<div id="mobile-nav"/>')
.parent()
.delegate('select', 'change', function(){
window.location = $(this).val();
});
Il s'agit ici d'une version un peu simplife 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 premires lignes, nous imbriquons notre select
($new_nav) dans un lment div, puis rafectons ce div la variable $new_nav
en sorte que l'ensemble soit vu par JavaScript comme un paquet complet.
Dans la ligne suivante, j'utilise la dlgation d'vnement (dcrite plus haut)
pour pouvoir surveiller l'vnement onchange depuis un point plus lev
ADAPWEB.indb 80 17/04/13 12:47
de l 'arbre DOM (en fait, du niveau de l'lment div). Nous associons une
fonction anonyme l'vnement pour injecter une nouvelle adresse dans la
barre d'adresse du navigateur (ce qui fait afcher la nouvelle section de page
ou une autre page, selon le type de lien).
Et voil! Nous avons cod une navigation oprationnelle base select. Voyons
maintenant comment l'ajouter la page quand les conditions en sont remplies.
Nous crons une autre fonction nomme toggleDisplay(), qui surveille la
largeur de fentre du navigateur et active un style de navigation ou l 'autre:
function toggleDisplay() {
var width = $window.width();
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 allg, mais l'essentiel y est : la navigation est
change si le plancher de largeur de fentre est franchi (trigger) et si le style
de navigation actuel n'est pas dj le bon (selon la valeur de showing). Avec
cette fonction, il nous suft de l'excuter une fois pour initialiser les variables
et afcher le bon style de navigation ds le dpart. Nous pouvons ensuite
l 'associer l'vnement de fentre 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'vnement? Sachez que cela provo-
querait de multiples excutions de la fonction (plusieurs centaines de fois)
pendant que l'utilisateur retaille sa fentre de navigateur. Pour limiter le
nombre d'excutions (et viter de surcharger le processeur du poste client),
le gestionnaire se fonde sur une minuterie (timer) pour n'appeler toggle-
Display() qu'aprs 100millisecondes. Si la fonction est dclenche rptition
pendant une retaille de fentre, cela provoque la destruction de la variable
timer pour la recrer et repartir zro. C'est ce qui permet de n'appeler
ADAPWEB.indb 81 17/04/13 12:47
toggleDisplay() qu'une fois par retaille (sauf si l'utilisateur dplace sa souris
vraiment lentement).
Rsultat? Un excellent exemple d'amlioration progressive avec Javascript.
Figure 4.5 : Une navigation base select sur iPhone.
Cet exemple simple prouve que JavaScript est en mesure de gnrer ce dont
le script a besoin tout en cartant tout le superfu. Vous pourriez tendre cette
fonction pour qu'elle soit encore moins dpendante du balisage en permettant
de transmettre dynamiquement la fonction un point de dpart racine (qui est
ici le niveau des lments enfants de nav). Je vous laisse chercher la rponse.
Exprimentez!
RESTER EXCELLENT
Nous avons dit que la plupart des techniques d'amlioration progressive au
niveau HTML et CSS taient assez simples et faisaient peut-tre dj partie
de vos pratiques antrieures. En revanche, l'amlioration progressive en JavaS-
cript est un peu plus complexe, car JavaScript ne peut pas tre aussi tolrant
du fait que c'est un langage de programmation.
Les langages HTML et CSS dcrivent du contenu et en organisent le rendu
visuel dans une fentre de navigateur. Le langage JavaScript s'en distingue, car
ADAPWEB.indb 82 17/04/13 12:47
il excute des commandes dans le navigateur. Puisqu'ils dpendent de la bonne
ralisation d'une squence d'actions, les programmes JavaScript se bloquent
ds qu'ils rencontrent une erreur. Les causes de ces erreurs vont de la simple
faute de frappe la boucle de rptition dont on ne sort jamais. Dans tous les
cas, lorsque vous crivez du code qui ne convient pas au module interprteur
de JavaScript du navigateur, vous recevez en pleine face un bon gros message
d'erreur, mais vos clients aussi. S'en passer serait salutaire.
Nous savons que la mise en place de l 'amlioration progressive n'est pas un
processus binaire qui se limite valuer si la technologie espre existe ou non
sur le poste client. L'exprience utilisateur est au contraire variable chaque
niveau selon les capacits de son navigateur. Si ce dernier sait grer ds le
dpart la convention de couleurs RGBa, mais pas les arrondis d'angles, ce
n'est pas menaant au point d'empcher l'utilisateur de prendre connaissance
du contenu.
Nous devons adopter la mme approche pour JavaScript; abandonner tout
manichisme. Sans vouloir abuser des mtaphores culinaires, il nous faut
proposer les technologies la carte en distribuant les fonctions en petits
paquets autonomes et bien dlimits. Ces scripts multiples peuvent vrifer
leurs dpendances et dcider de se poursuivre seulement si l'environnement
d'excution et la page vise leur sont favorables.
Le prcdent script de navigation fond sur select donne un bon exemple
de mise en pratique de la premire partie de ce concept; il est entirement
autonome. Cependant, il ne prend pas les prcautions requises pour vrifer
ses nombreuses dpendances, parmi lesquelles la prsence de l'incontournable
jQuery. Pour y parvenir, il nous faut enchsser le tout dans une instruction
conditionnelle:
if ( typeof( jQuery ) != 'undefined' ) {
// Le code existant se place ici
}
Dans ce test, nous vrifons que l'objet nomm jQuery existe dans l'environ-
nement d'excution, et cet objet est cr si la librairie jQuery est disponible,
ce qui dtermine la valeur de "undefned". Le test de dpendance est une
technique vitale, qui vous vite de laisser survenir une erreur sur le poste
client, sans compter que cela peut vivifer le fonctionnement du navigateur
en empchant l'excution inutile de certains blocs de code.
ADAPWEB.indb 83 17/04/13 12:47
Voici un autre exemple qui pourra vous sembler familier:
if ( document.getElementById ) {
// Code dpendant de document.getElementById() ici
}
Nous nous assurons ainsi que la mthode de traverse de l 'arbre DOM
document.getElementById() existe avant de tenter d'y faire appel. Vous vous
souvenez que nous avions utilis cette approche dans l'exemple de dlgation
d'vnement lors du test de event.preventDefault().
Revenons au test de la librairie jQuery. Voyons si nous pouvons tre plus prcis
en cherchant connatre la version de jQuery, prcaution indispensable si
vous utilisez une mthode qui n'est apparue que dans une version rcente de
la librairie. Il est en gnral plus efcace de tester l'existence d'une mthode
en particulier, mais le test de version devient appropri pour une version de
librairie qui entrane un remaniement profond de l'interface de programmation
API pour une mthode qui existait auparavant:
if ( typeof( jQuery ) != 'undefined' &&
parseFloat( jQuery.fn.jquery ) >= 1.4 ) {
/* Code dpendant de jQuery 1.4 au minimum ici */
}
Le test de dpendance vous vite les situations d'erreur et plus vous l'efectuez
tt, plus vous conomisez l'espace mmoire et le processeur lorsque le poste du
client ne dispose pas de l'environnement requis pour profter de vos scripts.
jQuery n'est pas la seule dpendance de ce script: vous vous souvenez que nous
avions tenu compte de ses dpendances 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 constate
ne pas pouvoir fonctionner. Il ne perd pas de temps crer des lments ou
implanter un gestionnaire d'vnement inutilement.
En vous inspirant de l'exemple, vous trouverez des centaines d'occasions
d'interroger l'environnement du navigateur et la confguration de la page pour
dcider de lancer ou pas un script. Vous pouvez tester l'existence d'un objet,
les dpendances aux balises, la disponibilit d'une mthode ou d'un cookie,
le support Ajax, etc. Il n'y a aucune raison de se priver d'ajouter le code de
ADAPWEB.indb 84 17/04/13 12:47
test pour que les scripts repartent illico d'o ils viennent en toute discrtion
s'ils se sentent indsirables.
Le concept de test des dpendances est analogue aux requtes de mdia du
CSS. Puisque nous venons d'en parler, il nous faut voir maintenant comment
bien grer les interactions entre les scripts et les styles CSS.
EXCUTER AVEC STYLE
Le CSS est un volet des dpendances de script dont nous n'avons pas encore
parl. Dans neuf cas sur dix, si votre code JavaScript interagit avec le modle
DOM, vous devez grer le CSS d'une manire ou d'une autre. Dans l'approche
d'amlioration progressive, il faut choisir la meilleure manire d'appliquer
et de contrler les styles en JavaScript. Vous ne voudriez pas crer des inter-
faces qui perturberaient l'utilisateur par un fonctionnement dfectueux. Nous
reviendrons sur ce sujet plus loin.
Notre comprhension des modalits d'interaction entre JavaScript et CSS a
beaucoup volu au cours des dernires annes. Dans les dbuts du JavaScript,
la gestion des styles tait quasiment absente des scripts; tout tait crit en ligne
par modifcation de l 'attribut style des lments:
function highlight() {
var el = document.getElementById( 'message' );
el.style.color = '#f00';
el.style.backgroundColor = '#ffcfcf';
}
Du point de vue de la maintenance du code, cette faon de faire est une
catastrophe. Au moindre changement de l 'aspect ou de la structure, vous
deviez aussi trouver un spcialiste du JavaScript. Efcacit nulle et viol de la
rgle de sparation des couches fonctionnelles: en mlangeant prsentation
et comportement, on rend le travail plus difcile dans les deux univers.
L'tape d'volution suivante a consist stocker les donnes qui voluent
dans des variables, soit dans le script, soit en transmettant ces donnes dans
un objet de confguration (en conservant sous le coude des valeurs par dfaut
au cas o cette confguration serait contourne):
function highlight( config ) {
var el = document.getElementById( 'message' );
el.style.color = config.color || '#f00';
el.style.backgroundColor = config.backgroundColor
ADAPWEB.indb 85 17/04/13 12:47
|| '#ffcfcf';
}
highlight({
color: '#ebebeb',
backgroundColor: 'black'
});
La mise jour des chanes ne requiert dornavant que quelques connaissances
lmentaires en JavaScript, et toutes les rgles de styles sont runies en un seul
endroit, facilitant ainsi la maintenance.
Nous avons cependant constat qu'il tait beaucoup plus efcace d'extraire les
donnes des styles dans un fchier externe, puis de le solliciter en travaillant
avec la classe de l'lment de page vis:
function highlight() {
document.getElementById( 'message' )
.className += ' highlight';
}
Cela rduit le volume de code requis pour obtenir l'efet et entrane moins
de manipulations du modle DOM (l'efet sur les performances est norme).
De plus, le CSS peut alors tre retouch sans que l'on ait modifer le code
JavaScript qui utilise ces styles.
Je ne vais pas m'engager dans l'intressante discussion au sujet des manires
possibles de combiner scripts et styles tout en conservant assez de sparation
entre les deux domaines
12
. Je considre plus important de passer un peu de
temps dcouvrir quand et comment appliquer efcacement des styles depuis
un script. Ces points sont d'une grande importance et font donc l'objet de ma
troisime et dernire maxime de l 'amlioration progressive avec JavaScript:
3. Appliquer les styles seulement le moment venu.
Nous l'avons dj dit, les scripts qui exploitent les donnes DOM demandent
en gnral certaines modifcations des styles, que ce soit pour dplier/replier
le contenu d'un lment, mettre en exergue les nouveaux contenus ou ajouter
des efets visuels une interface glisser-dposer. Ce domaine d'exploitation
des styles est tout fait recommandable, mais les dveloppeurs ont souvent
12. J'ai donn un aperu de ce sujet dans un article nomm "Keeping the hot side hot and the
cold side cold" dans Scroll Magazine (http://scrollmagazine.com/number-1/keeping-the-
hot-side-hot).
ADAPWEB.indb 86 17/04/13 12:47
pris l'habitude d'appliquer les styles de chaque widget avant de savoir si ce
widget va efectivement tre utilis.
Prenons en guise d'exemple un widget accordon gomtrie variable. Dans
ce type d'interface utilisateur, les blocs de contenu sont masqus et seul l'onglet
de chacun est visible. Si les styles de masquage des sections de contenus sont
appliqus par dfaut et qu' il s'avre ensuite que le script ne peut pas tre
excut, l'utilisateur ne peut plus cliquer sur les onglets pour afcher les dtails.
Les styles auront t la cause d'une perte d'accessibilit aux contenus pour la
simple raison qu'ils ont t appliqus trop tt.
En revanche, si c'est le script qui dclenche l 'application des styles de l'tat
initial une fois que son excution a t confrme, il n'y aura pas de problme.
Si le script ne peut pas tre excut, les styles du widget ne sont pas appliqus
et le contenu reste visible, donc utilisable. En optant pour cette approche
d'application des styles, vous grez un jeu de rgles 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 rponds oui, c'est de l 'amlioration progressive mise
en uvre la perfection.
Figure 4.6 : Un widget accordon avec la premire section dplie et les trois
autres replies. Si l'on clique dans un onglet/titre d'une autre section, elle est
dplie et la prcdente est replie.
ADAPWEB.indb 87 17/04/13 12:47
Une technique efcace pour grer ce genre de styles d'interface conditionnelle
consiste associer une classe "d'activation" l'lment racine du widget. Le
tableau suivant donne quelques exemples.
STRATGIE CLASSE "SUSPENDUE" CLASSE "ACTIVE"
Ajout d'un sufxe "-on" la
classe de base
.accordion .accordion-on
Ajout d'une autre classe .auto-submit .auto-submit.active
Changement de forme de
la classe
.replace-me .replaced
Tableau 4.1 : Exploitation d'une classe "d'activation".
Cette prcaution vous assure de ne jamais appliquer de style avant qu'il soit
devenu ncessaire.
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 de variables, de fonctions ou de mthodes. De mme, il est conseill
d'isoler les styles de script des autres styles. Vous ne pouvez pas prvoir quels
autres noms de classes seront en vigueur sur une page (surtout si vous concevez
des scripts que d'autres vont rutiliser). Si vous n'isolez pas bien vos noms de
styles, ils peuvent dborder et occuper l'espace smantique du reste de la page
(ils risqueraient d'tre appliqus des lments de manire fortuite).
Pour isoler vos noms de styles, faites dbuter le nom de chaque slecteur par un
marqueur reprable qui aura trs peu de chances d'entraner un confit avec un
autre lment class ou id dans la page. Personnellement, je fais commencer
les noms par celui de l'objet JavaScript concern. Si je conois par exemple
un widget accordon nomm fort propos WidgetAccordeon, je peux classer
l'lment racine activ sous le nom "WidgetAccordeon-on", puis dduire mes
styles de ce radical:
.WidgetAccordeon-on .heading {
/* Styles de titrage */
}
.WidgetAccordeon-on .content-block {
/* Styles des blocs de contenu */
}
ADAPWEB.indb 88 17/04/13 12:47
.WidgetAccordeon-on .content-block.collapsed {
/* Styles des blocs de contenu replis */
}
Dans le sens inverse, il y a de faibles chances qu'une rgle de style extrieure
vienne polluer le contenu du widget cause des particularits de la spci-
fcit et de la cascade. En anticipant ces problmes, vous pouvez prendre les
mesures adquates en rendant vos slecteurs encore plus spcifques ou, plus
radicalement, en dfnissant explicitement chacune des proprits contrler
dans le widget au lieu de laisser les valeurs par dfaut.
PLANIFICATION ET RETENUE
Il est indniable que l 'amlioration progressive en relation avec JavaScript
suppose plus d'eforts qu'avec le CSS et le HTML. En prenant le temps de
rfchir aux nombreux facteurs qui infuent sur la qualit de l'exprience
des utilisateurs, cela deviendra vite une seconde nature. Au moindre doute,
rappelez-vous les trois maximes:
1. Vrifez que tout le contenu reste accessible et que toutes les actions indis-
pensables restent oprationnelles mme lorsque le JavaScript est dsactiv.
2. Utilisez le JavaScript pour gnrer les balises supplmentaires dont le
script a besoin.
3. Appliquez les styles seulement le moment venu.
En tant mieux arm pour tirer le proft maximal de la puissance de JavaScript,
vous tes certain de prendre les meilleures dcisions et d'obtenir des sites encore
plus ergonomiques.
ADAPWEB.indb 89 17/04/13 12:47
"Il faut bien des eforts pour se
btir une bonne rputation, mais
une seule mauvaise action fait
tout perdre."
BENJAMIN FRANKLIN
ADAPWEB.indb 90 17/04/13 12:47
CHAPI TRE 5
AMLIORATION
PROGRESSIVE ET
ACCESSIBILIT
En fvrier 2006, l 'association nationale des aveugles des tats-Unis a intent
un procs contre la socit Target en raison de l'impossibilit d'accder son
site web. Un mois plus tard, le procs a t transfr la cour fdrale ( la
demande de Target). La socit a tent de faire rejeter la plainte, mais elle
a eu tort, puisque le procs est devenu une action collective que Target a
fnalement teinte en 2008 en payant plus de 6 millions de dollars US (sans
compter les frais d'avocat).
Cette somme est remarquable quand on la rapproche de la raison premire
du procs : Target n'avait tout simplement pas pris la peine de grer les
problmes d'accessibilit aux handicaps, dont ils avaient pourtant t avertis
au pralable. Il n'y avait pas de texte de rechange alt pour les images, ils utili-
saient normment les mosaques d'images avec liens et obligeaient utiliser
la souris pour valider les formulaires. Ces difrents petits soucis auraient pu
tre rgls rapidement et facilement pour bien moins que 6 millions de dollars.
Personnellement, j'aurais rgl le problme contre quelques billets de100.
Si vous n'avez pas encore t confront l'accessibilit, qui est dans le cadre de
ce chapitre la mesure de facilit d'utilisation d'un site par les gens soufrant de
handicaps et par les technologies d'assistance correspondantes
1
, vous pourriez
1. Les technologies d'assistance sont trs varies. Les non-voyants utilisent des logiciels de
lecture audio du contenu de l'cran. Ceux dont la vision est faible peuvent zoomer sur le
texte dans le navigateur. Les malentendants utilisent des sous-titrages pour les vidos.
ADAPWEB.indb 91 17/04/13 12:47
prendre peur parce qu'il faut tenir compte de nombreux critres. Mme si vous
tes un des utilisateurs ayant des "besoins spciaux", il est fort probable que
votre exprience et que vos capacits ne soient pas les mmes que celles des
autres. Vous pouvez par exemple soufrir de daltonisme lmentaire (absence
de vision du rouge et du vert), mais de faon moins lourde que d'autres. Mme
avec ce handicap, vous ne pourrez pas aisment vous mettre la place de
personnes qui soufrent de ttranopie (incapacit de voir le bleu et le jaune). Si
vous vous intressez aux problmes d'accessibilit, que ce soit parce que 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 rsulter qu'une apprhension certaine.
Vous serez heureux d'apprendre qu'en choisissant de concevoir et de dvelopper
des sites web dans l'approche d'amlioration progressive, vous amliorez aussi
l 'accessibilit. En efet, l 'amlioration progressive vous invite concevoir vos
sites web d'abord au service du contenu, ce qui vous amnera en gnral
prendre la dcision approprie en termes d'accessibilit. Mais il y a bien sr
toujours moyen d'amliorer les choses, et c'est la raison d'tre de ce chapitre.
ENFIN, TU ME VOIS
Une des techniques JavaScript les plus utilises consiste masquer et cacher
du contenu. Cela sert concevoir des interfaces onglets, des lments pliables
et repliables, des gadgets en accordon. 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 ont une infuence sur l'accessibilit
de ce contenu par les technologies d'assistance telles que les lecteurs d'cran.
Le tableau qui suit prsente les difrents mcanismes disponibles pour cacher
du contenu, chacun ayant un impact difrent sur la page rsultante.
ADAPWEB.indb 92 17/04/13 12:47
CHAPITRE 5 AMLIORATION PROGRESSIVE ET ACCESSIBILIT 93
RGLES CSS EFFET VISUEL
EFFET
D'ACCESSIBILIT
visibility: hidden; L'lment est masqu sans
tre supprim du fux de
donnes (il occupe l'espace
correspondant).
Ce contenu est ignor par les
lecteurs d'cran.
display: none; L'lment est supprim du
fux et masqu, l'espace cor-
respondant tant rcupr.
Le contenu est ignor par les
lecteurs d'cran.
height: 0; width: 0;
overflow: hidden;
L'lment est repli et le
contenu est masqu.
Le contenu est ignor par les
lecteurs d'cran.
text-indent: -999em; Le contenu est dcal pour
sortir de l'cran, ce qui
le masque, mais les liens
peuvent cibler les lments
actifs. De plus, la translation
ngative peut tre insuf-
sante pour bien cacher le
contenu.
Les lecteurs d'cran ont
accs aux contenus, mais
seulement au texte et aux
lments inline.
position: absolute;
left: -999em;
Le contenu est supprim
du fux normal et dcal du
ct gauche. L'espace occup
est rduit.
Les lecteurs d'cran ont
accs au contenu.
Tableau 5.1 : Mcanismes de masquage de contenu.
Les deux premires techniques sont les plus utilises. display: none; est
exploite par quasiment toutes les librairies JavaScript de notre plante, et
par la plupart des widgets JavaScript prdfnis. 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,
mme masqu, c'est la dernire option qu'il faut adopter.
Si vous avez prvu de concevoir votre propre librairie JavaScript, la technique
consistant placer du contenu en dehors des limites de l'cran est assez simple
mettre en place. Cela devient en revanche beaucoup plus difcile si vous
vous fondez sur une librairie JavaScript prprogramme telle que jQuery
ou Prototype. En efet, cela suppose de pouvoir redfnir certains lments
internes la librairie. Vous pouvez cependant parvenir vos fns avec un
zeste d'intelligence.
ADAPWEB.indb 93 17/04/13 12:47
En efet, la plupart des librairies possdent dans le cadre de leurs fonctions
d'animation un mcanisme permettant de dfnir une fonction de rappel
(callback function). Ce genre de fonction est transmis par vous une fonction
de la librairie (ou une mthode d'un objet), charge pour cet objet de
dclencher l'excution de la fonction un certain moment. Si vous avez dj
utilis JavaScript pour charger du contenu via Ajax, vous connaissez le concept
de fonction de rappel qui permet d'efectuer certains traitements en attendant
que les donnes demandes reviennent du serveur.
En gnral, les librairies JavaScript proposent une fonction de rappel capable
de s'excuter la fn d'une certaine activit. Certaines ofrent en complment
des points d'ancrage d'autres tapes de l'excution d'une routine, par exemple
avant son commencement. Dans tous les cas, mme sans ces ancrages compl-
mentaires, vous pouvez crer des mcanismes 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 lments nomms #myButton et #myText, en les afectant
deux variables locales nommes $button et $text, respectivement. Il dfnit
ensuite une troisime variable locale nomme visible qui permet de suivre
l'tat courant des choses. Le script afecte ensuite un gestionnaire d'vne-
ments onclick l'lment #myButton pour inverser la visibilit de #myText en
modifant sa hauteur. Trs simple, non?
Ce script fonctionne comme prvu, sauf que jQuery utilise display: none
lorsque vous appelez slideUp(). En consquence, #myText est masqu par une
mthode qui en empche la lecture par un lecteur d'cran. Nous pouvons
efectuer une lgre retouche ce code pour ajouter une classe qui nous appar-
tient afn de rendre le contenu masqu plus accessible:
ADAPWEB.indb 94 17/04/13 12:47
(function(){
var $button = $('#myButton'),
$text = $('#myText'),
visible = true;
$button.click(function(){
if ( visible ) {
$text.slideUp('fast',function(){
$text.addClass('accessibly-hidden')
.slideDown(0);
});
} else {
$text.slideUp(0,function(){
$text.removeClass('accessibly-hidden')
.slideDown('fast');
});
}
visible = ! visible;
});
})();
Cette version du script est trs proche de la prcdente: lorsque le contenu
est masqu, la librairie peut grer l 'animation. La difrence est que le script
inverse ensuite l'tat de compltion de notre classe personnalise nomme
"accessibly-hidden". C'est ce qui permet de maintenir le contenu accessible aux
technologies d'assistance. Les tapes sont inverses lorsqu'il s'agit de rafcher
le contenu. Il est masqu par le script avant que la classe ne soit supprime,
puis l 'animation est ralise.
L'avantage de cette approche est qu'elle vous laisse matre de la mthode de
gestion du masquage du contenu, au lieu de dpendre 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
amliore. Vous n'avez plus attendre que les auteurs de la librairie procdent
la mise jour du mcanisme de masquage (s'ils acceptent de le faire).
Tout cela suppose bien sr que vous vouliez masquer du contenu de l'cran
tout en le maintenant accessible aux anciens appareils d'assistance. Si vous ne
voulez pas que le contenu soit lu par un lecteur d'cran, vous pouvez utiliser
display: none, mais ce n'est pas la meilleure approche, car vous n'avez dans ce
cas aucun moyen simple de faire savoir l'utilisateur que du nouveau contenu
est disponible. Pour ofrir le meilleur service vos utilisateurs, mieux vaut
adopter les rles et les statuts qui sont dfnis dans la spcifcation WAI-ARIA
ADAPWEB.indb 95 17/04/13 12:47
ou ARIA en abrg (Web Accessibility Initiative's Accessible Rich Internet
Applications)
2
.
Masquer du contenu avec ARIA est trs simple, puisqu'il suft d'adopter
l 'attribut aria-hidden.
<p aria-hidden="true">Devinez ? Je suis masqu mais accessible
grce ARIA.</p>
ARIA propose une srie de rles, d' tats et de proprits prdfnis qui
peuvent s'avrer trs utiles pour concevoir un site fortement fond sur JavaS-
cript. Et certains lments seront utiles pour construire des applications trs
interactives. Dcouvrons-les d'abord.
EMBAUCHER DES GUIDES
Un des nombreux aspects par lesquels ARIA amliore l 'accessibilit d'une
page web consiste proposer des rles de repres et de structures. La plupart
de ces rles constitue une formalisation des lments smantiques que nous
avons tent d'appliquer depuis des annes des lments HTML en ajoutant
une classifcation smantique et des identifants (nous l 'avions voqu dans
le Chapitre2). Les rles de repre et de structure d'ARIA (ainsi que les rles
de widgets que nous verrons bientt) doivent tre afects des lments au
moyen de l 'attribut nomm role.
Je sais ce que vous allez dire : role n'est pas un attribut reconnu dans
HTML4.x, ni dans XHTML1.x. C'est vrai. ARIA ajoute un certain nombre
d'attributs au lexique du HTML. Il en rsulte que vous ne pourrez pas valider
vos pages avec les mmes dfnitions de type de document que d'habitude.
Pour valider des pages utilisant ARIA dans l'un de ces deux langages, il vous
faudra utiliser un nouveau jeu de DTD
3
ou bien faire le saut vers HTML5
qui reconnat les attributs du type role.
Voici un premier exemple utilisant ARIA:
2. http://www.w3.org/TR/wai-aria/
3. Pour HTML 4.01 plus WAI-ARIA, le DOCTYPE est <!DOCTYPE html PUBLIC "-//W3C//
DTD HTML+ARIA 1.0//EN" "http://www.w3.org/WAI/ARIA/schemata/html4-aria-1.dtd">.
Pour le XHTML plus WAI-ARIA, le DOCTYPE est <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML+ARIA 1.0//EN" "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">.
ADAPWEB.indb 96 17/04/13 12:47
<ol role="navigation">
</ol>
Vous reconnaissez le code HTML du Chapitre 2, puisque c'est celui des
lments de navigation de la page Retreats 4 Geeks. La seule difrence est
l 'ajout l'lment ol d'un attribut role dont la valeur est "navigation". Vous
aurez devin que le repre ARIA nomm "navigation" permet de prciser qu'un
lment fait partie d'un mcanisme de navigation dans la page.
Tous les rles de reprage d'ARIA fournissent des informations concernant les
difrentes rgions de la page et permettent de naviguer globalement. Certaines
technologies d'assistance permettent l'utilisateur d'accder ces repres;
il peut ainsi naviguer directement d'une rgion l 'autre avec le clavier ou
un autre moyen. Ces repres sont les successeurs logiques de cette fope de
liens "aller "
4
. En revanche, les rles structurels sont des outils d'organisation
proches des lments HTML5 tels que section et article.
Vous vous souvenez peut-tre que dans l'exemple original, nous avions englob
l'lment de navigation ol dans un nouvel lment HTML5 nomm nav. Une
brve rfexion vous permettra de conclure que cet lment nav est quivalent
au niveau smantique au rle de repre de "navigation". Sachez ds prsent
que ce n'est pas le seul domaine de chevauchement entre HTML5 et ARIA.
Redondant et raisonnable
Les deux spcifcations (HTML5 et ARIA) ont progress de faon indpen-
dante au cours de la mme priode. Chacune a cherch rpondre aux
problmes qu'elle considrait comme les plus urgents dans la norme actuelle du
HTML. (De l, la redondance invitable.) La spcifcation ARIA est l'heure
actuelle un peu plus mre pour devenir une recommandation que HTML5.
La plupart de ces caractristiques particulires sont de ce fait incorpores au
projet HTML5, dont la spcifcation continue d'voluer. Nous pouvons sans
4. Les liens "Aller " sont ceux qui permettent de sauter directement une autre rgion de la
page avec un ancrage. Ce sont ceux qui portent des lgendes du style "Aller au contenu" ou
"Aller au menu". Ils taient trs utiliss depuis des annes, mais les rles de repres ARIA
les rendent redondants.
ADAPWEB.indb 97 17/04/13 12:47
grand risque nous attendre ce que les deux spcifcations aient sufsamment
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 beaucoup de doublons entre ARIA et HTML5, d'abord
au niveau des rles structurels, et un peu moins au niveau des rles de repres.
Le Tableau5.2 donne un aperu comparatif entre la smantique traditionnelle,
le rle ARIA quivalent et l'lment HTML5 qui atteint le mme objectif,
s'il existe.
SMANTIQUE
AD-HOC
RLE ARIA
LMENT
HTML5
SIGNIFICATION
#header, #top banner header
(approx.)
Rgion de la page cible
au niveau site et non au
niveau page
#main, #content main aucun Contenu focalis dans le
document
#extra,
.sidebar
complementary,
note
aside Section complmentaire
du document relie au
contenu principal (le
contenu "complementary"
reste signifcatif, mme
spar du principal).
#footer,
#bottom
contentinfo footer Rgion contenant des
informations au sujet du
document
#nav navigation nav Rgion contenant des liens
de navigation
.hentry article article Rgion de la page consti-
tuant une section indpen-
dante du document
Tableau 5.2 : Comparaison entre smantique traditionnelle, rle ARIA et
lment HTML5 ventuel.
Pour l'instant, on remarque des allers-retours entre la communaut dfnissant
le HTML5 et les dfenseurs de l 'accessibilit. La question est de savoir
comment grer la redondance. En termes pratiques, mme si vous avez
ADAPWEB.indb 98 17/04/13 12:47
opt pour les quivalences smantiques HTML5 du ARIA, il est conseill
d'ajouter les rles de repres ARIA en doublons parce que toutes les techno-
logies d'assistance ne grent pas les lments HTML5 correspondants. En
revanche, pour les rles structurels, vous faites comme bon vous semble, car
ce sont des lments d'organisation qui n'entrent pas en ligne de compte pour
les technologies d'assistance aux utilisateurs.
Une rapide lecture du code source de la page Retreats 4 Geeks permet de voir
cette redondance dans les lments nav et footer. Lorsque les technologies
d'assistance seront mises jour pour HTML5, nous pourrons supprimer les
attributs de rles devenus inutiles et claircir un peu notre code.
En plus des doublons avec HTML5, ARIA comporte plusieurs rles qui
dupliquent la smantique disponible depuis longtemps en HTML. C'est par
exemple le cas des rles de repres et de structures ARIA suivants: column-
header, definition, form, heading, img, list, listitem, row, rowheader et
separator. Certains d'entre eux sont en quivalence univoque avec le HTML
(par exemple,"form"), alors que d'autres sont des variantes plus gnrales de ce
dont nous disposons en HTML (par exemple, "list").
Alors que l'on peut aisment concder qu'il y ait quelques chevauchements
entre ARIA et HTML5 en raison de leur dveloppement parallle, vous
pourriez vous demander pourquoi ARIA cherche recrer des lments
smantiques qui existent en HTML depuis plus de dix ans. La rponse est trs
directe: pour une raison ou une autre, certaines entreprises (<humhum>Google</
humhum>) aiment employer un balisage non smantique (par exemple, div)
comme structure de base de l'interface, en exploitant JavaScript pour que le
rsultat ressemble un contrle HTML natif. Rien que pour cette raison,
ARIA dfnit des rles qui sont en chevauchement. Vous ne me verrez
jamais utiliser un lment div dans un rle de formulaire "form" (j'utilise tout
simplement un lment 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 lments HTML5 quivalents en termes smantiques aux rles de repres
et de structures d'ARIA (nav, footer, article). Nous avons ajout l'qui-
valent en rle ARIA afn d'tre certains de servir le plus grand nombre de
visiteurs. (Rappelons qu'il s'agit bien de l'objectif primordial de l 'amlioration
progressive). Mais nous n'en avons pas fni. Comme le montre le Tableau5.2,
l'quivalent smantique du rle ARIA "banner" en lment header du HTML5
ADAPWEB.indb 99 17/04/13 12:47
peut se discuter. Pour tre absolument clair dans le service que je rends mes
visiteurs, j'ai donc ajout ce rle:
<header role="banner">
Le seul rle que nous n'avons pas encore abord pour l'instant (il n'est pas
encore gr en HTML5) correspond "main". Il permet de dsigner le contenu
focalis du document. Dans le Chapitre2, j'avais choisi d'englober dans un
lment section les difrents lments article de la page. J'avais choisi le
mme lment comme racine de notre micro-format hCalendar. Cet lment
section rve d'endosser le rle de "main":
<section id="content" class="vevent" role="main">
Ces deux simples retouches nous ont permis de prendre en compte tous les
rles de repres qu'il semble utile d'exploiter dans le site Retreats 4 Geeks. Au
passage, nous avons amlior l 'accessibilit globale de la page en permettant
aisment aux utilisateurs des technologies d'assistance de naviguer dans le
document.
INDISPENSABLES INDICES ?
La spcifcation ARIA fournit aux utilisateurs les moyens de naviguer dans
les documents, mais elle propose d'autres fonctions utiles, et notamment une
collection de rles et d'tats de widgets.
Un rle de widget (un composant d'interface) correspond la description du
rle d'un lment. Ces rles sont en gnral classs en deux catgories: ceux
qui s'intressent la structure et les autres. En d'autres termes, il y a ceux
des conteneurs et ceux des contenus que sont les composants. Les conteneurs
sont les lments qui hbergent les composants d'un widget de l'interface.
Prenons comme exemple l'interface onglets de la Figure5.1. Une interface
onglets se fonde sur deux parties: une liste d'onglets et une collection de
panneaux correspondant ces onglets. Il en rsulte trois rles distincts en
ARIA: les onglets qui portent le rle de "tab", la liste d'onglets qui porte le rle
de "tablist", et le panneau correspondant chaque onglet qui porte le rle
de "tabpanel". Les deux rles "tab" et "tabpanel" sont des rles de composants
alors que "tablist" est un rle de conteneur (la liste qui contient les onglets).
ADAPWEB.indb 100 17/04/13 12:47
Figure 5.1 : Exemple d'interface onglets.
La spcifcation ARIA dfnit toute une srie de rles de widgets. Cela vous
permet de construire des contrles complexes de formulaires (par exemple,
des curseurs de rglage et des slecteurs numriques rotatifs) ou bien des
menus arborescents, des botes de dialogue modales ou mme des interfaces
glisser-dposer, et tout cela en garantissant l 'accessibilit. Au niveau des rles
de structures, ARIA permet de redfnir un lment HTML n'ayant aucun
sens pour qu'il en prenne un en termes fonctionnels.
<div role="button">Je ne suis pas un vrai bouton, mais je fais
comme si sur le web</div>
Tout cela est trs prometteur, mais pour qu'un widget fonctionne, il faut
du code JavaScript. Habituellement, c'est un contexte auquel l 'accessibilit
n'a pas accs. La principale raison pour laquelle les techniques du type
Ajax ne s'entendent pas trs bien avec l 'accessibilit est lie au fait que le
langage HTML ne propose aucun mcanisme permettant au code JavaS-
cript d'informer l'utilisateur (ou la technique d'assistance qu'il a choisie) en
temps rel, hormis les deux techniques trs lmentaires et intrusives que
sont alert() et confirm() (on pourrait les comparer des perturbateurs qui
crient du fond de la classe).
ADAPWEB.indb 101 17/04/13 12:47
Dans ARIA, la gestion du contexte est confe des "tats". Un tat ARIA
correspond un groupe d'attributs pouvant tre appliqus quasiment tous
les lments. Certains tats sont globaux (ils s'appliquent tous les lments),
alors que d'autres sont spcifques au contexte de certains widgets. Tous ces
tats portent un nom commenant par "aria-". Ils transmettent des informa-
tions utiles au visiteur concernant ce qui a chang pour un lment dsign.
Saviez-vous que vous connaissiez dj l'un des ces tats: aria-hidden? Cet
attribut aria-hidden a t vu en dbut de chapitre. Il accepte une valeur
boolenne ("true" ou "false") et indique l 'agent du poste client ou la techno-
logie d'assistance s' il faut ou non faire connatre l'utilisateur le contenu
concern. Parmi les autres tats ARIA prdfnis, nous pouvons citer aria-
disabled, aria-expanded, aria-invalid, aria-pressed et aria-selected.
Si nous revenons l'interface onglets de la Figure5.1, nous pouvons tirer
proft de l'tat aria-hidden pour contrler l'tat des panneaux et de l'tat
aria-selected pour grer l'tat des onglets.
Mais la spcifcation ARIA va plus loin encore. Elle dfnit des attributs
d'tats, mais galement un certain nombre de proprits pouvant tre associes
un lment. 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 proprits sont destines 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 rfrence
id comme paramtre. Cet identifant doit correspondre l'lment dont le
contenu ou la prsence est contrl par un autre lment auquel l 'attribut est
appliqu. Dans notre interface onglets, c'est l'onglet qui contrle 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 mme que
pour aria-controls.
ADAPWEB.indb 102 17/04/13 12:47
role="tab" id="recipe-0-tab"
aria-controls="recipe-0"
role="tabpanel" id="recipe-0"
aria-labelledby="recipe-0-tab"
Figure 5.2 : Grce aux proprits ARIA, nous pouvons mettre en relation les
difrents composants de l'interface.
Les tats et les proprits ARIA aident beaucoup maintenir l'utilisateur
inform. Voyons un autre concept ARIA qui est simple et dont l' intrt
pratique est vident: les rgions actives (Live Regions).
MAIS C'EST VIVANT !
L'apparition du mcanisme Ajax et de la recrudescence du JavaScript ont
eu pour rsultat qu'une des choses les plus dsagrables dans l'exprience
utilisateur est devenue la mise jour en temps rel de certaines rgions d'une
page. Cela entrane de nombreux problmes d'usage, les deux principaux
tant les suivants: 1) les technologies d'assistance n'taient pas informes des
changements et n'avaient aucun moyen d'informer l'utilisateur leur tour ;
et 2) un utilisateur qui efectue un zoom ou qui dfle sur un appareil petit
cran n'est pas inform des mises jour du contenu qui se produisent en
dehors de la zone afche. La spcifcation ARIA propose un attribut qui
rsout directement ce problme: aria-live.
ADAPWEB.indb 103 17/04/13 12:47
Le plus tonnant dans aria-live est sa simplicit. Il suft d'appliquer cet
attribut un lment pour contrler quand et comment sa mise jour est
communique l'utilisateur. L'attribut aria-live accepte l'une des trois
valeurs suivantes:
1. "off" lorsque les mises jour sont frquentes et de peu d' importance,
comme dans le cas d'un fux dynamique de votre compte Twitter (n'est-ce
pas?);
2. "polite" pour les mises jour assez importantes pour en informer l'utili-
sateur lorsqu'il ne fait rien 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 sufsamment importantes pour devoir
tre immdiatement annonces, 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:
<article id="contact" aria-live="assertive">
Cette simple retouche permet de garantir que l'utilisateur sera inform de
toute erreur pendant le remplissage du formulaire et d'avoir la confrmation
que le formulaire a bien t transmis.
ADOPTION ET MANQUES
Depuis son lancement, ARIA a fait l'objet d'un bon accueil de la commu-
naut web. Au jour o nous crivons ceci, tous les grands navigateurs ont
incorpor une certaine dose de support ARIA, de mme pour les outils de
lecture d'cran rpandus tels que JAWS, Windows Eyes, NVDA et Orca. De
grandes entreprises comme IBM, Sun Microsystems, Adobe, Yahoo! et Google
travaillent d'arrache-pied augmenter l'efcacit et l'exhaustivit d'ARIA.
La communaut JavaScript a aussi adopt ARIA, les deux outils Dojo Dijits
5

et jQuery UI
6
ayant incorpor les rles, tats et proprits ARIA dans leurs
composants. La spcifcation est encore en cours de dveloppement et aucune
mise en place n'est encore complte, mais les progrs sont permanents.
5. http://dojotoolkit.org/widgets
6. http://jqueryui.com/
ADAPWEB.indb 104 17/04/13 12:47
Ce serait pch de ma part de ne pas mentionner le principal problme qui
empche ARIA de se fondre harmonieusement dans notre approche d'am-
lioration progressive, tout du moins au niveau des rles et des tats des widgets.
En efet, nous ne disposons d'aucun moyen de tester la disponibilit du support
ARIA dans le navigateur ou dans la technologie d'assistance. Nous ne pouvons
donc pas bien dcider comment exploiter au mieux chaque widget. Derek
Featherstone avait soulev ce problme dans son excellent article pour le site
A List Apart sous le titre "ARIA and Progressive Enhancement
7
". J'en conseille
la lecture tous ceux qui veulent mieux comprendre ce problme. Pour le
moment, aucune solution n'a encore t trouve, mais croisons les doigts.
LES RACCOURCIS CLAVIER, C'EST BIEN
Le dernier sujet que je veux aborder avant de clore ce chapitre est l'accessibilit
au moyen du clavier. L'utilisation systmatique 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 grave erreur. Le clavier reste un outil
extrmement pratique, et il constitue l'interface de prdilection de la plupart
des utilisateurs non-voyants tout autant que des utilisateurs chevronns.
Nous avons appris beaucoup en ce qui concerne le clavier au cours des
dernires annes. Nous avons tout d'abord compris que les touches d'accs
constituaient une bonne ide, mais que dans la pratique ce n'tait pas si
intressant
8
. Nous avons galement compris qu'une application trop rigou-
reuse de l 'attribut tabindex pouvait plonger les utilisateurs dans une frnsie
de sauts d'un lment l'autre (et un nervement certain)
9
. Ce que nous avons
surtout dcouvert, c'est que nous pouvions nous servir du code JavaScript pour
modifer dynamiquement la valeur de l 'attribut tabindex pour simplifer le
cheminement de l'utilisateur parmi les difrents composants d'un widget
complexe, comme c'est le cas d'une interface onglets ou d'un formulaire en
accordon.
quoi correspond cette technique appele jonglage tabindex? Au cours de
l'anne 2005 (on n'a pas retrouv l'origine exacte), quelqu'un a dcouvert qu'en
donnant la valeur "-1" l'attribut tabindex d'un lment, cela cartait l'lment
7. http://alistapart.com/articles/aria-and-progressive-enhancement/
8. http://www.wats.ca/show.php?contentid=32
9. http://webaim.org/techniques/keyboard/tabindex
ADAPWEB.indb 105 17/04/13 12:47
de la squence de focalisation par la touche TAB dans le document
10
. Ce qui
est intressant, c'est que bien que le composant concern ne fasse plus partie
de la squence de tabulation dans le document, on peut encore le cibler en
code JavaScript (avec element.focus()), ce qui ouvre de nouvelles possibilits
pour contrler prcisment l'exprience de l'utilisateur.
Parcourons un scnario typique en revisitant l'interface onglets prsente
un peu plus haut:
1. L'utilisateur arrive dans l'interface onglets et actionne la touche TAB de
son clavier, ce qui focalise sur le premier onglet (qui est associ au panneau
actuellement afch).
2. S'il actionne nouveau la touche TAB ou le bouton du clavier tactile, le
focus passe l'lment de contenu ciblable suivant en quittant la section
des onglets. Cela ne l'emmne pas l'onglet suivant dans la liste.
3. S'il maintient la touche MAJ tout en actionnant la touche TAB, il revient dans
la liste des onglets et ractive l'onglet courant.
4. Il peut utiliser les fches du curseur pour circuler parmi les difrents
onglets de la liste, en afchant chaque fois le panneau correspondant.
5. S'il actionne la touche ENTRE pendant qu'il navigue dans la liste des onglets,
il focalise sur le panneau correspondant l'onglet actif.
Je reconnais que cela reprsente beaucoup d'utilisation de la touche TAB (et un
df remarquable). Cependant, en jouant bien avec tabindex et en ajoutant un
peu de code JavaScript, vous y arrivez aisment. Voici comment:
1. Vous commencez par afecter la valeur "-1" au tabindex de chacun des
onglets et panneaux, ce qui les carte de la squence de tabulation de la
page.
2. Vous rafectez ensuite la valeur "0" l'onglet courant pour le rapatrier
dans la squence de tabulation sa position par dfaut.
3. En JavaScript, vous pouvez ensuite rgler dynamiquement la proprit
tabindex de chacun des onglets en fonction des commandes frappes au
clavier par l'utilisateur, par exemple les touches gauche, droite, haut et
bas. Vous permettez ainsi l'utilisateur de se dplacer facilement dans
l'interface.
10. Ce comportement a t particulirement intressant parce que, selon la spcifcation du
W3C, tabindex ne pouvait accepter une valeur qu'entre 0 et 32767.
ADAPWEB.indb 106 17/04/13 12:47
Voici un extrait de la mthode nomme swap() de TabInterface qui montre
comment jongler avec tabindex (vous y trouvez galement un peu de manipu-
lation des attributs ARIA et d'interversion d'lments class):
function swap( e ) {
// ...
// Dsactivation du panneau et de l'onglet actifs
removeClassName( old_tab, 'active' );
old_tab.setAttribute( 'aria-selected', 'false' );
old_tab.setAttribute( 'tabindex', '-1' );
removeClassName( old_folder, 'visible' );
old_folder.setAttribute( 'aria-hidden', 'true' );
// Activation du nouveau panneau et onglet
addClassName( tab, 'active' );
tab.setAttribute( 'aria-selected', 'true' );
tab.setAttribute( 'tabindex', '0' );
addClassName( new_folder, 'visible' );
new_folder.setAttribute( 'aria-hidden', 'false' );
// ...
}
Pour voir cette technique en pleine action, allez dcouvrir TabInterface.js sur
le site Github
11
.
AGISSEZ ACCESSIBLE
L'accessibilit est un sujet complexe. Un peu de temps est ncessaire pour vous
y habituer, mais cela deviendra ensuite une seconde nature. Comme toutes les
autres techniques de ce livre, l'accessibilit devra de prfrence tre applique
en plusieurs niveaux, afn de construire l'interface utilisateur progressivement.
Vous pourrez ainsi crer un rsultat qui rpondra aux attentes de tous vos
utilisateurs.
11. http://github.com/easy-designs/TabInterface.js
ADAPWEB.indb 107 17/04/13 12:47
"Quand tu veux construire un
bateau, ne commence pas par
rassembler du bois, couper des
planches et distribuer du travail,
mais rveille au sein des hommes
le dsir de la mer grande et belle."
ANTOINE DE SAINT-EXUPERY
ADAPWEB.indb 108 17/04/13 12:47
CHAPI TRE 6
EMPORTER
Nous avons visit bien des aspects durant cette courte promenade ensemble.
Nous avons vu l 'amlioration progressive en action, en partant d'un simple
document texte pour aboutir une page web attrayante, fonctionnelle et
restant accessible tous. Le rythme de croisire a t soutenu, mais nous
esprons que vous repartez avec une ide plus prcise de ce qu'est l 'amlio-
ration progressive, pourquoi cela fonctionne et comment l'incorporer dans vos
prochains projets, au niveau conception et dveloppement. Vous avez peut-tre
dj mis en pratique certaines techniques.
Bien que ce livre soit de pagination rduite et que nous ayons la chance de
pouvoir faire appel un excellent concepteur d'index, vous pourriez aisment
ne plus savoir o a t abord un concept que vous voudriez revoir. Je fournis
cet efet dans les pages suivantes un rapide rsum des principales techniques
prsentes, avec des conseils d'utilisation.
Cette checklist de l 'amlioration progressive vous permettra de vrifer que
vous tenez compte avec toute la considration requise des aspects essentiels
de l 'amlioration progressive.
votre tour de mettre tout cela en pratique en concevant des choses superbes!
ADAPWEB.indb 109 17/04/13 12:47
LA CHECKLIST DE L'AMLIORATION
PROGRESSIVE
Contenu & HTML (Chapitre 2)
UN MANUSCRIT/TAPUSCRIT BIEN RDIG ET NE PERDANT PAS SON SENS LORSQU'IL
EST LU PAR UN LECTEUR CRAN AUDIO
Il s'agit du niveau fondamental de l'exprience utilisateur; il doit faire
l'objet de tous vos soins. Nous donnons quelques pistes dans la biblio-
graphie.
CHOISISSEZ VOS LMENTS HTML EN FONCTION DE LEUR SIGNIFICATION
Le simple fait de tirer proft de la smantique standard des lments
(balises) HTML reprsente un grand pas vers une meilleure accessi-
bilit (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 LMENTS QUI
PARTICIPENT LA MME FONCTION
La classifcation (au moyen de l 'attribut class, par exemple) donne du
sens aux lments HTML pour lesquels le standard n'en fournit pas
assez et lorsqu'il n'existe pas de micro-format appropri.
IDENTIFIEZ LES LMENTS STRUCTURANTS
L'identifcation (par exemple par l'utilisation de l 'attribut id) est une
excellente solution pour ajouter du contexte une rgion de page ou
une instance spcifque d'un lment de classifcation.
ADAPWEB.indb 110 17/04/13 12:47
CHAPITRE 6 EMPORTER 111
CSS (Chapitre 3)
VRIFIEZ MINUTIEUSEMENT VOS SLECTEURS COMPOSITES
Vous prenez des risques en mlangeant des slecteurs de niveaux de
complexit trs difrents, car lorsque le navigateur ne comprend pas un
des slecteurs, il ignore tout le jeu de rgles. Cela devient en revanche
une bonne astuce si votre but est de masquer tout un jeu de rgles pour
les anciens navigateurs.
ORGANISEZ VOS RGLES CSS EN PENSANT AU MCANISME DE CASCADE
L'ordre d'apparition est signifcatif. Une bonne organisation de vos
rgles de styles vous aidera concevoir une structure amlioration
progressive, ce qui rendra votre code CSS plus facile maintenir.
MASQUEZ LES JEUX DE RGLES CSS RCENTES AUX ANCIENS NAVIGATEURS
Un des plus puissants outils CSS pour masquer slectivement des jeux
de rgles est le bloc @media.
GREZ LES DIVERGENCES D'IE AVEC DES COMMENTAIRES CONDITIONNELS
Les anciennes versions d'Internet Explorer sont rputes pour leurs
imperfections. Les Commentaires Conditionnels du type <!--[if IE
constituent la meilleure technique pour ajouter des correctifs en CSS et
en JavaScript selon la version d'IE. Pensez les organiser en squence
descendante, de la plus rcente la plus ancienne version grer.
ASSUREZ-VOUS D'AVOIR PRIS EN COMPTE LES MDIAS ET CONTEXTES DE RECHANGE
Les dsignations et les requtes de mdias permettent d'adapter le
rendu visuel et l'interaction aux possibilits du contexte d'utilisation.
ADAPWEB.indb 111 17/04/13 12:47
JavaScript (Chapitre 4)
VRIFIEZ QUE VOTRE CODE JAVASCRIPT RESTE DISCRET ET NON BLOQUANT
Les scripts doivent tre les plus gnriques possible et rester le moins
possible imbriqus avec le marquage. C'est ce qui vous permettra de les
reformuler de faon indpendante. Vos scripts JavaScript ne doivent
pas dpendre d'un marquage spcifque, mais tre assez souples pour
pouvoir s'adapter aux volutions du contenu de la page.
VRIFIEZ QUE TOUT LE CONTENU EST ACCESSIBLE ET QUE TOUTES LES ACTIONS
INDISPENSABLES PEUVENT TRE FAITES MME LORSQUE LE JAVASCRIPT EST
DSACTIV
Vous ne devez pas rendre la prsence de JavaScript obligatoire. Un
point, c'est tout. Lorsque vous voulez enrichir la page avec du JavaS-
cript, adoptez l 'approche Hijax.
SERVEZ-VOUS DE JAVASCRIPT POUR GNRER TOUT LE MARQUAGE
SUPPLMENTAIRE QU'IL NCESSITE
JavaScript est un excellent outil pour appliquer des traitements au
modle DOM. Il n'y a donc aucune raison pour injecter de faon fge
le marquage qui n'a t ajout que pour le fonctionnement du script.
SERVEZ-VOUS DE JAVASCRIPT POUR ACTIVER LES STYLES LIS AU SCRIPT
Une des situations les plus navrantes consiste englober du contenu
dans un composant widget puis constater que le widget ne fonctionne
pas, parce que JavaScript est dsactiv ou que le script contient une
erreur. Prvoyez une option binaire pour que JavaScript active les
styles lis au widget.
CONCEVEZ DES SCRIPTS DDIS DS QUE C'EST POSSIBLE
Essayez toujours de concevoir des scripts pouvant fonctionner en
indpendance et appliquez les tests unitaires qui vous permettent de
vrifer qu'ils sont autonomes.
ADAPWEB.indb 112 17/04/13 12:47
Accessibilit (Chapitre 5)
EMPLOYEZ DES REPRES ARIA PARTOUT O ILS SONT APPROPRIS
Si vous travaillez en HTML5, certains repres ARIA vous sembleront
redondants, mais il vaut mieux les prvoir aussi pour tre par. Leur
utilisation est facile et ils peuvent fortement augmenter l 'accessibilit
de vos pages.
SERVEZ-VOUS DES RLES ET DES TATS ARIA POUR DONNER AUX UTILISATEURS DES
DTAILS SUR LES WIDGETS
Lorsque vous implantez un widget conu en JavaScript, les utilisateurs
ont peu d'indices sur ce que dclenche leur interaction avec lui. Les
rles et les tats remplissent cette absence.
SERVEZ-VOUS DE TABINDEX POUR GUIDER L'UTILISATEUR PARMI LES LMENTS
INTERACTIFS DE LA PAGE
L'attribut tabindex permet d'tablir une trajectoire travers la page, et
guide l'utilisateur vite et bien vers les repres importants. Vous pouvez
aller plus loin en exploitant JavaScript pour dcider la vole de ce
qui peut ou ne peut pas tre focalis en fonction des interactions de
l'utilisateur avec les composants de la page.
ADAPWEB.indb 113 17/04/13 12:47
BIBLIOGRAPHIE
Contenu et rdaction
Livres parus
The Elements of Content Strategy par Erin Kissane, A Book Apart, 2011
Disponible en franais chez Eyrolles : Stratgie de contenu Web (ISBN :
2212132794), traduction de Muriel Vandermeulen.
Content Strategy for the Web par Kristina Halvorson, New Riders, 2009
Articles sur le Web
"Writing Content that Works for a Living" par Erin Kissane, A List Apart
http://www.alistapart.com/articles/writingcontentthatworksfora-
living/
"Reviving Anorexic Web Writing" par Amber Simmons, A List Apart
http://www.alistapart.com/articles/revivinganorexicwebwriting/
"Better Writing Through Design" par Bronwyn Jones
http://www.alistapart.com/articles/betterwritingthroughdesign/
"Calling All Designers: Learn to Write!" par Derek Powazek, A List Apart
http://www.alistapart.com/articles/learntowrite/
"Attack of the Zombie Copy" par Erin Kissane, A List Apart
http://www.alistapart.com/articles/zombiecopy/
ADAPWEB.indb 114 17/04/13 12:47
Marquage HTML
Livres parus
HTML5 for Web Designers par Jeremy Keith, A Book Apart, 2010
Disponible en franais chez Eyrolles: HTML5 pour les web designers (ISBN:
2212128614), traduction de Charles Robert.
Web Standards Solutions: The Markup and Style Handbook, Special Edition
par Dan Cederholm, Friends of ED, 2009
Disponible en franais chez Pearson: Bonnes pratiques des standards du web
(ISBN: 2744025720), traduction de Sandrine Burriel.
Designing with Web Standards, 3rd Edition par Jefrey Zeldman et Ethan
Marcotte, New Riders, 2009
Developing with Web Standards par John Allsopp, New Riders, 2009
Microformats: Empowering Your Markup for Web 2.0 par John Allsopp,
Friends of ED, 2007
Articles sur le Web
"Where Our Standards Went Wrong" par Ethan Marcotte, A List Apart
http://www.alistapart.com/articles/whereourstandardswentwrong/
"How to Grok Web Standards" par Craig Cook, A List Apart
http://www.alistapart.com/articles/grokwebstandards/
"Using XHTML/CSS for an Effective SEO Campaign" par Brandon
Olejniczak, A List Apart
http://www.alistapart.com/articles/seo/
ADAPWEB.indb 115 17/04/13 12:47
CSS
Livres parus
CSS3 for Web Designers par Dan Cederholm, A Book Apart, 2010
Disponible en franais chez Eyrolles: CSS3 pour les Web Designers (ISBN:
2212129874), traduction de Charles Robert.
CSS Mastery: Advanced Web Standards Solutions, Second Edition par Simon
Collison, Andy Budd, Cameron Moll, Friends of ED, 2009
Disponible en franais chez Pearson: Matrise des CSS (2e dition) (ISBN:
2744024465) traduction de Patrick Fabre.
More Eric Meyer on CSS par Eric Meyer, New Riders, 2004
En franais, voyez ce livre du mme auteur chez Pearson: CSS, techniques
professionnelles pour mise en page moderne (ISBN: 2744025763).
Handcrafted CSS: More Bulletproof Web Design par Dan Cederholm et Ethan
Marcotte, New Riders, 2009
Bulletproof Web Design: Improving fexibility and protecting against worst-
case scenarios with XHTML and CSS (2nd Edition) par Dan Cederholm,
New Riders, 2007
Eric Meyer on CSS: Mastering the Language of Web Design par Eric Meyer,
New Riders, 2002
Articles sur le Web
"Adaptive Layouts with Media Queries" par Aaron Gustafson,
.Net Magazine, Issue 205
ADAPWEB.indb 116 17/04/13 12:47
"Responsive Web Design" par Ethan Marcotte, A List Apart
http://www.alistapart.com/articles/responsive-web-design/
"Accessible Data Visualization with Web Standards" par Wilson Miner,
A List Apart
http://www.alistapart.com/articles/accessibledatavisualization/
"Big, Stark & Chunky" par Joe Clark, A List Apart
http://www.alistapart.com/articles/lowvision/
"Elastic Design" par Patrick Grifths, A List Apart
http://www.alistapart.com/articles/elastic/
"CSS Design: Going to Print" par Eric Meyer, A List Apart
http://www.alistapart.com/articles/goingtoprint/
JavaScript
Livres parus
Bulletproof Ajax par Jeremy Keith, New Riders, 2007
DOM Scripting par Jeremy Keith, Friends of ED, 2006
En franais, nous conseillons JavaScript, les bons lments de Douglas
Crockford (ISBN: 2744025828).
Articles sur le Web
"Test-Driven Progressive Enhancement" par Scott Jehl, A List Apart
http://www.alistapart.com/articles/testdriven/
"Behavioral Separation" par Jeremy Keith, A List Apart
http://www.alistapart.com/articles/behavioralseparation/
ADAPWEB.indb 117 17/04/13 12:47
"Improving Link Display for Print" par Aaron Gustafson, A List Apart
http://www.alistapart.com/articles/improvingprint/
"JavaScript Triggers" par Peter Paul Koch, A List Apart
http://www.alistapart.com/articles/scripttriggers/
Accessibilit & ARIA
Livres parus
Designing with Progressive Enhancement: Building the Web that Works for
Everyone par Todd Parker, Scott Jehl, Maggie Costello Wachs, Patty Toland,
New Riders, 2010
Just Ask: Integrating Accessibility Throughout Design par Shawn Lawton
Henry, Lulu, 2007
Design Accessible Web Sites: 36 Keys to Creating Content for All Audiences
and Platforms par Jeremy Sydik, Pragmatic Bookshelf, 2007
Articles sur le Web
"Accessible Web 2.0 Applications with WAI-ARIA" par Martin Kliehm,
A List Apart
http://www.alistapart.com/articles/waiaria/
"HTML5 and the myth of WAI-ARIA redundance" par Steve Faulkner,
The Paciello Group Blog
http://www.paciellogroup.com/blog/?p=585
"DHTML Style Guide" par AOL Developer Network
http://dev.aol.com/dhtml_style_guide
"Making Compact Forms More Accessible" par Mike Brittain, A List Apart
http://www.alistapart.com/articles/makingcompactformsmoreacces-
sible/
ADAPWEB.indb 118 17/04/13 12:47
"High Accessibility Is Efective Search Engine Optimization" par Andy
Hagans, A List Apart
http://www.alistapart.com/articles/accessibilityseo/
"What Is Web Accessibility?" par Trenton Moss, A List Apart
http://www.alistapart.com/articles/wiwa/
ADAPWEB.indb 119 17/04/13 12:47

ADAPWEB.indb 120 17/04/13 12:47
Symboles
.accordion 88
.accordion-on 88
.auto-submit 88
.auto-submit.active 88
<humhum> 99
<!--[if 57
@import 58
#intro 44
@media 58
.replaced 88
.replace-me 88
A
a 16
Aaron Gustafson vi, 116
abbr 16
Accessibilit
ARIA 91
checklist 113
et clavier 106
redondance 98
accessibly-hidden 95
Accordon 92
INDEX
acronym 16
Adobe 9, 104
Adoption et manques 104
Adresse URL 26
AIR 9
Ajax 8, 73, 94, 101
A List Apart vi
Aller 97
alt 20
Amber Simmons 114
Amlioration progressive
checklist 110
concept 1
couches 10
exemple illustr 53
Ancrage 76
Android 9
Andy Clarke 45
Apple 9
ARIA
attributs 96, 102
concept 12
tat 102
et clavier 107
mcanisme 96
ADAPWEB.indb 121 17/04/13 12:47
NP ADAPTIVE WEB DESIGN
repre 97
aria-controls 102
aria-disabled 102
aria-expanded 102
aria-hidden 102
aria-invalid 102
aria-label 102
aria-live 103
aria-pressed 102
aria-readonly 102
aria-required 102
aria-selected 102
article 27, 49
Attribut
CSS 40
ARIA 96
B
b 31
background-color 42
Blog 23
body 75
bold 41
border 54
Braille 58
Brandon Olejniczak 115
Brendan Eich 68
C
Cacahute 6
Callback function 94
Chrome 9
class 22, 49
Classe d'activation 88
Classe racine 33
Clavier 97, 105
color 41
columnheader 99
Commentaires Conditionnels 56
Contenu
accs 1
checklist 110
collecte 7
comparaison 51
et CSS 39
masquage 93
Contraintes technologiques 1
Craig Cook 115
CSS
2.1 45
3 61
amlioration progressive 39
checklist 111
couleurs 42
CSS3 4
dmonstration 43
et accessibilit 93
et crans 62
guerres 45
liste 78
ordre 47
pannes 6
slecteur 45
syntaxe 40
tolrance 39
versions 1
D
Daltonisme 92
Dan Cederholm 115
Darwin 3
datetime 34
Dave Shea 44
definition 99
Dgradation lgante 4
Dlgation d'vnement 75
Derek Featherstone 105
description 33
Director 4
display 93
div 18
ADAPWEB.indb 122 17/04/13 12:47
<CHAPNUM> <TITRE CHAPITRE> NP
INDEX 123
div#content 22
document.all 69
document.getElementById 69
document.layers 69
Dojo Dijits 104
DOM 33, 69, 85, 112
Dropdown 78
dtend 33
dtstart 33
E
easy-designs.net 71
Easy! Readers 130
ECMA 69
ECMAScript 69
cran
troit 63
large 63
largeur 61
Egor Kloos 43
element.focus 106
Epiphany 9
Eric Meyer vi, 25, 116, 117
Erin Kissane 114
Ethan Marcotte 115, 116
F
Feuille de styles
et XFN 25
figure.focal 49
Flash 4, 12
Flickr 26
fn 28
Fonction de rappel 94
fondation smantique 16
font 39
font-size 47
font-weight 41
footer 26, 99
form 99
Frisbee 20
G
Gawker Media 67
Gemination 43
Gospize 3
getAttribute 73
GIF 39
Gizmodo 67
Glenn Jones 26
Google 104
H
h1 16, 47
H2VX 27
Handicap
et HTML 16
et web 91
hAtom 26
hCalendar 26, 33, 100
hCard 26, 28
header 17
heading 99
hgroup 18
highlight 85
Hijax 73, 112
href 71
hResume 26
html 42
HTML
3.0 22
4.0 22
5 23
amlioration progressive 15
attributs 21
checklist 110
lment 15
lment b 31
et ARIA 97
HTML5 4
ADAPWEB.indb 123 17/04/13 12:47
pannes 6
smantique 11
versions 1
HTTP 50, 72
I
IBM 104
id 18
Ident Engine 26
IE8 56
IE9 56
les Galapagos 3
Image 17, 39
img 17, 99
Internet Explorer 68
versions 43, 56
iPhone 82
J
Java 12
JavaScript
absence 19
accessibilit 92
Ajax 8
checklist 112
code source 70
collisions de styles 88
dpendance 67
dsactiver 70
discret 72
erreurs 6, 83
et ARIA 96
et clavier 106
et HTML 68, 77
fabilit 71
librairie 93
principes 68
JAWS 104
Jefrey Zeldman vii, 115
Jeremy Keith 67, 73, 115
Jeu de rgles 46
Joe Clark 117
John Allsopp 115
jQuery 83, 93, 104
JScript 68
K
Kelly iv
Kiosque 58
L
Lecteur d'cran 20
Lzard 2
Lifehacker 67
list 99
Liste droulante 78
listitem 99
location 21, 33
Lodging 47
lte 57
Lynx 4, 19
M
Macromedia 4
Maggie Costello Wachs 118
main.css 57
Malentendants 91
Mange interdit 8
margin 49
Martin Kliehm 118
Matthew Mullenweg 25
max-width 63
Mmoire 84
Microformat 22, 25
Microsoft 74
Mike Brittain 118
Mike Isolani 67
Minuterie 81
M&M's 6
ADAPWEB.indb 124 17/04/13 12:47
INDEX 125
Mosaic 4
MOSe 43
Movable Type 26
Mozilla 44
N
nav 78, 97
Navigateur
blocage de l'accs 5
guerre 69
Lynx 4
Mosaic 4
NCSA 4
Netscape 68
Netscape Navigator 8
Non-voyants 91
NVDA 104
O
ol 18
onclick 72, 74
Onglets 100
Oomph 27
Opera 44
Operator 27, 36
Optimus 27
Orca 104
Ordre des jeux de rgles 47
org 28
P
PageRank 16
parseFloat 84
Parsing error 40
Patrick Grifths 117
Peter Paul Koch 118
Petit quiproquo, grands efets 56
photo 28
Pinson de Darwin 3
Pixels 61
Planifcation et retenue 89
Principe de tolrance 5
Proprit
CSS 40
ARIA 102
Protocoles 2
Prototype 93
px 49
R
Radio 58
rel 25, 72
rel-nofollow 26
rel-tag 26
Remerciements iv
Requte de mdia 61
Restaurant 10
Retreats 4 Geeks 47, 80, 99
Retreats4Geeks.com 12
RGB 42
RGBa 41
role 28, 96
row 99
rowheader 99
S
Safari 9, 44
Scott Jehl 117
screen 63
Script
capture et bullage 75
excution 74
exemple de masquage 95
indpendance 112
section 27
select 78
Slecteur 40
Smantique ad hoc 21
separator 99
ADAPWEB.indb 125 17/04/13 12:47
setTimeout 81
Shawn Lawton 118
Showcase 9
showing 81
Site web
en rideau 67
HTML5 4
minimaliste 6
smartphone 7
tolrance aux pannes 4
slideDown 94
slideUp 94
Smartphone 7
Social Graph 26
Sons 11
Spiders 26
Steve Champeon 6
style 85
stylesheet 25
summary 33
Sun Microsystems 104
Symbian 9
T
tab 100
tabindex 105
TabInterface 107
table 15
Tablette 63, 105
tablist 100
tabpanel 100
Tantek elik 25
Target 91
Technologies d'assistance 92
Tlvision 58
Terminaux portables 58
Tests unitaires 112
Ttranopie 92
text-indent 93
time 34
title 20, 45
Todd Parker 118
Trenton Moss 119
trigger 81
Twitter 26
Typographie 49
U
url 28
URL 26
V
vcard 28, 45
vevent 33
Vidos 11, 79
visibility 93
W
W3C 58, 74, 106
WAI-ARIA 12
Web
et clavier 105
et tlvision 58
information 7
W3C 58
Webkit 9
WebOS 9
Web Standards Project 6
Widget 87, 100, 113
Wilson Miner 117
WIM CROUWEL 14
Windows Eyes 104
WordPress 26
X
XFN 25
XHTML 25
XML 18
XMLHttpRequest 74
ADAPWEB.indb 126 17/04/13 12:47
INDEX 127
Y
Yahoo! 104
Z
Zen Garden 43
Zoom 91
ADAPWEB.indb 127 17/04/13 12:47
129
PROPOS DE L'AUTEUR
Aaron Gustafson travaille dans le monde du Web depuis quinze ans, ce qui
lui a permis de renforcer son intrt pour les standards du Web et d'acqurir
de solides connaissances sur la stratgie et l 'architecture des sites web, sur
la conception des interfaces et sur de nombreux langages (parmi lesquels
XHTML, CSS, JavaScript et PHP). Aaron et sa femme Kelly McCarthy
sont propritaires d'Easy! Designs, une agence de consultants web situe
Chattanooga, Tennessee. Lorsqu'il n'est pas plong dans le code, Aaron est
en gnral en train de porter la bonne parole et de partager ses connaissances
avec les autres acteurs du milieu du Web.
Aaron a form des professionnels au New York Times, chez Gartner et
l'agence US Environmental Protection Agency (entre autres). Il a pris la parole
dans les confrences web les plus vues, et notamment An Event Apart et Web
Directions. Il est chef de groupe du projet WaSP (Web Standards Project) et
Invited Expert l 'alliance OWEA (World Wide Web Consortium's Open
Web Education Alliance). Il est fondateur d'eCSStender, diteur technique
chez A List Apart, contributeur pour .net Magazine et a commenc se
constituer une petite bibliothque partir de ses travaux d'auteur et d'diteur
technique.
ADAPWEB.indb 129 17/04/13 12:47
PROPOS D'EASY READERS
Les livres Easy! Readers sont des publications explorant les meilleures
pratiques et les standards du Web destination des professionnels. Le grand
praticien du Web Aaron Gustafson et d'autres tnors du Web ont produit
une collection de livres qui proposent une approche globale du design de
sites web de haute tenue.
Trs orient ergonomie et accessibilit, Easy! Readers se donne pour objectif
de guider le lecteur dans les origines, la philosophie et l 'application pratique
des difrents sujets lis aux standards du Web. Le rseau web est un mdia
en volution permanente en termes d'tendue, d'audience et d'infrastructure.
Nous nous engageons reprer, puis vous proposer des contenus pertinents
propos de ces volutions.
ADAPWEB.indb 130 17/04/13 12:47
avec lamlioration progressive
ADAPTIVE
WEB DESIGN
Aaron Gustafson
Prface de Jeffrey Zeldman
Le Web est en perptuelle mutation : ses supports et ses usages, sa porte et ses
applications ne cessent de changer et d'voluer. Si vous travaillez dans le Web, vous
avez certainement entendu parler lamlioration progressive (progressive
enhancement). Mais que recouvre rellement cette notion ? Comment la rendre
oprante dans son travail de dveloppement quotidien et dans le design de ses sites ?
Dans ce guide, Aaron Gustafson fait la gense de lamlioration progressive, explique
ses origines, sa philosophie, son fonctionnement et propose de nombreuses
techniques de mise en uvre pour les langages HTML, CSS et JavaScript. Grce
lamlioration progressive, vous remettrez les contenus au cur de vos
dveloppements, de faon proposer des expriences qui servent les utilisateurs
plutt que les navigateurs. Vous donnerez accs vos contenus sans limite
technologique, pour les supports dhier, daujourdhui et de demain.
Adaptive Web Design constitue non seulement lexplication la plus claire et la plus
lgante de lamlioration progressive que jaie jamais lue, mais en plus, ce livre est
bourr de savoir-faire pratiques qui viennent s'installer directement dans votre
nocortex, grce au style chaleureux et amical d'Aaron.
Jeremy Keith, auteur de HTML5 pour les web designers
Enn. Lamlioration progressive explique avec un parfait quilibre entre thorie et
pratique.
Dan Cederholm, auteur de CSS3 pour les web designers
Aaron Gustafson a plus de 15 ans dexprience dans le Web et a dvelopp une connaissance
profonde des standards du web, de larchitecture des sites, des stratgies de contenu et du
design dinterface. Il dirige le Web Standards Projects (WaSP), est expert technique pour
A List Apart, et contribue rgulirement .Net Magazine.
ISBN : 978-2-7440-5600-0
www.pearson.fr
adaptivewebdesign.info

Adaptive Web Design - Aaron Gustafson PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Adaptive Web Design - Aaron Gustafson PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Proprit de david damour <damourlalchimiste@gmail.

com> customer 272758 at 2014-04-04 14:08:47 +0200 272758

Das könnte Ihnen auch gefallen