Vous êtes sur la page 1sur 326

Le Campus

Bonnes pratiques des

standards du web

Dan Cederholm
Prface de Jeffrey Zeldman

Codes sources sur ww sur www.pearson.fr u

Bonnes pratiques des standards du Web

Pearson Education France a apport le plus grand soin la ralisation de ce livre afin de vous fournir une information complte et fiable. Cependant, Pearson Education 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 utilisation commerciale ou professionnelle. Pearson Education 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 autres marques cits dans ce livre sont des marques dposes par leurs propritaires respectifs. Publi par Pearson Education France 47 bis, rue des Vinaigriers 75010 PARIS Tl. : 01 72 74 90 00 www.pearson.fr Mise en pages : TyPAO ISBN : 978-2-7440-4155-6 Copyright 2010 Pearson Education France Tous droits rservs Titre original : Web Standards Solutions, The Markup and Style Handbook Traduit de lamricain par Sandrine Burriel, avec la contribution de Monique Brunel et Bruno Sbarte ISBN original : 978-1-4302-1920-0 Copyright original 2009 by Dan Cederholm All rights reserved Chapitre 10 extrait de DOM Scripting de Jeremy Keith ISBN original : 978-1-59059-533-6 All rights reserved publi avec laimable autorisation de lauteur et de lditeur

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 Education 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 Education, Inc.

Bonnes pratiques des standards du Web


Dan Cederholm

Table des matires


propos de lauteur ............................................................................................................ Remerciements ........................................................................................................................
XIII XV

Avant-propos ............................................................................................................................ XVII Introduction .............................................................................................................................. Que sont les standards web?............................................................................................... Pourquoi les standards web? .............................................................................................. Pourquoi XHTML? ................................................................................................................ Balisage structur ..................................................................................................................... Origines de ce livre ................................................................................................................... Format de louvrage ................................................................................................................ Code source des exemples .....................................................................................................
1 1 2 4 5 6 6 6

Partie I Se faire plaisir aveclebalisage


1 Listes............................................................................................................................................... Allons en courses ....................................................................................................................... Cest lheure du quiz ............................................................................................................... MthodeA: le saut de ligne <br /> ............................................................................. la ligne, toute! ............................................................................................................... MthodeB: une puce qui nous fait tiquer................................................................... MthodeC: on sapproche! ........................................................................................... MthodeD: au bonheur des retours la ligne ........................................................... En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Dompter la puce ................................................................................................................. Se faire plaisir avec des puces personnalises ............................................................ Des listes pour naviguer ................................................................................................... Formes de mini-onglets ....................................................................................................
9 9 10 10 10 11 12 13 14 15 15 16 17 20

VI

Bonnes pratiques des standards du Web

2 Titres ............................................................................................................................................... Quelle est la meilleure manire de baliser le titre dundocument? .................. MthodeA: du sens? ...................................................................................................... MthodeB: la combinaisonp etb ................................................................................ MthodeC: la forme et le fond ..................................................................................... En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Style simple .................................................................................................................................. Ajouter un arrire-plan ..................................................................................................... Icnes interchangeables.................................................................................................... Des mises jour faciles .................................................................................................... Pour conclure .............................................................................................................................. 3 Les tableaux sont-ils lincarnation duMal? ........................................................ Totalement tabulaire................................................................................................................ Une table laquelle tout le monde peut siger ............................................................. Ajouter un rsum .................................................................................................................... Les en-ttes du tableau ........................................................................................................... Relations entre en-ttes et donnes ................................................................................... Utiliser lattribut abbr ............................................................................................................. <thead>, <tfoot> et <tbody> .................................................................................................. Les tableaux sont-ils le Mal? .............................................................................................. Pour aller plus loin ................................................................................................................... Crer une grille ................................................................................................................... Faire disparatre les interstices ....................................................................................... Personnaliser les en-ttes ................................................................................................. En-ttes avec des images darrire-plan ....................................................................... Affecter des icnes des identifiants ............................................................................ Dautres exemples de styles de tableaux ......................................................................... Pour conclure .............................................................................................................................. 4 Citations ....................................................................................................................................... MthodeA: pas assez de sens ............................................................................................. MthodeB: un peu de classe? ........................................................................................... MthodeC: lidal, cest <blockquote> ..........................................................................

23 23 23 24 25 27 28 28 30 31 32 35 37 37 38 40 41 42 44 45 46 46 46 48 50 51 52 56 56 57 57 57 58

Table des matires

VII
59 59 60 60 60 63 69 71 73 73 73 74 75 78 80 81 82 83 84 93 73 95 96 97 98 99 101 101 101 102 105 107

Utiliser un marteau pour enfoncer une vis .................................................................... En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Citez vos sources................................................................................................................ Citations intgres au corps de texte ............................................................................. Styler <blockquote> ......................................................................................................... Styler <blockquote> avec plusieurs images darrire-plan .................................... Pour conclure .............................................................................................................................. 5 Formulaires ................................................................................................................................ Quelles sont nos options pour baliser un formulaire? ............................................ MthodeA: utiliser un tableau ...................................................................................... MthodeB: sans tableau, mais un peu ltroit ....................................................... MthodeC: simple et plus accessible .......................................................................... MthodeD: dfinir un formulaire................................................................................. En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Le fabuleux attribut tabindex .......................................................................................... accesskey pour les formulaires frquents................................................................... Appliquer des styles aux formulaires............................................................................ Y a-t-il un focus dans la salle? ...................................................................................... 6 <strong>, <em> et autres lments de structuration des phrases .. Prsentation contre structure .............................................................................................. Pourquoi <strong> et <em> sont-ils meilleurs que <b> et <i>? ....................... Quen est-il de <em>? .................................................................................................... Juste du gras ou de litalique, sil vous plat ............................................................... Du gras et de litalique...................................................................................................... En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Les lments de phrase ..................................................................................................... Conception de <cite> ....................................................................................................... <abbr> et <acronym> ..................................................................................................... <code> .................................................................................................................................

VIII

Bonnes pratiques des standards du Web

<samp> ................................................................................................................................ <var> ................................................................................................................................. <kbd> ................................................................................................................................. Les microformats ...................................................................................................................... Une nouvelle pousse ......................................................................................................... Une explication simple ..................................................................................................... Un exemple de hCard........................................................................................................ Pour conclure ..............................................................................................................................

108 108 109 109 109 110 111 116 117 117 117 118 119 121 121 123 123 124 133 135 135 135 137 140 140 141 144 144 144 145 146 147 147

7 Ancres ............................................................................................................................................ Quel est le meilleur moyen de baliser une ancre pourpointer vers une portion spcifique dune page? ....................................................................... MthodeA: un nom vide ................................................................................................ MthodeB: tout est dans le nom .................................................................................. MthodeC: joublierai ton nom .................................................................................... MthodeD: la solution tout en un ................................................................................ En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Lattribut title ...................................................................................................................... Styler les liens ..................................................................................................................... Levez lancre! ............................................................................................................................ 8 Encore des listes ..................................................................................................................... Quelle est la meilleure manire de baliser unelistenumrote?........................ MthodeA: lordre dans le dsordre ........................................................................... MthodeB: une liste ordonne...................................................................................... Quelle est la meilleure manire de baliser un ensemble de termes et de descriptions? ................................................................................................................... MthodeA ........................................................................................................................... MthodeB ........................................................................................................................... En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Identifier les parties ........................................................................................................... Des numros personnaliss ............................................................................................. Ajouter les numros la CSS ......................................................................................... Rsultat ................................................................................................................................. Pour conclure ..............................................................................................................................

Table des matires

IX
149 149 150 150 151 154 154 154 155 156 156 156 157 158 160 162 163 163 163 164 166 171 173 174 175 177 178 178 179 180 182

9 Minimiser le balisage .......................................................................................................... Comment minimiser le balisage lorsque nous crons dessites respectueux des standards web? ................................................................................................................. Slecteurs descendants ..................................................................................................... MthodeA: abondance de classes ................................................................................ MthodeB: slection naturelle...................................................................................... Le <div> superflu .............................................................................................................. MthodeA: en <div> ...................................................................................................... MthodeB: sans <div>................................................................................................... Autres exemples ................................................................................................................. En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Le balisage brut .................................................................................................................. Avoir du style ...................................................................................................................... Puces personnalises ......................................................................................................... Ajouter une bordure .......................................................................................................... Pour conclure .............................................................................................................................. 10 Le Document Object Model ouDOM ...................................................................... D pour document ...................................................................................................................... Objets du dsir ........................................................................................................................... Pour accder au modle, tapezM...................................................................................... Nuds ................................................................................................................................. getElementById................................................................................................................... getElementsByTagName ................................................................................................... Pour faire le point ..................................................................................................................... getAttribute .......................................................................................................................... setAttribute........................................................................................................................... Et si on parlait contenu?....................................................................................................... Identifier le type dun nud: nodeType ....................................................................... Obtenir plus dinformations sur un nud: nodeName et nodeValue ................... Ajoutons quelques courses .............................................................................................. Pour conclure .............................................................................................................................

Bonnes pratiques des standards du Web

Partie II Styler en toute simplicit


11 Appliquer des CSS ................................................................................................................. Comment appliquer des CSS un document? ........................................................... MthodeA: llment <style> ...................................................................................... MthodeB: feuille de style externe ............................................................................. MthodeC: @import ....................................................................................................... CombinerB etC pour des feuilles de style multiples .............................................. Styles "lo-fi" et "hi-fi" ....................................................................................................... Adopter la cascade ............................................................................................................. MthodeD: styles intgrs au balisage ....................................................................... En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Styles alternatifs ................................................................................................................. Styles de rinitialisation ................................................................................................... Styles utilisateurs ............................................................................................................... Pour conclure .............................................................................................................................. 12 Styles pour limpression..................................................................................................... Comment spcifier des styles pour limpression? ..................................................... Types de mdias ................................................................................................................. Deux manires de cibler ................................................................................................... MthodeA: lattribut media........................................................................................... MthodeB: @media ou @import ................................................................................. Les valeurs multiples sont autorises............................................................................ Sparer les styles pour lcran et pour limpression ................................................. Crer une feuille de style dimpression ........................................................................ En rsum .................................................................................................................................... 13 Mise en page avec les CSS............................................................................................... Comment utiliser les CSS pour crer une mise en page surdeux colonnes? MthodeA: faire flotter la barre latrale..................................................................... MthodeB: le double flottement .................................................................................. MthodeC: faire flotter le contenu .............................................................................. MthodeD: positionnement ...........................................................................................
185 185 185 187 188 190 191 192 193 194 195 196 200 202 204 205 205 205 206 206 207 208 208 209 214 215 215 216 221 222 225

Table des matires

XI
232 233 233 237 240 241 241 241 242 243 244 246 247 249 250 251 252 253 255 255 255 256 256 256 257 258 259 259 260 260

En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Le problme du modle de botes .................................................................................. Des colonnes factices ........................................................................................................ Pour conclure .............................................................................................................................. 14 Styler du texte ......................................................................................................................... Comment donner un peu dallure un hypertexte?................................................ Police! ................................................................................................................................. Interligne: la hauteur entre deux lignes ....................................................................... Toute la famille ................................................................................................................... Crnage: lespace entre les lettres ................................................................................ Lettrines................................................................................................................................ Alignement du texte .......................................................................................................... Transformer le texte .......................................................................................................... Petites capitales .................................................................................................................. Indentation de paragraphe................................................................................................ Contraste .............................................................................................................................. En rsum .................................................................................................................................... 15 Remplacement de texte pardesimages ............................................................... Comment utiliser les CSS pour remplacer du texte par desimages? .............. Aucune solution nest parfaite ........................................................................................ utiliser, mais avec modration .................................................................................... MthodeA: Fahrner Image Replacement (FIR) ....................................................... Le balisage ........................................................................................................................... La CSS ................................................................................................................................. Avantages ............................................................................................................................. Inconvnients ...................................................................................................................... Peser le pour et le contre .................................................................................................. MthodeB: Leahy/Langridge Image Replacement (LIR) .................................... Le balisage et la CSS ........................................................................................................

XII

Bonnes pratiques des standards du Web

Ajuster le modle de botes ............................................................................................. Inconvnients ......................................................................................................................

261 261 261 262 262 263 264 265 265 269 274 275 275 277 278 279 280 280 281 281 283 285 285 285 289 292 293 295

MthodeC: la mthode Phark........................................................................................... Le balisage et la CSS ........................................................................................................ Une solution encore imparfaite ...................................................................................... MthodeD: sIFR ..................................................................................................................... En rsum .................................................................................................................................... Pour aller plus loin ................................................................................................................... Logos interchangeables .................................................................................................... Onglets base dimages, effet de survol et accessibles ........................................ Pour conclure .............................................................................................................................. 16 Styler llment <body> .................................................................................................... Deux colonnes et parfois trois.............................................................................................. Structure du balisage et du style..................................................................................... Ce <body> a la class ........................................................................................................ Pas seulement pour les colonnes .................................................................................... "Vous tes ici" ............................................................................................................................ La liste de navigation ........................................................................................................ Identifier les parties ........................................................................................................... La CSS magique................................................................................................................. En rsum .................................................................................................................................... 17 Pour aller encore plus loin .............................................................................................. O aller maintenant? ............................................................................................................. Organisations et publications .......................................................................................... Blogs influents et sources dinspiration ....................................................................... Livres ................................................................................................................................. En guise dadieu ........................................................................................................................ Index ..............................................................................................................................................

propos de lauteur
Dan Cederholm est concepteur de sites web, auteur de livres et fondateur de SimpleBits, toute petite agence web. Expert reconnu dans le domaine de la conception de sites web respectueux des standards, Dan a travaill avec, entre autres, Google, MTV, ESPN, Fast Company, Blogger, Yahoo!, et collabore avec Happy Cog sur des projets choisis. Dans les travaux quil ralise pour ses clients, dans ses crits et ses interventions, il dfend des interfaces souples et adaptables, respectueuses des standards web. Dan est lauteur de deux succs de librairie: Bulletproof Web Design, 2nded., New Riders, 2007 et Web Standards Solutions, Apress/Friends ofED, 2004. Dan tient galement un blog populaire o il rdige des articles et analyses sur le Web, les technologies et la vie. Et il joue sacrment bien de lukull. Il vit Salem, dans le Massachusetts, avec son pouse, Kerry, et leurs deux enfants, Jack et Tenley.

Remerciements
Je suis profondment reconnaissant envers toutes les personnes qui ont permis ce livre de voir le jour: Chris Mills, pour avoir soutenu ce projet depuis le dpart, pour mavoir guid et pour avoir fait en sorte que lensemble prenne forme; Drew McLellan, pour ses excellents conseils et son travail acharn, ainsi que Matt Heerema pour son immense travail sur cette dition; Jeffrey Zeldman, sans qui je naurais pas crit ce livre et qui a fait plus que nimporte qui pour les standards web; Douglas Bowman, pour avoir fourni linspiration que procurent ses interfaces impeccables et pour avoir dmontr que la mise en page par CSS peut merveilleusement russir sur de grands sites commerciaux; Dave Shea, pour avoir cultiv le jardin et montr que les interfaces bases sur les CSS peuvent faire peu prs tout ce que lon peut en souhaiter; Jason Kottke, pour avoir pos LA question (ltincelle); les lecteurs de SimpleBits, pour avoir suscit de prcieuses discussions qui ont fait germer lide de cet ouvrage; Eric Meyer, Christopher Schmitt, Tantek elik, Molly Holzschlag, Todd Dominey, Mike Davidson, Ryan Carver, Dan Rubin, D.Keith Robinson, Mark Pilgrim, Joe Clark, Craig Saila, Nick Finck, Owen Briggs, Simon Willison, Ian Lloyd, Dan Benjamin et tant dautres, dont les efforts en ligne et hors ligne, au sein de la communaut des standards web, ont aid des milliers de gens comme moi; les membres du Web Standards Project, dont les enseignements continuent bnficier aux concepteurs et dveloppeurs de sites web partout dans le monde; les anciens collgues de mon quipe web chez Fast Company et Inc. particulirement Rob Roesler, qui ma offert une formidable opportunit et un grand soutien; David Searson, que jai appris connatre mieux quil ne le saura jamais; idem pour Bob Joyal; Paul Maiorana, pour avoir support mon obsession pour Journey; Daigo Fujiwara; Paul Cabana; Nick Colletta; Heath Row; Irina Lodkin; Carole Matthews; Becca Rees; Alex Ashton; Peter Wilkinson et Linda Tischler pour mavoir fait entrer chez FC; ma famille et mes amis et, avant tout, mon pouse, Kerry, pour son soutien inconditionnel; et vous, lecteurs de ce livre. Les ditions Pearson tiennent galement remercier Sandrine Burriel et Bruno Sbarte pour leur travail dadaptation, ainsi que Monique Brunel pour sa contribution ldition franaise de louvrage.

Avant-propos
Vous avez entre les mains un livre de recettes. Avec des exemples clairs et sans discours superflu, Dan Cederholm montre comment mettre en application les standards web pour crer des interfaces lgantes, lgres et accessibles tous. Dan ne cherche pas vendre la conception de sites web respectueux des standards dun point de vue commercial ou cratif. Dautres (hum) sen sont dj chargs. Et franchement, si vous avez pris la peine de feuilleter cet ouvrage, vous tes certainement dj convaincu des bnfices que procure le respect des standards en termes daccessibilit, de longvit et de rsultats commerciaux. Nul besoin dune synthse de plus ou dun argumentaire commercial: ce quil vous faut, cest une vision pratique des composants, qui "met les mains dans le cambouis", et cest exactement ce que propose ce livre. Dans un style pragmatique et naturel ce style que lon retrouve sur les bons sites web , Dan examine les lments universels des sites web tels que la division des pages et la navigation. laide dune mthode pdagogique quil a mise au point chez SimpleBits.com, Dan explique la faon dont les standards web facilitent la cration de ces composants universels, leur modification lorsque votre chef ou votre client demande des changements de dernire minute et, surtout, leur utilisation. Voici un exemple simple illustrant comment fonctionne ce livre et pourquoi vous ny perdrez ni votre temps, ni votre argent: Le site que vous tes en train de concevoir ncessite une mise en page sur trois colonnes pour les pages principales daccueil et une mise en page sur deux colonnes pour les pages internes de contenu. Lapproche classique consiste crer deux tableaux HTML de mise en forme, sans aucun rapport entre eux, destins servir de modles principaux. Lapproche moderne, recommande par le World Wide Web Consortium (W3C) et utilise par les concepteurs respectueux des standards, consiste structurer le contenu laide dun balisage smantique XHTML minimal et faire appel aux feuilles de style (Cascading Style Sheets ou CSS) pour la mise en forme. En tant que concepteur expriment de sites web, vous supposez naturellement que vous aurez crer deux modles XHTML diffrents et deux feuilles de style diffrentes pour gnrer vos deux mises en page, deux et trois colonnes. Mais, comme lillustre ce livre, une unique structure XHTML et une unique feuille de style permettent de crer ces deux modles. Basculer dune mise en page lautre est aussi simple que dappliquer un attribut class la balise <body>. Ce livre est rempli dides pertinentes et de mthodes telles que celle-ci des mthodes qui peuvent amliorer votre productivit et simplifier votre travail tout en stimulant votre

XVIII

Bonnes pratiques des standards du Web

crativit. Certaines ont t inventes par Dan lui-mme; dautres proviennent dun corpus mergent de bonnes pratiques modernes, dvelopp par lavant-garde des concepteurs de sites web respectueux des standards. Vous devez les connatre. Et la meilleure manire deles matriser est justement entre vos mains. Amusez-vous bien. Jeffrey Zeldman, auteur de Designing with Web Standards.

Introduction
Bienvenue dans ce livre de Bonnes pratiques des standards du Web. Pourquoi avons-nous besoin dun tel ouvrage en2010? Aujourdhui, il existe une telle varit de navigateurs, de supports de consultation des pages web, de besoins utilisateurs satisfaire, que seul le respect des standards peut vous assurer de toucher une audience large. La plupart des navigateurs actuels ont mis laccent sur le respect des standards, et cest une excellente chose. En dautres termes, vous avez aujourdhui de meilleures garanties de cohrence du rendu de vos contenus dun navigateur lautre condition que ces contenus eux-mmes respectent les standards! Ce livre est conu pour vous donner des billes, de quoi apporter des solutions respectueuses des standards web vos propres projets et vous permettre de faire de meilleurs choix en termes de balisage et de styles. Dans chaque chapitre, nous comparerons diverses mthodes courantes de conception web, en essayant didentifier pourquoi lune peut tre meilleure que lautre. En analysant ces comparaisons, nous serons mme dappliquer dans nos propres projets loutil le mieux adapt la tche requise. Mais, tout dabord, nous devons nous assurer que nous sommes sur la mme longueur donde: ce livre est rempli dacronymes, de blocs de code et de concepts qui vous sont peuttre trangers. Commenons par parler des standards web.

Que sont les standards web?


Selon les termes mme du World Wide Web Consortium (www.w3.org/Consortium/):
"Le World Wide Web Consortium a vu le jour en octobre 1994 pour amener le World Wide Web raliser tout son potentiel en dveloppant des protocoles communs destins promouvoir son volution et garantir son interoprabilit. Le W3C compte environ 400organisations membres dans le monde entier et a gagn une reconnaissance internationale pour ses contributions la croissance du Web."

Fond par Tim Berners-Lee, le W3C est responsable des spcifications des standards web qui constituent le Web daujourdhui. Bien que les standards recouvrent des technologies et langages divers, leur utilisationet surtout leur mise en applicationpasse dabord par une bonne approche du HTML (HyperText Markup Language) et donc par la structuration des documents. En ce sens, ceux-ci se doivent dtre valides, structurs, smantiques (nous verrons un peu plus loin dans cette introduction ce que recouvre cette notion) et surtout exempts dlments superflus ou inappropris. Lensemble des standards, loin dtre limit au seul HTML, prsente dautres composantes qui ne viennent que renforcer cette rgle. Les recommandations WCAG (Web Content Accessibility Guidelines) visent rendre les contenus accessibles au plus grand nombre et ne

Bonnes pratiques des standards du Web

tolrent que faiblement un mauvais balisage. Le XML (eXtensible Markup Language) permet de baliser linformation avec une granularit plus fine encore et requiert donc structure et prcision en matire de balisage. Le format RDF (Resource Description Framework) est une dclinaison possible du XML. Le protocole HTTP (HyperText Transfer Protocol) normalise les changes entre clients et serveur, notamment pour lutilisation dAjax (Asynchronous JavaScript And XML). En matire de scripts, lutilisation du DOM (Document Object Model) ncessite de sappuyer sur un balisage (HTML ou XML) robuste et structur. Pour la mise en forme des contenus, lusage des feuilles de styles CSS (Cascading Style Sheets) ou XSL (eXtensible Stylesheet Language) requiert l encore cohrence et structuration dans nos contenus. Lobjectif premier de cet ouvrage est de vous apprendre structurer correctement vos informations. Dans cette optique, nous nous focaliserons principalement sur deux de ces standards: 1. Dune part, le langage eXtensible HyperText Markup Language (XHTML) ou langage de balisage hypertexte extensible, qui combine la smantique du HTML4.01 et la syntaxe du XML. Cest lobjet de la premire partie du livre, qui se conclut sur un chapitre douverture consacre au Document Object Model (DOM). 2. Dautre part, les Cascading Styles Sheets (CSS) ou feuilles de style en cascade, que nous exploiterons pour appliquer des styles au contenu des pages web et mettre en vidence ltroite relation que lon peut avoir entre structure et mise en forme. Utilises titre dillustration dans toute la premire partie de ce livre, elles constituent le cur de la seconde partie.

Pourquoi les standards web?


Hier, je suis all acheter des stores pour mes fentres. Jai mesur la fentre, je suis all au magasin, jai pris dans le rayon un store de 80cm de large et je lai ramen la maison: il correspondait parfaitement. Lanne dernire, mon pouse et moi avons achet un nouveau lave-vaisselle. Nous avons retir lancien de son emplacement et en avons command un nouveau. Lorsque le nouveau modle est arriv, il sadaptait parfaitement. Jessaie simplement de dmontrer ici quelque chose: les travaux de rnovation intrieure sont facilits par les standards. Quelquun comme moi peut se rendre dans le premier magasin venu, acheter un tuyau dvacuation et celui-ci devrait, selon toute probabilit, convenir la perfection. Je peux aussi acheter une nouvelle poigne de porte et, neuf fois sur dix, elle sera adapte la porte sans quil soit besoin de modifications majeures. Des mesures standard prdtermines facilitent la vie des gens qui travaillent sur la construction et la maintenance des maisons. Lorsque le nouveau propritaire dun logement souhaite le rnover ou lentretenir, les standards facilitent les rparations et les amliorations. Cela na, naturellement, pas toujours t le cas. Les maisons construites avant le xxesicle ne respectaient pas toutes les standards. Nallez pas croire que les maisons construites sans

Introduction

respecter les standards taient dfectueuses: simplement, leur rparation, leur rnovation ou leur maintenance demandaient davantage de travail. Souvent, les gens achtent de vieilles maisons pour les rnover. Une fois les gros travaux de rnovation termins, le propritaire peut profiter des standards de mesure pour en faciliter lentretien. Ce livre ne traite pas des maisons. Pourtant, lanalogie prcdente peut sappliquer au Web: si nous respectons les standards dans nos pages web, il devient nettement plus simple de les maintenir. Vos collgues concepteurs et dveloppeurs de sites web pourront dautant plus facilement se plonger dans les pages et comprendre comment elles sont structures et styles. Historiquement, les concepteurs et dveloppeurs se sont reposs sur une accumulation de balises pour parvenir aux interfaces qui, aujourdhui encore, inondent le Web. Des annes durant, la norme a consist imbriquer des tables sur trois niveaux de profondeur, tout en utilisant des images GIF transparentes pour obtenir une mise en page prcise au pixel prs. Mais, du fait que la prise en charge des standards sest amliore dans les navigateurs populaires, la capacit combiner un balisage minimal et structur avec des feuilles de style CSS a atteint un seuil au niveau duquel respecter les standards nest plus synonyme dinterface ennuyeuse. La tendance saccentue et ceux qui sont aujourdhui conscients des avantages que reprsentent les standards web auront une longueur davance sur le reste de la communaut des concepteurs et dveloppeurs de sites web. Cest ainsi que les choses vont voluer. Comprendre et exploiter les standards web engendre les bnfices suivants: Rduction du balisage. Moins de code signifie des pages plus rapides charger. Moins de code signifie aussi une mobilisation moindre des capacits du serveur, ce qui son tour se traduit par des conomies ralises sur lespace disque et la bande passante. Augmentation de la sparation entre contenu et prsentation. Utiliser les feuilles de style CSS pour contrler lapparence dun site facilite les mises jour et les changements dapparence du site. On peut modifier instantanment lensemble du site en mettant jour une unique feuille de style. Amlioration de laccessibilit. Les standards web nous permettent de toucher le plus grand nombre possible de navigateurs et de priphriques. Les contenus peuvent facilement tre lus dans tout navigateur, tlphone, ordinateur de poche, ou par les internautes utilisant des logiciels dadaptation. Garantie de compatibilit descendante. Crer des pages respectant les standards web garantit quelles resteront lisibles dans le futur. Nimporte lequel de ces bnfices constitue une raison suffisante de respecter les standards web. Cet ouvrage vous montrera comment vous dbarrasser de vos mauvaises habitudes et vous fournira des astuces et techniques pour crer des interfaces agrables et respectueuses des standards.

Bonnes pratiques des standards du Web

Pourquoi XHTML?
Les exemples de balisage de ce livre sont rdigs en XHTML ou eXtensible HyperText Markup Language. Techniquement parlant, XHTML est la reformulation de HTML4 en XML. Quest-ce que cela signifie? Eh bien, vous connaissez dj HTML, nest-ce pas? XHTML est identique, avec quelques rgles en plus. Citons, l encore, le W3C (www.w3.org/TR/xhtml1/#xhtml):
"La famille XHTML constitue ltape suivante dans lvolution dInternet. En migrant ds aujourdhui vers XHTML, les dveloppeurs de contenus peuvent entrer dans le monde du XML avec tous les bnfices quil reprsente, tout en restant confiants dans la compatibilit ascendante et descendante de leurs contenus."

La compatibilit descendante est un bon point de dpart. En crant aujourdhui des pages web au moyen du XHTML, nous prenons des mesures qui garantissent que ces pages fonctionneront avec les navigateurs et priphriques de demain.
HTML ou XHTML? La logique nous encourage toujours utiliser la dernire version du langage de balisage pour nos documents. Ctait par exemple le cas avec XHTML 1.0, que lon prfrait au HTML4.01. La logique est une chose, mais le contexte, les prfrences personnelles, les choix technologiques dentreprise peuvent intervenir dans ce choix qui ne peut donc faire lobjet dune rponse ferme et absolue. Nous le martelons depuis le dbut de cette introduction et nous le rpterons encore tout au long de cet ouvrage: la structuration des contenus est un aspect essentiel de leur production. Le langage de balisage HTML, dans ses diffrentes versions, nous a apport cet effet son lot de botes et de compartiments pour ranger nos contenus. Mais ce langage, cr il y a plus de dix ans, sest essouffl et ntait plus en mesure de proposer toutes les structures ncessaires pour rpondre aux besoins de nos applications web modernes. Ce sont ces faiblesses et une bonne dose de rflexion qui ont donn le jour une formidable association entre HTML et smantique qui, complte par les microformats (voir ce sujet le Chapitre6), permet daffiner le rle des contenus dans le document. Le W3C a tent daller encore plus loin dans le caractre applicatif des contenus, en combinant HTML et XML pour crer le XHTML. Lavantage immdiat de cette nouvelle mouture est dimposer une plus grande rigueur dans lcriture du balisage, mais elle fait aussi intervenir des volutions plus complexes dans leurs effets et dans leur mise en uvre. Le lecteur intress par ce sujet pourra se rfrer avec profit la spcification du W3C relative aux types de mdias XHTML, disponible ladresse http:// www.w3.org/TR/xhtml-media-types/. Au cours de lt 2009, le W3C a officiellement annonc HTML5/XHTML5 comme prochaine version du standard de balisage. Issu des travaux du WHATWG (groupe non officiel regroupant des diteurs et dveloppeurs de navigateurs web), HTML5 vise garantir la compatibilit avec les versions antrieures de HTML tout en amliorant son adhrence au Web, ses volutions et ses besoins. Si certains navigateurs commencent travailler lintgration de cette nouvelle version, elle na pas encore atteint le statut de spcification officielle publie par le W3C. Le balisage HTML 4.01 ou XHTML1.0 a donc encore de beaux jours devant lui.

Introduction

XHTML est galement conu pour tre lisible par le plus grand nombre de navigateurs, priphriques et logiciels. Un balisage rdig en XHTML a plus de chances dtre correctement compris, quel que soit loutil qui le lit. Mais il y a des rgles. Dans le monde du XHTML, il existe des rgles plus strictes dfinissant ce quest un balisage valide. Toutes les balises et tous les attributs doivent tre en minuscules; les attributs doivent tre encadrs par des guillemets doubles; enfin, toute balise ouvrante doit correspondre une balise fermante. Ce ne sont que quelques-unes des rgles hrites du XML. Mais ces rgles sont une bonne chose pour vous. En plus dassurer la compatibilit future, les concepteurs et dveloppeurs de sites web, lorsquils adhrent aux rgles plus strictes gouvernant le XHTML correct et valide, peuvent plus facilement dboguer leur code (ce qui est particulirement pratique lorsque plusieurs personnes travaillent sur le mme balisage) et produisent des pages web qui auront plus de chances dtre correctement rendues sur les navigateurs comprenant aussi les standards. Tout au long de cet ouvrage, nous utiliserons XHTML pour tous nos exemples.

Balisage structur
Vous mentendrez recourir abondamment au mot "smantique" tout au long de ce livre. Je serai aussi amen utiliser le terme "balisage structur". Ces deux expressions sont interchangeables. Lorsque je parle de smantique, je sous-entends que nous essayons dutiliser des balises impliquant une signification, plutt quune instruction de prsentation. Vous devez prsenter une liste dlments? Alors balisez-la comme telle. Sagit-il dun tableau de donnes? Alors structurez-le ainsi. En structurant les pages web laide dun balisage smantique, nous nous rapprochons encore de la sparation du contenu par rapport la prsentation et nos pages auront plus de chances dtre correctement comprises de la manire dont vous voulez les voir comprises par un ventail plus large de navigateurs et de priphriques. Comme je lai mentionn prcdemment, historiquement, les concepteurs de sites web se sont reposs sur limbrication de tableaux et des lments graphiques despacement pour parvenir des prsentations prcises au pixel prs. Llment <table> servait positionner tous les composants dune page web, ajoutant une quantit incroyable de code inutile sans parler des pages rsultantes, quasiment illisibles pour les utilisateurs faisant appel un navigateur en mode texte, un priphrique petit cran ou un logiciel dassistance. Cesboursouflures inutiles touffaient (et cest encore le cas aujourdhui) le Web. Tout au long des chapitres de ce livre, je vais expliquer la manire dont le balisage smantique rend les pages plus lgres, plus accessibles et plus faciles mettre en forme laide des CSS.

Bonnes pratiques des standards du Web

Origines de ce livre
Tout a commenc de manire assez innocente. Javais souhait proposer un simple quiz sur mon site web personnel. Une question choix multiples, pour laquelle chacune des rponses conduisait des rsultats identiques ou similaires. Pourquoi une mthode est-elle meilleure quune autre? Ctait la vraie rponse ma question. Lobjectif de ce quiz tait de montrer le pour et le contre de chaque mthode, en notant que mme des mthodes multiples conduisant un balisage valide ntaient pas forcment toujours les meilleures solutions. Les lecteurs pouvaient rpondre et laisser leurs commentaires, et cest par le biais de cette discussion que sont arrives les billes dont je parlais un peu plus tt. Si nous pouvons comprendre pourquoi il est ncessaire dutiliser des en-ttes de pages et des listes correctes, nous pouvons alors enregistrer ces informations et les appliquer dans nos projets quotidiens. Il est galement important de mentionner que je ne cherche pas imposer une unique mthode pour baliser tel ou tel composant dune page: comme tout aspect de la conception de sites web, il existe plusieurs mthodes permettant darriver un rsultat identique ou proche. Utilisez ce qui convient le mieux la tche que vous avez accomplir: cependant, en comprenant les avantages et inconvnients de chaque mthode, vous pouvez faire de meilleurs choix le moment venu.

Format de louvrage
Ce livre est constitu de deux parties: la premire traite les sujets relatifs au balisage, la seconde aborde les CSS. Chaque chapitre rpond une question donne, souvent en prsentant plusieurs mthodes permettant daboutir au mme rsultat. Nous tudierons attentivement chaque mthode en analysant ses avantages et inconvnients. la fin de nombreux chapitres figurent des sections Pour aller plus loin qui approfondissent le sujet du chapitre en abordant le balisage et les CSS avancs.

Code source des exemples


Les fichiers des exemples de code sont disponibles depuis le site web Pearson (www.pearson.fr), en suivant le lien Code source sur la page ddie ce livre. Jespre que vous lapprcierez: maintenant, allons-y!

Partie
Se faire plaisir aveclebalisage
Chapitre 1: Listes Chapitre 2: Titres Chapitre 3: Les tableaux sont-ils lincarnation duMal? Chapitre 4: Citations Chapitre 5: Formulaires Chapitre 6: <strong>, <em> et autres lments destructuration des phrases Chapitre 7: Ancres Chapitre 8: Encore des listes Chapitre 9: Minimiser le balisage Chapitre 10: Le Document Object Model ou DOM

Listes
Les listes On en trouve dans peu prs nimporte quelle page web. Des listes de liens, des listes darticles dans un panier de courses, des listes de films prfrs et mme des listes pour la navigation au sein dun site. Mme si cela peut sembler arbitraire certains, cest la manire de baliser ces listes que nous allons explorer ici, afin de dcouvrir les avantages (et les inconvnients) de quelques mthodes courantes. Plus tard, nous mettrons ces avantages lpreuve dans divers exemples de mise en forme dune liste ordinaire.

Allons en courses
Initialement, je voulais utiliser une liste rouge comme exemple pour ce chapitre, mais jai rapidement ralis que ce nest pas vraiment le genre de liste publier! Alors, pour cet exemple, ce sera une liste de courses Imaginons que vous deviez baliser une simple liste de courses pour lintgrer votre site web personnel. Vous pouvez vous demander ce que vient faire une telle liste sur un site web, mais ce nest pas important ici. Nous avons simplement besoin dune raison pour commencer rflchir aux listes. Mettons que, sur la page, nous voulons que la liste ressemble une liste, cest--dire une suite verticale dlments, chacun plac sur sa ligne propre: Pommes Spaghettis Haricots verts Lait Voil une tche qui parat plutt simple, non? Eh bien, comme pour toutes les autres facettes du dveloppement et de la conception de sites web, il existe diffrentes manires daborder le problme pour arriver un rsultat identique ou comparable. Comme pour tous les exemples cits dans cet ouvrage, je prsenterai les choses dun point de vue XHTML (acronyme de eXtensible HyperText Markup Language), en massurant que les mthodes choisies constituent un balisage valide et quelles adhrent aux standards rdigs par le World Wide Web Consortium (W3C, www.w3.org). Nous pourrions ajouter tout simplement une balise <br /> aprs chaque lment et nous arrter l. Nous pouvons aussi exploiter diffrents lments de type liste pour parvenir au rsultat souhait. tudions trois possibilits diffrentes et les consquences lies lemploi de chacune delles.

10

Se faire plaisir aveclebalisage

Cest lheure du quiz


Quelle est, parmi les solutions suivantes, la meilleure pour baliser une liste de courses?

MthodeA: le saut de ligne <br />


Pommes<br /> Spaghettis<br /> Haricots verts<br /> Lait<br />

La mthodeA est assurment en vigueur, depuis des annes et de manire intensive, sur un nombre de pages web qui doit se chiffrer en millions. En fait, je suis certain que nous sommes tous coupables davoir recouru cette approche un moment ou un autre. Je me trompe? Nous voulons que chaque lment de la liste se trouve sur sa propre ligne et, en insrant un saut de ligne (ici au moyen de la version XHTML valide et autofermante, <br />), nous revenons la ligne aprs chaque lment. Cest peu prs tout leffet produit, et cela semble fonctionner. Que se passerait-il toutefois si nous souhaitions appliquer la liste de courses un style diffrent des autres lments de la page? Si, par exemple, nous voulions que les lments de cette liste aient des liens en rouge au lieu de la couleur bleue par dfaut, ou une taille de police diffrente du reste du texte? Nous ne pouvons pas vraiment y faire grand-chose. Nous sommes coincs avec les styles par dfaut que nous avons dfinis pour le document dans son ensemble (si toutefois nous en avons dfinis) et, vu quil ny a aucune balise encadrant les lments de la liste, nous ne pouvons lui appliquer la moindre rgle CSS.

la ligne, toute!
Supposons galement que nous ayons ajout un lment particulirement long notre liste de courses: "Grosse baguette de pain de chez le boulanger". Suivant lendroit o apparat cette liste dans la page, les lments trs longs risquent de se trouver rpartis sur plusieurs lignes si lespace horizontal est insuffisant ou si la fentre du navigateur de lutilisateur est trop troite. Il serait galement bien de prendre en compte lventualit des utilisateurs malvoyants, qui augmentent la taille par dfaut du texte afin de gagner en lisibilit. Les lments qui, nous le pensions, tiendraient parfaitement dans une colonne troite (comme la Figure1.1) sont dsormais parpills de manire imprvisible, comme la Figure1.2. Tout leffort de conception est ruin lorsque lutilisateur augmente la taille du texte.
Figure1.1
Exemple avec la taille de texte par dfaut.

Listes

11
Figure1.2
Le mme exemple, avec une taille de texte plus grande.

Hum Maintenant, je sais que je suis cens acheter du pain, mais les deux lignes qui suivent cet lment dans la liste ne sont pas trs claires. Un problme similaire pointe le bout de son vilain nez lorsque lon affiche des lignes longues sur le petit cran dun appareil tel quun tlphone portable ou un Blackberry. Le technophile ultime se promne peut-tre au supermarch avec son priphrique de poche la main plutt que la traditionnelle liste de courses sur papier, mais il finira quand mme par errer sans but, recherchant dsesprment dans les alles "le boulanger" ramener la maison. Jessaie simplement ici de montrer que la mthode ne prend pas en compte un facteur essentiel: la fluidit que peuvent avoir les pages web, suivant des variables que le concepteur de la page ne contrle pas.

MthodeB: une puce qui nous fait tiquer


<li>Pommes<br /> <li>Spaghettis<br /> <li>Haricots verts<br /> <li>Lait<br />

Lorsque la balise <li> est utilise, la plupart des navigateurs comptents insrent une puce gauche de chaque lment de la liste. On peut parvenir ce rsultat laide de la mthodeB, en ajoutant <li> tout seul ds que lon souhaite afficher une puce. Toutefois, certains de ces mmes navigateurs comptents refuseront dafficher la puce tant que llment <li> nest pas contenu dans lun de ses parents lgitimes, le puissant <ul>. Lautre parent de <li>, llment <ol>, reprsente les listes ordonnes (ordered lists) dont je parlerai un peu plus loin dans ce livre.

12

Se faire plaisir aveclebalisage

La puce constitue, dans une certaine mesure, un apport rel au problme du retour la ligne. Chaque nouvel lment de la liste de courses est signal par une puce qui figure sa gauche. Lorsquun lment est trop long pour tenir sur une seule ligne, labsence de puce au dbut de la seconde ligne doit suffire distinguer ce retour la ligne intempestif dun nouvel lment part entire. Mais, malgr le rsultat daffichage, la mthodeB pose un problme: elle nest pas valide. Validation, SVP Suivant les spcifications XHTML1.0 du W3C, toute balise ouvrante doit correspondre une balise fermante. Par consquent, si nous ouvrons une balise <li> pour chaque lment de la liste de courses sans la refermer correctement, comme dans cet exemple, honte nous! Nous avons simul le retour la ligne automatique, qui survient lorsque lon utilise une liste puces, en ajoutant llment <br /> en fin de ligne. Mais il existe une meilleure solution. Il est profitable de shabituer lide dcrire systmatiquement un balisage valide. En nous assurant que notre balisage est valide, nous avons moins nous proccuper des ventuels problmes futurs causs par des balises non refermes ou mal imbriques. Sans compter que, si quelquun dautre doit intervenir sur notre code, il est beaucoup plus facile pour tous les participants impliqus de se plonger dans le code et de comprendre exactement de quoi il retourne. Assurez-vous dutiliser loutil de validation en ligne du W3C (http://validator.w3.org/) pour contrler vos fichiers par URI ou par transfert. Sur le long terme, vous ne pourrez que vous en fliciter.

MthodeC: on sapproche!
<li>Pommes</li> <li>Spaghettis</li> <li>Haricots verts</li> <li>Lait</li>

La mthodeC nous rapproche encore un peu dune solution acceptable, mais choue lamentablement sur un point potentiellement vident: ce nest toujours pas un balisage valide. Nous avons referm chaque balise <li> de manire approprie et, du fait quil sagit dlments de niveau bloc, cela nous dispense dutiliser un lment <br />: chaque lment est doffice mis sur sa propre ligne. Il nous manque nanmoins la couche externe de cette structure, un lment conteneur qui indique: "Ce groupe dlments est une liste!" Il est galement important de voir cela sous un angle smantique: la liste est un groupe dlments qui vont ensemble et, par consquent, ils doivent tre identifis comme tels. De surcrot, utiliser des balises de liste appropries indique trs clairement au navigateur, logiciel ou priphrique: "Ce groupe dlments est une liste!" Cest un exemple qui dmontre bien comment le balisage smantique structure les lments pour ce quils sont.

Listes

13
lments de niveau bloc et lments en ligne. Les lments HTML peuvent tre soit de niveau bloc, soit de type en ligne. Les lments de niveau bloc dbutent sur leur propre ligne et sont suivis dun saut de ligne, tandis que les lments en ligne sont rendus sur la mme ligne que dautres lments en ligne. Les lments de niveau bloc peuvent contenir dautres lments de niveau bloc aussi bien que des lments en ligne, au contraire des lments en ligne qui peuvent contenir uniquement des lments de type en ligne. Parmi les lments de niveau bloc, on peut citer par exemple les balises <div>, <h1><h6> et <form>. Parmi les lments en ligne, on peut citer <span>, <strong>, <em> et <q>.

Si nous observions notre liste de courses dun point de vue purement XML, nous pourrions choisir de la baliser comme dans cet exemple:
<listecourses> <item>Pommes</item> <item>Spaghettis</item> <item>Haricots verts</item> <item>Lait</item> </listecourses>

La liste complte possde un conteneur, <listecourses>, auquel appartiennent tous les lments de la liste. Grouper les lments de cette manire facilite la vie des applications XML qui peuvent tre amenes extraire des lments de cette liste. Ainsi, par exemple, un dveloppeur est mme de crer une feuille de style XSLT charge de transformer cette liste dlments en XHTML, en texte brut, ou mme en document PDF. Grce la nature prvisible dune liste dlments, un logiciel na pas de mal en extraire linformation et en faire quelque chose dutile. Mme si je ne traite pas directement du XML dans cet ouvrage, les principes en sont transposs dans le monde du XHTML. Donner notre balisage une structure ayant du sens nous permet de gagner en souplesse par la suite. Quil sagisse dune plus grande facilit appliquer des CSS des documents correctement structurs ou modifier un balisage clair et comprhensible, fournir cette structure nous pargnera bien du travail lavenir. Intressons-nous maintenant en dtail la mthodeD et voyons comment celle-ci, en fournissant une structure lisible par la plupart des navigateurs et priphriques, tout en nous permettant dappliquer diverses mises en forme notre liste, rpond toutes les questions souleves.

MthodeD: au bonheur des retours la ligne


<ul> <li>Pommes</li> <li>Spaghettis</li> <li>Haricots verts</li> <li>Lait</li> </ul>

14

Se faire plaisir aveclebalisage

Quest-ce donc qui rend la mthodeD si spciale? Dabord et avant tout, le fait quelle est totalement valide. Une liste puces correcte possde un conteneur <ul> et chacun de ses lments est encadr par des balises <li> ouvrante et fermante. Maintenant, juste au moment o vous pensiez que notre objectif ici est uniquement de dmontrer comment tre valide pour le simple plaisir dtre valide, nous allons tudier cet exemple en action. Comme nous avons correctement balis notre liste de courses, chaque lment apparat sur une ligne distincte (du fait que la balise <li> est de niveau bloc) et la plupart des navigateurs visuels ajouteront une puce devant chaque lment, en appliquant au texte un retrait en cas de retour la ligne (voir Figure1.3).
Figure1.3
Rendu par dfaut dune liste puces.

Les utilisateurs de Blackberry, tlphones portables et autres priphriques petit cran pourront galement afficher la liste de manire similaire et clairement organise. Comme nous avons indiqu au priphrique ce que sont les donnes (en loccurrence, une liste), il peut choisir la meilleure manire de les afficher en fonction de ses capacits. Si un lment trop long doit faire lobjet dun retour la ligne, cause dune taille de texte trop grande ou dune fentre de navigateur trop troite, les retours la ligne se verront appliquer un retrait pour tre aligns avec le texte de la premire ligne. Les diffrents lments de la liste seront donc parfaitement clairs et identifiables, en toutes circonstances.

En rsum
Maintenant que jai dissqu chacune des mthodes possibles, rsumons rapidement ce que jai dcouvert sur chacune delles: MthodeA: Elle ne permet pas dappliquer une mise en forme spcifique la liste. Elle peut susciter la confusion lorsque des lments trop longs sont renvoys la ligne dans une colonne troite ou un priphrique petit cran. Elle manque de sens (au niveau smantique). MthodeB: Ajouter une puce aide signaler un nouvel lment, mais certains navigateurs peuvent refuser de lafficher sans la prsence de la balise parent <ul>. Labsence de conteneur <ul> ou de balise fermante </li> se traduit par une difficult mettre en forme. Elle nest pas valide.

Listes

15
MthodeC: Utiliser la balise fermante </li> pargne le besoin dlments <br />. Oublier llment <ul> rend la mise en forme de cette liste particulire plus difficile. Elle est invalide. MthodeD: Elle est valide! Elle donne un sens au niveau smantique et une structure. Des puces saffichent gauche de chaque lment dans la plupart des navigateurs. Sur la plupart des navigateurs, le retour la ligne fait lobjet dun retrait. Elle est plus facile mettre en forme individuellement laide de CSS.

Vous pouvez constater quil est possible dapprendre beaucoup dune question en apparence innocente. Mme si vous utilisez dj exclusivement la mthode D sur toutes vos pages, il est bon de savoir pourquoi vous faites les choses de cette manire. Nous continuerons explorer ces questions de type "pourquoi" tout au long de cet ouvrage, afin de vous fournir toutes les munitions ncessaires pour faire le meilleur choix au bon moment.

Pour aller plus loin


Pour aller plus loin, jetons un il quelques mthodes diffrentes pour tirer parti de notre liste de courses balise, en utilisant les CSS pour la mettre en forme de diffrentes manires. Nous nous dbarrasserons des mises en forme par dfaut et ajouterons des puces personnalises, puis nous mettrons la liste " plat" pour vous donner quelques ides de barre de navigation.

Dompter la puce
"Mais je dteste lallure des puces sur ma liste de courses, alors je vais men tenir ces balises <br />." Point nest besoin de revenir vos bonnes vieilles habitudes : nous pouvons continuer utiliser notre liste puces structure et laisser aux CSS le soin de supprimer les puces et les retraits (si cest ce que vous recherchez). La cl ici est de conserver la liste son aspect structur et de laisser les CSS grer les dtails de prsentation. Commenons par ajouter une rgle CSS qui dsactive les puces:
ul { list-style: none; }

dont vous pouvez observer le rsultat la Figure1.4.

16

Se faire plaisir aveclebalisage

Figure1.4
Une liste o les puces sont dsactives.

Dsactivons maintenant les retraits. Par dfaut, un espace plus ou moins large est ajout la gauche de toute liste puces. Mais ne vous inquitez pas: nous pouvons le supprimer si nous le souhaitons:
ul { list-style: none; padding-left: 0; }

Le rsultat est visible la Figure1.5.


Figure1.5
Une liste sans puce et avec dsactivation des retraits.

Si lexemple de la Figure1.5 semble avoir t balis laide de quelques lments <br />, il sagit toutefois de la mme liste puces structure et valide, prte safficher dans nimporte quel navigateur ou priphrique, et tre style diffremment par mise jour de quelques rgles CSS.

Se faire plaisir avec des puces personnalises


Peut-tre voulez-vous conserver des puces pour votre liste, mais en utilisant vos propres images de puces plutt que de laisser le navigateur afficher ses puces par dfaut, quelque peu insipides. Pour ce faire, il existe deux solutions. Personnellement, je prfre la seconde car elle donne des rsultats plus cohrents dun navigateur lautre. La premire option consiste dfinir, laide de la proprit list-style-image, une image utiliser au lieu de la puce par dfaut:
ul { list-style-image: url(joliepuce.gif); }

Cest la mthode la plus simple. Toutefois, elle donne des rsultats peu cohrents dans certains navigateurs en termes de positionnement vertical de limage. Certains navigateurs la centrent verticalement par rapport au texte des lments, dautres lalignent lgrement plus haut. Cest un peu alatoire.

Listes

17
Pour contourner ce problme dalignement vertical soulev par list-style-image dans quelques navigateurs populaires, je prfre recourir une mthode alternative qui consiste dfinir limage comme arrire-plan pour chaque lment <li>. Commenons par dsactiver lutilisation des puces par dfaut, avant dajouter notre propre image de fond:
ul { list-style: none; } li { background: url(joliepuce.gif) no-repeat 0 50%; padding-left: 17px; }

no-repeat indique au navigateur quil ne doit pas afficher limage en mosaque (ce qui est son comportement par dfaut), tandis que les nombres 0 50% indiquent au navigateur de

positionner larrire-plan 0pixel de la gauche et 50% du bord suprieur, ce qui revient essentiellement centrer verticalement joliepuce.gif. Nous aurions galement pu spcifier des positionnements absolus, en pixels, pour les deux indications. 0 6px aurait positionn la puce 0pixel du bord gauche et 6pixels du bord suprieur. Nous avons galement ajout un espace de 17pixels gauche des lments de la liste, de manire que notre image de 15pixels de large sur 5pixels de haut apparaisse compltement et quil y ait un peu despace, sans le moindre recouvrement du texte. Cette valeur peut tre ajuste suivant la largeur de limage que vous utilisez en guise de puce (voir Figure1.6).
Figure1.6
Une liste avec des puces personnalises.

Des listes pour naviguer


Jai prsent sur mon site personnel (www.simplebits.com) quelques mthodes pour transformer des listes puces en barres de navigation horizontale, ce qui permet de crer un effet donglets au moyen de code XHTML structur ordinaire, exactement comme notre liste de courses dexemple. Ici, par exemple, nous prendrons la liste des courses et nous la transformerons en barre de navigation pour un supermarch en ligne (qui se trouve ne vendre que trs peu darticles).

18

Se faire plaisir aveclebalisage

Dans le cas prsent, nous voulons que la barre de navigation soit horizontale et quil y ait un moyen effectif de surligner un lment lorsque la souris passe dessus ou quil est slectionn, ce qui cre leffet donglets. Tout dabord, nous allons ajouter un attributid notre liste afin de pouvoir lui appliquer des styles CSS spcifiques. Nous allons galement transformer chaque article de la liste en lien.
<ul id="minionglets"> <li><a href="/pommes/">Pommes</a></li> <li><a href="/spaghettis/">Spaghettis</a></li> <li><a href="/haricotsverts/">Haricots verts</a></li> <li><a href="/lait/">Lait</a></li> </ul>

Crons maintenant la CSS daccompagnement:


#minionglets { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #696; } #minionglets li { margin: 0; padding: 0; display: inline; list-style-type: none; }

Ici, jai essentiellement dsactiv les puces et le retrait par dfaut. Nous avons galement mis en place la premire tape de transformation de la liste en la passant lhorizontale, plutt qu la verticale, laide de lattribut display: inline (que lon peut traduire par affichage: en ligne). Nous avons aussi ajout une bordure infrieure afin de mieux dfinir les groupes de liens. La seconde tape de transformation consiste faire flotter nos liens gauche. Nous allons galement styler quelque peu les hyperliens et ajouter des espacements et des marges.
#minionglets { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #696; } #minionglets li { margin: 0; padding: 0; display: inline; list-style-type: none; } #minionglets a { float: left;

Listes

19
line-height: 14px; font-weight: bold; margin: 0 10px 4px 10px; text-decoration: none; color: #9c9; }

Ici nous indiquons tous les lmentsa de notre liste de flotter gauche (float: left), ce qui les force saligner en rang horizontal. Nous avons galement ajout un peu de couleur, pass les liens en gras et dsactiv le soulignement. Maintenant, crons une bordure de type onglet, sous les liens qui sont activs lorsque la souris passe dessus ou lorsquils sont slectionns:
#minionglets { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #696; } #minionglets li { margin: 0; padding: 0; display: inline; list-style-type: none; } #minionglets a { float: left; line-height: 14px; font-weight: bold; margin: 0 10px 4px 10px; text-decoration: none; color: #9c9; } #minionglets a.active, #minionglets a:hover { border-bottom: 4px solid #696; padding-bottom: 2px; color: #363; } #minionglets a:hover { color: #696; }

Pour le surlignage et le survol, nous avons ajout une bordure infrieure de 4pixels de haut llment <li> survol ou slectionn, afin de crer leffet donglet. On peut galement maintenir le surlignage des onglets en ajoutant class="active" au lien href de notre choix:
<li><a href=/spaghettis/ class=active>Spaghettis</a></li>

20

Se faire plaisir aveclebalisage

Cette classe active partage les rgles CSS de a:hover. La Figure1.7 illustre la barre de navigation rsultante.
Figure1.7
Barre de navigation rsultante avec les mini-onglets.

Jai utilis cette mthode de navigation pour une incarnation antrieure de mon site web personnel (www.simplebits.com), mais vous pouvez galement la voir en action (ainsi que le code) chez Listamatic, un site de ressources pour les listes mises en forme laide de CSS (http://css.maxdesign.com.au/ listamatic/horizontal06.htm). Moyennant quelques ajustements sur les marges et les bordures, vous pouvez crer un large ventail deffets de type onglet. Notez que nous sommes parvenus jusquici sans utiliser la moindre image ou le moindre code JavaScript, tout en gardant notre liste de courses XHTML lmentaire. Bravo nous!

Formes de mini-onglets
Pour un rsultat qui se distingue un peu des bordures assez carres et ordinaires obtenues avec les CSS, quelques modifications mineures nous permettent dadopter des formes un peu plus sympathiques et de crer ainsi des effets de navigation intressants. laide de la mme liste puces, nous pouvons construire une CSS analogue celle de lexemple prcdent:
#minionglets { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #minionglets li { margin: 0; padding: 0; display: inline; list-style-type: none; } #minionglets a { float: left; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; }

Listes

21
#minionglets a.active, #minionglets a:hover { color: #000; background: url(onglet_pyra.gif) no-repeat bottom center; }

Cette CSS est certainement trs comparable lexemple prcdent. Les diffrences principales ici sont labsence de la bordure infrieure (border-bottom) qui crait longlet de 4pixels de haut, et lajout dune unique image darrire-plan (background-image) positionne en bas et au centre (bottom center) de chaque lment pour tous les tats de survol et de slection (voir Figure1.8).
Figure1.8
Une barre de navigation avec mini-onglets constitus par des formes en images de fond.

Lastuce ici consiste choisir une image suffisamment troite afin quelle tienne sous llment de navigation le plus petit. Vous garantissez ainsi quune seule image sera ncessaire pour surligner tous vos liens de navigation, indpendamment des largeurs de caractres variables. Naturellement, au regard des formes que vous pouvez utiliser pour vos projets, les possibilits sont infinies (voir Figure1.9).
Figure1.9
Quelques autres formes possibles.

Les onglets illustrs la Figure 1.9 sont disponibles dans les exemples de code source fournis avec ce livre, sur le site de lditeur www.pearson.fr. Pour obtenir le code source dexemples de mini-onglets similaires et fonctionnels, consultez www.simplebits.com/work > tips. Et si vous recherchez des solutions encore plus cratives pour mettre en forme des listes, jetez un il larticle Taming Lists (Dompter les listes) de Mark Newhouse, dans le webzine A List Apart (www.alistapart.com/articles/ taminglists/).

Titres
Les titres sont non seulement un lment indispensable toute page web mais, correctement baliss, ils peuvent tre un outil puissant au service de la structure et de laccessibilit dun site. Visuellement, un titre de page se traduit gnralement par une taille de fonte plus leve et, ventuellement, une couleur ou une police diffrentes du corps de texte. Un titre de page "dcrit brivement le thme de la section quil introduit", suivant les termes du W3C, dlimitant ainsi les diffrentes sections susceptibles dapparatre dans une page. Comment devons-nous donc baliser un titre de page pour tirer le meilleur parti des informations que nous prsentons? Dans ce chapitre, nous allons explorer quelques mthodes familires de gestion des titres, en essayant de trouver celle qui nous offrira le meilleur retour sur investissement. Ensuite, nous adopterons la meilleure mthode et nous lui donnerons du style grce quelques techniques et astuces CSS.

Quelle est la meilleure manire de baliser le titre dundocument?


Pour rpondre cette question, imaginons que nous placions le titre du document en tte de la page. Nous allons tudier trois manires de parvenir des rsultats similaires.

MthodeA: du sens?
<span class=heading>Titre de Page Super Cool</span>

Bien que la balise <span> puisse tre un lment pratique dans certaines circonstances, elle na gure de sens pour les titres de page. Lun des avantages de cette mthode est que nous pourrions ajouter une rgle CSS pour la classe de titre afin de faire apparatre le texte comme un titre.
.heading{ font-size: 24px; font-weight: bold; color: blue; }

Maintenant, tous les intituls baliss par cette classe heading apparatront en grande taille, en gras et en bleu. Formidable, non? Mais que se passe-t-il si quelquun affiche la page laide dun navigateur ou dun priphrique ne grant pas les CSS?

24

Se faire plaisir aveclebalisage

Que se passerait-il, par exemple, si nous placions cette rgle CSS dans une feuille de style externe non visible pour les vieilles versions des navigateurs ou si un lecteur dcran lisait la page pour une personne malvoyante? Un utilisateur consultant notre page laide de lune ou lautre solution ne verrait (ou nentendrait) rien qui diffre du texte normal de la page. Si class="heading" ajoute un peu de sens llment, la balise <span> nest quune enveloppe gnrique libre de tout style par dfaut dans la majorit des navigateurs. Les moteurs de recherche parcourant la page ne sarrteraient pas sur llment <span>, comme sil ntait mme pas l, et refuseraient de donner plus de poids aux mots-cls quil pourrait contenir. Nous approfondirons la relation moteur de recherche/titre un peu plus loin dans ce chapitre. Enfin, du fait que llment <span> est un lment en ligne, nous devrions trs probablement envelopper la mthode A dans un lment supplmentaire de niveau bloc, comme un lment <p> ou <div>, afin que le titre constitue un bloc part entire: cela encombre encore un peu plus le balisage de code superflu. Ainsi, mme en ajoutant le balisage supplmentaire ncessaire, les navigateurs ne grant pas les CSS feraient apparatre le texte sans la moindre diffrenciation par rapport au reste de la page.

MthodeB: la combinaisonp etb


<p><b>Titre de Page Super Cool</b></p>

Utiliser un lment de paragraphe, comme le fait la mthodeB, nous permet dobtenir le niveau bloc que nous souhaitons, tandis que llment <b> affiche le texte en gras (sur la majorit des navigateurs). Nous sommes nanmoins confronts aux mmes rsultats vides de sens lorsque nous balisons un titre important de cette manire. Contrairement la mthodeA, la prsence de llment <b> doit vraisemblablement assurer un rendu en gras dans les navigateurs graphiques, mme en labsence de CSS. Toutefois, comme avec llment <span>, les moteurs de recherche naffecteront pas de priorit suprieure un texte simplement pass en gras dans son propre paragraphe. Difficult styler Utiliser la combinaison ordinaire des lments <p> et <b> ne permet pas non plus de styler ce titre diffremment des autres paragraphes de la page. Nous devrions probablement dsigner les titres dune manire unique qui ajoute dfinition et structure au contenu de la page mais, avec cette mthode, nous navons pas dautre choix que de le voir apparatre en gras.

Titres

25
MthodeC: la forme et le fond
<h1>Titre de Page Super Cool</h1>

Ah, ces bonnes vieilles balises de titres. Elles sont l depuis tout ce temps, mais bon nombre de concepteurs de sites web ne les ont pas encore adoptes pleinement de manire cohrente. Lorsquils sont utiliss correctement, les titres de pages peuvent ancrer le contenu de la page en fournissant une structure souple, facile indexer et styler. En termes de balisage, on ne peut quaimer leur simplicit. Il est inutile dajouter des lments supplmentaires et lon pourrait mme souligner les quelques octets que lon conomise les prfrer aux deux options prcdentes. Cest peut-tre ngligeable, mais le moindre bit compte. Les balises <h1> <h6> traduisent les six niveaux de titres, du plus important (<h1>) au moins important (<h6>). Par nature, elles sont de niveau bloc et ne ncessitent donc pas dlment supplmentaire pour tre places sur une ligne propre. Simple et efficace: cest exactement loutil dont nous avons besoin. Faciles styler Comme llment <h1> que nous employons na quun seul usage (contrairement aux lments <b> ou <p> qui sont susceptibles dapparatre un peu partout dans la page), on peut lui appliquer diffrents styles laide de CSS. Nous aborderons ce point un peu plus loin dans ce chapitre, la section Pour aller plus loin. Plus important encore, notons que, sans application du moindre style, un lment de type titre apparat manifestement comme un titre! Les navigateurs en mode graphique adoptent pour le rendu de llment <h1> une fonte de grande taille, en gras. Afficher la page sans le moindre style fait apparatre la structure du document exactement comme elle a t pense, avec les lments de titres appropris traduisant du sens plutt que de simples instructions de prsentation (voir Figure2.1). Les lecteurs dcran, les ordinateurs de poche, les tlphones portables et autres navigateurs en mode graphique ou texte sauront galement que faire dun lment de titre: ils le greront correctement et le traiteront avec plus dimportance que le texte normal de la page. Si lon utilise un lment <span>, les navigateurs qui ne peuvent pas grer les CSS le prsenteront comme un lment ne revtant aucune importance particulire. Mauvais got par dfaut Historiquement, lune des raisons pour lesquelles les concepteurs de sites web vitaient dutiliser les lments de titres tait peut-tre leur apparence bestiale lorsquils saffichent sans le moindre style, avec le paramtrage par dfaut. Alternativement, certains ont choisi

26

Se faire plaisir aveclebalisage

dviter <h1> ou <h2> en raison de leur grande taille par dfaut, prfrant plutt des titres de niveaux infrieurs afin dobtenir une taille plus raisonnable.

Figure2.1
Exemple daffichage sans style dune page utilisant les balises de titres.

Soulignons toutefois que, laide des CSS, nous pouvons facilement modifier lapparence de ces titres notre guise. Un lment <h1>, par exemple, na pas tre un panneau daffichage gant occupant la moiti de lcran de lutilisateur. Un peu plus loin dans ce chapitre, je dmontrerai combien il est simple de styler des titres laide de CSS pour, je lespre, attnuer un peu la crainte de lnorme balise <h1>. Optimis pour les moteurs de recherche Ce point est fondamental. Les moteurs de recherche aiment les lments de titres. Inversement, un lment <span> ou un simple paragraphe pass en gras a moins de sens pour eux. Baliser correctement vos titres laide des lments <h1> <h6> ne demande que peu defforts et peut nanmoins faciliter lindexation de vos pages par les moteurs de recherche ce qui, en fin de compte, conduit aussi davantage de personnes consulter votre site. Les robots des moteurs de recherche accordent une importance particulire aux lments de titres, lesquels sont susceptibles dintgrer des mots-cls. Tout comme ils indexent les balises <title> et <meta>, ils tourneront ensuite leur attention vers les lments de titres

Titres

27
qui peuvent apparatre plus loin dans la page. Si vous ne les utilisez pas, les mots-cls quils encadrent nauront pas autant de valeur et pourront mme tre ngligs. Ainsi donc, moyennant trs peu defforts, vous amliorez la probabilit quun utilisateur identifie votre site partir de son contenu. Voil qui se prsente plutt bien, non? Un apart sur lordre des titres Dans lexemple, ce titre particulier est le plus important dans la page car il sagit du titre du document. Par consquent, nous allons utiliser llment de titre de niveau le plus lev, <h1>. Certains, en particulier le W3C, estiment que sauter des niveaux de titres est une mauvaise pratique.
Comme nous lavons mentionn prcdemment, les concepteurs de sites ont parfois choisi dutiliser une balise <h4> pour le titre le plus important de la page, simplement parce que la taille par dfaut de la fonte ntait pas aussi envahissante quavec une balise <h1>. Noubliez pas cependant que vous devez structurer dabord et styler ensuite. Nous pouvons toujours paramtrer la taille de notre choix pour le titre au moyen de la CSS.

En rsum
Rcapitulons les raisons pour lesquelles, en gnral, il est prfrable dutiliser des lments de titres (<h1> <h6>) pour introduire les diffrentes sections dune page. MthodeA: Les navigateurs en mode graphique (par exemple Firefox, Safari et Internet Explorer) affichent le titre de la mme manire que le texte normal de la page, lorsque les CSS sont dsactives ou indisponibles. Les navigateurs en mode texte ne peuvent pas faire la diffrence entre le titre et du texte normal. Les moteurs de recherche ne pourront pas accorder plus dimportance aux titres baliss laide de <span>. Nous pouvons lui affecter un style unique, mais nous sommes condamns utiliser la classe heading si nous ajoutons ultrieurement des titres similaires. MthodeB: Les navigateurs en mode graphique affichent le texte avec pour seule mise en valeur du gras, dans la mme taille que par dfaut.

28

Se faire plaisir aveclebalisage

Nous ne pouvons pas appliquer de style particulier au titre pour le diffrencier du reste du texte. Les moteurs de recherche ne pourront pas donner plus dimportance aux titres baliss laide des lments <p> et <b>. MthodeC: Elle donne un sens au texte encadr par les balises. Les navigateurs, graphiques ou non, pourront traiter le titre correctement indpendamment de tout style susceptible de lui tre associ. Les CSS permettent dappliquer facilement des styles particuliers aux balises de titres. Les moteurs de recherche pourront accorder plus dimportance aux mots-cls contenus dans les lments de titres.

Pour aller plus loin


Nous allons donc adopter la mthodeC et la mettre lpreuve avec quelques styles CSS simples. Nous allons tirer pleinement parti de lunicit de llment de titre et nous pourrons dormir sur nos deux oreilles car nous savons que la structure sous-jacente est suffisamment solide pour tout navigateur ou priphrique. Puis nous lhabillerons et lemmnerons faire un tour (comme si vous pouviez rellement faire faire un tour un lment HTML et croyez-moi, jai essay).

Style simple
Grce aux CSS, la chose la plus simple et la plus facile que nous pouvons faire consiste donner nos titres des styles de fontes diffrents. Nous pouvons crer une rgle CSS qui, place dans une feuille de style externe, appliquera ces styles tous les lments <h1> apparaissant dans le site. Si nous souhaitons ultrieurement changer la couleur, la taille ou la police de tous les lments <h1> sur lensemble du site, nous navons qu modifier quelques rgles CSS et lapparence des titres changera instantanment. Voil qui est plutt allchant, nest-ce pas? Refamiliarisons-nous avec notre titre "Super Cool":
<h1>Titre de Page Super Cool</h1>

Titres

29
Changeons la couleur, la police et la taille de ce titre laide de CSS:
h1 { font-family: Arial, sans-serif; font-size: 24px; color: #369; }

Nous venons de dclarer, assez simplement, que tout lment <h1> trouv dans la page doit tre trait en police Arial (ou la police sans serif par dfaut), de taille 24pixels et de couleur bleue, comme lillustre la Figure2.2.
Figure2.2
Un exemple de titre avec application du style dfini.

Ajoutons maintenant une bordure grise de 1pixel de large sous le texte, pour en amliorer la dfinition (voir aussi la Figure2.3).
h1 { font-family: Arial, sans-serif; font-size: 24px; color: #369; padding-bottom: 4px; border-bottom: 1px solid #999; }

Figure2.3
Titre styl avec une bordure infrieure grise.

Nous avons ajout un faible espace sous le texte afin de laisser un peu dair la ligne den dessous. La bordure stend non seulement sur toute la largeur du texte mais aussi, du fait quun titre est un lment de niveau bloc, sur tout lespace disponible horizontalement dans la page. Il est intressant de souligner que nous avons utilis la mthode "abrge" pour crer une bordure, en spcifiant les trois lments (largeur, style et couleur) en une seule dclaration. Jouez avec ces valeurs pour en observer les rsultats.

30

Se faire plaisir aveclebalisage

Ajouter un arrire-plan
Les arrire-plans peuvent ajouter des effets intressants aux titres de pages. Ajoutez un peu despace, une couleur de fond, et vous obtenez des titres sans image et pourtant styls, comme lillustre cet exemple:
h1 { font-family: Arial, sans-serif; font-size: 24px; color: #fff; padding: 4px; background-color: #696; }

Nous avons pass le texte en blanc, ajout 4pixels despace sur lensemble du pourtour et pass le fond en vert. Comme lillustre la Figure2.4, cela va crer une jolie barre paisse, de couleur vert billard, qui stend sur toute la largeur de la page et la divise ainsi en sections.
Figure2.4
Exemple de titre avec couleur darrire-plan et espace autour du texte.

Arrire-plans et bordures En ajoutant une fine bordure en bas du titre, couple avec une couleur de fond claire, vous pouvez crer un effet de relief sans pour autant devoir recourir la moindre image. La CSS est identique lexemple prcdent, avec quelques modifications au niveau des couleurs et lajout dune bordure infrieure de 2pixels de large.
h1 { font-family: Arial, sans-serif; font-size: 24px; color: #666; padding: 4px; background-color: #ddd; border-bottom: 2px solid #ccc; }

En jouant avec diffrentes variations de la mme couleur, nous parvenons crer leffet de relief visible la Figure2.5.
Figure2.5
Titre avec arrire-plan et bordure infrieure.

Titres

31
Arrire-plan en mosaque Les possibilits deviennent beaucoup plus cratives lorsque lon ajoute des images de fond notre palette doutils. Crez une petite image de 10 10pixels dans Photoshop ou dans votre logiciel de cration graphique favori. Limage doit contenir une ligne noire en haut et un gradient de gris qui sestompe vers le bas, comme lillustre la Figure2.6.
Figure2.6
Image de 10 10pixels, cre dans Photoshop (agrandie).

Nous pouvons prendre cette toute petite image et, grce notre CSS, lappliquer en mosaque, le long du bas de notre titre <h1>:
h1 { font-family: Arial, sans-serif; font-size: 24px; color: #369; padding-bottom: 4px; background: url(10x10.gif) repeat-x bottom; }

En donnant au style lattribut repeat-x, nous garantissons que le navigateur rptera limage de fond horizontalement seulement (repeat-y la rpte verticalement). Nous positionnons aussi limage en bas de llment et, en ajoutant un peu despace en bas (padding-bottom), nous pouvons ajuster lcartement entre limage et le texte situ audessus (voir Figure2.7).
Figure2.7
Titre avec une image darrire-plan en mosaque.

Icnes interchangeables
Au lieu de coder en dur des puces et icnes dcoratives sur la page en tant quimages intgres au texte (inline images), nous pouvons continuer exploiter la proprit background pour placer des icnes la gauche du texte, au moyen de la CSS. Grce cette mthode, changer lapparence graphique dun site est un jeu denfant, la mise jour du fichier CSS modifiant instantanment les pages sur lensemble du site.

32

Se faire plaisir aveclebalisage

Le code est trs comparable celui de lexemple prcdent:


h1 { font-family: Arial, sans-serif; font-size: 24px; color: #369; padding-left: 30px; background: url(icone.gif) no-repeat 0 50%; }

Nous ajoutons ici un peu despace gauche (l o nous souhaitons voir safficher licne) et nous indiquons de ne pas rpter limage de fond (no-repeat) pour quelle napparaisse quune seule fois (voir Figure2.8). Nous souhaitons laligner 0pixel du bord gauche et mi-hauteur (50%).
Figure2.8
Titre avec une icne en guise dimage darrire-plan.

Des mises jour faciles


Imaginez un scnario o, au lieu dutiliser lexemple prcdent, nous avons cod ces icnes laide dlments <img> directement dans la page, sur un site contenant 100documents. Peut-tre que ces icnes correspondent un thme que lon retrouve sur tout le site. Avance rapide de quelques semaines, lorsque le propritaire du site dcide den changer linterface. La nouvelle icne na pas les mmes dimensions que lancienne. Oh, oh. Nous allons devoir nous replonger dans chacun des 100documents pour modifier chaque lment <img> et le mettre jour avec le nouveau chemin. Beurk. Imaginez de surcrot un peu limpact de tout ce temps perdu sur le budget dun projet, repoussant sa finalisation bien au-del de la date butoir initialement prvue. Le temps, cest de largent. Dun autre ct, en gardant ces images dcoratives et non essentielles dans un unique fichier CSS, il est possible de changer limage darrire-plan en quelques minutes plutt quen quelques jours, et de mettre jour le site instantanment. Vous commencez entrevoir la puissance que confre la sparation entre votre balisage structur et la prsentation. Leffet camlon Jouvre ici une parenthse pour me contredire moi-mme, mais je pense que cette prochaine astuce peut tre utile dans certaines circonstances. Cest une mthode que jai abondamment utilise pour la refonte respectueuse des standards web du site du magazine Fast Company (www.fastcompany.com) en avril 2003.

Titres

33
Nous avons utilis, dans la plupart des titres <h3> qui apparaissaient un peu partout sur le site, des petites icnes de 13 13pixels codes ainsi:
<h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" /> PREMIRE IMPRESSION</h3>

Nous avions dcid de les coder directement dans la page pour deux raisons. Tout dabord, les icnes devaient correspondre au sujet du titre (un livre pour le cercle de lecture, des guillemets pour la citation du jour,etc.) et varier ainsi dun titre lautre. Par ailleurs, lpoque, nous changions chaque mois la palette de couleurs sur lensemble du site, afin de lassortir la couverture du dernier numro du magazine. Ce changement tait envisageable grce aux CSS. Afin que les icnes puissent changer de couleurs comme les autres lments de la page, sans pour autant devoir perptuellement recrer de nouvelles images, nous avons cr un unique jeu dicnes fond sur deux couleurs: blanc et transparent (de sorte que la couleur apparaisse toujours en transparence). La Figure2.9 montre lune de ces icnes, qui servait introduire la citation du jour sur la page daccueil.
Figure2.9
Icne transparente de 13 13pixels (agrandie).

Pour remplir la partie transparente de licne, nous avons fait appel la proprit CSS background, toujours aussi pratique, pour spcifier la couleur utiliser. Nous voulions faire apparatre la couleur uniquement derrire limage et non derrire le texte associ dans le titre. Nous y sommes parvenus laide dun slecteur contextuel permettant dappliquer des rgles uniquement aux images contenues dans les lments <h3>.
h3 img { background: #696; }

Le code prcdent indique que tous les lments img contenus dans un lment <h3> doivent avoir un arrire-plan (background) vert. La couleur apparat travers les parties transparentes de limage, tandis que les parties blanches restent blanches. Chaque mois, il nous suffisait de mettre jour cette simple rgle CSS pour, comme par magie, changer la couleur de chaque combinaison de titre et dicne apparaissant sur le site. Abracadabra, pouf pouf.

34

Se faire plaisir aveclebalisage

Aligner llment <img> Pour aider licne saligner correctement avec le texte (nous voulons quelle soit centre verticalement), nous ajoutons la rgle CSS suivante:
h3 img { background: #696; vertical-align: middle; }

Nous avons ainsi lassurance que limage sera centre verticalement par rapport au texte contenu dans le titre <h3>. La Figure2.10 illustre le titre rsultant.
Figure2.10
Limage transparente rsultante, avec application dun fond CSS.

Jai prsent cette solution particulire pour une autre raison notable: les couleurs de fond spcifies dans la CSS apparaissent derrire toute image, que celle-ci soit intgre la page ou code dans la CSS. Ainsi, par exemple, si nous revenons notre exemple prcdent des icnes interchangeables et que nous ajoutions une couleur de fond:
h1 { font-family: Arial, sans-serif; font-size: 24px; color: #fff; padding-left: 30px; background: #696 url(icone_transparente.gif) no-repeat 0 50%; }

limage icone_transparente.gif apparatra par-dessus la couleur spcifie immdiatement avant dans la mme rgle (voir Figure2.11). Dans le cas prsent, il sagit de la couleur #696, soit une belle nuance vert billard.
Figure2.11
Titre auquel on applique une image et une couleur darrire-plan.

Cette astuce devient particulirement intressante lorsque lon place des petits coins arrondis ou des images dcoratives sur une page o la couleur est concerne. Ces images non essentielles sont alors totalement intgres au fichier CSS et sont faciles changer si une mise jour doit intervenir ultrieurement. Un travail facile maintenant, moins de travail par la suite.

Titres

35
Cette ide ma tellement sduit que jai fini par crer un jeu dicnes personnalisables bas sur ce concept, o lacheteur peut saisir le code hexadcimal HTML de la couleur et crer ainsi un jeu dicnes correspondant la palette de son propre site. Vous pouvez les voir ladresse http://www.iconshoppe.com/families/chameleon.

Pour conclure
Jespre quen comparant quelques mthodes courantes de balisage, vous pouvez facilement imaginer les bnfices que vous pouvez retirer utiliser des lments de titres appropris. Les navigateurs et priphriques en mode graphique ou en mode texte comprennent ces lments et les affichent en consquence, les moteurs de recherche peuvent les indexer correctement et des styles peuvent tre facilement appliqus et maintenus par le biais de CSS.

Les tableaux sont-ils lincarnation duMal?


Quoi ? Depuis quand utiliser des tableaux est-il devenu un acte de malveillance ? Assurment, lun des mythes les plus tenaces concernant la cration dun site respectueux des standards web est lide que lon ne doit jamais utiliser de tableau. Sous aucun prtexte. Que lon doit les viter comme la peste, les ranger dans une bote ferme cl et les entreposer sur une tagre poussireuse, comme un artefact de la prhistoire du dveloppement web. Mais do vient cette aversion pour les tableaux? Elle a probablement commenc de manire tout fait anodine et tait pave des meilleures intentions du monde. Bon nombre de gens se sont levs, juste titre, contre lutilisation des tableaux imbriqus et autres mises en page traditionnelles utilisant des GIF en guise despaces, pour les remplacer par un balisage lger et structur, accompagn de CSS pour la prsentation. Nous avons peut-tre toutefois jet le bb avec leau du bain en militant pour linterdiction absolue des tableaux, quelles que soient les circonstances. Nous aborderons ultrieurement dans cet ouvrage la mise en page laide de CSS et tous les bnfices quelle procure mais, pour le moment, concentrons-nous sur lutilisation des tableaux pour les situations o ils sont rellement appropris, savoir le balisage de donnes tabulaires. Nous dcouvrirons quelques dmarches simples que nous pouvons entreprendre pour rendre les tableaux de donnes plus accessibles et lgants.

Totalement tabulaire
Rien ne justifie linterdiction absolue dutiliser un tableau pour baliser des donnes tabulaires. Mais, attendez une minute: que sont exactement des donnes tabulaires? En voici quelques exemples: les calendriers; les feuilles de calcul; les tableaux; les emplois du temps. Pour ces exemples et pour de nombreux autres, baliser les donnes pour leur confrer lapparence visuelle dun tableau impliquerait de srieuses contorsions CSS. Vous pourriez imaginer utiliser des lments flottants et les positionner laide de rgles CSS ingnieuses, tout cela pour aboutir des rsultats dsesprment incohrents. Sans parler du fait que lire correctement les donnes sans CSS relverait du cauchemar. Le fait est que nous ne devrions pas avoir peur des tableaux et que nous aurions tout intrt les exploiter dans les cas de figure pour lesquels ils ont t conus.

38

Se faire plaisir aveclebalisage

Une table laquelle tout le monde peut siger


Lune des raisons pour lesquelles les tableaux ont mauvaise rputation dcoule des problmes daccessibilit quils peuvent gnrer sils sont mal utiliss. Ainsi, les lecteurs dcran peuvent rencontrer des difficults les lire correctement et les priphriques petit cran sont souvent entravs par les tableaux lorsque ceux-ci sont utiliss des fins de mise en page. Cependant, il existe quelques petites choses simples que nous pouvons faire pour amliorer laccessibilit dun tableau de donnes, tout en crant une structure lgre quil sera facile de mettre en forme, par la suite, laide de CSS. Jetons un il au tableau simple dexemple, visible la Figure3.1, illustrant lune des plus longues sries noires dans lhistoire du base-ball amricain (srie noire qui sest interrompue grce aux victoires des Red Sox en2004 et2007; victoires qui, jen suis convaincu, doivent tout ce chapitre).
Figure3.1
Exemple de tableau de donnes typique.

Bien quil sagisse l de statistiques extrmement dprimantes pour un fan des Red Sox, la Figure3.1 est un exemple parfait de donnes tabulaires. Le tableau comprend trois en-ttes de colonnes (Anne, Adversaire et Rsultats saison (V-D)), suivis des donnes pour chacune des quatre annes prsentes. Au-dessus du tableau, on trouve un titre (ou lgende) qui en dfinit le contenu. Baliser les donnes de ce tableau est relativement simple et nous pourrions procder comme dans lexemple suivant:
<p align="center">Victoires des Boston Red Sox la Srie Mondiale</p> <table> <tr> <td align="center"><b>Anne</b></td> <td align="center"><b>Adversaire</b></td> <td align="center"><b>Rsultats saison (V-D)</b></td> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr>

Les tableaux sont-ils lincarnation duMal?

39

<tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr> <td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </table>

Le rendu devrait tre assez proche de ce que lon observe la Figure3.1. Nous pouvons toutefois apporter quelques amliorations ce balisage. Tout dabord, nous pouvons traiter le titre du tableau, "Victoires des Boston Red Sox la Srie Mondiale", de manire un peu plus correcte smantiquement parlant laide de llment <caption>. La lgende balise par <caption> doit immdiatement suivre llment <table> ouvrant et contient habituellement le titre et/ou la nature des donnes contenues dans le tableau. Visuellement, cela permet aux personnes voyantes de comprendre lobjectif du tableau, tout en aidant aussi les utilisateurs naviguant par des moyens non visuels. Supprimons donc le paragraphe dintroduction du tableau et ajoutons llment <caption> appropri:
<table> <caption>Victoires des Boston Red Sox la Srie Mondiale</caption> <tr> <td align="center"><b>Anne</b></td> <td align="center"><b>Adversaire</b></td> <td align="center"><b>Rsultats saison (V-D)</b></td> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr> <tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr>

40

Se faire plaisir aveclebalisage

<td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </table>

Il est important, pour les lgendes <caption>, de faire comprendre immdiatement le type des donnes qui suivent. Par dfaut, la plupart des navigateurs visuels vont centrer le texte contenu dans llment <caption> juste au-dessus du tableau. Nous pourrions, naturellement, changer la mise en forme par dfaut de la lgende laide de CSS (et cest exactement ce que nous ferons dici peu la section Pour aller plus loin de ce chapitre). Le fait quelle figure maintenant dans un lment propre et unique rend la tche particulirement aise.

Ajouter un rsum
En outre, nous pourrions ajouter lattribut summary (rsum) llment <table> afin dexpliquer plus en dtail lobjectif et le contenu de notre tableau. Le rsum est particulirement utile pour les personnes faisant appel des moyens non visuels pour lire les informations. Le code suivant montre lattribut summary et la valeur que nous avons ajoute pour notre tableau dexemple:
<table summary="Ce tableau donne la liste de toutes les victoires des Boston Red Sox la Srie Mondiale."> <caption>Victoires des Boston Red Sox la Srie Mondiale</caption> <tr> <td align="center"><b>Anne</b></td> <td align="center"><b>Adversaire</b></td> <td align="center"><b>Rsultats saison (V-D)</b></td> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr> <tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr> <td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </table>

Les tableaux sont-ils lincarnation duMal?

41

Les en-ttes du tableau


Il est essentiel demployer les en-ttes de tableau (table headers) lorsque lon construit des tableaux de donnes. Plutt que dutiliser un lment de prsentation tel que <b> pour indiquer visuellement au lecteur que la cellule joue un rle de "regroupement" des donnes qui suivent, nous pouvons tirer parti de llment <th> de faon trs analogue notre utilisation des titres pour crer des sections de contenu dans la page, au Chapitre2. Les navigateurs visuels peuvent afficher linformation contenue dans les lments <th> en gras et centrs par dfaut mais, l encore, nous pouvons exploiter lunicit de llment <th> pour styler ces cellules importantes de manire diffrente des autres donnes du tableau qui, elles, sont contenues dans des lments <td>. En plus de leurs avantages en termes de prsentation, les lments <th> peuvent aussi tre bnfiques pour les navigateurs non visuels, comme nous le verrons plus en dtail ultrieurement. Les en-ttes de notre exemple se trouvent dans la premire ligne: Anne, Adversaire et Rsultats saison (V-D). Remplaons notre balisage prcdent, qui traduit uniquement des informations de prsentation, par des en-ttes appropris:
<table summary="Ce tableau donne la liste de toutes les victoires des Boston Red Sox la Srie Mondiale."> <caption>Victoires des Boston Red Sox la Srie Mondiale</caption> <tr> <th>Anne</th> <th>Adversaire</th> <th>Rsultats saison (V-D)</th> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr> <tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr> <td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </table>

42

Se faire plaisir aveclebalisage

Utiliser les lments <th> pour baliser les cellules den-tte conduira au mme rsultat graphique que celui prsent la Figure3.1. Examinons pourquoi cette dernire solution est prfrable: Nous liminons le besoin en balises supplmentaires de prsentation, visant diffrencier les cellules den-tte des cellules normales. Par dfaut, la plupart des navigateurs visuels affichent en gras et centr le texte contenu dans des lments <th>, ce qui permet de diffrencier au premier coup dil en-ttes et donnes. Comme il sagit dlments uniques et diffrents des lments <td> normaux, nous pouvons ultrieurement styler les en-ttes de tableau diffremment des autres cellules. Il existe une raison supplmentaire dutiliser les en-ttes de tableau, que nous abordons maintenant.

Relations entre en-ttes et donnes


Afin de rendre les choses un peu plus organises pour les personnes consultant notre tableau via un lecteur dcran, nous pouvons exploiter lattribut headers pour associer les cellules den-tte avec les donnes correspondantes prsentes dans les lments <td>. Ce faisant, nous permettons au lecteur dcran de lire len-tte et les donnes associes dans un ordre plus logique, plutt que de lire chaque ligne de gauche droite, dans un ordre strict, comme il le ferait normalement. Utilisons de nouveau notre tableau des Red Sox pour illustrer comment y parvenir. Tout dabord, nous allons devoir attribuer un identifiant unique(id) chaque lment <th> du tableau. Nous pouvons alors ajouter lattribut headers chaque cellule de donnes, afin de mettre en correspondance cellule et en-tte. Ajouter lidentifiant chaque en-tte est aussi simple que cela:
<table summary="Ce tableau donne la liste de toutes les victoires des Boston Red Sox la Srie Mondiale."> <caption>Victoires des Boston Red Sox la Srie Mondiale</caption> <tr> <th id=annee>Anne</th> <th id=adversaire>Adversaire</th> <th id=resultats>Rsultats saison (V-D)</th> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr>

Les tableaux sont-ils lincarnation duMal?

43

<tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr> <td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </table>

Lutilisation de caractres accentus dans les identifiants, si elle nest pas strictement interdite, est gnralement dconseille: exploiter ces identifiants dans des scripts peut conduire des difficults supplmentaires, que vous pouvez finalement viter en amont par des choix didentifiants judicieux. Nous pouvons maintenant ajouter les attributs headers adapts chaque cellule de donnes, la valeur de lattribut correspondant lidentifiant qui lui est associ.
<table summary="Ce tableau donne la liste de toutes les victoires des Boston Red Sox la Srie Mondiale."> <caption>Victoires des Boston Red Sox la Srie Mondiale</caption> <tr> <th id="annee">Anne</th> <th id="adversaire">Adversaire</th> <th id="resultats">Rsultats saison (V-D)</th> </tr> <tr> <td headers=annee>1918</td> <td headers=adversaire>Chicago Cubs</td> <td headers=resultats>75-51</td> </tr> <tr> <td headers=annee>1916</td> <td headers=adversaire>Brooklyn Robins</td> <td headers=resultats>91-63</td> </tr> <tr> <td headers=annee>1915</td> <td headers=adversaire>Philadelphia Phillies</td> <td headers=resultats>101-50</td> </tr> <tr> <td headers=annee>1912</td> <td headers=adversaire>New York Giants</td> <td headers=resultats>105-47</td> </tr> </table>

44

Se faire plaisir aveclebalisage

Lorsque nous crons des relations entre nos en-ttes et les donnes effectives, un lecteur dcran peut lire ce tableau comme suit: "Anne: 1918; Adversaire: Chicago Cubs; Rsultats saison (V-D): 75-51;" et ainsi de suite pour chaque ligne du tableau. Voil qui est un peu plus explicite que dentendre chaque ligne lue de gauche droite. Cela ne nous fait pas de mal non plus davoir ces identifiants uniques pour chaque lment
<th> de notre tableau. Nous pourrions en tirer parti ultrieurement avec des rgles CSS

exclusives. Et cest exactement ce que nous ferons la section Pour aller plus loin de ce chapitre.

Utiliser lattribut abbr


Dans lexemple prcdent, supposons que vous trouviez len-tte "Rsultats saison (V-D)" un peu trop long pour tre nonc par un synthtiseur vocal. En ajoutant lattribut abbr, nous pouvons abrger llment lu la valeur de notre choix, tout en conservant le texte dorigine dans la cellule <th> pour les navigateurs visuels.
<table summary="Ce tableau donne la liste de toutes les victoires des Boston Red Sox la Srie Mondiale."> <caption>Victoires des Boston Red Sox la Srie Mondiale</caption> <tr> <th id="annee">Anne</th> <th id="adversaire">Adversaire</th> <th id=resultats abbr="Rsultats">Rsultats saison (V-D)</th> </tr> <tr> <td headers="annee">1918</td> <td headers="adversaire">Chicago Cubs</td> <td headers="resultats">75-51</td> </tr> <tr> <td headers="annee">1916</td> <td headers="adversaire">Brooklyn Robins</td> <td headers="resultats">91-63</td> </tr> <tr> <td headers="annee">1915</td> <td headers="adversaire">Philadelphia Phillies</td> <td headers="resultats">101-50</td> </tr> <tr> <td headers="annee">1912</td> <td headers="adversaire">New York Giants</td> <td headers="resultats">105-47</td> </tr> </table>

Nous avons ajout abbr="Rsultats" afin que les lecteurs dcran puissent utiliser cette version abrge ("Rsultats") de len-tte de colonne lorsquils lisent les donnes des cellules correspondantes.

Les tableaux sont-ils lincarnation duMal?

45

<thead>, <tfoot> et <tbody>


Il existe trois lments supplmentaires lis aux tableaux que je souhaite mentionner. Non seulement ils donnent davantage de sens la structure du tableau, mais ce sont aussi des lments additionnels dont les rgles CSS peuvent tirer parti, ce qui vite de crer de nouvelles classes pour styler les lignes du tableau (lments <tr>). Citons la spcification HTML 4.01 du W3C sur ces lments (http://www.w3.org/TR/ html4/struct/tables.html#h-11.2.3): "Les ranges du tableau peuvent tre regroupes dans une section en-tte du tableau, une section pied du tableau et une ou plusieurs sections corps du tableau, en utilisant respectivement les lments thead, tfoot et tbody. Cette organisation permet aux agents utilisateurs de grer le dfilement du corps du tableau, indpendamment de len-tte et du pied. Pour limpression dun tableau long, les informations places dans len-tte et le pied du tableau peuvent se rpter sur chacune des pages contenant les donnes." Vous pouvez donc constater quorganiser un tableau ainsi est galement utile pour les navigateurs prenant en charge le dfilement indpendant des sections <tbody>, et cest particulirement apprciable pour les tableaux longs. Les lments <thead> et <tfoot> doivent apparatre au-dessus des sections <tbody> pour permettre aux navigateurs et aux priphriques de charger ce contenu dabord. Un exemple de tableau balis avec des lignes groupes peut prendre lallure suivante:
<table> <thead> <tr> ... contenu de len-tte du tableau... </tr> </thead> <tfoot> <tr> ... contenu du pied du tableau... </tr> </tfoot> <tbody> <tr> ... ligne du tableau... </tr> <tr> ... ligne du tableau... </tr> <tr> ... ligne du tableau... </tr> </tbody> </table>

46

Se faire plaisir aveclebalisage

Vous pouvez constater que, lorsque lon choisit dutiliser <thead> et <tfoot>, len-tte ainsi que le pied du tableau sont placs avant les lignes de donnes. Comme je lai mentionn prcdemment, ces lments donnent davantage de sens au tableau et constituent des "points dancrage" supplmentaires: nous pouvons les exploiter pour appliquer des CSS, sans pour autant ajouter de classes superflues au moindre lment <tr>. Si, par exemple, nous souhaitions donner aux seules sections de donnes (balises par
<tbody>) une couleur darrire-plan diffrente des autres sections, nous pourrions crire

une rgle CSS grant cela:


tbody { background-color: gray; }

Sans llment <tbody>, nous devrions ajouter un attribut class chaque lment <tr> dont nous souhaitons passer larrire-plan en gris. Un bel exemple de la faon dont un balisage plein de sens peut souvent faciliter la mise en forme ultrieure laide de CSS.

Les tableaux sont-ils le Mal?


Je crois que la rponse cette question est un "non" retentissant, tant que les tableaux sont utiliss conformment leur objectif initial. Si les tableaux ont, juste titre, mauvaise rputation lorsquils servent abusivement crer des mises en page imbriques et complexes, ils fournissent les structures ncessaires pour crer des blocs de donnes et dinformations. Nous pourrions remplir un livre entier de toutes les techniques disponibles pour construire des tableaux formidables, mais nous vous avons dj donn ici un bon dpart pour crer des tableaux simples, accessibles tous et faciles styler laide de CSS. Puisque nous parlons de style, il est temps dembellir notre tableau laide de quelques astuces CSS.

Pour aller plus loin


Comme dans les chapitres prcdents, nous allons prendre notre balisage structur, clair et sans chichi pour lui appliquer quelques rgles CSS et lui donner du style. Tout dabord, nous allons tudier une simple astuce de bordure grce laquelle nous pouvons crer une grille dont les traits font 1 pixel de large, que nous appliquerons notre exemple. Puis, nous crerons des styles individuels pour le titre et les en-ttes du tableau.

Crer une grille


Fatigu de laspect3D que le bon vieil attribut border donne votre tableau? Moi aussi. Typiquement, ajouter border="1" llment <table> cre un effet comparable celui visible la Figure 3.1. Mais voici une solution alternative et sympathique pour obtenir

Les tableaux sont-ils lincarnation duMal?

47

une belle grille bien nette utilisant plutt les CSS. Nous allons commencer par ajouter des bordures de 1pixel sur deux cts (bordures droite et infrieure) de chaque cellule <th> et <td>:
th, td { border-right: 1px solid #999; border-bottom: 1px solid #999; }

Ajouter la bordure sur deux cts seulement est un aspect cl pour crer une grille dont les traits ont la mme paisseur sur lensemble du tableau et qui se prsente correctement dans tous les navigateurs modernes. Si nous avions ajout la mme bordure aux quatre cts, les traits seraient doubls en haut et gauche de la cellule, l o les cellules voisines sont contigus. Il existe une solution alternative pour produire la grille en utilisant une unique rgle border, que jexpliquerai dans un exemple ultrieur. Vous remarquerez la Figure3.2 quil ne manque que les deux bordures extrieures gauche et suprieures du tableau complet. Pour complter la grille, nous allons donc ajouter des rgles border-top et border-left llment table, en utilisant la mme couleur et le mme style (voir Figure3.3).
table { border-top: 1px solid #999; border-left: 1px solid #999; } th, td { border-right: 1px solid #999; border-bottom: 1px solid #999; }

Figure3.2
Exemple de tableau avec ajout de bordures droite et en bas des lments<th> et<td>.

Figure3.3
Exemple de tableau avec ajout de bordures suprieures et gauche.

48

Se faire plaisir aveclebalisage

Faire disparatre les interstices


Nous disposons maintenant dune grille complte, mais que faire des petits interstices visibles entre les bordures? Malheureusement, la plupart des navigateurs rvlent ces menus carts ennuyeux car, par dfaut, ils ajoutent des petites marges. Grce la proprit border-collapse de llment table, nous pouvons non seulement refermer ces espaces, mais aussi obtenir la grille recherche, sans que lpaisseur des bords ne soit double.
table { border-collapse: collapse; } th, td { border: 1px solid #999; }

Ajouter la valeur collapse la proprit border-collapse garantit que nous parviendrons aux traits prcis, dun seul pixel de large, que nous cherchons obtenir ici. Jetons un il au rsultat visible la Figure3.4.
Figure3.4
Une grille parfaite, obtenue grce la proprit bordercollapse.

Un peu d'histoire: la gestion des tableaux dansIE pour Mac Si le dveloppement dInternet Explorer pour Mac est arrt, il vaut nanmoins la peine de signaler quil grait trs mal la proprit border-collapse, ce qui doublait certaines des bordures. Lexemple prsent un peu plus haut fonctionnait mais son rendu ne correspondait pas exactement aux rgles CSS spcifis. Donc, dans le cas rare o vous devez garantir sur IE/Mac un rendu identique aux autres navigateurs modernes, voici la CSS dont vous aurez besoin pour y arriver:
table { border-top: 1px solid #999; border-left: 1px solid #999; border-collapse: collapse; } th, td { border-right: 1px solid #999; border-bottom: 1px solid #999; }

Les tableaux sont-ils lincarnation duMal?

49

Pour le restant de cet exercice, nous nous en tiendrons la version simplifie, dont lapparence est un peu errone uniquement surIE sous Mac. Un peu dair Nous avons maintenant sous la main une grille parfaite. Nanmoins, les informations semblent un brin ltroit dans le tableau. Aidons-les respirer un peu, comme lillustre la Figure3.5, en ajoutant simplement un peu despace (padding) notre rgle combine th, td:
table { border-collapse: collapse; } th, td { padding: 10px; border: 1px solid #999; }

Figure3.5
Ajout de 10pixels despacement.

Le saviez-vous? Fournir une seule valeur (en loccurrence, 10pixels) pour lespacement (padding) ajoute cet espace sur chacun des quatre cts de llment. Vous pouvez aussi dfinir une valeur pour chaque ct sparment, en suivant le sens des aiguilles dune montre (haut, droite, bas, gauche ou top, right, bottom, left: voir Figure3.6). Un moyen mnmotechnique pour se rappeler lordre des termes anglophones est de penser au mot "trouble". Ainsi, insrer la proprit padding: 10px 5px 2px 10px; ajoutera respectivement 10pixels despace en haut, 5pixels droite, 2en bas et10 gauche. Un autre raccourci: si vous adoptez des valeurs identiques pour lespace en haut et en bas dune part, et pour lespace droite et gauche dautre part, vous navez dfinir que deux valeurs en tout. Ainsi, insrer padding: 10px 5px; ajoutera 10pixels despace en haut et en bas, tout en najoutant que 5pixels sur les cts droit et gauche.

50

Se faire plaisir aveclebalisage

Figure3.6
Lordre des valeurs pour les marges ou les espaces suit le sens des aiguilles dune montre.

Personnaliser les en-ttes


Pour faire ressortir davantage encore les en-ttes du tableau, nous pouvons facilement ajouter une couleur darrire-plan et une fonte spcifique ces cellules particulires. Du fait que nous utilisons les lments <th> plutt que de simplement passer en gras le contenu des cellules dans le balisage HTML, nous navons pas ajouter de balises supplmentaires pour appeler spcifiquement les en-ttes. Ajoutons aussi un peu despace en dessous du titre et appliquons-lui une fonte et une couleur (rouge, bien sr1) diffrentes pour le faire ressortir par rapport au reste du tableau (voir Figure3.7):
table { border-collapse: collapse; } caption { font-amily: Arial, sans-serif; color: #993333; padding-bottom: 6px; } th, td { padding: 10px; border: 1px solid #999; }

1. Comme les chaussettes rouges, symboles de lquipe des Red Sox de Boston. (NdT)

Les tableaux sont-ils lincarnation duMal?

51

th { font-family: Verdana, sans-serif; background: #ccc; }

Figure3.7
Titre et en-ttes avec application de styles spcifiques.

En-ttes avec des images darrire-plan


Nous avons ajout un arrire-plan de couleur grise aux lments <th> de notre tableau, mais nous pourrions aller encore un cran plus loin et, au lieu de cela, crer une image de fond lgante qui serait rpte en mosaque lintrieur de ces cellules, par exemple un motif ray blanc et gris, analogue celui que lon trouvait dans les premires versions de MacOSX. Un motif de base minuscule Commenons par crer lunique et minuscule image requise pour cette opration, en passant par Photoshop ou par votre diteur dimages favori. Limage doit tre de 4pixels de haut seulement car, pour cet exemple, nous souhaitons que les rayures alternent 2pixels de gris et 2pixels de blanc. Nous pouvons donner limage nimporte quelle largeur, car elle sera rpte dans les cellules <th> pour crer leffet de rayure. Pour prserver la bande passante, nous ne lui donnerons quun seul pixel de large (voir Figure3.8).
Figure3.8
Image en forme de bande de 1 4pixels, cre dans Photoshop (agrandie).

52

Se faire plaisir aveclebalisage

La CSS Par rapport aux exemples prcdents, une seule chose est changer: remplacer la couleur de fond que nous utilisions par le chemin menant au motif que nous venons de crer. Sauf indication contraire et par dfaut, limage darrire-plan se rptera automatiquement dans chaque direction pour crer ainsi une mosaque.
table { border-collapse: collapse; } caption { font-amily: Arial, sans-serif; color: #993333; padding-bottom: 6px; } th, td { padding: 10px; border: 1px solid #999; } th { font-family: Verdana, sans-serif; background: url(rayure_th.gif); }

La Figure3.9 illustre le tableau rsultant de lapplication de ces styles. Cette fois, les cellules den-tte des colonnes (et elles seules) contiennent un fond ray. Vous pouvez facilement essayer dautres motifs de fond afin de crer divers effets dans les cellules den-tte et/ou de donnes. Amusez-vous bien!
Figure3.9
Un exemple dimage darrireplan, rpte en mosaque et applique aux cellules denttes.

Affecter des icnes des identifiants


Rappelez-vous: un peu plus tt dans ce chapitre, nous avons affect un identifiant unique(id) chaque lment <th> de notre tableau. Nous avons coupl ces identifiants avec des attributs headers dans les cellules de donnes afin daider les utilisateurs naviguant via des outils

Les tableaux sont-ils lincarnation duMal?

53

non visuels. Nous pouvons maintenant tirer parti de ces identifiants dune autre manire, en affectant une icne spcifique chaque lment <th> en tant quimage darrire-plan. Les informations relatives aux icnes seront intgres uniquement dans la CSS, ce qui facilitera leur modification en cas de refonte ou de mise jour du site. Le balisage restera absolument identique. Les icnes Jai cr trois icnes uniques dans Photoshop, une pour chaque en-tte de colonne de notre exemple : Anne, Adversaire et Rsultats saison (V-D). La Figure 3.10 illustre ces trois icnes.
Figure3.10
Trois icnes den-tte du tableau, cres dans Photoshop.

La CSS Ajouter les rgles CSS correspondantes est simple. Du fait que nous avons assign un identifiant chaque <th>, nous pouvons spcifier licne associe laide de la proprit background:
table { border-collapse: collapse; } caption { font-amily: Arial, sans-serif; color: #993333; padding-bottom: 6px; } th, td { padding: 10px; border: 1px solid #999; } th { font-family: Verdana, sans-serif; }

54

Se faire plaisir aveclebalisage

#annee { padding-left: 26px; background: #ccc url(icone_annee.gif) no-repeat 10px 50%; } #adversaire { padding-left: 26px; background: #ccc url(icone_adversaire.gif) no-repeat 10px 50%; } #resultats { padding-left: 26px; background: #ccc url(icone_resultats.gif) no-repeat 10px 50%; }

Vous noterez que, parce que nous utilisons la mthode rapide pour dclarer les arrireplans, nous avons "sorti" la rgle background: #ccc; de la dclarationth et nous lavons ajoute chaque en-tte, avec licne approprie. Grce cette prcaution, il sera possible de "poser" limage sur le fond gris que nous avons spcifi. Nous avons laiss suffisamment despace gauche de chaque en-tte pour que licne ait suffisamment de place et ne soit pas recouverte par du texte. La Figure3.11 illustre le rsultat affich par un navigateur.
Figure3.11
Exemple dicnes uniques affectes chaque lment<th>.

Utiliser la mthode rapide prsente un avantage vident mais, si nous avions dclar seulement limage, sans couleur, au moyen de la proprit background, celle-ci aurait pris le pas sur toute couleur par dfaut dfinie prcdemment laide de la proprit background de llment<th>.

Combiner les rgles pour simplifier les choses Une mthode alternative aboutissant aux mmes rsultats consiste crire les rgles qui se trouvent dupliques pour chaque en-tte individuel (dans le cas prsent, la valeur de padding, ainsi que la couleur et la position dfinies dans background) une seule fois dans la dclarationth (car, aprs tout, ce sont toutes des cellules<th>). Cela ne laisse donc que

Les tableaux sont-ils lincarnation duMal?

55

les lments uniques ( savoir, le chemin vers les images) pour les dclarations #annee, #adversaire et #resultats.
table { border-collapse: collapse; } caption { font-amily: Arial, sans-serif; color: #993333; padding-bottom: 6px; } th, td { padding: 10px; border: 1px solid #999; } th { font-family: Verdana, sans-serif; padding-left: 26px; background-color: #ccc; background-repeat: no-repeat; background-position: 10px 50%; } #annee { background: url(icone_annee.gif); } #adversaire { background: url(icone_adversaire.gif); } #resultats { background: url(icone_resultats.gif); }

Un peu plus compact, nest-ce pas? En factorisant toutes les rgles communes dans une seule rgle, nous vitons de nous rpter encore et encore. Pour cet exemple particulier, cela sapparente un peu bonnet blanc et blanc bonnet mais, pour des feuilles de style trs volumineuses, on peut conomiser quelques octets et assouplir la maintenance lorsque ces rgles dupliques sont combines dans une unique dclaration.

56

Se faire plaisir aveclebalisage

Dautres exemples de styles de tableaux


Pour plus dinspiration sur les diffrentes manires permettant de styler des tableaux de donnes laide de CSS, consultez les ressources suivantes: http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ : un formidable tutoriel pour travailler sur un tableau dot dun balisage smantique et lui appliquer 10mises en forme uniques au moyen de CSS; http://veerle.duoh.com/blog/comments/a_css_styled_table/ : le tutoriel de Veerle Pieters pour crer des tableaux de donnes lgants; http://icant.co.uk/csstablegallery/ : une vitrine de modles de mises en forme de tableaux, constamment renouvels grce aux fichiers CSS soumis au site.

Pour conclure
Tout au long de ce chapitre, nous avons dcouvert que les tableaux ne constituent pas lincarnation du Mal et, en les comprenant mieux, nous constatons quils sont adapts au balisage de donnes tabulaires, tout en restant accessibles. Nous avons galement dcouvert quavec un peu de style, nous pouvons contrler le balisage tabulaire et le rendre plus agrable lil. De quoi vous librer de langoisse des tableaux.

Citations
Les citations inexactes sont les seules citations qui ne sont jamais dformes. Hesketh Pearson

On recourt frquemment aux citations, quel que soit le type de site web. Quil sagisse de citer une autre page web, un auteur ou une publication, baliser les citations de manire spcifique prsente des avantages. Une fois structures, les citations peuvent devenir un lment graphique styl si on les met en valeur laide dune simple CSS. Jetons tout dabord un il trois manires diffrentes de baliser une citation, en notant les avantages et les inconvnients de chaque mthode. Une fois que nous aurons identifi la meilleure solution, nous aborderons quelques aspects connexes et ajouterons une touche de style. Lorsque lon balise une citation longue, quelle est la meilleure mthode? tudions attentivement chacune de ces mthodes, en essayant de dterminer loutil le plus adapt la tche et, plus important encore, de comprendre pourquoi cest le plus appropri.

MthodeA: pas assez de sens


<p>"Les citations inexactes sont les seules citations qui ne sont jamais dformes."</p> <p>&mdash; Hesketh Pearson</p>

Lorsquune citation apparat dans une page, il est souvent souhaitable de la distinguer du reste du texte. Il est utile de donner au lecteur des indices montrant que cette portion de page provient dune source diffrente en cassant (dune manire approprie) le flux normal du contenu. Le balisage de la mthodeA ne distingue en rien la citation des autres paragraphes de la page. Nous navons donc malheureusement aucune solution facile pour styler diffremment la citation. Les guillemets eux-mmes sont le seul vritable indice visuel montrant quil sagit bien dune citation.

MthodeB: un peu de classe?


<div class="citation"> <p>Les citations inexactes sont les seules citations qui ne sont jamais dformes.</p> <p>&mdash; Hesketh Pearson</p> </div>

58

Se faire plaisir aveclebalisage

Du fait que nous avons ajout class="citation" llment <div> qui encadre la citation, nous pouvons envisager de lui appliquer un style spcifique laide des CSS. Mais il semble un peu superflu de crer cette classe supplmentaire quand il existe un lment HTML tout fait correct et ddi cet usage. Nous allons rvler de quel lment il sagit dans une petite minute. Une fois que nous adoptons llment <div> associ une classe particulire, nous sommes galement contraints de coder toutes les citations, sur lensemble du site, de la mme manire si nous voulons garder une certaine cohrence dans le style. Nous devons aussi nous rappeler cette syntaxe spcifique pour baliser toutes les citations lavenir. Cela est particulirement ennuyeux si le site gr est important et dot de combinaisons multiples dlments <div> et de classes, pour diffrents lments structurant les pages. Le dsordre peut rapidement faire surface et vous auriez besoin dune feuille de route pour garder la trace de tous les noms de classes personnaliss que vous avez crs. Se pose galement la question de laffichage dune citation balise ainsi sans CSS, si la feuille de style est indisponible ou non prise en charge. Du fait que llment <div> est simplement un conteneur gnrique, aucun style par dfaut nest appliqu au contenu quil encadre. Cest important pour les personnes utilisant des navigateurs anciens, des outils en mode texte ou des lecteurs dcran. Jetez un il la citation sans CSS et vous constaterez quelle napparat pas diffremment du reste du texte.

MthodeC: lidal, cest <blockquote>


<blockquote> <p>Les citations inexactes sont les seules citations qui ne sont jamais dformes.</p> <p>&mdash; Hesketh Pearson</p> </blockquote>

Le W3C recommande dutiliser pour les citations longues (contenu de niveau bloc) llment <blockquote>, prcisment conu pour le cas dont nous discutons. Lutiliser confre au contenu un sens structurel ainsi quune tiquette unique pour le styler dans les navigateurs visuels. Vous remarquerez que nous encadrons aussi les lignes par des balises de paragraphe au sein de llment <blockquote>. Cest une bonne pratique qui ajoute la valeur smantique adapte ces lments de contenu. En dautres termes, nous nutiliserons pas une balise <br /> pour sparer les paragraphes au sein dun <blockquote>. Les lments<p> fournissent ici une structure correcte, tout en facilitant lapplication de styles laide de CSS. Sans application du moindre style, le contenu plac entre des lments <blockquote> sera indent. Cest un indice visuel minimal mais suffisant pour distinguer la citation du texte normal. Ce retrait par dfaut a toutefois donn naissance une mauvaise habitude, que nous allons aborder la prochaine section.

Citations

59

Utiliser un marteau pour enfoncer une vis


Vous vous souvenez peut-tre davoir utilis <blockquote> par le pass, car ctait comme un paragraphe en retrait. Si vous aviez besoin dindenter un bloc de texte, il suffisait de lentourer de <blockquote>. Malheureusement, il sagissait l dune trs mauvaise habitude que beaucoup ont prise et laquelle on remdie en ajoutant des valeurs padding-left ou margin-left aux lments concerns, dans la CSS. Historiquement, <blockquote> a fait lobjet dabus de ce type, tant exploit davantage pour des raisons de prsentation que pour des circonstances structurelles. En raison de cette mauvaise habitude, le W3C a recommand de confier le rendu des guillemets de citation la feuille de style, et non aux styles par dfaut du navigateur. Nous verrons une solution intressante pour insrer des guillemets lgants la section Pour aller plus loin de ce chapitre.

En rsum
Faisons rapidement un point sur ces trois mthodes pour comprendre en quoi la mthodeC reprsente le meilleur choix pour baliser une citation longue. MthodeA: Il nest pas facile de styler sparment le paragraphe pour le distinguer du reste de la page. Cette mthode ne confre ni sens, ni structure la citation. MthodeB: Ajouter une classe spcifique facilite lapplication de styles, mais nest pas ncessaire du fait que lon dispose de <blockquote>. Nous sommes condamns utiliser cette mthode pour toute citation ultrieure si nous souhaitons que les styles soient cohrents au niveau de la page ou du site. MthodeC: Cest llment qui a t conu par le W3C pour cet objectif prcis, confrant sens et structure au contenu. Il est facile de donner un style distinct aux citations laide de rgles CSS appliques llment <blockquote>. En labsence de CSS, le rendu par dfaut de <blockquote> constituera un indice suffisant, aussi bien pour les navigateurs visuels que non visuels. Il est maintenant temps pour nous de tester notre <blockquote> et dapporter des solutions cratives pour lui donner du style.

60

Se faire plaisir aveclebalisage

Pour aller plus loin


Pour aller plus loin, nous allons tudier quelques manires cratives de styler les citations balises laide de <blockquote> mais, auparavant, commenons par parler un peu de lattribut cite ainsi que des citations intgres au corps de texte.

Citez vos sources


Lorsque lon aborde les citations, il est indispensable de mentionner lattribut cite. Daprs les spcifications du W3C, cite constitue un emplacement permettant au rdacteur de faire rfrence la source dont la citation est extraite. En dautres termes, si la citation provient dune autre page web, nous pouvons ajouter lURL de cette page comme valeur de lattribut cite. Jetons un il au code pour voir comment cela fonctionne.
<blockquote cite="http://www.unsiteweb.fr/chemin/vers/la/page.html"> <p>Les citations inexactes sont les seules citations qui ne sont jamais dformes.</p> <p>&mdash; Hesketh Pearson</p> </blockquote>

Au moment o nous crivons ces lignes, peu de navigateurs arrivent faire quelque chose de cet attribut cite que nous venons dajouter. Mais les choses deviennent plus intressantes lorsque lon utilise des techniques CSS avances ou des scripts pour afficher ou indexer les informations contenues dans cet attribut cite. Lorigine de la citation est une information supplmentaire qui contribue dcrire le contenu de la citation proprement dit, ce qui pourra se rvler trs utile lavenir. Vous pouvez voir les choses ainsi: ajouter lattribut cite, cest un peu comme mettre des pices dun centime dans une tirelire. Les centimes daujourdhui ne reprsentent pas grandchose, mais vous serez bien content, au bout du compte, de la somme totale conomise.
Vous pouvez utiliser llment cite dans les citations intgres au corps de texte, pour encadrer les rfrences dautres sources. Exemple: <p>Le texte suivant est extrait du <cite>New York
Times</cite>.</p>

Citations intgres au corps de texte


Quen est-il des citations courtes et destines tre utilises dans le corps de texte? Si, par exemple, vous citez quelquun au beau milieu dune phrase, utilisez llment<q> comme illustr ci-aprs:
Je lui ai demand <q>Savez-vous planter les choux&nbsp;?</q> et il a rpondu <q>On les plante avec la main</q>.

Citations

61
Dans un navigateur visuel, cet exemple devrait apparatre ainsi: Je lui ai demand "Savez-vous planter les choux?" et il a rpondu "On les plante avec la main." Comme nous lavons fait avec <blockquote>, nous pourrions aussi ajouter lattribut cite llment<q> pour faire rfrence la source de la citation:
<q cite="http://savezvousplanterleschoux.fr/alamodedecheznous.html">On les plante avec la main</q>.

Pas besoin de guillemets La plupart des navigateurs visuels insreront des guillemets l o les lments <q> et </q> apparaissent, de sorte que vous navez pas besoin de les taper vous-mme. Le W3C recommande aussi dajouter lattribut lang complt de la valeur correspondant la langue de la citation. Suivant la langue, les guillemets peuvent apparatre diffremment.
Je lui ai demand <q lang="fr">Savez-vous planter les choux&nbsp;?</q> et il a rpondu <q lang="fr">On les plante avec la main</q>.

Vous pouvez accder une liste complte des codes de langues disponibles sur le site du W3C (www.w3.org/TR/html4/struct/dirlang.html#langcodes). Imbriquer des citations intgres au corps de texte Vous pouvez aussi imbriquer des citations intgres au texte lorsque vous citez quelquun lintrieur dune citation. Cela vous semble confus? moi aussi. Penchons-nous plutt sur un exemple:
Je lui ai demand <q lang="fr">Savez-vous planter les choux&nbsp;?</q> et il a rpondu <q lang="fr">On les plante avec la main, <q lang="fr"> la mode de chez nous</q>&nbsp;!</q>.

Des guillemets simples ou doubles seront utiliss aux endroits appropris et le texte apparatra ainsi: Je lui ai demand "Savez-vous planter les choux?" et il a rpondu "On les plante avec la main, la mode de chez nous!" Et la typographie franaise, dans tout a? Lorsque lon utilise un code de langue, comme expliqu un peu plus haut, la gestion de laffichage des guillemets est laisse au navigateur. Et bien souvent, le rsultat nest pas la hauteur de nos esprances, car la gestion des rgles typographiques franaise na tout simplement pas t mise en uvre dans le navigateur.

62

Se faire plaisir aveclebalisage

Lorsque lon utilise un code de langue, comme expliqu un peu plus haut, la gestion de laffichage des guillemets est laisse au navigateur. Et bien souvent, le rsultat nest pas la hauteur de nos esprances, car la gestion des rgles typographiques franaise na tout simplement pas t mise en uvre dans le navigateur. Il existe toutefois une solution, base sur les pseudo-classes :before et :after disponibles depuis CSS2. Reprenons lexemple de code dj utilis prcdemment:
<p>Je lui ai demand <q lang="fr">Savez-vous planter les choux&nbsp;?</q> et il a rpondu <q lang="fr">On les plante avec la main</q></p>

Sans rajouter la moindre balise, nous pouvons complter les rgles CSS associes llment <q>. La pseudo-classe :before et sa proprit content permettent de faire apparatre un lment donn immdiatement avant le texte de la citation. De manire analogue, la pseudo-classe :after et sa proprit content font apparatre un lment immdiatement aprs le texte de la citation. Le contenu renseign dans la proprit content peut tre aussi bien une chane de caractres que lURL dune image, ou encore une concatnation dune chane de caractres et de lURL dune image. Nous pouvons donc en tirer parti pour remplacer les guillemets appliqus par dfaut par le navigateur, par les guillemets classiques du franais, en doubles chevrons. Cette solution nous permet aussi dappliquer les espaces inscables requis aprs le guillemet ouvrant et avant le guillemet fermant. Le contenu sous forme de chane de caractres nest pas forcment vident manipuler, car on ne peut pas y insrer dentit HTML (codes dbutant par le caractre &). Nous ne pouvons donc pas y utiliser les entits &laquo; () et &raquo; () qui reprsentent les guillemets franais, ou &nbsp; qui est lespace inscable. En revanche, nous pouvons tout fait y glisser des valeurs Unicode: les guillemets ouvrant correspondent la valeur \00AB, les guillemets fermants \00BB et lespace inscable est cod par \00A0. Nous avons alors tous les lments ncessaires pour crer les rgles CSS appliquer nos citations:
q:before { content: "\00AB \00A0" ; } q:after { content: "\00A0 \00BB" ; }

Cette solution nest pas compatible avec la totalit des navigateurs disponibles sur le march, mais elle prsente lavantage de se dgrader de manire transparente pour lutilisateur: comme nous avons fait appel llment <q> pour baliser nos citations, un navigateur qui ne prend pas en charge les pseudo-classes :before et :after ignore les rgles CSS que nous venons de dfinir et affiche la citation en lui appliquant les guillemets par dfaut. La citation reste identifie comme telle, lhonneur est sauf.

Citations

63
Entits HTML, valeurs Unicode. Les entits HTML servant reprsenter des caractres spciaux sont correctement interprtes par tout navigateur. Lorsque vous produisez un document HTML rdig en franais et comportant des accents et autres signes diacritiques, remplacer tous les caractres spciaux par les entits HTML correspondantes vous garantit que le document sera affich correctement quelle que soit la configuration de lutilisateur. Si vous optez pour cette solution, le site http://entitycode.com/ propose une rfrence complte des entits HTML qui devrait se rvler trs utile. Une autre solution consiste dclarer dans len-tte du document (balise <meta>) lencodage utilis pour le document. Dans nos exemples, lencodage est dfini par linformation charset=utf-8, cest-dire que nous utilisons le standard Unicode (voir http://fr.wikipedia.org/wiki/Unicode pour plus dinformations) dans le format UTF-8 (voir http://fr.wikipedia.org/wiki/UTF-8 pour plus dinformations). Comme nous avons dclar cette information dans len-tte du document, nous pouvons alors utiliser des caractres UTF-8 dans le document, soit sous leur reprsentation numrique (ce qui est le cas dans lexemple), soit dans leur reprsentation textuelle. La dclaration en en-tte informe le navigateur de lencodage appliqu au contenu, qui peut alors tre correctement interprt et affich.

Lattribut lang peut fort bien tre utilis conjointement aux pseudo-classes :before et :after pour dfinir des guillemets adapts suivant la langue du document (ou de la citation). La page http:// www.yoyodesign.org/doc/w3c/css2/generate.html#quotes fournit une excellente traduction de la documentation du W3C sur ce point.

Styler <blockquote>
Plusieurs annes durant, Fast Company a prsent sur sa page daccueil une citation quotidienne, tire des archives du magazine. Afin que soient prservs le style et la mise en valeur typographiques du site, la citation a pendant longtemps t gnre sous la forme dune image GIF, ce qui permettait au graphiste de manipuler la fonte de toutes les manires souhaites. Au dbut de lautomne 2003, peu prs au moment o je regardais mon quipe adore des Red Sox un cheveu de remporter une victoire historique la Srie mondiale, jai dcid de laisser tomber les GIF et dutiliser une balise <blockquote> style la place. Du point de vue de laccessibilit, la citation sous forme de texte avait plus de sens quune image et, si nous ne pouvions pas reproduire la souplesse typographique quoffrait le GIF, nous tions face au dfi de rendre la citation lgante dune manire ou dune autre. Bien entendu, les CSS ont vol notre rescousse.

64

Se faire plaisir aveclebalisage

Des guillemets en arrire-plan Lide tait plutt simple et elle impliquait de crer des guillemets ouvrant et fermant dans deux images distinctes, assez claires pour tre positionnes derrire le texte de la citation, qui les recouvrirait partiellement. La citation tait aussi hberge dans un cadre de 270pixels de large, au fond gris clair et aux coins arrondis, pour correspondre linterface globale du site. Une troisime image servait complter leffet darrondi sur le cadre. Les trois images ont t entirement intgres aux rgles CSS au moyen de la proprit background applique aux diffrents lments disponibles. Pour reproduire ici cet exemple, commenons par crer ces guillemets et ces images aux coins arrondis dans Adobe Photoshop ou dans votre diteur dimages favori. Voici loccasion dutiliser une police personnalise, qui ne serait normalement pas disponible dans un navigateur. Dans le cas de Fast Company, jai pu utiliser pour les guillemets une police que lon retrouvait partout dans le magazine. Trois images La Figure4.1 illustre les trois images cres pour loccasion: la premire gre simultanment les guillemets ouvrants et les coins arrondis du haut du cadre, la deuxime correspond aux guillemets fermants et la dernire reprsente les coins arrondis du bas du cadre. Les images sont transparentes pour laisser visible le fond gris que nous spcifierons dans la CSS, blanches l o nous souhaitons crer les coins arrondis et grises pour matrialiser les guillemets.

Figure4.1
Trois images conues dans Photoshop pour crer les guillemets et les coins arrondis.

Baliser les lments lheure actuelle, peu de navigateurs sont capables de grer plusieurs usages darrire-plan affectes un lment au moyen de la proprit background ou background-image. Nous allons donc ajouter un identifiantid chacun des paragraphes dans notre <blockquote>. Nous allons tiqueter lun des paragraphes en tant que #citation et lautre en tant que #auteur, de sorte quen bout de course, nous aurons trois lments distincts auxquels nous pouvons affecter des images darrire-plan.

Citations

65
Voici le balisage que nous allons utiliser pour tout le reste de cet exercice:
<blockquote cite="http://www.unsite.fr/chemin/vers/la/page.html"> <p id="citation">Les <strong>citations inexactes</strong> sont les seules citations qui ne sont <strong>jamais</strong> dformes.</p> <p id=auteur>&mdash;Hesketh Pearson</p> </blockquote>

Nous sommes maintenant prts affecter les images. Trois lments, trois arrire-plans Comme nous lavons mentionn prcdemment, lheure actuelle, il est prfrable de ne renseigner quune seule image darrire-plan pour un lment, au moyen de la proprit background ou background-image. Nous allons donc tirer parti des trois lments disponibles dans notre exemple, savoir la balise <blockquote>, le paragraphe #citation et le paragraphe #auteur, afin daffecter les trois images requises pour crer leffet recherch. Il est toujours judicieux de vrifier les lments dont vous disposez avant den ajouter de nouveaux. Bien souvent, vous pouvez obtenir le style CSS dont vous avez besoin grce aux lments qui sont dj en place de par lcriture dun balisage solide et structur. Pour commencer, crivons la rgle CSS pour llment <blockquote>:
blockquote { width: 270px; margin: 0; padding: 0; font-family: georgia, serif; font-size: 150%; letter-spacing: -1px; line-height: 1em; text-align: center; color: #555; background: #eee url(haut.gif) no-repeat top left; }

Nous avons donn au bloc une largeur totale de 270pixels, qui correspond la largeur de limage haut.gif charge de crer leffet arrondi sur les coins du haut ainsi que les guillemets ouvrants. Nous sommes galement attentifs au texte en dfinissant sa fonte, sa taille et sa couleur. Enfin, nous centrons lensemble du texte et nous dfinissons dans la dernire rgle les informations de couleur, dimage et de position pour son arrire-plan. Il est aussi essentiel de dsactiver les marges et lespacement pour <blockquote>. En lieu et place, nous ajouterons des espacements propres chaque paragraphe. Nous contournerons ainsi la mauvaise interprtation du modle des botes CSS propre Internet Explorer

66

Se faire plaisir aveclebalisage

en version5 sous Windows. Nous aborderons ce modle en dtail dans la seconde partie de cet ouvrage. Dfinissons donc les rgles pour le paragraphe #citation:
blockquote { width: 270px; margin: 0; padding: 0; font-family: georgia, serif; font-size: 150%; letter-spacing: -1px; line-height: 1em; text-align: center; color: #555; background: #eee url(haut.gif) no-repeat top left; } #citation { margin: 0 10px 0 0; padding: 20px 10px 10px 20px; background: url(fin_citation.gif) no-repeat right bottom; }

En dfinissant la marge par margin: 0 10px 0 0;, nous supprimons lespacement appliqu par dfaut par le navigateur en haut et en bas du paragraphe et nous adoptons la place un espacement prcis pour un agencement parfait. Nous ajoutons toutefois 10pixels de marge droite, ce qui dcale dautant limage darrire-plan comprenant les guillemets fermants et nous permet ainsi dquilibrer la position des guillemets dans le cadre par rapport aux bords gauche et droit. Si nous oubliions ces 10pixels, limage serait colle tout contre le bord droit du cadre. Une autre option consiste intgrer les 10pixels de marge dans limage elle-mme. Notez aussi que nous avons choisi daligner limage darrire-plan (les guillemets fermants) en bas (bottom) et droite (right) de llment <blockquote>. Enfin, nous allons utiliser llment de paragraphe auteur (#auteur) pour ajouter la dernire image de fond: les coins arrondis correspondant au bas du cadre.
blockquote { width: 270px; margin: 0; padding: 0; font-family: georgia, serif; font-size: 150%; letter-spacing: -1px; line-height: 1em; text-align: center; color: #555; background: #eee url(haut.gif) no-repeat top left; }

Citations

67
#citation { margin: 0 10px 0 0; padding: 20px 10px 10px 20px; background: url(fin_citation.gif) no-repeat right bottom; } #auteur { margin: 0 10px 0 0; padding: 0 0 10px 0; color: #999; font-size: 60%; background: url(bas.gif) no-repeat bottom; }

L encore, nous supprimons les marges par dfaut du paragraphe et nous choisissons dutiliser plutt un espacement en bas, qui permet daligner lensemble. La troisime image est maintenant en place et ajoute les coins arrondis infrieurs gauche et droit du cadre. En utilisant lespacement (padding) plutt que les marges (margin) pour dfinir les espacements relatifs lauteur, nous garantissons que limage des coins arrondis est positionne exactement l o elle le doit, cest--dire en bas. Rsultats La Figure4.2 prsente les rsultats obtenus dans un navigateur graphique moderne typique. Le cadre aux coins arrondis est complet et les guillemets sont joliment glisss sous le texte de la citation. Le ct particulirement agrable de cette mthode, cest que le cadre dans son ensemble est trs volutif: vous pouvez y insrer une citation de nimporte quelle longueur, le cadre sagrandira ou se rduira parfaitement, les guillemets et les coins arrondis se positionnant toujours correctement. Cela signifie aussi que lagencement graphique de la citation et du cadre qui la contient seront conservs si un utilisateur malvoyant augmente lataille du texte.
Figure4.2
Bloc de citation rsultant de lapplication des styles dfinis et des trois images darrireplan.

68

Se faire plaisir aveclebalisage

Mettre en valeur des mots particuliers Un lment graphique supplmentaire que jai ajout la citation de Fast Company consistait utiliser llment <strong> pour mettre en exergue certains mots importants dans la citation, afin de prolonger le mimtisme typographique existant avec le magazine. En utilisant <strong>, je peux garantir que la plupart des outils non visuels ou nexploitant pas les CSS afficheront quand mme le mot en gras ou fortement mis en valeur (ce qui est parfaitement sens dans ce cas); dans le mme temps, je peux aussi appliquer aux lments <strong> contenus dans llment <blockquote> une couleur plus sombre, par le biais de la CSS. Le balisage en sera lgrement modifi par lajout de llment <strong> pour encadrer des mots slectionns:
<blockquote cite="http://www.unsite.fr/chemin/vers/page.html"> <p id="citation">Les <strong>citations inexactes</strong> sont les seules citations qui ne sont <strong>jamais</strong> dformes.</p> <p id="auteur">&mdash;Hesketh Pearson</p> </blockquote>

Et nous devons par ailleurs ajouter une dclaration CSS supplmentaire:


#citation strong { color: #000; font-weight: normal; }

Dsormais, tout lment <strong> contenu dans notre citation apparatra en noir (tout ce quil y a de plus noir) et, du fait que le reste de la citation apparat dans une fonte de graisse normale (font-weight: normal;), nous substituons au gras qui apparat par dfaut avec <strong> une valeur normal. Vous pouvez observer le rsultat des lments <strong> la Figure4.3, o nous avons mis en exergue les termes "citations inexactes" et "jamais".
Figure4.3
Citation avec application des styles et utilisation dlments <strong> pour mettre en exergue certains termes.

Citations

69
Comment lensemble supporte-t-il la dgradation? Nous avons vu llgance que peut atteindre notre <blockquote> avec quelques rgles CSS et images de fond, mais quen est-il dans des navigateurs et priphriques ne grant pas les CSS? Jusquo cette mthode supporte-t-elle la dgradation? Par chance, comme nous utilisons llment <blockquote> tel quil a t conu, les navigateurs en mode texte ou anciens, les tlphones portables, ordinateurs de poche, lecteurs dcran, etc. le traiteront correctement. Ainsi, la Figure 4.4 illustre lallure quaura notre citation, sans application de CSS fantaisie, grce son balisage simple. Jai ajout un peu de texte factice autour de la citation pour donner une ide de leffet global.

Figure4.4
Une vue de notre exemple <blockquote> sans application de styles.

Styler <blockquote> avec plusieurs images darrire-plan


La solution que nous venons de prsenter a lavantage de fonctionner dans tous les cas, mme sur des navigateurs anciens. Pourtant, il est possible dadopter une autre approche, reposant sur CSS3 et compatible avec les navigateurs rcents. Partons du code HTML utilis la section prcdente:
<blockquote cite="http://www.unsite.fr/chemin/vers/la/page.html"> <p id="citation">Les <strong>citations inexactes</strong> sont les seules citations qui ne sont <strong>jamais</strong> dformes.</p> <p id="auteur">&mdash;Hesketh Pearson</p> </blockquote>

CSS3 nous permet de dclarer plusieurs images darrire-plan pour un mme lment et ce, de manire finalement plutt simple. Il suffit de dclarer toutes les images requises pour

70

Se faire plaisir aveclebalisage

llment, sans que cela ne ncessite de surcharger la structure. Les attributs id="citation" et id="auteur" de notre exemple deviennent donc ici superflus et nous pouvons dfinir directement les arrire-plans dans la rgle CSS associe llment blockquote:
blockquote { background-image: url(/img/haut-gauche.gif), url(/img/haut-droit.gif), url(/img/bas-gauche.gif), url(/img/bas-droit.gif); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: top left, top right, bottom left, bottom right; }

En loccurrence, en modifiant lgrement les images notre disposition pour rendre lexemple plus facile manipuler (images haut-gauche.gif comportant le guillemet ouvrant et bas-droite.gif comportant le guillemet fermant, voir Figure4.5), nous pouvons rdiger la rgle CSS suivante:
blockquote { width: 250px; margin: 0; font-family: georgia, serif; font-size: 150%; letter-spacing: -1px; line-height: 1em; text-align: center; text-indent:26px; color: #555; background-color:#CCC; background-image: url(img/haut-gauche.gif), url(img/bas-droite.gif); background-position: top left, bottom right; background-repeat: no-repeat, no-repeat; padding: 20px 10px; }

Figure4.5
Les images darrire-plan utilises dans lexemple

Citations

71
Figure 4.6
Le rsultat affich dans un navigateur

La Figure4.6 prsente le rsultat affich dans le navigateur. Voil donc une solution qui nous permet de gagner en efficacit et de rendre le code plus compact. Toutefois, ce type de rgle nest pas encore gr parfaitement par tous les navigateurs: il est donc prfrable den user avec modration

Pour conclure
Maintenant que nous avons tudi plusieurs mthodes de balisage des citations, il est facile de comprendre en quoi <blockquote> est loutil le plus appropri pour cette tche. Elle est loin, lpoque o lon utilisait <blockquote> pour simplement indenter du texte: nous pouvons maintenant lexploiter exactement pour lusage prvu, savoir une longue citation. Une fois que cette structure est en place, il est facile dappliquer un style lgant aux lments <blockquote> pour les dmarquer du texte normal. La structure permet nanmoins la citation dtre correctement prsente dans un navigateur o les CSS sont dsactives ou dans un dispositif non graphique.

Formulaires
Linteractivit a toujours fait partie intgrante du Web en permettant lutilisateur et au site de communiquer par change dinformations. Grce aux formulaires, nous pouvons collecter, de manire organise et prdtermine, des donnes fournies par les utilisateurs. Nanmoins, les formulaires ont toujours t en quelque sorte une zone de non-droit en matire de cration de sites web. Ainsi, par exemple, nous dcouvrirons que le balisage dun formulaire peut tre ralis denviron 10000manires diffrentes. Bon, peut-tre pas autant. Toutefois, il existe diffrentes options prendre en considration ainsi que des tapes ncessaires afin de garantir que nos formulaires sont structurs de manire profiter aussi bien lutilisateur quau propritaire du site.

Quelles sont nos options pour baliser un formulaire?


tudions quatre solutions diffrentes pour baliser le mme formulaire lmentaire, aboutissant toutes des rsultats similaires. Nous allons passer en revue chaque mthode et discuter de ses avantages et inconvnients.

MthodeA: utiliser un tableau


<form action="/chemin/vers/le/script" method="post"> <table> <tr> <th>Nom&nbsp;:</th> <td><input type=text name=nom /></td> </tr> <tr> <th>E-mail&nbsp;:</th> <td><input type=text name=email /></td> </tr> <tr> <th>&nbsp;</th> <td><input type=submit value=Envoyer /></td> </tr> </table> </form>

On recourt depuis longtemps aux tableaux pour baliser les formulaires et, en raison de cet emploi frquent, des formulaires structurs ainsi nous semblent dsormais familiers: des textes dintituls, aligns droite dans la colonne de gauche, et des lments de contrle du formulaire, aligns gauche dans la colonne de droite. Un tableau deux colonnes est lune des solutions les plus simples pour obtenir une prsentation utilisable.

74

Se faire plaisir aveclebalisage

Certains pourront arguer quun tableau nest pas ncessaire, tandis que dautres seront convaincus que les formulaires sont des donnes tabulaires. Nous nallons pas prendre parti pour lune ou lautre de ces positions, mais nous nous contenterons de souligner quun tableau constitue parfois la meilleure solution pour obtenir certaines prsentations, particulirement si le formulaire est complexe et fait intervenir des contrles multiples tels que boutons radio, champs de slection et ainsi de suite. Se reposer uniquement sur les CSS pour contrler la disposition de formulaires compliqus peut se rvler frustrant et implique souvent de surcharger le balisage dlments <span> et <div>, qui engorgent bien davantage le code quune structure de tableau. Jetons un il la Figure5.1 pour voir comment la mthodeA se prsente dans un navigateur graphique typique.
Figure5.1
Rendu de la mthodeA dans un navigateur.

Vous pouvez constater que, en utilisant un tableau, les intituls et les lments de formulaire sont joliment aligns. Toutefois, pour un formulaire aussi simple, jviterais probablement de choisir le tableau de faon gnrale, pour lui prfrer une solution ncessitant moins de balisage. moins que cette disposition ne soit cruciale pour la conception graphique du formulaire, il nest pas ncessaire dutiliser ici un tableau. Nous pourrions galement soulever quelques problmes en termes daccessibilit, ce que nous allons faire en abordant les deux prochaines mthodes.

MthodeB: sans tableau, mais un peu ltroit


<form action="/chemin/vers/le/script" method="post"> <p> Nom&nbsp;: <input type="text" name="nom" /><br /> E-mail&nbsp;: <input type="text" name="email" /><br /> <input type="submit" value="Envoyer" /> </p> </form>

Utiliser un unique paragraphe et quelques balises <br /> pour sparer les lments est une solution passable, au rendu graphique un peu triqu. La Figure5.2 illustre comment cette mthode saffiche gnralement dans un navigateur.

Formulaires

75

Figure5.2
Rendu de la mthodeB dans un navigateur.

Vous constatez que, si nous nous en sortons sans tableau, le rsultat nest ni ar, ni trs agrable lil. Nous sommes galement confronts un problme dalignement des lments de contrle du formulaire, visible la Figure5.2. Nous pourrions arer un peu cette prsentation en ajoutant une marge aux lments <input> laide dune rgle CSS telle que:
input { margin: 6px 0; }

Cette rgle ajoute une marge de 6pixels au-dessus et en dessous de chaque lment <input> (nom, adresse e-mail et bouton denvoi), ce qui espace les lments comme lillustre la Figure5.3.
Figure5.3
MthodeB avec ajout dun espacement associ aux lments <input>.

Si la mthodeB ne recle rien de particulirement incorrect, il reste nanmoins quelques ajustements possibles pour obtenir un meilleur formulaire. Et ces ajustements sont vidents dans la mthodeC. Alors jetons-y un il.

MthodeC: simple et plus accessible


<form action="/chemin/vers/le/script" id="ceformulaire" method="post"> <div><label for="nom">Nom&nbsp;:</label><br /> <input type="text" id="nom" name="nom" /></div> <div><label for="email">E-mail&nbsp;:</label><br /> <input type="text" id="email" name="email" /></div> <div><input type="submit" value="Envoyer" /></div> </form>

76

Se faire plaisir aveclebalisage

Jaime bien la mthodeC pour diverses raisons. Tout dabord, pour un formulaire lmentaire comme celui de cet exemple, je trouve quil est pratique de placer chaque couple intitul/lment de contrle dans son propre <div>. Lorsquon laffiche sans feuille de style, le comportement par dfaut dun <div> (chacun sur sa propre ligne) devrait suffire diffrencier les lments et les rendre lisibles. Nous pourrons ensuite contrler prcisment lespacement des lments <div> de notre formulaire grce aux CSS. Par ailleurs, nous avons franchi une tape supplmentaire en donnant ce formulaire un identifiant unique (mais peu intressant): id="ceformulaire". Ainsi, lespacement prcis auquel je faisais rfrence pourrait se prsenter ainsi:
#ceformulaire div { margin: 6px 0; }

Nous dclarons essentiellement que tous les lments <div> de ce formulaire doivent tre dots de marges suprieures et infrieures de 6pixels. Un autre avantage de la mthodeC par rapport ses deux prdcesseurs est que, si chaque groupe (intitul et champ) est encadr dlments <div>, une balise <br /> place chaque objet sur sa propre ligne. Utiliser <br /> pour sparer les lments contourne le problme dalignement des champs caus par les diffrences de longueur des intituls texte. La Figure5.4 illustre le rendu de la mthodeC dans un navigateur graphique, la rgle CSS mentionne ci-dessus tant applique chaque lment <div>:
Figure5.4
Rendu de la mthodeC dans un navigateur, avec application dune rgle CSS aux lments <div>.

Laspect graphique de la mthodeC tant satisfaisant, jetons maintenant un il aux avantages les plus marquants quelle offre, en particulier une amlioration de laccessibilit. Llment <label> Utiliser llment <label> pour rendre vos formulaires plus accessibles comprend deux tapes, toutes deux apparaissant dans la mthodeC. La premire tape consiste utiliser les lments <label> pour associer le texte de lintitul avec llment de contrle correspondant, quil sagisse dun champ de texte, dune zone de texte, dun bouton radio, dune case cocher,etc. La mthodeC utilise <label> sur les intituls Nom&nbsp;: et E-mail&nbsp;: pour les coupler avec les champs de saisie de texte qui vont contenir les informations.

Formulaires

77

La seconde tape consiste ajouter lattribut for llment <label>, ainsi quun attribut correspondantid llment de contrle associ. Ainsi, dans la mthodeC, nous ajoutons llment <label> balisant Nom&nbsp;: la valeur de lattribut for correspondant lidentifiantid du champ de texte qui suit.
<form action="/chemin/vers/le/script" id="ceformulaire" method="post"> <div><label for=nom>Nom&nbsp;:</label><br /> <input type=text id=nom name=nom /></div> <div><label for=email>E-mail&nbsp;:</label><br /> <input type=text id=email name=email /></div> <div><input type=submit value=Envoyer /></div> </form>

Pourquoi <label>? Vous avez sans doute dj entendu dire quil faut ajouter des lments <label> vos formulaires. La question incontournable que vous devez toujours vous poser est pourquoi utiliser des lments <label>. Crer des relations entre intitul (label) et identifiant(id) permet aux lecteurs dcran de lire correctement lintitul appropri pour chaque lment de contrle du formulaire, indpendamment de lendroit o chacun se situe dans la prsentation visuelle. Cest une bonne chose. Par ailleurs, llment <label> a t conu pour baliser les intituls des champs dans les formulaires et, en lutilisant, nous amliorons la structure du formulaire en donnant du sens ces composants. Un bnfice supplmentaire li lutilisation dlments <label> pour grer des boutons radio ou des cases cocher est que la plupart des navigateurs peuvent basculer la valeur duchamp lorsque lutilisateur clique sur lintitul balis par <label>. Il en rsulte, en retour, une zone cliquable plus importante pour llment de contrle, ce qui permet des utilisateurs mobilit rduite dinteragir plus facilement avec le formulaire (voir Mark Pilgrim, Dive Into Accessibility, http://diveintoaccessibility.org/day_28_labeling_ form_ elements.html). Si, par exemple, nous voulons ajouter notre formulaire une case cocher donnant lutilisateur le choix de "Mmoriser les informations", nous pouvons utiliser llment <label> de la manire suivante:
<form action="/chemin/vers/le/script" id="ceformulaire" method="post"> <div><label for="nom">Nom&nbsp;:</label><br /> <input type="text" id="nom" name="nom" /></div> <div><label for="email">E-mail&nbsp;:</label><br /> <input type="text" id="email" name="email" /></div> <div><input type=checkbox id=memoriser name=memoriser /> <label for=memoriser>Mmoriser ces informations&nbsp;?</label></div> <div><input type="submit" value="Envoyer" /></div> </form>

78

Se faire plaisir aveclebalisage

En balisant la case cocher de cette manire, nous obtenons deux rsultats: dune part, les lecteurs dcran vont lire llment de contrle du formulaire avec lintitul correct (mme si, dans ce cas, lintitul vient aprs llment de contrle); dautre part, la zone cible permettant de cocher la case sagrandit pour englober le texte ainsi que la case cocher ellemme (dans la plupart des navigateurs). La Figure5.5 illustre laffichage du formulaire dans un navigateur et lon a matrialis la zone cliquable de la case cocher pour montrer quel point elle est tendue.
Figure5.5
Exemple dune case cocher insre avec un texte cliquable.

Outre les tableaux et les paragraphes, je souhaite vous prsenter une dernire mthode de balisage des formulaires, reposant sur une liste de dfinitions.

MthodeD: dfinir un formulaire


<form action="/chemin/vers/le/script" id="ceformulaire" method="post"> <dl> <dt><label for="nom">Nom&nbsp;:</label></dt> <dd><input type="text" id="nom" name="nom" /></dd> <dt><label for="email">E-mail&nbsp;:</label></dt> <dd><input type="text" id="email" name="email" /></dd> <dt><label for="memoriser">Mmoriser ces informations&nbsp;?</label></dt> <dd><input type="checkbox" id="memoriser" name="memoriser" /></dd> <dt><input type=submit value=Envoyer /></dt> </dl> </form>

La dernire mthode que nous allons tudier pour la prsentation de formulaires fait intervenir une liste de dfinitions pour crer des paires intitul/lment de contrle du formulaire. Cest un choix qui peut prter controverse car il est la limite de ce pour quoi les listes de dfinitions sont conues. Mais cest aussi une mthode qui se rpand de plus en plus et qui vaut la peine dtre mentionne dans cet ouvrage. Nous approfondirons les listes de dfinitions un peu plus loin, au Chapitre8, et nous aborderons le fait quelles sont assurment adaptes bien plus dusages que les concepteurs de sites ne limaginent. Utiliser un lment<dl> pour baliser un formulaire en est un exemple parfait. Vous remarquerez, dans lexemple de code, que chaque intitul du formulaire est encadr par les lments de terme dfini (<dt> pour definition term) et est suivi par llment de contrle associ, encadr par des lments de description (<dd> pour definition description).

Formulaires

79

Cefaisant, nous crons donc un appariement entre intitul et lment de contrle qui, lorsque le formulaire saffiche dans un navigateur sans application de style, se prsente comme la Figure5.6.
Figure5.6
Prsentation par dfaut du formulaire balis laide dune liste de dfinitions.

Par dfaut, la plupart des navigateurs graphiques appliquent un retrait aux lments <dd> qui sont, par ailleurs, placs sur une ligne propre. Fantastique! Sans ajouter le moindre lment <p> ou <br />, nous obtenons une prsentation de formulaire lisible mme dans un navigateur ne grant pas les CSS. Dfinir le style Le style le plus simple que nous pouvons ajouter consiste supprimer simplement le retrait par dfaut des lments <dd> dans notre formulaire:
form dd { margin: 0; }

La rgle CSS prcdente nous permettrait alors dafficher le formulaire dfini dans la mthodeD comme la Figure5.7.
Figure5.7
Exemple de formulaire utilisant une liste de dfinitions avec suppression des marges sur les lments <dd>.

80

Se faire plaisir aveclebalisage

Nous pourrions galement dfinir un format de type tableau, analogue au rsultat de la mthodeA, laide dlments <dt> flottants:
form dd { margin: 0; } form dt { float: left; padding-right: 10px; }

Avec des lments <dt> flottants gauche, les lments de contrle du formulaire, contenus dans les lments <dd>, saligneront droite comme le prsente la Figure 5.8. Vous remarquerez que les lments de contrle ne sont pas parfaitement aligns. Cela illustre nanmoins que, sil est possible dutiliser un lment <dl> pour structurer un formulaire, la prsentation na pas besoin de placer chaque lment sur sa propre ligne. De fait, grce aux lments <dl>, <dt> et <dd> qui viennent sajouter aux lments <label> et <input> du formulaire, vous aurez largement assez dlments pouvant tre styls laide de CSS.
Figure5.8
Prsentation de formulaire avec des lments <dt> flottants.

En rsum
Nous avons tudi quatre mthodes diffrentes permettant de baliser le mme formulaire simple et not les avantages et les inconvnients de chacune. Soulignons que les lments daccessibilit insrs dans les mthodesC etD pourraient, naturellement, tre facilement ajouts aux deux premires mthodes, lesquelles bnficieraient alors de cette amlioration. Aucune des mthodes que nous avons examines ici na de supriorit marque sur les autres si lon recherche la "meilleure solution". Mais il est intressant de connatre les options dont vous disposez et ce que vous pouvez combiner, partir de ces diffrentes solutions, pour crer des formulaires de meilleure qualit dans vos propres projets. Rcapitulons les diffrences entre les mthodes prsentes. MthodeA: Visuellement, cest une solution agrable et soigne pour organiser les lments de contrle du formulaire et leurs intituls, particulirement dans les formulaires longs et complexes.

Formulaires

81

Toutefois, utiliser un tableau pour un formulaire aussi simple peut sembler superflu. MthodeB: Ce balisage simple saffichera correctement, en version dgrade, dans des navigateurs en mode texte ou des priphriques petit cran. Visuellement, lutilisation des lments <br /> seuls conduit un affichage tass. MthodeC: Ce balisage simple saffichera correctement, en version dgrade, dans des navigateurs en mode texte ou des priphriques petit cran. Cette mthode autorise des intituls et des lments de contrle de longueurs diffrentes, sans induire pour autant de problmes dalignement. Cette mthode prsente une fonction daccessibilit importante (qui peut galement tre applique aux mthodes prcdentes). MthodeD: Ce balisage structur saffichera correctement, en version dgrade, dans des navigateurs en mode texte ou des priphriques petit cran. Cette mthode prsente une fonction daccessibilit importante (qui peut galement tre applique aux mthodes prcdentes). Les intituls et les lments de contrle peuvent tre placs sur la mme ligne ou sur des lignes spares, laide de CSS. Si vous ne vous rendez coupable daucun crime contre les standards web en utilisant les mthodesA ouB, extraire les bonnes choses de la mthodeC et les appliquer aux exemples prcdents reprsente un pas dans la bonne direction. La mthode C peut aussi tre amliore et nous allons jeter un il, la section Pour aller plus loin qui suit, des fonctionnalits que nous pouvons lui ajouter. Nous parlerons galement de rgles CSS simples qui peuvent rendre notre formulaire plus attrayant visuellement.

Pour aller plus loin


Pour cette session dapprofondissement, nous allons aborder les attributs tabindex et accesskey et expliquer en quoi ils peuvent faire des merveilles pour la navigabilit de nos formulaires. Nous tudierons galement llment <fieldset>, qui peut nous aider organiser les sections de formulaire. Enfin, nous aborderons les aspects des CSS qui nous permettront de pimenter un peu lapparence de notre formulaire.

82

Se faire plaisir aveclebalisage

Le fabuleux attribut tabindex


Lattribut tabindex est une fonctionnalit que nous pouvons facilement ajouter notre formulaire. En insrant tabindex et une valeur numrique, nous permettons aux utilisateurs de dplacer laide du clavier (typiquement, avec la touche Tab) le curseur dans les champs du formulaire. Appuyer plusieurs reprises sur la touche Tab fait passer le focus dun lment de contrle du formulaire lautre, suivant un ordre que nous pouvons spcifier. En contrepartie, la combinaison des touches Maj+Tab permet de revenir llment de formulaire prcdent dans l'ordre dfini. Par dfaut, tout lment interactif possde un "ordre de tabulation" implicite mais, en utilisant lattribut tabindex, vous reprenez le contrle sur cet ordre (autrement gr par le navigateur). Ajoutons par exemple lattribut tabindex aux lments de contrle de notre formulaire dexemple. Nous reprenons le formulaire dcrit la mthodeC en allgeant lgrement son balisage (utilisation de <p> au lieu des <div> dont les crateurs de sites web abusent parfois, voir ce sujet le Chapitre9):
<form action="/chemin/vers/le/script" id="ceformulaire" method="post"> <p><label for="nom">Nom&nbsp;:</label><br /> <input type="text" id="nom" name="nom" tabindex=1 /></p> <p><label for=email>E-mail&nbsp;:</label><br /> <input type=text id=email name=email tabindex=2 /></p> <p><input type=checkbox id=memoriser name=memoriser tabindex=3 /> <label for=memoriser>Mmoriser ces informations&nbsp;?</label></p> <p><input type=submit value=Envoyer tabindex=4 /></p> </form>

Dsormais, lorsque lutilisateur utilise la touche Tab pour passer dun champ lautre du formulaire, nous sommes assurs que le curseur suivra lordre exact que nous avons dfini: Nom, E-mail, Mmoriser ces informations et Envoyer. Utiliser tabindex pour dfinir lordre de focus des lments de contrle devient particulirement intressant pour les formulaires complexes et ceux o un mme intitul peut tre associ plusieurs champs de saisie ou autres lments de contrle. Pourquoi tabindex? En plus dtre simple mettre en uvre dans notre formulaire, cette solution nous permet daider, l encore, les utilisateurs mobilit rduite qui peuvent alors naviguer dans le formulaire uniquement laide du clavier. Plutt que davoir attraper la souris pour saisir chacun des lments du formulaire, lutilisateur peut le parcourir lment par lment, dans lordre appropri, laide de la touche Tab du clavier. Pensez ceux qui, pour une raison ou une autre, ne peuvent pas utiliser leurs deux mains pour naviguer sur le Web. Voil qui les aidera grandement.

Formulaires

83

accesskey pour les formulaires frquents


Lattribut accesskey, analogue tabindex, est une autre fonctionnalit facile ajouter. Elle peut se rvler trs utile pour les utilisateurs mobilit rduite et est tout simplement pratique pour tout le monde. Supposons, par exemple, que nous ajoutions lattribut accesskey llment <label> qui encadre le texte Nom&nbsp;: dans notre formulaire. Lorsque lutilisateur appuie sur la combinaison de touches correspondant lattribut spcifi, le focus du curseur passe au champ associ. Voyons un peu dans le code comment cela se produit:
<form action="/chemin/vers/le/script" id="ceformulaire" method="post"> <p><label for="nom" accesskey="9">Nom&nbsp;:</label><br /> <input type="text" id="nom" name="nom" tabindex="1" /></p> <p><label for="email">E-mail&nbsp;:</label><br /> <input type="text" id="email" name="email" tabindex="2" /></p> <p><input type="checkbox" id="memoriser" name="memoriser" tabindex="3" /> <label for=memoriser>Mmoriser ces informations&nbsp;?</label></p> <p><input type=submit value=Envoyer tabindex=4 /></p> </form>

Suivant le systme et le navigateur, lutilisateur devra utiliser la touche Alt ou Ctrl en conjonction avec la touche9 que nous avons spcifie dans le balisage. Le curseur se dplace alors immdiatement vers le champ Nom&nbsp;: de notre formulaire. Recherche accs facile Lattribut accesskey peut tre particulirement utile dans des formulaires frquemment utiliss, par exemple un champ de recherche ou un formulaire de connexion membre. Sans avoir saisir la souris, en faisant appel au clavier seul, les utilisateurs peuvent immdiatement modifier le focus et dmarrer leur recherche ou saisir leurs identifiants de connexion.
Soulignons que, si tous les navigateurs ne grent pas lattribut accesskey, cela reste un avantage pour ceux qui le prennent en charge. Par contre, les combinaisons de touches utiliser varient d'un navigateur l'autre. Ainsi, pour accder au champ de recherche auquel nous avons ajout lattribut accesskey="9", les utilisateurs d'Internet Explorer sous Windows devront taper la combinaison de touches Alt+9, tandis que les utilisateurs d'IE sous Mac utiliseront Cmd+9. Les utilisateurs de Firefox (toutes plates-formes confondues) devront quant eux jouer avec les touches Alt+Maj+9. Dans tous les cas, le curseur passe au champ de recherche. Pour en apprendre plus sur les accesskeys et les combinaisons de touches propres chaque navigateur, consultez la page http://en.wikipedia. org/wiki/Access_key (plus complte sur son homologue en franais). Lattribut accesskey peut tre utilis pour donner un accs rapide aux lments dun formulaire, comme nous venons de le voir, mais aussi des hyperliens (particulirement pour faciliter laccs aux lments dun menu). Nous attirons toutefois votre attention sur un dernier point : il nexiste

84

Se faire plaisir aveclebalisage

pas de convention en matire dattributs accesskey. Ainsi, une mme valeur dattribut accesskey peut, sur un site, diriger le focus sur le champ "Nom" dun formulaire tandis que, sur un autre site, elle correspondra au lien ramenant la page daccueil du site. En outre, certaines combinaisons daccesskey peuvent entrer en conflit avec des touches rserves certaines applications (navigateur, lecteur dcran). Cette fonctionnalit, si elle peut se rvler trs utile, ncessite donc une bonne dose de rflexion pralable. Dans cette optique, nous vous recommandons la lecture des articles Accesskey, lessai non transform de laccessibilit (http://openweb.eu.org/articles/ accesskey_essai_non_transforme/) du site OpenWeb et Accesskeys and Reserved Keystroke Combinations (http://www.wats.ca/show.php?contentid=43).

Appliquer des styles aux formulaires


Maintenant que nous disposons dun formulaire bien structur, il est temps de dcouvrir quelques techniques CSS que nous pouvons exploiter pour en personnaliser lapparence. Dfinir la largeur des champs de saisie de texte Il peut tre difficile de traiter les lments de contrle des formulaires de par leurs largeurs et hauteurs qui diffrent dun navigateur lautre. Dans notre formulaire dexemple, nous navons pas spcifi de taille pour les champs de saisie de texte et nous avons laiss le navigateur leur appliquer sa largeur par dfaut. Typiquement, un concepteur peut spcifier une largeur au moyen de lattribut size, en lajoutant llment <input> comme suit:
<input type=text id=nom name=nom tabindex=1 size=20 />

Dfinir une taille de"20" signifie que la largeur du champ de saisie de texte quivaut 20caractres (et non 20pixels). Suivant la fonte dfinie par dfaut dans le navigateur pour les lments de contrle de formulaires, la largeur effective du champ, exprime en pixels, peut varier. Cela complique donc lgrement la mise en page prcise des formulaires. En utilisant les CSS, nous pouvons contrler la largeur des champs de saisie (et des autres lments de contrle) au pixel prs, si nous le souhaitons. Par exemple, affectons une largeur de 200pixels tous les lments <input> de notre formulaire dexemple. Nous allons tirer parti de lidentifiantid assign au formulaire, savoir ceformulaire dans le cas prsent.
#ceformulaire input { width: 200px; }

Dsormais, tous les lments <input> contenus dans #ceformulaire auront 200pixels de large. La Figure5.9 illustre le rsultat affich dans un navigateur graphique. Oups. La case cocher et le bouton Envoyer sont aussi des lments <input> et, par consquent, se voient appliquer la mme largeur. Ainsi donc, plutt que dappliquer cette largeur tous les lments <input>, utilisons plutt les identifiants que nous avons dfinis pour les lments de contrle "Nom" et "E-mail" seulement.

Formulaires

85

#nom, #email { width: 200px; }

Figure5.9
Notre formulaire dexemple, avec une largeur de 200pixels applique tous les lments <input>.

La Figure5.10 prsente le rsultat de cet ajustement, affich dans un navigateur. Seuls les deux champs de saisie de texte ont maintenant une largeur de 200pixels.
Figure5.10
Notre formulaire dexemple avec application dune largeur de 200pixels aux deux champs de saisie seulement.

Utiliser <label> pour personnaliser les fontes Nous disposons de plusieurs options pour personnaliser la taille, la police et la couleur du texte contenu dans notre formulaire. Et, dans un autre exemple de "exploitons le balisage que nous avons prsent", nous allons utiliser llment <label> pour habiller le texte. Jaime assez lide dutiliser llment <label> pour appliquer des styles spcifiques aux textes dun formulaire, pour une raison avant tout. Je peux imaginer des scnarios o nous souhaiterions mettre en exergue lintitul dun champ par rapport dautres lments de texte inclus dans llment <form>. Par exemple, nous pourrions ajouter un style ddi pour tous les lments de paragraphe situs dans notre formulaire.
#ceformulaire p { font-family: Verdana, sans-serif; font-size: 12px; font-weight: bold; color: #66000; }

86

Se faire plaisir aveclebalisage

Tout le texte contenu dans des paragraphes de notre formulaire safficherait ainsi dans une fonte Verdana de 12pixels, en gras et de couleur bordeaux. Mais nous pourrions aussi parvenir au mme rsultat en appliquant ces mmes rgles aux seuls lments <label> contenus dans notre formulaire, de la manire suivante:
#ceformulaire label { font-family: Verdana, sans-serif; font-size: 12px; font-weight: bold; color: #66000; }

Le rsultat de lapplication de ce style est visible la Figure5.11.


Figure5.11
Notre formulaire dexemple avec application du style dfini pour les lments <label>.

Quelle raison me pousse prfrer cette solution? Supposons simplement que, en dehors des intituls, le formulaire prsente des instructions supplmentaires ou du texte contenu dans des lments <p>. Ce texte complmentaire hriterait du mme style si nous lappliquions aux lments <p> de notre formulaire. Nous pourrions, au lieu de cela, appliquer un style gnrique pour tout texte contenu dans notre formulaire et utiliser le style dfini pour les lments <label> plus spcifiquement, afin de personnaliser les intituls des lments de contrle uniquement. Les rgles CSS prendraient alors lallure suivante:
#ceformulaire { font-family: Georgia, serif; font-size: 12px; color: #999; } #ceformulaire label { font-family: Verdana, sans-serif; font-weight: bold; color: #660000; }

Formulaires

87

Pas besoin dtre redondant Vous remarquerez que nous navons pas besoin de rpter la rgle font-size: 12px dans la dclaration #ceformulaire label. tant donn que les lments <label> sont contenus dans #ceformulaire, ils hriteront automatiquement de cette proprit. Cest toujours une bonne pratique de dfinir les rgles communes au plus haut niveau et de ne modifier par la suite que celles qui sont plus spcialises et, par consquent, plus bas dans larborescence des lments. On conomise ainsi des octets de code, ce qui, en plus dtre une bonne chose en soi, facilite galement les mises jour ultrieures. Si vous souhaitez modifier lattribut font-family pour lintgralit du formulaire, vous navez mettre jour quune seule rgle plutt que de rpter la modification dans chacune des rgles concernes. Imaginez que vous ayez construit un site entier utilisant uniquement la police Georgia. Vous avez ajout la mme rgle, font-face: Georgia, serif; 20 dclarations CSS diffrentes. Une semaine plus tard, le chef de projet annonce un changement radical dans la prsentation: tout le site doit passer en police Verdana. Vous devez maintenant reprendre chacune de vos 20rgles pour les mettre jour. Vous auriez aussi pu dfinir la rgle une seule fois, un niveau plus lev, par exemple llment <body>. Le document entier hrite de la police Georgia, sauf aux emplacements spcifiquement dfinis. Maintenant, si votre chef vient vous demander de changer la police du site, vous pouvez mettre en uvre dans la minute la moindre demande de modification de la police du site. Vous montrez ainsi quel point vous tes prcieux pour lentreprise: vos solutions innovantes et efficaces lui permettent ainsi dconomiser du temps et du code, tout en garantissant ractivit et souplesse. Utiliser <fieldset> pour regrouper des sections de formulaire Utiliser llment <fieldset> est une manire pratique de regrouper des lments de contrle des formulaires en sections. De surcrot, ajouter un lment <legend> des fins de description insrera, dans la plupart des navigateurs, une bordure lgante autour des lments de contrle regroups. Ai-je bien dit lgante? Eh bien il se trouve que japprcie cette bordure et, avec un peu de CSS, nous pouvons la rendre encore plus agrable. Commenons toutefois par jeter un il au balisage obtenu lorsque nous crons des groupes de champs. Nous allons ajouter un groupe notre formulaire dexemple:
<form action="/chemin/vers/le/script" id="ceformulaire" method="post"> <fielset> <legend>Connexion</legend> <p><label for=nom accesskey=9>Nom&nbsp;:</label><br /> <input type=text id=nom name=nom tabindex=1 /></p> <p><label for=email>E-mail&nbsp;:</label><br />

88

Se faire plaisir aveclebalisage

<input type=text id=email name=email tabindex=2 /></p> <p><input type=checkbox id=memoriser name=memoriser tabindex=3 /> <label for=memoriser>Mmoriser ces informations&nbsp;?</label></p> <p><input type=submit value=Envoyer tabindex=4 /></p> </fieldset> </form>

La Figure5.12 nous indique comment notre formulaire apparat dans un navigateur typique, une fois que nous avons ajout les lments <fieldset> et <legend>, et avec application de la rgle CSS que nous avons dfinie pour les lments <label>. Vous remarquerez llgante bordure qui entoure les lments de contrle du formulaire encadrs par llment <fieldset>, ainsi que le contenu de la balise <legend> qui interrompt la bordure en haut gauche du cadre.
Figure5.12
Notre formulaire dexemple, aprs ajout de <fieldset> et <legend>.

La raison pour laquelle je parle de bordure "lgante" est que, pour un rendu par dfaut, sans application de la moindre rgle CSS, le rsultat est plutt impressionnant. Et il peut devenir encore plus intressant si nous choisissons de le personnaliser un peu plus, ce que nous allons faire sous peu. Vous commencez maintenant comprendre quel point il peut tre utile de regrouper diffrentes sections dun formulaire laide de <fieldset>. Si notre formulaire dexemple constituait la premire partie dun formulaire contenant dautres groupes, utiliser <fieldset> pour encadrer ces sections est une solution riche au niveau smantique pour donner organisation et lisibilit nos formulaires. Appliquer des styles <fieldset> et <legend> Nous pouvons personnaliser lapparence de la bordure <fieldset> par dfaut et du texte <legend> grce aux CSS, tout aussi facilement que nimporte quel autre lment. Commenons par changer la couleur et la largeur de la bordure, puis nous modifierons le texte lui-mme. Pour styler la bordure de <fieldset> et la rendre un peu plus subtile, nous allons utiliser la rgle CSS suivante:
#ceformulaire { font-family: Georgia, serif; font-size: 12px;

Formulaires

89
color: #999; }

# ceformulaire label { font-family: Verdana, sans-serif; font-weight: bold; color: #660000; }

#ceformulaire fieldset { border: 1px solid #ccc; padding: 0 20px; }

Nous spcifions galement une marge de 20pixels droite et gauche, ainsi que des marges nulles en haut et en bas. Pourquoi ces marges nulles? Compte tenu que les intituls et lments de contrle de notre formulaire sont encadrs par des balises <p>, lespace est dj suffisant au-dessus et en dessous. La Figure5.13 illustre lapparence de notre formulaire lgrement styl dans un navigateur.
Figure5.13
Notre formulaire dexemple, avec application de style sur <fieldset>.

Une lgende en trois dimensions Appliquons enfin quelques rgles CSS llment <legend> pour gnrer un effet de cadre en relief qui semble reli la bordure cre par llment <fieldset>.
#ceformulaire { font-family: Georgia, serif; font-size: 12px; color: #999; } #ceformulaire label { font-family: Verdana, sans-serif; font-weight: bold; color: #660000; }

90

Se faire plaisir aveclebalisage

#ceformulaire fieldset { border: 1px solid #ccc; padding: 0 20px; } #ceformulaire legend { font-family: arial, sans-serif; font-weight: bold; font-size: 90%; color: #666; background: #eee; border: 1px solid #ccc; border-bottom-color: #999; border-right-color: #999; padding: 4px 8px; }

Comme vous pouvez le constater, nous avons ralis ici plusieurs choses. Tout dabord, nous personnalisons la police, la graisse et la taille du texte <legend>. Ensuite, pour leffet3D, nous avons dfini une couleur gris clair pour le fond, puis nous avons ajout une bordure de 1pixel de large autour de lensemble de la lgende, bordure qui suit le modle de celle dfinie pour llment <fieldset>. Pour leffet dombrage, nous avons modifi la couleur de la bordure sur les cts infrieur et droit seulement, pour choisir un gris un peu plus fonc.
Comme nous avons dfini prcdemment la taille de police pour lensemble du formulaire (fontsize: 12px;), nous utiliserons simplement un pourcentage pour rduire la taille du texte de la lgende. Dfinir une taille de police un niveau lev et utiliser un pourcentage pour les niveaux infrieurs de la hirarchie facilite la maintenance ultrieure de la feuille de style. Si vous avez besoin dagrandir la taille des textes pour lensemble du site, il vous suffit dune petite mise jour et les pourcentages sajusteront en consquence. En fait, idalement, nous devrions dfinir la taille initiale dans llment <body> et utiliser des pourcentages partout ailleurs. Pour cet exemple, toutefois, nous avons dcid de la dfinir au niveau de <form>.

Nous avons galement ajust lespacement pour donner un peu dair au texte contenu dans ce petit cadre. Et voil! La Figure5.14 illustre le rsultat final, utilisant toutes les rgles CSS que nous avons ajoutes dans le cours de ce chapitre, tout en exploitant notre formulaire au balisage synthtique et efficace.
Figure5.14
Notre formulaire dexemple complet, styl par la CSS.

Formulaires

91

Bordures et arrire-plan pour des lments de formulaire Ce ntait pas le cas par le pass, mais les navigateurs amliorent continuellement les possibilits quils nous offrent pour styler des lments de formulaire. Naturellement, vous devez toujours faire preuve de prudence car, en fin de compte, un lment de formulaire doit toujours ressembler un lment de formulaire et il doit rester vident pour les utilisateurs quils peuvent interagir avec lui. Pour autant, cela ne fait pas de mal de styler subtilement les lments dun formulaire en modifiant, par exemple, leurs bordures et arrire-plan par dfaut. Ajoutons tout dabord une bordure grise de 1pixel de large autour de chacun des champs de saisie de texte Nom et E-mail de notre formulaire dexemple, afin que disparaisse lombre applique par la plupart des navigateurs.
#name, #email { padding: 5px; font-size: 16px; border: 1px solid #ccc; }

Vous remarquerez que nous avons galement ajout un peu despace et que nous avons augment la taille de la police (font-size) pour faciliter la lecture et lutilisation des champs de saisie. Le rsultat est visible la Figure5.15.
Figure5.15
Champs de saisie de texte dans le formulaire, avec des bordures de 1pixel de large.

Ajoutons maintenant une image darrire-plan reprsentant un gradient gris, qui sera rpte en mosaque horizontale pou crer un effet3D personnalis dans le champ de saisie. La Figure5.16 prsente limage que nous allons utiliser: il sagit dun dgrad vertical qui va du gris au blanc.

92

Se faire plaisir aveclebalisage

Figure5.16
Limage fond-champ.gif, agrandie huit fois pour permettre den voir les dtails.

Voici maintenant la rgle CSS qui intgrera limage aux champs de saisie:
#nom, #email { padding: 5px; font-size: 16px; border: 1px solid #ccc; background: #fff url(fond-champ.gif) repeat-x top left; }

La Figure5.17 prsente le formulaire avec application de ce style final, ce qui ne fait queffleurer toutes les possibilits dont nous disposons pour styler les lments de formulaires. Rappelez-vous simplement quil est souvent prfrable dtre conservateur pour ne pas perturber lutilisateur. En matire dlments de contrle des formulaires, la familiarit est de mise! Toutefois, modifier la fonte, les bordures, larrire-plan ou lespacement des lments de contrle peut faire une grande diffrence dans lapparence dun formulaire bien conu.
Figure5.17
Le formulaire complet, avec bordures et arrire-plan personnaliss.

Pour une comparaison exhaustive des lments de contrle de formulaires styls laide de CSS, base sur les navigateurs et les plates-formes, consultez la collection de plus de 200captures dcran ralise par Roger Johansson (http://www.456bereastreet.com/archive/200701/ styling_form_controls_with_css_revisited/). Ce document est trs utile pour dterminer

Formulaires

93

les proprits CSS qui fonctionneront ou non lorsque vous cherchez styler les lments de contrle dun formulaire. Roger dclare juste titre quil est impossible dobtenir un style de formulaire cohrent sur lensemble des navigateurs et des plates-formes, mais cela ne devrait pas vous empcher dexprimenter et de faire vos propres compromis fonds sur les statistiques de frquentation (navigateur, plate-forme) de votre site.

Y a-t-il un focus dans la salle?


Nous avons vu dans ce chapitre que les attributs accesskey peuvent aider les utilisateurs naviguer dans le formulaire. Pour augmenter encore lergonomie du formulaire et faciliter la saisie des informations, nous pouvons modifier lapparence de llment de formulaire sur lequel se trouve le focus: lutilisateur peut alors identifier au premier coup dil o il se trouve dans le formulaire. Pour cela, nous disposons de la pseudo-classe :focus. Voici un exemple de rgle CSS qui passe en vert llment de formulaire concern:
#ceformulaire input:focus { color: #000; border: 2px solid #336600; background-color: #66CC33; font-size: 1.4em; }

Si nous ajoutons cette rgle la feuille de style applique notre formulaire, nous obtenons le rsultat illustr la Figure5.18. Cette rgle nous permet non seulement dagir sur la couleur de llment, mais aussi sur la taille de la police de caractres utilise pendant la saisie. Tout ceci contribue offrir une meilleure lisibilit lors de la saisie des informations.
Figure5.18
Utilisation de la pseudo-classe :focus pour faciliter la saisie

Pour conclure
Il existe de nombreuses manires de baliser des formulaires. Que vous utilisiez un tableau, une liste de dfinitions, ou de simples lments de paragraphe pour structurer votre formulaire, ses intituls et ses lments de contrle, gardez lesprit les fonctionnalits daccessibilit que vous pouvez facilement appliquer nimporte laquelle des mthodes que nous avons abordes dans ce chapitre.

94

Se faire plaisir aveclebalisage

Les attributs tels que tabindex et accesskey peuvent amliorer la navigation dans votre formulaire. Les lments <label> et les attributs id correspondants garantissent que les utilisateurs utilisant des logiciels dassistance peuvent toujours interagir avec vos formulaires. Vous pouvez mme styler subtilement vos formulaires pour les rendre plus faciles et agrables utiliser. Des petits ajouts tout simples, mais des rsultats grandement amliors.

<strong>, <em> et autres lments destructuration des phrases


Nous avons parl un peu de balisage smantique dans lintroduction ainsi que dans les chapitres prcdents : il sagit dutiliser des lments donnant du sens au document, plutt que des lments ayant purement des fins de prsentation. Si la construction de pages web purement smantiques est une ide allchante, je la vois plutt comme un idal, un objectif atteindre. Ne pas faire mouche tous les coups ne signifie pas pour autant que tous les efforts ont t vains; il faut plutt considrer que sapprocher de la cible est, tout le moins, un effort louable. Bien souvent dans les situations relles, lajout de balises non smantiques devient ncessaire pour rpondre certaines exigences graphiques. Cest probablement d au fait que la gnration actuelle de navigateurs populaires ne respecte pas 100% les standards. Certaines rgles CSS sont loin de fonctionner correctement dans certains navigateurs modernes, ce qui peut conduire au saupoudrage malheureux dlments trangers pour faire fonctionner certains designs. Vous devez nanmoins garder en tte un point fondamental: il existe de rels avantages tendre, autant que faire se peut, vers une structure smantique. Et la prise en charge des standards, mme si elle nest pas totale, a franchi un seuil au-del duquel nous pouvons commencer crer nos sites ds maintenant en recourant aux mthodes lies aux standards web. Parfois, un compromis est ncessaire, mais plus il y a de structure laquelle nous pouvons adhrer, plus notre travail en sera facilit lavenir.

Prsentation contre structure


Ce chapitre traite de la diffrence entre balisages de prsentation et de structure mais, plus spcifiquement, des diffrences dutilisation de <strong> et <b> ou, de faon analogue, de <em> et <i>. Un peu plus loin dans ce chapitre, nous aborderons galement quelques autres lments de structuration des phrases ainsi que leur importance dans le monde du balisage structur et respectueux des standards. On vous a peut-tre dj dit que vous deviez utiliser <strong> au lieu de <b> lorsque vous souhaitez passer un texte en gras, mais sans vous donner plus dexplications sur le pourquoi de ce choix. Et, sans ce "pourquoi", il est difficile dattendre des autres concepteurs de sites web quils changent leurs habitudes de balisage juste parce quon le leur a demand.

96

Se faire plaisir aveclebalisage

Pourquoi <strong> et <em> sont-ils meilleurs que <b> et <i>?


Quest-ce donc que tout ce dbat selon lequel il faut se dbarrasser des lments <b> et <i> pour leur prfrer <strong> et <em>? Eh bien, il sagit simplement de donner du sens et de la structure, plutt que de donner des instructions de prsentation. Et cest la mme structuration que nous cherchons atteindre dans tous les exemples de cet ouvrage. Consultez les experts Pour commencer, voyons un peu ce que le W3C a dire au sujet de <strong> et <em> dans la partie de la "Spcification HTML4.01" qui traite des lments de structuration des phrases (www.w3.org/TR/html4/struct/text.html#h-.2.1):
"Les lments de structuration de la phrase ajoutent une information de structure des fragments de texte. Linterprtation usuelle de ces lments de phrase est la suivante: <em> traduit une mise en exergue. <strong> traduit une mise en exergue plus marque."

Il est donc ici question de deux niveaux de mises en exergue, par exemple pour un mot ou une phrase qui doit tre plus forte, plus aigu, plus rapide ou mise en exergue par rapport au texte normal. Le W3C poursuit en ajoutant:
"La prsentation des lments de structuration de la phrase dpend de lagent utilisateur. En gnral, les agents utilisateurs visuels prsentent le texte de llment <em> en italique et celui de llment <strong> en gras. Les agents utilisateurs synthse vocale peuvent changer les paramtres de la synthse tels que le volume, la hauteur ou le timbre."

Ah, cette dernire phrase est particulirement intressante. Les agents utilisateurs synthse vocale (que nous avons jusqu prsent appels "lecteurs dcran") vont traiter les mots et phrases mis en exergue comme cela a t prvu, et cest assurment une bonne chose. Alternativement, <b> ou <i> ne sont que de simples instructions de prsentation visuelle. Si notre objectif est de sparer autant que possible structure et prsentation, nous serons alors sur la bonne voie si nous utilisons <strong> et <em>. Si nous souhaitons simplement afficher du texte en gras ou en italique sans que cela ait un sens particulier autre que visuel,

Formulaires

97

nous laisserons cela la CSS. Nous parlerons plus en dtail de ces cas un peu plus loin dans ce chapitre. Jetons un il deux exemples de balisage pour essayer de comprendre la diffrence. MthodeA
Votre numro de commande pour toute rfrence future est&nbsp;: <b>6474-2071</b>.

MthodeB
Votre numro de commande pour toute rfrence future est&nbsp;: <strong>6474-2071</strong>.

En gras et en forme Voici un exemple parfait dune situation o il est plus appropri dutiliser <strong> que <b>: nous cherchons ici donner plus dimportance une partie de la phrase par rapport au reste du texte. En plus de rendre visuellement le numro de commande en gras, nous souhaitons galement que les lecteurs dcran changent leur faon de prsenter cet lment particulier, par exemple en augmentant le volume, en changeant la vitesse ou la hauteur. LamthodeB remplit ces deux fonctions pour nous.

Quen est-il de <em>?


De faon similaire, en utilisant <em> plutt que <i>, nous pouvons traduire une mise en exergue plutt que de simplement passer le texte en italique. Jetons un il deux exemples. MthodeA
Ce matin, il ma fallu non pas une, mais <i>trois</i> heures pour dneiger ma sortie de garage.

MthodeB
Ce matin, il ma fallu non pas une, mais <em>trois</em> heures pour dneiger ma sortie de garage.

Avec laccent Dans lexemple prcdent (du vcu, au moment o jcris ces lignes), mon intention tait de mettre laccent sur le mot "trois" par rapport au reste du texte, comme si je disais cette phrase voix haute. Visuellement, la mthodeB sera rendue dans la plupart des navigateurs

98

Se faire plaisir aveclebalisage

par un texte en italique; un synthtiseur vocal ajustera le ton, la vitesse ou la hauteur du texte en consquence.

Juste du gras ou de litalique, sil vous plat


Soulignons quil existe de nombreux scnarios o lon souhaite passer du texte en gras ou en italique uniquement pour leffet visuel. Imaginons, par exemple, que vous deviez publier une liste de liens dans un panneau latral et que vous aimiez lallure de lensemble lorsque les liens sont en gras (voir la Figure6.1, par exemple).

Figure6.1
Exemple dune liste de tags associs aux articles dun blog, affichs en gras et dans un panneau latral.

Il ny a aucune intention de mettre en exergue les liens, seul laspect visuel est recherch. Cest pour cette raison quil est prfrable de laisser les CSS grer lapparence des liens, de manire ne pas traduire de mise en valeur pour les lecteurs dcran et autres navigateurs non visuels.

Formulaires

99

Souhaitez-vous vraiment que la liste de liens en gras soit lue plus fort, plus vite ou sur un ton plus aigu? Probablement pas. Les objectifs du gras sont ici purement de prsentation. Une graisse qui pse son poids Pour dmontrer en code ce quillustre la Figure 6.1, supposons que la colonne de liens soit un lment <div> didentifiant plateral. Nous pourrions dclarer simplement dans la CSS, comme ci-aprs, que tous les liens dans #plateral doivent apparatre en gras:
#plateral a { font-weight: bold; }

Cest extrmement simple et je me sens un peu bte de le mentionner ici, mais cest une manire parfaitement sense de continuer sparer contenu et prsentation. a, cest de litalique! On peut appliquer la mme rflexion du texte en italique, pour les cas o vous navez pas lintention de mettre le texte en exergue mais simplement de le faire apparatre en italique. On peut l encore utiliser les CSS pour ce type de cas, et plus particulirement la proprit font-style. Reprenons le panneau latral de lexemple prcdent et le style associ, #plateral. Supposons, par exemple, que nous souhaitions afficher tous les liens contenus dans #plateral en italique. La rgle CSS correspondante est alors:
#plateral a { font-style: italic; }

L encore, il sagit dun concept dont la simplicit confine labsurdit, mais je pense quil est quand mme utile den parler dans le domaine du balisage structur: il existe des cas o, plutt que dutiliser un balisage de prsentation, nous passons par les CSS pour grer le style. Parfois, les solutions les plus simples sont celles que lon ignore le plus facilement.

Du gras et de litalique
Pour les scnarios o vous avez lintention de passer le texte la fois en gras et en italique, je pense quil faut dabord prendre une dcision. Quel niveau de mise en exergue essayez-vous de transmettre? Je pourrais choisir llment appropri, <em> (pour une mise en exergue simple) ou <strong> (pour une mise en exergue appuye), partir de votre rponse et baliser le texte avec cet lment.

100

Se faire plaisir aveclebalisage

Dans lexemple suivant, je souhaite que le mot "sympa" apparaisse la fois en gras et en italique. Jai choisi dutiliser llment <em> pour aussi mettre en exergue le texte.
Crer des sites web conformes aux standards, cest <em>sympa</em>&nbsp;!

La plupart des navigateurs afficheront le texte prcdent uniquement en italique. Pour obtenir la fois du gras et de litalique, nous disposons de plusieurs options. Oh, et jespre vraiment que vous tes daccord avec laffirmation de cet exemple! Un <span> gnrique Une option consisterait imbriquer un lment gnrique <span> autour du mot "sympa" et utiliser les CSS pour afficher en gras tous les lments <span> contenus dans des lments <em>. Le balisage ressemblerait alors ceci:
Crer des sites web conformes aux standards, cest <em><span>sympa</span> </em>&nbsp;!

Tandis que la rgle CSS correspondante serait:


em span { font-weight: bold; }

Manifestement, ce nest pas idal au niveau smantique cause des lments trangers que nous ajoutons, mais cest une solution qui fonctionnera quand mme. De lemphase et de la classe Une autre option consiste crer une classe pour les lments <em> qui dclenche le passage en gras laide dune rgle CSS. Le balisage ressemblerait alors ceci:
Crer des sites web conformes aux standards, cest <em class="gras">sympa </em>&nbsp;!

tandis que la rgle CSS associe est:


em.gras { font-weight: bold; }

La prsence de llment <em> garantit le passage de notre texte en italique (et la mise en exergue implique), tandis que lajout de la classe gras permet galement de passer le texte contenu dans llment <em> en gras. On peut aussi mettre en place un fonctionnement similaire et symtrique pour les lments <strong>, en crivant une classe italique pour afficher le texte en italique en plus du gras associ llment <strong>, dont lobjectif est une mise en exergue appuye.

Formulaires

101

Le balisage serait alors:


Crer des sites web conformes aux standards, cest <strong class="italique"> sympa</strong>&nbsp;!

tandis que la rgle CSS associe scrit:


strong.italic { font-style: italic; }

En rsum
Je trouvais ncessaire daborder ce sujet, car cest un bon exemple de lun des sujets cls de cet ouvrage: sparer contenu et prsentation est la fois essentiel et bnfique. Remplacer les lments <b> et <i> par leurs quivalents structurels (lorsque lon cherche mettre en valeur des termes) peut tre une solution simple pour raliser cette sparation. Ainsi, la prochaine fois que vous entendrez quelquun claironner "Oui, il faut toujours utiliser <strong> au lieu de <b>", vous disposerez dun peu plus dinformations pour tayer ce raisonnement. Dans la plupart des cas, il est appropri dutiliser <strong> ou <em> pour traduire la mise en exergue. Mais, lorsque vous recherchez simplement un effet visuel ditalique ou de gras, utilisez les CSS.

Pour aller plus loin


Jusqu prsent, dans ce chapitre, nous nous sommes concentrs sur <strong> et <em>, qui font partie dun ensemble plus vaste dlments que le W3C appelle des "lments de phrase". Pour aller plus loin, tudions quelques-uns de ces lments de phrase et leur relation avec lunivers des standards web.

Les lments de phrase


Outre <strong> et <em>, la liste dtaille des lments de phrase figurant dans la "Spcification HTML4.01" du W3C comprend les lments suivants: <cite>: contient une citation ou une rfrence une autre source; <dfn>: indique quil sagit de linstance de dfinition du terme balis; <code>: dsigne un fragment de code informatique; <samp>: dsigne un extrait dune sortie produite par un programme, un script,etc.;

102

Se faire plaisir aveclebalisage

<kbd>: indique un texte devant tre saisi par lutilisateur; <var>: indique une instance dune variable ou dun argument dun programme; <abbr>: indique une abrviation (WWW, HTTP, URI,etc.); <acronym>: indique un acronyme (radar, LAN,etc.). tudions plus en dtail quelques-uns de ces lments, en commenant par <cite>.

Conception de <cite>
<cite> est un lment intressant voquer, particulirement lorsque lon envisage de remplacer llment <i> en raison de sa nature purement de prsentation. <cite> est utilis

pour faire rfrence la source (auteur, publication) dune citation. Historiquement, les concepteurs ont pu utiliser llment <i> pour afficher le titre dun livre en italique, mais nous avons vu un peu plus haut dans ce chapitre que les CSS sont le meilleur outil pour styler un texte de cette manire. Vous pourriez suggrer de plutt baliser le titre dune publication laide de <em> mais, lorsquil faut faire rfrence un livre ou une publication quelconque, nous ne cherchons pas mettre quoi que ce soit en exergue, nous voulons simplement distinguer le titre du texte normal. Nous essayons aussi de rester conformes aux pratiques typographiques classiques, o les titres apparaissent souvent en italique (le soulignement est galement frquent dans le monde de limpression, mais cela crerait une confusion manifeste avec un hyperlien). Entre ici llment <cite>, cr spcifiquement dans ce but. La plupart des navigateurs rendront mme, par dfaut, le texte contenu dans llment <cite> en italique. Nous pouvons par ailleurs soutenir cela en ajoutant une dclaration CSS gnrale qui assurera la mme mise en forme. La spcification Le W3C est plutt bref au sujet de llment <cite> et se contente de dclarer dans la "Spcification HTML4.01" (www.w3.org/TR/html4/struct/text.html#h-9.2.1):
"<cite>: contient une citation ou une rfrence une autre source."

Cest peu prs tout ce que nous avons nous mettre sous la dent et le type de donnes que peut encadrer <cite> reste assez flou. Toutefois, nous pouvons au moins prendre "source" dans lacception "auteur" ou "publication". Jetons un il <cite> en action:
Le roman <cite>La Lettre carlate</cite> se droule dans la Boston puritaine et, comme cet ouvrage, a t crit Salem, Massachusetts.

Formulaires

103

Grce la balise <cite>, le titre La Lettre carlate apparatra dans la plupart des navigateurs en italique. Pour nous en assurer dans les cas o le navigateur ne le fait pas, nous ajoutons la rgle CSS suivante, simple (voire simpliste):
cite { font-style: italic; }

Pour rsumer, nous avons remplac llment <i> dans les cas o nous avons balis des titres de livres et autres publications laide de <cite>. Dans la plupart des navigateurs graphiques, nous obtenons de litalique et, de nouveau, nous sommes parvenus intgrer plus de structure et plus de sens nos pages. Cette structure peut, comme toujours, tre totalement exploite grce aux CSS. Jetons-y un il. Changer le style de <cite> Lorsque nous parlons de crer des pages dotes dune structure et dun sens, cela va de pair avec une page plus facile styler (et restyler) grce aux CSS. Prenons, par exemple, llment <cite>. Si nous balisons les titres de publications de faon cohrente et systmatique avec cet lment, nous exerons alors un contrle total sur le style affich, et nous pouvons le modifier tout moment. Supposons que nous ayons cr un site complet en utilisant systmatiquement llment
<cite> pour baliser les rfrences des ouvrages et les titres de publications. Nous avons ajout une rgle globale pour afficher tous les lments <cite> en italique mais, quelques

mois plus tard, nous dcidons que tout titre de livre et de publication doit apparatre non seulement en italique, mais aussi en gras, de couleur rouge et sur un fond gris. Nous pouvons, naturellement, apporter ces modifications avec rapidit et facilit grce quelques rgles CSS, qui changeront instantanment toutes les rfrences dj balises laide de llment <cite>. Si nous avions simplement utilis <i> ou <em> pour afficher les titres de publications en italique, nous ne pourrions videmment pas cibler plus spcifiquement ces rfrences.
cite { font-style: italic; font-weight: bold; color: red; background-color: #ddd; }

La Figure6.2 prsente le rsultat tel quil apparatra dans la plupart des navigateurs et cest un nouvel exemple intressant de la puissance que procure la rdaction dun balisage structur avant toute chose: vous pouvez modifier lintgralit de votre site tout moment.

104

Se faire plaisir aveclebalisage

Figure6.2
Un titre de livre balis par <cite> et styl laide de CSS.

Optimiser la structure En plus dtre facile styler, un balisage structur peut conduire des choses intressantes lorsquun logiciel ct serveur peut en tirer parti. Prenez par exemple ce que Mark Pilgrim, auteur et militant de laccessibilit, a ralis il y a quelques annes avec llment <cite> sur son site personnel, Dive Into Mark (www. diveintomark.org). En balisant laide de <cite> toutes les citations provenant dautres personnes ou publications et apparaissant sur son weblog, Mark a pu crire un logiciel danalyse de ses billets, charg dalimenter une base de donnes des citations quil pouvait ensuite classer par auteurs ou publications rfrencs. La Figure6.3 prsente le rsultat dune recherche portant sur "Dan Cederholm". Deux messages ont t trouvs sur le weblog de Mark, et ce, grce la puissance que confre le balisage ralis laide de llment <cite>.

Figure6.3
Rsultat dune recherche de citations, sur une ancienne version du site de Mark Pilgrim.

Formulaires

105

Le script prsent sur le site Dive Into Mark ntant plus disponible, nous ne pouvons pas en prsenter le code. En revanche, si le sujet vous intresse, voici deux tutoriels complmentaires, proposs par Bruno Sbarte sur son site puce-et-media.com. Ils reposent sur la balise <acronym>, que nous tudions la prochaine section, mais les principes sont facilement transposable toute balise HTML: http://www.puce-et-media.com/Standards-du-Web/realisation-et-mise-enplace-dun-site-web-part-ii-structuration.html pour les lments relatifs au balisage du code; http://www.puce-et-media.com/AJAX/le-dom-scripting.html pour le script dextraction des balises proprement dit : avant daborder ltude de ce tutoriel, nous vous recommandons toutefois de consulter le Chapitre 10, qui vous prsentera les principes du DOM et vous donnera les bases ncessaires pour aborder le tutoriel.

<abbr> et <acronym>
Deux autres lments de phrase que je souhaite signaler sont <abbr> (utilis pour les abrviations) et <acronym> (utilis, comme vous pouvez le deviner, pour les acronymes). Ces lments peuvent amliorer laccessibilit des pages web en associant des dfinitions aux abrviations et acronymes, de sorte que tous les utilisateurs peuvent tre informs. Familiarisons-nous de nouveau avec la "Spcification HTML4.01" du W3C pour comprendre quoi servent les lments <abbr> et <acronym>: <abbr>: indique une abrviation (WWW, HTTP, URI,etc.); <acronym>: indique un acronyme (radar, LAN,etc.). Utiliser ces lments conjointement un attribut title adapt aidera les utilisateurs pour qui le terme nest pas familier. Ainsi, si nous balisions labrviation XHTML, nous pourrions utiliser llment <abbr> de la faon suivante:
<abbr title=eXtensible HyperText Markup Language>XHTML</abbr>

Utiliser <abbr> dans un tel cas de figure peut fournir une indication aux lecteurs dcran pour peler labrviation (X-H-T-M-L) plutt que de la lire comme un mot normal. Inversement, la balise <acronym> indique aux lecteurs dcran de dire le mot normalement plutt que de lpeler. Le cas suivant fournit un exemple dutilisation de llment <acronym>:
<acronym title="Organisation des Nations unies">ONU</acronym>

Il existe galement deux rgles CSS que lon peut ajouter une feuille de style orale pour renforcer davantage ces directives:

106

Se faire plaisir aveclebalisage

abbr { speak:spell-out; } acronym { speak:normal; }

Les feuilles de style orales permettent de construire des rgles CSS spcifiques aux lecteurs dcran. On peut tout fait modifier la manire dexploiter le balisage structurel, les changements de ton, le type de voix, les inflexions et ainsi de suite, afin dassurer une prsentation orale de la page aussi conforme que possible ce quelle donne voir, graphiquement parlant. Llment <acronym> mrite dtre cit ici car il fait partie des spcifications HTML4.01 et XHTML. Toutefois, cause des confusions quil a suscites, il sera supprim de la prochaine version du standard, HTML5. Le site du W3C (http://www.w3.org/TR/html5-diff/#absent-elements) dtaille les diffrences entre les versions 4 et 5 de HTML: si vous prparez dj larrive de HTML5, cest sans nul doute une lecture utile.

Une seule dfinition Bon nombre de personnes suggrent de ne dfinir quune seule fois une abrviation ou un acronyme apparaissant plusieurs fois sur une page. Ils font valoir que redfinir le terme chacune de ses occurrences est un gaspillage doctets et quil vaut mieux dfinir lattribut title uniquement la premire apparition du terme. Je tends trouver cela raisonnable, une exception prs: si un utilisateur est dirig vers une section spcifique de la page et si labrviation ou lacronyme nest dfini quen haut de la page, lutilisateur ne peut alors pas bnficier de la dfinition. Faites appel votre jugement pour dcider quand (et quelle frquence) dfinir les termes contenus dans des lments <abbr> et <acronym>. La prsentation Pour fournir aux lecteurs des indications dordre visuel, certains navigateurs afficheront par dfaut une bordure de 1pixel dpaisseur, pointille, sous le texte balis par <abbr> ou <acronym>, incitant ainsi le lecteur passer sa souris sur labrviation ou lacronyme soulign. Lorsque la souris passe sur le texte, la dfinition fournie dans lattribut title apparat dans le navigateur sous forme dinfobulle. Pour les navigateurs qui, par dfaut, najoutent pas cette ligne pointille, nous pouvons facilement crer une dclaration CSS qui remplit essentiellement cette fonction:
abbr, acronym { border-bottom: 1px dotted; cursor: help; }

Formulaires

107

Nous avons aussi ajout une rgle pour transformer le curseur (dans la plupart des navigateurs) en symbole daide, ce qui devrait contribuer indiquer quil ne sagit pas dun lien sur lequel cliquer mais plutt dune dfinition ouvrir laide de linfobulle (voir Mark Newhouse, Real World Style: CSS Help, http://realworldstyle.com/css_help.html). La Figure6.4 illustre le rsultat affich dans un navigateur: labrviation XHTML est dveloppe avec sa dfinition et prsente un soulignement en pointill, le curseur survolant le terme est transform en symbole daide.
Figure6.4
Exemple daffichage de <abbr> dans un navigateur classique.

Problmes de compatibilit Il est important de mentionner quInternet Explorer en version6 pour Windows napplique aucun style et ne gre pas linfobulle pour llment <abbr>. Il gre en revanche llment <acronym>, ce qui a encourag certains concepteurs utiliser uniquement <acronym>, aussi bien pour lusage initialement prvu que pour des abrviations. Il pourrait tre tentant de suivre cet exemple mais utiliser un lment inappropri, uniquement pour des raisons daffichage, semble tre une trs mauvaise route emprunter. Pour ce problme particulier, je prfre baliser le terme en respectant les spcifications et laisser les navigateurs grant correctement llment <abbr> le styler en consquence. Par chance, la prise en charge de lapplication de styles sur llment <abbr> a t intgre IE7 bien que, contrairement Firefox ou Safari, IE7 napplique pas de style par dfaut <abbr>. Cest un point garder en tte. Jetons rapidement un il aux autres lments de structuration des phrases que nous navons pas encore abords.

<code>
Llment <code> est conu pour prsenter des exemples de code au sein de pages XHTML. Par exemple, si vous souhaitez partager sur une page un exemple de dclaration CSS, vous pourriez le baliser ainsi:
<code> #content { width: 80%; padding: 20px; background: blue; }

108

Se faire plaisir aveclebalisage

</code>

Gnralement, les navigateurs graphiques afficheront le texte encadr par les balises <code> dans une police serif chasse fixe mais nous pourrions, naturellement, appliquer un style de notre choix aux exemples de code en ajoutant une rgle CSS:
code { font-family: Courier, serif; color: red; }

Tout texte encadr par des balises <code> apparatra donc maintenant en police Courier de couleur rouge.

<samp>
Llment <samp> sert prsenter un extrait dune sortie produite par un programme ou un script. Si, par exemple, je souhaite prsenter les rsultats fournis par un script Perl de ma confection, je pourrai utiliser un balisage du type:
<p>Lorsque le script sest excut correctement, vous voyez apparatre sur la ligne de commande le message <samp>excution russie&nbsp;!</samp>.</p>

Il sagit ici essentiellement de "citer" la sortie dun script, et une rgle CSS analogue celle cre pour les lments <code> peut tre dfinie pour styler de manire diffrencie les sorties de programmes.

<var>
Llment <var> sert dsigner les paramtres ou variables dun programme. Si, par exemple, je souhaite parler dune feuille de style XSLT, je peux baliser mon texte de la manire suivante:
<p>Je transmets donc le paramtre <var>derniereMiseAJour</var> mon fichier main.xsl.</p>

De nombreux navigateurs affichent en italique le texte contenu dans les lments <var>, mais nhsitez pas rdiger une rgle CSS simple pour appliquer votre propre style. Si vous naimez pas litalique, vous pouvez utiliser la proprit CSS font-style:
var { font-style: normal; font-family: Courier, serif; color: purple; }

Enfin, jetons un il llment <kbd> pour conclure cette prsentation des lments de phrase.

Formulaires

109

<kbd>
Llment <kbd> sert signaler un texte (paramtre, combinaison de touches, etc.) que doit saisir lutilisateur. Si, par exemple, jexplique comment utiliser laccesskey que nous avons dfinie pour faire passer le focus vers le champ de recherche, je peux utiliser le balisage suivant:
<p>Pour passer rapidement le focus vers le champ de recherche, les utilisateurs Mac doivent taper <kbd>Commande+9</kbd>.</p>

Vous devinez la suite, non? Cest cela! Grce la magie dune simple rgle CSS, vous pouvez personnaliser le style de tous les lments <kbd>, exactement comme nous lavons fait pour les exemples prcdents dlments de phrase.

Les microformats
Nous avons pass la premire moiti de cet ouvrage discuter des avantages du balisage smantique, en particulier du fait quil ajoute du sens aux donnes et au contenu dune page. Si nous nous sommes concentrs sur les lments les plus appropris selon les spcifications, le moment est arriv de prsenter comment ajouter de prcieuses informations smantiques aux classes que nous utilisons. Les microformats constituent un exemple parfait illustrant la manire de saupoudrer votre balisage de classes prdtermines, largissant ainsi XHTML un ensemble de formats de donnes ouverts, puissants et pourtant lisibles par un tre humain. De plus, grce aux microformats, un concepteur web peut tirer parti des donnes prexistantes dans le balisage et les exhiber pour dautres applications et logiciels. En bref, les microformats peuvent contribuer clarifier le balisage de certains ensembles de donnes, tout en offrant dautres avantages. Je pense quil est logique de parler des microformats dans ce chapitre dans la mesure o, bien souvent, les lments auxquels nous allons ajouter des classes smantiques sont justement les lments de structuration de la phrase que nous venons dvoquer.

Une nouvelle pousse


Jai eu le plaisir de concevoir le logo et la premire interface graphique du site microformats.org en 2005. Le logo lui-mme (visible la Figure 6.5) tentait de montrer que les microformats se basent sur des standards existants (XML, XHTML) et quils nen sont, en fait, quune "nouvelle pousse". Plutt que dattendre des organismes de standardisation quils sarrtent sur des formats granularit plus fine pour les donnes frquemment balises (par exemple les coordonnes de contacts, leurs relations, etc.), la communaut des microformats a pris les choses en main et a exploit les outils que nous connaissons pour

110

Se faire plaisir aveclebalisage

permettre quelque chose de vraiment intressant de se passer (je fournirai plus de dtails sur ce point dici peu).
Figure6.5
Le logo des microformats, cr par Dan Cederholm.

Une explication simple


"Dan, les microformats sont droutants et semblent tre une perte de temps." Jai entendu cela plus souvent qu mon tour, de la part dautres concepteurs et dveloppeurs web. Et, si les microformats peuvent sembler droutants au premier abord, la Figure6.6 est la manire la plus simple que je vois pour expliquer leur intrt fondamental.

Je vais baliser un contact de cette manire...

Formidable. Je vais utiliser le mme balisage. Formidable. Je vais utiliser le mme balisage.

CONTACTS

APPLICATIONS

CSS

Figure6.6
Une illustration simple illustrant lintrt des microformats.

Formulaires

111

Essentiellement, en saccordant sur un systme de classes prdfinies pour certains types de donnes (en loccurrence, les coordonnes dune personne), nous permettons des logiciels et des applications web de trouver facilement les donnes simplement partir du balisage. Il est galement intressant de souligner que les microformats sont faciles lire par un tre humain (grce aux noms de classes simples) et quils se prtent bien lapplication de styles distincts par le biais de CSS, grce la prsence de ces lments et classes smantiques. En guise dillustration, suivons un scnario simple dans lequel les microformats ont une valeur ajoute.

Un exemple de hCard
Sur mon site personnel, SimpleBits, mes coordonnes sont disponibles ladresse simplebits.com/contact/. Il sagit dun motif plutt classique, indiquant le nom de ma socit, son adresse et son numro de tlphone. On pourrait baliser ces informations dune myriade de manires. Jai mentionn prcdemment que les microformats peuvent clarifier la faon de baliser certains types de donnes. Beaucoup de gens intelligents ont longuement rflchi la meilleure manire de grer le balisage des coordonnes dune personne, et nous allons en tirer parti ici grce au microformat hCard.

Le gnrateur de code La premire tape consiste tester le gnrateur de hCard (hCard Creator) disponible sur le site microformats.org: il va nous aider crer une hCard automatiquement, simplement en remplissant un formulaire. La Figure 6.7 illustre le gnrateur de code pour hCard, qui produit dynamiquement le balisage avec les classes appropries, alors mme que vous saisissez les informations dans le formulaire. Cet outil ( il en existe dautres pour dautres microformats) est formidable pour apprendre la faon dont sont structurs les microformats. Je vous recommande chaudement de consulter ces outils en premier lieu si vous dcouvrez les microformats ou si vous apprenez mieux en voyant les choses en action (je sais que cest mon cas).

112

Se faire plaisir aveclebalisage

Figure6.7
Le gnrateur de code pour hCard, qui cre dynamiquement le balisage avec les classes appropries.

Le balisage Une fois que vous avez renseign dans le formulaire les informations de contact que vous souhaitez partager (vous navez pas besoin de remplir tous les champs), vous obtenez un balisage proche de celui-ci, qui correspond une hCard finie:
<div class="vcard"> <a class=url fn href=http://simplebits.com>Dan Cederholm</a> <div class=org>SimpleBits, LLC</div> <div class=adr> <div class=street-address>16 Front Street, Suite 208</div> <span class=locality>Salem</span>, <span class=region>Massachusetts</span> <span class=postal-code>01970</span> <abbr class=country-name title=United States of America>USA</abbr> </div> <div class=tel> <span class=type>Fax</span>: <span class=value>+1 978 744 0760</span> </div> </div>

Formulaires

113

Vous constatez que cest une combinaison dlments <div> et <span> auxquels on a ajout des classes smantiques pour dnoter les diffrentes parties constitutives des coordonnes. Llment <abbr>, que nous avons dj mentionn dans ce chapitre, est galement utilis pour abrger le nom du pays. Si le gnrateur de code suggre ces lments pour structurer les donnes, cela ne signifie pas que nous sommes obligs de les utiliser, aussi longtemps que nous assignons une classe correcte. Si, par exemple, au lieu dun <div>, nous souhaitons utiliser un lment de titre pour le nom de lorganisation, nous pourrions changer les lments comme suit:
<h2 class=org>SimpleBits, LLC</h2>

En dautres termes, vous ntes pas limit aux lments suggrs par le gnrateur de code. Structurez les donnes suivant le modle de votre choix, puis appliquez les classes aux donnes correspondantes. Gardez lesprit que, comme pour tous les exemples de cet ouvrage, nous savons quindpendamment des lments choisis, nous pouvons styler le code comme bon nous semble grce aux CSS et les classes ajoutes par les microformats rendent cela encore plus facile. La Figure6.8 prsente notre hCard termine, affiche dans un navigateur sans application de styles CSS. Vous constatez que, mme avec la mise en forme par dfaut du navigateur, cest une adresse tout fait lisible. Et comme on ne peut pas faire mieux en matire de balisage et de classes smantiques, le code se prte bien lapplication de styles distincts laide de CSS. Toutes ces classes supplmentaires signifient quil est facile de styler chaque portion du microformat.
Figure6.8
Une hCard dexemple, prsente ici sans application de styles.

La puissance des microformats Parlons enfin du principal avantage que prsente ce balisage hCard compar un format de notre choix. L encore, parce que nous utilisons un jeu de classes prdfini, des logiciels et autres applications web peuvent parcourir, analyser votre code HTML et en extraire les informations de contact simplement partir du balisage. En voici un excellent exemple pratique. Souvent, les sites proposent une carte de visite vCard tlchargeable, qui donnent les coordonnes dtailles en plus de les faire apparatre

114

Se faire plaisir aveclebalisage

dans le code HTML de la page. Ce format de fichier vCard sintgre trs bien aux applications de type carnet dadresses sur la plupart des systmes dexploitation et cest une faon classique de proposer un "ajout en un clic" dune personne son carnet dadresses. Facile et rapide. Maintenant, du fait que nous avons balis notre adresse en utilisant le microformat hCard, nous pourrions proposer le tlchargement de la vCard directement partir de ces mmes donnes plutt que de crer un fichier spar. Il existe diffrents greffons et extensions de navigateur qui dtectent et absorbent les microformats, mais aidons tout le monde en ajoutant un simple lien "Tlcharger la vCard" vers la page du contact (voir Figure6.9). Ce lien utilise le service de conversion de contacts H2VX (Contacts Conversion Service: http://h2vx.com/vcf/) qui se propose, en un seul clic, de rcuprer toute hCard disponible sur une page donne pour "recracher" ensuite le fichier vCard correspondant. Il ne nous reste qu ajouter lURL correcte spcifiant notre page de contact:
<a href="http://h2vx.com/vcf/simplebits.com/contact/">Tlcharger la vCard</a>

Figure6.9
Notre hCard microformate avec ajout dun lien de tlchargement.

Dans la mesure o la vCard et les informations de contact disponibles sur le site sont souvent identiques, il est seulement ncessaire dactualiser le HTML pour offrir en permanence aux visiteurs du site une vCard jour, sans quil soit besoin de rafrachir sparment les fichiers vCard. Cet exemple simple ne fait queffleurer la puissance des microformats, qui offrent aux concepteurs du frontal dun site une certaine dose de "dveloppement automatique" et la capacit exhiber des donnes que dautres sites, applications et mme navigateurs peuvent lire et rutiliser, tout simplement laide de XHTML. En tant que concepteur, japprcie particulirement ce bnfice supplmentaire. Et, vraiment, il ny a aucune raison de ne pas utiliser les microformats sil en existe pour le jeu de donnes auquel vous tes confront. Cela vous aidera dcider du balisage adquat et vous pourrez ainsi mettre la disposition dautres sites les donnes qui figurent sur la page. Il existe dinnombrables exemples (plus excitants) illustrant la faon dont les auteurs de sites web peuvent utiliser les microformats pour communiquer, sur la base dun langage commun construit partir du XHTML. Noubliez pas de consulter http://microformats.org pour obtenir toutes les informations!

Formulaires

115

Nous vous recommandons de vous procurer un exemplaire du livre Microformats: Empowering Your Markup for Web2.0 de John Allsopp, publi chez Friends ofED. Cest une rfrence exhaustive sur tout ce qui touche aux microformats.

Les microformats en action Dans ce chapitre, nous avons explor les microformats et leur utilisation. Le travail de balisage qui leur est associ peut paratre long et fastidieux, voire mme inutile... mais il permet des applications et scripts dinteragir avec le contenu de nos pages pour produire des rsultats tonnants. Voici un exemple pratique trs parlant pour illustrer cela. Rendez-vous la page http:// microformats.org/wiki/Greasemonkey-fr pour rcuprer lextension GreaseMonkey adapte votre navigateur (pour les besoins de cette section, nous utilisons Firefox, mais il existe des adaptations de GreaseMonkey pour les principaux navigateurs du march). Une fois lextension installe, excutez le script http://inside.glnetworks.de/wp-content/ uploads/2006/06/microformat-find-gm5.user.js qui installe les commandes de find-gm5. Voil qui est bien mystrieux... et les microformats dans tout cela? Cest maintenant que la magie des standards opre. Et les microformats sont bien des standards! Ouvrez maintenant, dans votre navigateur quip de GreaseMonkey, la page http://simplebits.com/about/. Cette page contient la vCard de lauteur sous la forme suivante:
<div class="vcard"> <a class="url fn hide" href="http://simplebits.com">Dan Cederholm</a> <div class="org">SimpleBits, <abbr>LLC</abbr></div> <div class="adr"> <div class="street-address">19 Front Street, Suite 202</div> <span class="locality">Salem</span>, <span class="region">MA</span> <span class="postal-code">01970</span> <abbr class="country-name" title="United States of America">USA</abbr> </div> <div class="tel"> <strong class="type">Fax</strong>: <span class="value">+1 978 744 0760</span> </div> </div>

Notez que vous devez obligatoirement ouvrir un fichier dpos sur un serveur: ouvrir un fichier HTML hberg sur votre disque dur ne donnera aucune rsultat. La page se charge dans le navigateur et le script que nous avons activ grce GreaseMonkey fait apparatre une icne discrte au dessus de ladresse. Un clic sur cette icne ouvre un menu visible la Figure6.10.

116

Se faire plaisir aveclebalisage

Figure 6.10
Menu associ la vCard.

Cliquer sur loption ...home, par exemple, nous redirige instantanment vers Google Maps o nous sommes trs prcisment positionns ladresse indique dans la vCard. Une dmonstration concrte et efficace des avantages indniables que prsentent les microformats.

Pour conclure
Rsumons ce que nous avons vu dans ce chapitre: nous avons prsent des arguments en faveur de lutilisation de <strong> et <em> plutt que leurs cousins de prsentation, <b> et <i>. Nous avons aussi vu que, lorsque lon souhaite utiliser du gras ou de litalique pour des raisons de stricte prsentation, CSS reprsente la voie suivre. Nous avons aussi parl des autres lments de structuration de phrase, en commenant par llment <cite>, que lon peut utiliser aussi bien pour des personnes que pour des publications et qui prouve encore la puissance du balisage structurel tant pour la prsentation que pour lanalyse potentielle de donnes. Nous avons galement dmontr comment assurer un minimum daccessibilit en balisant les abrviations et acronymes laide des lments ddis et vu des directives de prsentation graphique ou orale pour renforcer ces dfinitions. Nous avons prsent tous les autres lments de structuration de phrase et, si chacun peut avoir un style par dfaut diffrant du texte normal, nous pouvons facilement crer des rgles CSS simples et rapides dfinissant nos propres styles pour chacun de ces lments susceptibles dapparatre dans une page ou un site entier. Enfin, nous avons prsent les microformats, une solution conue par la communaut pour tirer parti, de diverses manires nouvelles et excitantes, du balisage smantique que nous crons.

Ancres
Les liens HTML ou, suivant la dnomination correcte, les ancres, nous permettent de pointer non seulement vers des fichiers mais aussi vers des sections particulires dune page. Elles peuvent tre une solution pratique pour crer des liens prcis, limitant la porte de la cible. Dans ce chapitre, nous allons tudier les diffrences entre quatre mthodes de cration dancres, en notant les avantages que chaque mthode peut procurer. Nous nous intresserons aussi lattribut title et la faon dont il peut amliorer laccessibilit dun lien, ainsi que lapplication de styles aux liens au moyen de CSS.

Quel est le meilleur moyen de baliser une ancre pourpointer vers une portion spcifique dune page?
Cest une action courante dans la conception de sites web: vous souhaitez crer un lien vers une section particulire dune page web soit au sein de la page que lutilisateur est en train de consulter, soit au sein d'une autre page. Vous pouvez choisir pour ce faire lune ou lautre des quatre mthodes prsentes dans les sections qui suivent. Dfinissons tout dabord notre exemple: notre intention est de crer un lien vers un titre donn, au sein de la mme page.

MthodeA: un nom vide


<p><a href="#oranges"> propos des oranges</a></p> ... un texte... <a name="oranges"></a> <h2>Les oranges sont bonnes</h2> ... un autre texte...

Utiliser un lment dancrage vide conjointement lattribut name pour baliser un emplacement particulier vous paratra probablement familier. Positionner llment vide <a> et la balise fermante </a> juste au-dessus de llment de titre et ajouter ensuite le lien vers cet lment (au moyen du caractre # suivi de la valeur correspondant lattribut name) nous permettra de pointer vers cette portion spcifique de la page, ce qui est particulirement utile si la page est constitue dune longue liste dlments quil faut faire dfiler et vers lesquels nous souhaitons pointer individuellement. La Figure7.1 prsente le rsultat dun clic sur le lien propos des oranges, qui ancre la page lemplacement que nous avons balis par <a name="oranges"></a>, juste au-dessus du titre.

118

Se faire plaisir aveclebalisage

Figure7.1
Dmonstration du rsultat dun clic sur une ancre nomme.

Cela fonctionne trs bien, mme sil nest pas trs correct, smantiquement, de gaspiller un lment vide pour jouer le rle de marqueur. La mthodeB peut apporter une amlioration.

MthodeB: tout est dans le nom


<p><a href=#oranges"> propos des oranges</a></p> ... un texte... <h2><a name="oranges">Les oranges sont bonnes</a></h2> ... un autre texte...

Tout comme avec la mthodeA, nous utilisons llment <a> avec lattribut name mais, cette fois, nous lui faisons envelopper le titre que nous prenons pour cible. Cette solution a un peu plus de sens au niveau smantique: dans la mthodeA, nous ne donnons de sens rien, tandis que, dans la mthodeB, nous signalons quil sagit non seulement dun lment de titre, mais aussi dune section associe une ancre dans la page. Mfiez-vous du style global de<a> Un point surveiller, lorsque lon utilise la mthodeB: si vous dfinissez un style CSS global pour tous les lments <a> (couleur, taille, dcoration,etc.), dans une ancre construite sur ce modle, ce style prendra le pas sur tout style dfini pour les lments <h2>. Cela peut

Ancres

119
se produire car llment <a>, dans cet exemple, est un lment enfant, situ lintrieur des balises <h2> qui enveloppent lensemble. Si, par exemple, vous avez insr dans votre CSS une dclaration du type:
a { color: green; font-weight: bold; text-decoration: underline; }

utiliser la mthodeB avec la CSS prcdente conduirait donc faire apparatre le titre en vert, gras et soulign, comme nimporte quel autre lment <a> de la page, et a nest probablement pas ainsi que vous souhaitez styler vos lments <h2>. Nous pouvons viter cela (et profiter dautres avantages) en utilisant la pseudo-classe :link pour les lments <a>, ce que nous aborderons en dtail la section Pour aller plus loin de ce chapitre. Enrichir l'attribut name Un avantage de la mthodeB, et mme, en ralit, de la mthodeA, est que lattribut name peut grer des noms dancres "enrichis" ou, plus spcifiquement, des entits de caractres apparaissant dans les noms. Si, par exemple, nous utilisons la mthodeB, nous pouvons procder ainsi (lentit &#233; reprsente le caractre accentu""):
<p><a href="#r&#233;sum&#233;">R&#233;sum&#233;</a></p> ... du texte... <h2><a name=r&#233;sum&233;>En r&#233;sum&#233;</a></h2> ... encore du texte...

Cela prend une importance particulire lorsque lon gre des langues autres que langlais et que les caractres contiennent des signes diacritiques. Mais il nous reste encore quelques mthodes explorer : la prochaine limine dailleurs totalement la ncessit dutiliser llment <a> pour dfinir le point dancrage. Penchonsnous donc sur la mthodeC.

MthodeC: joublierai ton nom


<p><a href="#oranges"> propos des oranges</a></p> ... un texte... <h2 id="oranges">Les oranges sont bonnes</h2> ... un autre texte...

120

Se faire plaisir aveclebalisage

Ah, ah! Lattribut id se comporte exactement comme lattribut name dans la mesure o il dfinit lui aussi un point dancrage dans la page. De surcrot, en utilisant la mthodeC, nous sommes dbarrasss de llment <a> supplmentaire qui tait ncessaire auparavant avec lattribut name comme dans les mthodesA etB. Nous rduisons le volume de code, et cest naturellement toujours une bonne chose. Comme nous pouvons ajouter lattribut id nimporte quel lment, nous pouvons facilement associer une ancre nimporte quelle partie de la page. Dans ce cas, nous choisissons dancrer le titre, mais nous pourrions tout aussi bien travailler sur des lments <div>, <form>, <p>, <ul>, et ainsi de suite. Dune pierre deux coups La mthode C prsente un autre avantage : bien souvent, nous pouvons utiliser un attributid prexistant, que nous avons ajout pour les besoins des styles ou dun script. De cette manire, nous nous pargnons aussi le besoin dajouter du code supplmentaire pour tablir le point dancrage. Supposons, par exemple, que vous ayez plac un formulaire de commentaire tout en bas dune longue page et que vous souhaitiez faire apparatre, au dbut de la page, un lien vers ce formulaire. Ce formulaire a dj un attribut id="commentaires", en particulier pour lui appliquer des styles propres. Nous pouvons crer un lien sous forme dancre vers cet id, sans avoir insrer llment <a> et son attribut name. Le code aurait alors lallure suivante:
<p><a href="#commentaires">Soumettre un commentaire</a></p> ... beaucoup de texte... <form id="commentaires" action="/chemin/vers/le/script"> ... lments du formulaire... </form>

Vous pouvez aussi, si votre page est vraiment trs longue et ncessite un dfilement substantiel, faciliter la vie de vos utilisateurs et leur permettre de "revenir en haut", en ajoutant en bas de page un lien qui fait rfrence lidentifiant dun lment situ en haut de page (par exemple un logo ou un en-tte).
Il est judicieux de signaler ici que, mme si cest le choix le plus vident, il est prfrable dviter lutilisation du mot "top" lorsque lon cre des ancres. Certains navigateurs rservent ce nom pour leur usage propre et lutiliser dans la page peut conduire des rsultats mitigs. Il vaut mieux choisir une dnomination apparente dont on sait quelle nengendrera pas de problme, par exemple #haut ou #d&#233;but.

Les navigateurs anciens et lattributid Certains navigateurs anciens (de la gnration de Netscape4.x) ne reconnaissent pas une ancre dfinie par le biais dun attribut id. Si ces navigateurs font partie de votre style, cest

Ancres

121
assurment un point dont vous devez tenir compte lorsque vous balisez les ancres. Intressons-nous maintenant au dernier exemple, la mthodeD. Intressons-nous maintenant au dernier exemple, la mthodeD.

MthodeD: la solution tout en un


<p><a href="#oranges"> propos des oranges</a></p> ... un texte... <h2><a id="oranges" name="oranges">Les oranges sont bonnes</a></h2> ... un autre texte...

Si les compatibilits ascendante et descendante sont une proccupation essentielle pour vous lorsque vous crez des ancres, cette mthode devrait vous satisfaire. Les navigateurs, aussi bien anciens que rcents, reconnaissent llment dancrage nomm mais, parce que lattribut name est abandonn par le W3C dans la recommandation XHTML1.0 (http://www.w3.org/TR/xhtml1/#C_8 ou, pour une traduction en franais, http:// www.la-grange.net/w3c/xhtml1/), vous tes couvert pour lavenir si vous utilisez aussi lattributid. Comme avec la mthodeB, nous devons tre prudents vis--vis des styles globaux susceptibles dtre appliqus llment <a> lui-mme. Partage de noms Si vous choisissez la mthodeD, il est parfaitement acceptable (et probablement pratique) dutiliser la mme valeur pour les deux attributs id et name, mais uniquement sils sont intgrs un mme lment. De surcrot, cela nest autoris que dans certains lments seulement: <a>, <applet>, <form>, <frame>, <iframe>, <img> et <map>, pour tre exact. Pour cette raison, nous avons dplac lattribut id="oranges" de llment <h2> lancre quil contient. Maintenant que nous avons tudi quatre mthodes diffrentes de cration des ancres, rsumons les avantages de chacune delles.

En rsum
Pour ce chapitre, il ny a pas vraiment de rel vainqueur, mme si deux mthodes (C etD) sortent un peu du lot. Toutes ont leurs avantages et leurs inconvnients: rcapitulons cela pour chaque mthode. MthodeA: Cette mthode devrait fonctionner sur la plupart des navigateurs.

122

Se faire plaisir aveclebalisage

Du fait quil sagit dun lment vide, il ne confre ni structure, ni sens au balisage. Cette mthode requiert un surcrot de balisage. Lattribut name tant abandonn dans XHTML1.0, la compatibilit future est un sujet de proccupation. MthodeB: Cette mthode devrait fonctionner sur la plupart des navigateurs. Vous devez faire attention tout style global appliqu aux lments <a> et susceptible de prendre le pas sur les styles des lments externes de la balise. Cette mthode requiert un surcrot de balisage. Lattribut name tant abandonn dans XHTML1.0, la compatibilit future est un sujet de proccupation. MthodeC: Cette mthode implique moins de balisage. Vous pouvez toujours utiliser un identifiant existant. Cette mthode garantit la compatibilit future. Cette mthode ncessite un navigateur raisonnablement rcent. MthodeD: Cette mthode assure la compatibilit la fois ascendante et descendante. Vous devez faire attention tout style global appliqu aux lments <a> et susceptible de prendre le pas sur les styles des lments externes de la balise. Cette mthode requiert un surcrot de balisage. Il apparat que les meilleurs choix sont les mthodes C et D, pour lesquelles on met en balance la compatibilit descendante et un balisage rduit dun ct contre, de lautre, davantage de balisage et une compatibilit totale. Ma suggestion est de tenir compte de votre public cible et de prendre une dcision claire fonde sur ce critre. Si, par exemple, vous mettez sur pied une application web ou un Intranet qui ncessitera obligatoirement un navigateur rcent, la mthodeC est alors probablement le meilleur choix. Elle demande moins de balisage, mais on sait quelle ne fonctionnera pas dans les versions trop anciennes de certains navigateurs. Consultez les statistiques de frquentation de votre site pour vrifier si ces navigateurs reprsentent encore une part apprciable de votre public. Alternativement, si vous construisez un site qui doit pouvoir tre lu par nimporte qui, nimporte quand, vous pourrez envisager dadopter la mthodeD qui vous garantit une compatibilit ascendante et descendante, avec le bagage supplmentaire que reprsente llment dancrage ajout au balisage.

Ancres

123
Le choix est entre vos mains et jespre quen tudiant chacune de ces solutions, vous serez en mesure de prendre la bonne dcision au bon moment, dans le monde rel.

Pour aller plus loin


Dans ce chapitre, nous allons aborder dautres points lis aux ancres et plus particulirement les avantages quil y a utiliser lattribut title ainsi que lapplication de styles aux liens dancrage, laide de CSS.

Lattribut title
Un peu plus tt, nous avons explicitement parl dutiliser les ancres pour grer des sections de page; passons la vitesse suprieure et abordons les liens vers des ancres en gnral, y compris lorsque lon pointe vers des pages externes. Autre avantage en termes daccessibilit, lajout de lattribut title pour les liens dancres permet de fournir une description plus dtaille et plus spcifique de la destination vers laquelle vous renvoyez lutilisateur. Grce cette information supplmentaire, les utilisateurs sont mieux renseigns sur lendroit o ils se rendent et disposent dun peu plus dinformations quune simple image ou que le texte de lancre pour prendre la dcision de cliquer dessus. Comment ces informations supplmentaires sont-elles mises la disposition de lutilisateur? Cest ce que nous allons dcouvrir tout de suite. Lattribut title en action Jetons un il lattribut title en action. Nous allons baliser un hyperlien ordinaire comme ci-aprs:
Je viens de lire <a href=http://www.abaslepapierpeint.fr/astuces.html title="Comment enlever du papier peint">un trs bon article</a> qui ma donn quelques ides en matire de rnovation intrieure.

Bien que, dans cet exemple, le texte soit volontairement un peu vague, lattribut title nous fournit une information supplmentaire sur le lien (dans le cas prsent, le titre rel de larticle vers lequel je renvoie le lecteur). Une autre pratique courante lorsque lon insre des attributs title consiste utiliser simplement llment <title> de la page (qui apparat gnralement dans la barre de titre du navigateur). Cela, naturellement, ne doit tre utilis que si le texte figurant dans la barre de titre a un sens (idalement, il doit inclure le titre gnral du site ainsi que le titre particulier de la page).

124

Se faire plaisir aveclebalisage

Supposons ainsi que, pour lexemple prcdent, le titre de la page soit "ABasLePapierPeint. fr | Comment enlever du papier peint". Outre le fait que cest potentiellement le seul article vraiment ncessaire dans ce site, ce titre peut tre utilis comme dans lattribut title de notre exemple ci-aprs:
Je viens de lire <a href=http://www.abaslepapierpeint.fr/astuces.html title="ABasLePapierPeint.fr | Comment enlever du papier peint">un trs bon article</a> qui ma donn quelques ides en matire de rnovation intrieure.

Nous avons maintenant une description plus riche de larticle li. Mais comment les utilisateurs accdent-ils linformation contenue dans lattribut title? Infobulles de titre La plupart des navigateurs prennent en charge lattribut title en transformant la valeur quil contient en "infobulle", cest--dire en une petite fentre colore qui surgit lorsque la souris survole le lien. Visuellement, cela transmet aux utilisateurs cette petite information supplmentaire avant quils ne cliquent sur le lien. Lavantage vident est de renseigner les utilisateurs sur lendroit exact o ils se rendent. La Figure7.2 illustre notre exemple affich dans un navigateur: la souris survolant le texte, linfobulle saffiche.

Figure7.2
Un exemple o lattribut title est rvl par le survol de la souris.

Les titres sont lus Ajouter lattribut title un lien prsente un autre avantage : les lecteurs dcran lisent la valeur associe, ainsi que le texte du lien. Les utilisateurs, voyants aussi bien que malvoyants, peuvent ainsi mieux comprendre la destination vers laquelle vous les conduisez, et cest certainement une bonne chose.

Styler les liens


Un peu plus tt dans ce chapitre, jai indiqu que vous deviez "faire attention aux styles deliens globaux" et quil existe une manire dviter lapplication involontaire des styles de liens des ancres nommes, pour les limiter uniquement aux hyperliens utilisant lattribut href. Il est loin le temps o l'on dfinissait la couleur des liens dans le code HTML d'un document. Nous pouvons sparer ces dtails de prsentation du balisage grce aux pseudo-classes :link, :visited, :active et :hover, afin de styler diffremment les hyperliens d'une foule de manires diffrentes. ces pseudo-classes sajoute la pseudo-classe :focus, que

Ancres

125
nous avons dj aborde dans un autre contexte au Chapitre5, et qui est plus rarement mentionne dans les documentations traitant des CSS. Jetons un il quelques styles CSS diffrents que nous pouvons appliquer des liens usuels:
a:link { color: green; text-decoration: none; font-weight: bold; }

De faon trs simple, la dclaration ci-dessus fait apparatre toutes les ancres utilisant lattribut href de couleur verte, en gras et sans soulignement. Plutt que dutiliser text-decoration: none, nous aurions pu choisir le soulignement (underline, valeur par dfaut), le "surlignement" (overline, pour les rebelles du Web) ou une combinaison des deux comme illustr ci-aprs:
a:link { color: green; text-decoration: underline overline; font-weight: bold; }

La Figure7.3 illustre la manire dont cette combinaison underline overline apparat dans un navigateur classique. Une solution assez peu conventionnelle, il faut bien dire, mais envisageable!

Figure7.3
Un exemple de lien avec double dcoration du texte.

Arrire-plans Les possibilits dont nous disposons pour styler les liens de manire distincte sont quasiment infinies. La plupart des rgles CSS que nous avons appliques aux autres lments sont galement disponibles pour les ancres. Ainsi, nous pouvons appliquer aux liens une couleur darrire-plan ou mme des images darrire-plan, par exemple une petite icne, affiche gauche ou droite du texte du lien, comme lillustre la Figure7.4.

Figure7.4
Un lien avec une icne aligne droite en guise dimage darrire-plan.

126

Se faire plaisir aveclebalisage

La rgle CSS ncessaire pour obtenir le rsultat de la Figure7.4 ressemble ceci:


a:link { padding-right: 15px; background: url(icone_lien.gif) no-repeat center right; }

Nous choisissons de positionner limage verticalement centre (center) et droite (right) du texte du lien. Nous ajoutons galement un espace supplmentaire droite afin que licne apparaisse sans chevauchement du texte. Bordures pointilles Fatigu du soulignement classique et insipide des liens que nous voyons depuis des annes maintenant? En utilisant dotted ou dashed comme valeur pour la proprit border, nous pouvons crer un soulignement de lien constitu de petits points ou de petits traits espacs. Tout dabord, nous devons nous dbarrasser du soulignement par dfaut en le dsactivant laide de la proprit text-decoration. Nous ajoutons ensuite une bordure infrieure (border-bottom) de 1pixel de large, qui est la fois en pointill et en vert.
a:link { color: green; text-decoration: none; border-bottom: 1px dotted green; }

Soulignons que, si vous souhaitez une ligne pointille de la mme couleur que le texte de votre lien, vous devez aussi dclarer cette couleur dans la proprit border-bottom. Les rsultats sont visibles la Figure7.5.

Figure7.5
Un lien avec une bordure infrieure pointille.

En utilisant la mthode prcdente, vous pouvez aussi mlanger les couleurs pour attribuer une couleur votre texte (grce la proprit color) et une autre la bordure (grce la proprit border-bottom). De plus, vous pouvez utiliser les valeurs solid (trait plein) ou dashed (tirets) pour la proprit border-bottom.
Internet Explorer pour Windows ne gre pas trs bien la proprit dotted lorsquelle est utilise pour un trait de 1pixel d'paisseur. Dfinir une paisseur de 1pixel pour une bordure pointille conduit un rsultat identique au style de bordure en tirets (dashed). Ne vous inquitez pas: ce nest quun dfaut mineur.

Ancres

127
O tes-vous all? Noubliez pas dajouter une dclaration a:visited pour aider vos utilisateurs voir les liens quils ont dj consults. Toutes les rgles CSS habituelles peuvent tre appliques cette pseudo-classe, ce qui permet dattribuer aux liens consults un style unique dot dune couleur, dune bordure, dun arrire-plan diffrents. La rgle CSS se prsente ainsi:
a:visited { color: purple; }

tout le moins, la dclaration prcdente signale aux utilisateurs quils ont dj consult un lien donn en passant sa couleur en violet. Il est trs important dinclure pour les liens consults une petite modification du style, mme mineure comme dans lexemple prcdent. Survol De faon similaire, nous pouvons utiliser la pseudo-classe :hover pour ajouter aux liens des effets puissants lorsque la souris les survole. Ce peut tre un changement de couleur ou bien lajout dune bordure, dun arrire-plan, dune icne. Les possibilits sont infinies.
a:link { color: green; text-decoration: none; border-bottom: 1px dotted green; } a:hover { color: blue; border-bottom: 1px solid blue; }

Les deux dclarations prcdentes nous donnent des liens qui sont verts avec une bordure infrieure pointille en temps normal mais qui, lorsque la souris les survole, deviennent bleus avec une bordure infrieure pleine, galement bleue. Ce nest quun exemple isol dun effet simple de survol. Vous constatez quen essayant diffrentes combinaisons de rgles CSS sur les liens a:link et a:hover, vous pouvez crer des effets de survol sophistiqus sans ncessiter de code JavaScript ou de balisage supplmentaire. tat actif La pseudo-classe :active gre lapparence du lien lorsque lutilisateur clique dessus. Les mmes rgles que prcdemment sappliquent ici pour modifier la couleur, la dcoration du texte, larrire-plan,etc. Ainsi, vous pouvez faire passer le lien en rouge lorsque lutilisateur

128

Se faire plaisir aveclebalisage

clique dessus : cela reprsente une indication visuelle supplmentaire confirmant quil a choisi de suivre ce lien particulier et quil a effectivement cliqu dessus. Cest exactement ce que ralise cette dclaration:
a:active { color: red; }

Focus Si vous naviguez sur Internet essentiellement laide de la souris, vous navez probablement pas pu observer cette pseudo-classe en action. Mais si vous parcourez le contenu dune page HTML laide du clavier, vous constaterez, dune part, que la touche Tab vous permet de passer dun lien lautre et, dautre part, que le lien sur lequel porte le focus est mis en valeur. Par dfaut, le navigateur ajoute un encadr en pointill, mais la pseudo-classe :focus permet justement de dfinir la mise en valeur de votre choix. Ainsi, nous pouvons dfinir une rgle CSS ddie au focus, sur le mme modle que les rgles prcdentes.:
a:focus { color: blue; text-decoration: underline overline; }

Mnmotechnique LoVe/HAte Lordre des quatre pseudo-classes que nous avons prsentes est fondamental pour quelles se comportent correctement et quelles nempitent pas les unes sur les autres. La mnmotechnique LoVe/HAte est une solution pratique pour se rappeler lordre correct des dclarations (www.mezzoblue.com/css/cribsheet/) : a:link (L); a:visited (V); a:hover (H); a:active (A). Vous pouvez crer votre propre abrviation pour cette liste, peu importe ce qui vous aide la mmoriser. Le Vendredi, Haricots lAoli! Pour illustrer cette rgle, voici les quatre exemples prcdents rassembls dans lordre appropri:
a:link { color: green; text-decoration: none; border-bottom: 1px dotted green; } a:visited { color: purple;

Ancres

129
} a:hover { color: blue; border-bottom: 1px solid blue; } a:active { color: red; }

La mnmotechnique LoVe/HAte ne fonctionne videmment plus lorsque lon ajoute lensemble la pseudo-classe :focus. Lorsque celle-ci est utilise, lordre respecter devient alors: link visited hover focus active. Larticle http://www.alsacreations.com/astuce/lire/43-commentdfinir-lapparence-de-ses-liens.html propose une excellente synthse sur ce sujet. Mais, dans ce cas, il nexiste pas de mnmotechnique ddie: vous dinventer la vtre!

Loi de Fitts Nous pouvons garder en tte la loi de Fitts car elle se rapporte aux hyperliens et leur utilisabilit. Fitts, psychologue amricain dont les travaux sont rgulirement cits par les experts en conception dinteractions, affirme que:
"Le temps mis pour atteindre une cible dpend de la distance la cible et de sa taille." Paul Fitts (http://www.asktog.com/basics/firstPrinciples.html#fittss%20law ou, pour une explication en franais, http://www.designersinteractifs.org/dictionnaire/loide-fitts/)

En dautres termes, plus la cible que reprsente le lien est grande, plus elle est facile et rapide utiliser. Une solution facile mettre en uvre pour appliquer la loi de Fitts consiste ajouter display: block; aux liens aux endroits appropris. De cette manire, lutilisateur peut cliquer non seulement sur le texte du lien, mais aussi dans tout lespace qui entoure le lien. Prenez une simple liste non ordonne de liens, comme lillustre la Figure7.6. En appliquant display: block; et un choua despacement aux lments <a>, nous pouvons agrandir la zone cible de chaque lien, ce qui facilite la lecture de la liste et la slection de llment: lutilisateur peut cliquer non seulement sur le texte, mais aussi sur toute la zone environnante, cest--dire la ligne entire (voir Figure7.7). Ajouter une couleur darrire-plan (background-color) ltat de survol (hover) se rvle utile pour matrialiser aux yeux de lutilisateur toute la zone active disponible.

130

Se faire plaisir aveclebalisage

Figure7.6
Une liste non ordonne de liens.

Figure7.7
Un lien de niveau bloc (nous avons ajout une couleur darrire-plan ltat hover).

Voici la CSS qui gouverne tout cela:


ul li a { display: block; padding: 4px; } ul li a:hover { background-color: #eee; }

Un contournement pourIE6 et IE7 Souvent, Internet Explorer dans ses versions6 et 7 ajoute un espace vertical supplmentaire aux hyperliens dfinis comme des lments de niveau bloc. Cest moche mais il existe une solution simple pour remdier ce dsagrment si jamais vous deviez rencontrer des problmes daffichage. Nous ciblonsIE6 et IE7 spcifiquement en prfixant la dclaration par lastuce * html. SeulsIE6 et IE7 lisent cette dclaration, qui sera ignore par tout autre navigateur:
* html ul li a { height: 1%; }

Grce cette astuce magique, les liens de niveau bloc saffichent correctement dansIE6 et IE7. Surnomm le "Holly Hack" daprs son auteur Holly Bergevin, height: 1% corrige galement une plthore de bugs lis IE. Pour plus dinformations sur les raisons permettant cette astuce de fonctionner, consultez larticle "On Having Layout" (http://www. satzansatz.de/cssd/onhavinglayout.html). Attention: ce nest pas vraiment une lecture facile! Le haslayout, que cet article voque, est un mcanisme propre Internet Explorer en

Ancres

131
version 6 et 7, qui affecte le rendu des lments dune page web. Il nest plus mis en uvre dans IE8. Un excellent article du site Alsacrations, en franais, en prsente le fonctionnement et dcrit les problmes quil peut poser. Le "Holly Hack" que nous venons dtudier est une mthode donnant la gestion du haslayout aux lments qui ne le possdent pas. Il existe une solution alternative, interprte uniquement par Internet Explorer, base sur la description zoom:1. Toutefois, il sagit l dune proprit CSS non standard, apparue avec IE5.5.
Pour plus dinformations sur lapplication de styles aux liens de niveau bloc, voir aussi les articles suivants: "Link Presentation and Fitts Law", de Dunstan Orchard: http://www.1976design.com/ blog/archive/2004/09/07/link-presentation-fitts-law/; " Fitts Law ", de Dave Shea : http://www.mezzoblue.com/archives/2004/08/19/ fitts_law/.

Avant de cliquer, il est bon de savoir quoi nous avons affaire... Dans cette dernire section, nous allons aborder un aspect des CSS qui ouvre de larges horizons : leur capacit filtrer les balises en fonction de la valeur dun attribut donn. Cette fonctionnalit de "filtrage par attributs" est, par chance, bien prise en charge par les principaux navigateurs. En particulier, Internet Explorer gre le filtrage par attributs depuis sa version7. Pour expliquer le filtrage par attributs et en dmontrer lutilit, nous allons raliser un exemple simple mais trs parlant. Supposons que vous devez publier sur votre site une liste de liens. Certains peuvent conduire vers des sites externes, dautres ouvrir ou tlcharger des documents dans des formats divers (fichiers PDF, Excel, MP3, etc.). Sans que nous ayons surcharger le balisage, le filtrage par attributs va nous permettre dinformer linternaute de la nature du lien, sur lequel il pourra alors cliquer en connaissance de cause. Notre exemple se base sur lextrait de code suivant:
<ul> <li><a <li><a <li><a <li><a </ul> href="#">Lien vers une page interne au site</a></li> href="http://www.pearson.fr">Lien vers un site externe</a></li> href="document.pdf">Lien vers un document PDF</a></li> href="document.xls">Lien vers un document Excel</a></li>

Nous voyons bien que les quatre liens sont tous de natures diffrentes, respectivement: lien interne au site, lien externe, ouverture/tlchargement dun fichier PDF, ouverture/tlchargement dun fichier Excel. Les descriptions que nous avons fournies dans le texte associ chaque lien sont plutt explicites, mais ce nest pas toujours le cas. En revanche, le code reste suffisamment clair sur le type de fichier grce au contenu de lattribut href des balises

132

Se faire plaisir aveclebalisage

<a>. Nous allons donc pouvoir analyser les liens en fonction de la valeur de cet attribut, suivant la syntaxe prsente dans le Tableau7.1.

Tableau 7.1: Syntaxe des rgles de filtrage par attributs


Rgle de filtrage [att] [att="valeur"] [att^="valeur"] [att$="valeur"] [att~="valeur"] [att*="valeur"] [att|="valeur"] Signification La balise contient un attribut att. La balise contient un attribut att de valeur valeur. La balise contient un attribut att dont la valeur commence par valeur. La balise contient un attribut att dont la valeur se termine par valeur. La balise contient un attribut att dont la valeur quivaut (au sens logique) valeur. La balise prsente un attribut att contenant la valeur valeur. La balise contient un attribut att dont le premier segment du premier lment (cest--dire la partie figurant avant le caractre "-") vaut valeur.

Nous pouvons mutualiser une partie des rgles CSS qui vont sappliquer lensemble des lments li et a, en particulier toutes les informations communes relatives aux images darrire-plan. Ces rgles seront compltes par des rgles spcifiques, qui sappliqueront aux liens laide de filtres bass sur le type de fichier et serviront afficher une image darrireplan diffrente suivant le type de fichier li.
li { list-style-type: none; margin-top: 4px; margin-bottom: 4px; } a { padding-left: 24px; background-position:left center; background-repeat:no-repeat; } a[href^="http://"]{ background-image:url(img/ext.jpg); } a[href$=".xls"]{ background-image:url(img/xls.jpg); } a[href$=".pdf"]{ background-image:url(img/pdf.jpg); }

Les rgles relatives aux lments li et a ne comportent que des lments classiques, dj utiliss dans les chapitres prcdents. En revanche, les rgles suivantes demandent un peu plus dattention. La premire rgle vrifie que lattribut href de la balise a dbute par la

Ancres

133
chane de caractres http://. Si cest bien le cas, nous pouvons en dduire quil sagit dun lien externe et lafficher avec limage darrire-plan approprie. Les deux rgles suivantes vrifient le type de fichier, identifi par son extension (.xls pour les fichier Excel, .pdf pour les fichiers PDF). Les rgles sont, l encore, plutt simples. En appliquant cette feuille de style la liste prsente en dbut de section, nous pouvons alors informer clairement lutilisateur de la nature des liens qui lui sont prsents. La Figure7.8 illustre le rsultat obtenu dans un navigateur.
Figure 7.8
Filtrage par attributs: affichage dans un navigateur.

Levez lancre!
Avant de mettre les voiles en direction du prochain chapitre, revoyons un peu ce que nous avons abord ici. Nous avons tudi quatre mthodes diffrentes pour crer des ancres au sein dune page, les deux dernires tant, selon nous, les plus optimales. Vous disposez maintenant des connaissances requises pour prendre les bonnes dcisions, dans vos prochains projets, en fonction du public vis. Nous avons ensuite voqu lattribut title et la faon dont il peut amliorer lutilisabilit en fournissant au lecteur des informations supplmentaires sur la destination dun lien. Lesinternautes, voyants ou malvoyants, seront en mesure de tirer parti de cette information supplmentaire fournie par lattribut title. Enfin, nous avons tudi lapplication de styles aux liens laide de pseudo-classes CSS. Avec un peu dimagination et quelques dclarations, nous pouvons obtenir des effets interactifs riches, sans le moindre JavaScript et sans surcharger le balisage, simplement en associant chaque tat de lien des rgles CSS propres. Il est maintenant temps de hisser les voiles et de larguer les amarres, moussaillons! Pardon, je me suis un peu laiss emporter

Encore des listes


Au Chapitre1, nous avons prsent plusieurs solutions pour baliser une liste dlments et explor les avantages du balisage en liste non ordonne laide des lments <ul> et <li>. Cette mthode structure la liste et garantit que tous les navigateurs et priphriques pourront lafficher correctement, tout en nous permettant de lui appliquer des styles varis grce aux CSS. Outre les listes non ordonnes, il existe deux autres types de listes. Il ne serait pas difficile de remplir un livre entier des diffrentes mthodes envisageables, suivant le contexte, pour baliser les listes de tout poil. Si je nai pas lintention de ddier un livre entier la thmatique des listes, je vais assurment consacrer un autre chapitre quelques types de listes supplmentaires et soulever quelques cas o le balisage en liste est la meilleure solution. Les listes peuvent tre un moyen puissant de structurer smantiquement vos pages, de donner du sens aux divers lments dont vous pouvez ensuite tirer parti pour lapplication de styles CSS individuels. Commenons par jeter un il une liste numrote et deux mthodes diffrentes permettant den baliser les lments. La mthode la plus intressante est probablement douloureusement vidente, mais je vais illustrer ce point pour dmontrer, une fois de plus, lintrt du balisage structur et du choix dun outil appropri pour une tche donne.

Quelle est la meilleure manire de baliser unelistenumrote?


Supposons que vous ayez baliser une liste dinstructions, chaque lment de la liste devant tre prcd dun numro. Nous allons tudier deux mthodes diffrentes pour rsoudre ce problme et nous verrons pourquoi lune est peut-tre plus approprie que lautre.

MthodeA: lordre dans le dsordre


<ul> <li>1. <li>2. <li>3. <li>4. <li>5. </ul> Couper les oignons.</li> Faire sauter les oignons pendant 3 minutes.</li> Ajouter 3 gousses dail.</li> Faire cuire pendant 3 minutes de plus.</li> Manger.</li>

136

Se faire plaisir aveclebalisage

Cette liste reprsente peut-tre la plus mauvaise recette de toute lhistoire culinaire, mais elle ne figure ici qu titre dexemple. Cela ne ferait certainement pas de mal si nous ajoutions du sel et dautres lgumes, ou quoi quil en soit, revenons ce qui nous importe ici. Pour la mthode A, nous avons choisi de baliser les instructions laide dune liste non ordonne afin de tirer parti des avantages que nous avons prsents au Chapitre 1. Nous avons structur cette liste et nous savons que la plupart des navigateurs, lecteurs dcran et autres priphriques pourront la grer correctement. Plus tard, nous pourrons facilement appliquer des styles CSS cette liste. Fort bien! Mais Numro perdant Comme il sagit dune liste numrote, nous avons ajout dans le contenu mme des balises chaque numro, suivi dun point, pour identifier chaque tape distincte des instructions. Mais que faire si nous devons ultrieurement rajouter une tape entre les phases2 et3? Ilnous faudrait alors renumroter manuellement toutes les tapes qui suivent celle que nous avons ajoute. Pour cette liste dexemple, ce nest pas une tche trs ardue mais si vous devez grer une liste de plus de 100lments, vous pouvez imaginer quel point cela peut devenir fastidieux. Affichage des puces Comme nous utilisons une liste non ordonne pour structurer lexemple, nous verrons aussi apparatre des puces devant chaque lment numrot (comme visible la Figure8.1). Vous aimez peut-tre les puces et, si ce nest pas le cas, vous pouvez naturellement les dsactiver grce aux CSS. Mais un affichage de la liste sans application du moindre style les rvlera toujours.
Figure8.1
Affichage de la mthodeA, sans application de styles, dans un navigateur.

Il existe une solution plus simple, qui a plus de sens au niveau smantique et qui est plus facile maintenir. Tournons-nous donc vers la mthodeB.

Encore des listes

137

MthodeB: une liste ordonne


<ol> <li>Couper les oignons.</li> <li>Faire sauter les oignons pendant 3 minutes.</li> <li>Ajouter 3 gousses dail.</li> <li>Faire cuire pendant 3 minutes de plus.</li> <li>Manger.</li> </ol>

Je suis certain que, pour beaucoup, cest le choix vident. Cela ne signifie toutefois pas que la mthode A nest jamais utilise, pour une raison ou une autre. Llment <ol> reprsente une liste ordonne (ordered list) de sorte que, smantiquement parlant, nous utilisons llment adapt la tche accomplir ici. Mais quest-ce donc qui rend la mthodeB si spciale? Numrotation automatique Vous remarquerez quil est inutile dajouter manuellement un numro devant chaque lment. Les numros sont gnrs automatiquement, dans lordre, lorsque lon utilise un lment <ol>. Si notre liste dinstructions comprenait plus de 100tapes et que nous devions ultrieurement rajouter une nouvelle tape en plein milieu de la liste, il nous suffirait dajouter un lment <li> de plus lemplacement appropri. La renumrotation seffectuerait dans le navigateur, comme par magie. Avec la mthodeA, il nous faudrait changer manuellement tous les numros que nous avons associs aux lments dans le balisage. Je nai aucun mal imaginer des activits plus agrables. La Figure 8.2 montre comment se prsente la mthode B dans un navigateur typique, le numro appropri prcdant chaque instruction.
Figure8.2
Affichage de la mthodeB dans un navigateur.

Au bonheur des retours la ligne, volume2 La mthodeB prsente un autre avantage lorsque des lments particulirement longs de la liste doivent subir un retour la ligne: la suite de llment se voit appliquer un retrait qui dcale le texte par rapport au numro gnr, tandis quavec la mthodeA, le retour la ligne dbute directement sous le numro intgr au texte balis (voir la Figure8.3 pour une comparaison des deux mthodes).

138

Se faire plaisir aveclebalisage

Figure8.3
Comparaison des retours la ligne pour les mthodesA etB.

Types de listes Si le style de liste par dfaut pour les listes ordonnes fait appel aux chiffres arabes (numrotation la plus courante: 1, 2, 3, 4, 5,etc.), nous pouvons changer cela et obtenir des styles trs diffrents, grce aux CSS et plus particulirement la proprit list-style-type. Envoici quelques valeurs possibles: decimal (chiffres arabes): 1, 2, 3, 4,etc. (valeur par dfaut la plus courante); upper-alpha (lettres majuscules): A, B, C, D,etc.; lower-alpha (lettres minuscules): a, b, c, d,etc.; upper-roman (chiffres romains majuscules): I, II, III, IV,etc.; lower-roman (chiffres romains minuscules): i, ii, iii, iv,etc.; none: aucun nombre. Ainsi, par exemple, si nous souhaitions que la mthode B gnre des nombres crits en chiffres romains majuscules au lieu de la numrotation par dfaut, nous pourrions crire une dclaration CSS du type:
ol li { list-style-type: upper-roman; }

La Figure8.4 illustre la faon dont saffiche la mthodeB dans un navigateur si on lui applique la rgle CSS que nous venons de dfinir. Au lieu de la numrotation fonde sur les chiffres arabes, notre liste dinstruction est numrote laide de chiffres romains majuscules. Naturellement, le balisage reste absolument identique. Si vous changez davis, une simple petite

Encore des listes

139

mise jour de la CSS pour changer la valeur et adopter lune de celles prsentes ci-dessus modifiera la numrotation de votre liste comme bon vous semble.
Figure8.4
Liste ordonne avec numrotation en chiffres romains.

Auparavant, vous utilisiez peut-tre lattribut de type directement dans llment <ol> pour modifier le type de numrotation de la liste (chiffres romains, lettres,etc.). Toutefois, lattribut de type a t supprim dans la norme HTML4.01 au profit de lutilisation des rgles CSS exposes ci-dessus. Par consquent, vous ne devriez pas utiliser lattribut de type mais bien les feuilles de style CSS. Des listes plus dtailles. HTML autorise lintgration dlments de type bloc au sein de listes (ordonnes ou non) mais cette possibilit est peu ou mal exploite. Pourtant, on peut trs bien avoir besoin de ce type dimbrication pour prsenter des actualits (titre et texte), des personnes (nom balis comme un titre et texte de prsentation), etc. Cela nous permet de conserver le caractre smantique du balisage. Le code peut tre structur sur le modle suivant:
<ul> <li><h4>Un titre.</h4> <p>... du texte... <a href="#">... un lien...</a></p></li> <li><h4>Un titre.</h4> <p>... du texte... <a href="#">... un lien...</a></p></li> <li><h4>Un titre.</h4> <p>... du texte... <a href="#">... un lien...</a></p></li> </ul>

Ce mode dimbrication vite de substituer aux balises <li> et <ul> des balises <div>, qui finissent par submerger les pages web cause de la "divite aigu" svissant chez les crateurs de sites. Le code garde sa clart ainsi que son aspect smantique et, une fois la feuille de style applique (par exemple en suivant le modle ci-dessous), nous obtenons un rsultat transparent et impeccable (voir Figure8.5).
ul { margin: 1em; padding: 0px; } li { list-style-type: none; background-color: #DEDEEF; margin: 1em 0; padding: 0; }

140

Se faire plaisir aveclebalisage

h4 { margin: 0px; background-color: #B1B1DA; padding: 0 0 0 0.5em; } p { margin: 0px; padding: 0 0.5em 0.5em 0.5em; }

Figure8.5
Liste avec imbrication dlments de niveau bloc, affiche dans un navigateur.

Un peu plus loin dans ce chapitre, la section Pour aller plus loin, nous appliquerons des styles CSS notre liste d'instructions ordonnes. Notez toutefois que les principes de ce chapitre sappliquent aussi bien aux listes ordonnes quaux listes non ordonnes. Auparavant, jetons un il un exemple de liste d'un autre type.

Quelle est la meilleure manire de baliser un ensemble de termes et de descriptions?


Bon, je ladmets, la rponse est quasiment fournie dans la question. Vous comprendrez ce que je veux dire ds que nous allons tudier les deux mthodes suivantes. Plus important que la question, toutefois, est le fait que la mthodeA est une solution couramment utilise pour baliser des paires terme/description, tandis que la mthodeB est un type de liste largement sous-exploit mais qui peut servir un large ventail dapplications et fournit une structure beaucoup plus souple. Commenons par jeter un coup dil rapide une faon potentiellement familire de grer des paires terme/dfinition (en loccurrence, les dfinitions de quelques normes tablies par le W3C).

MthodeA
<ul> <li>CSS<br /> Mcanisme simple pour appliquer des styles (par exemple des polices, couleurs, espacements) des documents web.</li>

Encore des listes

141

<li>XHTML<br /> Famille de types et modules de documents actuels et venir, qui reproduisent, organisent et tendent le langage HTML reformul en XML.</li> <li>XML<br /> Format texte simple et souple, driv de SGML.</li> </ul>

Cette mthode semble avoir du sens: elle exploite une liste non ordonne pour la structure et un lment <br /> pour sparer les termes de leur dfinition respective. Mais que se passerait-il si nous souhaitions appliquer chaque terme (CSS, XHTML et XML) un style diffrent de celui de sa dfinition? Notre seule option dans le cadre de la mthodeA consiste ajouter une sorte de "crochet" de style dans le balisage, par exemple un lment <span> ou <strong> supplmentaire. Toutefois, en termes de maintenance, ce nest pas une solution idale. La Figure8.6 illustre comment la mthodeA apparatrait dans un navigateur typique, chaque terme et chaque dfinition tant place sur sa propre ligne.
Figure8.6
Affichage de la mthodeA dans un navigateur typique.

En dehors de limpossibilit dappliquer des styles distincts aux termes et aux dfinitions, il ny a pas grand-chose critiquer dans la mthodeA. Mais soulever cette question nest quune excuse pour parler du type de liste quexploite la mthodeB, cest--dire la liste de dfinitions.

MthodeB
<dl> <dt>CSS</dt> <dd>Mcanisme simple pour appliquer des styles (par exemple des polices, couleurs, espacements) des documents web.</dd> <dt>XHTML</dt> <dd>Famille de types et modules de documents actuels et venir, qui reproduisent, organisent et tendent le langage HTML reformul en XML.</dd> <dt>XML</dt> <dd>Format texte simple et souple, driv de SGML.</dd> </dl>

142

Se faire plaisir aveclebalisage

Une liste de dfinitions (<dl>) est constitue de deux lments supplmentaires, <dt> (le terme) et <dd> (la description). Pour les besoins de notre exemple, la liste de dfinitions correspond parfaitement ce que nous recherchons car il sagit prcisment de dfinir une srie de paires terme/description. Par dfaut, la plupart des navigateurs graphiques affichent la liste de dfinitions en plaant la description (<dd>) sur une ligne propre, avec un lger retrait (voir Figure8.7). Nous pouvons, naturellement, modifier cette indentation si nous le souhaitons laide de CSS.
Figure8.7
Affichage de la mthodeB dans un navigateur typique.

La structure conduit au style Smantiquement, la mthodeB est solide et nous donne un lment distinct pour chaque partie de notre liste. Cela nous permettra de styler les termes diffremment de leur description, et vice versa. Ainsi, un changement vritablement simple que nous pouvons apporter consiste passer en gras, grce aux CSS, les lments <dt>. Une simple dclaration sen charge pour nous, sans ncessiter la moindre modification du balisage:
dt { font-weight: bold; }

Cest tout ce quil y a faire: pas mme besoin dajouter un lment <strong>, <b> ou <span> au balisage de la liste. Dsormais, tous les lments <dt> apparatront en gras, comme vous le constatez la Figure8.8.
Figure8.8
MthodeB avec application de la rgle font-weight: bold; tous les lments <dt>.

Ajouter des icnes Vous aurez peut-tre remarqu que jaime profiter des CSS pour ajouter des petites images et autres icnes aux lments. En effet, en utilisant la proprit CSS background, je peux enrichir les pages tout en conservant les objets graphiques dcoratifs et non essentiels en dehors du contenu et de la structure de la page.

Encore des listes

143

Changer, ajouter ou supprimer ces images devient particulirement simple et rapide lorsque ces modifications ne requirent pas de toucher au balisage. Pour les listes de dfinitions, il peut tre intressant dajouter une icne en forme de petite flche coude partant du terme et pointant vers la description. Voil qui est trs facile grce aux rgles CSS suivantes:
dt { font-weight: bold; } dd { margin-left: 15px; padding-left: 15px; color: #999; background: url(fleche_dd.gif) no-repeat 0 2px; }

Nous avons ici modifi un peu le retrait par dfaut pour les lments <dd> en indiquant margin-left: 15px;. Ensuite, nous avons modifi la couleur de la description pour la passer en gris, afin de mieux diffrencier encore son texte de llment <dt>. Une petite icne en forme de flche orange est ajoute et positionne gauche et 2pixels du haut de la description. Nous insrons galement 15pixels despacement gauche. Ainsi, licne apparat clairement et sans chevauchement avec le texte. Les rsultats sont visibles la Figure8.9.
Figure8.9
Liste de dfinitions avec utilisation dune image darrire-plan pour traduire les relations entre termes et descriptions.

Comme vous le constatez, en utilisant la structure de la liste de dfinitions, nous pouvons facilement appliquer des styles individuels chaque lment, ce qui contribue enrichir laspect graphique de la page sans toucher le moins du monde au balisage. Nous pouvons galement tre rassurs quant laffichage de la liste sans application de styles: elle sera quand mme prsente dune faon lisible et organise. Autres utilisations Soulignons que les usages des listes de dfinitions vont bien au-del des simples paires terme/description. Les listes de dfinitions peuvent tre employes pour des dialogues, des lments de navigation et mme pour la prsentation de formulaires.

144

Se faire plaisir aveclebalisage

Nous pouvons mme citer la dfinition que le W3C donne des listes de dfinitions dans la "Spcification HTML4.01" (www.w3.org/TR/html4/struct/lists.html):
"Les listes de dfinitions, cres au moyen de llment <dl>, sont gnralement constitues dune srie de paires terme/dfinition (bien que les listes de dfinitions puissent avoir dautres usages)."

Nayez pas peur dutiliser des listes de dfinitions des fins autres que le cas courant des paires terme/dfinition.

En rsum
Jusqu prsent, dans ce chapitre, nous avons tudi deux nouveaux types de listes: les listes ordonnes et les listes de dfinitions. Nous avons dcouvert quen utilisant ces listes structures plutt quen surchargeant le balisage des listes non ordonnes, nous exerons davantage de contrle sur le style et nous crons galement des listes plus faciles maintenir. Reprenons maintenant notre liste ordonne dinstructions, tudie au dbut de ce chapitre, pour la personnaliser un peu grce aux CSS.

Pour aller plus loin


Refamiliarisons-nous avec notre liste dinstructions, cre un peu plus tt dans ce chapitre:
<ol> <li>Couper les oignons.</li> <li>Faire sauter les oignons pendant 3 minutes.</li> <li>Ajouter 3 gousses dail.</li> <li>Faire cuire pendant 3 minutes de plus.</li> <li>Manger.</li> </ol>

Sans style et en labsence de toute CSS, cette liste apparat dans un navigateur comme lillustre la Figure 8.2. Comme tout autre exemple de balisage structur disponible dans ce livre, une liste ordonne constitue un jeu dlments facile styler ds que nous faisons intervenir les CSS. Nous savons aussi que, parce que nous utilisons ici une structure approprie pour cette liste, les navigateurs qui ne prennent pas en charge les CSS ou les ont dsactives afficheront nanmoins correctement la liste. Ajoutons un peu de fantaisie et personnalisons les numros apparaissant devant chaque instruction.

Encore des listes

145

Identifier les parties


De manire pouvoir accder chaque lment de la liste et remplacer le numro correspondant par quelque chose dun peu plus lgant, nous allons devoir ajouter un identifiant chaque lment <li>. Nous allons aussi affecter un id la liste ordonne dans son ensemble, de sorte que nous pouvons concevoir des rgles de style ddies cette liste et ne sappliquant pas aux autres lments <ol>:
<ol id="recette"> <li id="un">Couper les oignons.</li> <li id="deux">Faire sauter les oignons pendant 3 minutes.</li> <li id="trois">Ajouter 3 gousses dail.</li> <li id="quatre">Faire cuire pendant 3 minutes de plus.</li> <li id="cinq">Manger.</li> </ol>

Maintenant que nous avons identifi tous les lments, nous avons un contrle total sur chacun deux au niveau des styles. Il est toutefois important de signaler quen ajoutant un identifiant unique chaque lment <li>, nous renonons lavantage que reprsente la numrotation automatique dune liste ordonne. Si nous sommes amens ajouter une nouvelle tape en plein milieu de la liste, nous devrons modifier les valeurs des identifiants pour toutes les tapes suivantes. Simple avertissement.

Des numros personnaliss


La premire tape dans la cration de numros personnaliss pour notre liste consiste dsactiver les numros gnrs par dfaut, au moyen de la proprit list-style-type applique llment #recette.
#recette { list-style-type: none; }

La Figure8.10 prsente notre liste, affiche sans les numros grce la rgle ci-dessus.
Figure8.10
Notre liste ordonne avec dsactivation des numros grce la rgle CSS.

Maintenant que nous empchons la gnration automatique des numros, nous pouvons ajouter nos propres images. Dans Photoshop ou votre diteur dimages favori, vous pouvez

146

Se faire plaisir aveclebalisage

crer cinq images GIF (une pour chaque numro). La Figure8.11 prsente les cinq numros que jai crs en police Prensa et de couleur rouge.
Figure8.11
Cinq images GIF utiliser pour notre liste numrote.

Ajouter les numros la CSS


cause de la taille plus imposante des numros sous forme graphique, nous allons devoir ajouter des marges et des espaces autour de chaque lment de la liste: de cette manire, ils auront suffisamment dair pour que limage du numro apparaisse en tant quimage darrire-plan sans chevauchement avec le texte. Nous allons galement ajouter une fine bordure grise sous chaque instruction. Nous pouvons utiliser le slecteur descendant #recette li pour appliquer ces rgles tous les lments <li> contenus dans #recette. Cela nous vite davoir rpter ces informations communes dans les rgles correspondant chaqueid de numro.
#recette { list-style-type: none; } #recette li { padding: 10px 50px; margin-bottom: 6px; border-bottom: 1px solid #ccc; }

Les valeurs ci-dessus tant appliques tous les lments <li> de notre liste, nous pouvons maintenant ajouter chaque image de numro unique sonid correspondant:
#recette { list-style-type: none; } #recette li { padding: 10px 50px; margin-bottom: 6px; border-bottom: 1px solid #ccc; } #un { background: url(ol_1.gif) no-repeat 6px 50%; } #deux { background: url(ol_2.gif) no-repeat 2px 50%; }

Encore des listes

147

#trois { background: url(ol_3.gif) no-repeat 3px 50%; } #quatre { background: url(ol_4.gif) no-repeat 0px 50%; } #cinq { background: url(ol_5.gif) no-repeat 6px 50%; }

Vous remarquerez que les valeurs de position diffrent lgrement pour chaque image, ce qui reflte leur placement horizontal. En effet, les largeurs des images varient cause de la fonte particulire que jai utilise. Pour compenser, nous dplaons au besoin les images vers la droite pour aligner parfaitement, la verticale, les points qui suivent chaque numro. Inclure 6px 50% dans la rgle positionne limage 6pixels de la gauche et 50% du haut (cest--dire que limage est centre verticalement).

Rsultat
La Figure8.12 illustre le rsultat final, affich dans un navigateur typique, chaque image apparaissant gauche de linstruction correspondante. Des lignes grises sont traces sous chaque instruction pour matrialiser la sparation.
Figure8.12
Notre liste ordonne, le style affichant les images des numros personnaliss.

Nous sommes partis dune liste structure et, grce quelques images et rgles CSS, nous sommes parvenus lui donner un style personnalis, dmontrant une fois encore que nous pouvons garder lextrieur du balisage toute image non essentielle, facilitant dautant les mises jour ultrieures.

148

Se faire plaisir aveclebalisage

Pour conclure
Les listes ordonnes et les listes de dfinitions viennent en complment de la varit "non ordonne" et apportent la fois une structure smantique et une souplesse de mise en forme. Laissez votre imagination vagabonder et faites vos propres expriences sur les diffrents types de listes, en utilisant les CSS pour personnaliser et embellir la structure de base. Pour vous mettre le pied ltrier, pensez consulter le site Listamatic, qui prsente une grande varit de traitements CSS appliqus une mme liste balise: http://css.maxdesign.com. au/listamatic/. Au final, vous obtiendrez une liste constituant une base solide, qui peut safficher en toutes circonstances et qui reste nanmoins facile modifier, au moyen des CSS, pour tout navigateur compatible.

Minimiser le balisage
Nous avons voqu la faon dont la cration de pages web structures peut contribuer rduire votre balisage en sparant la structure et les dtails de prsentation. Plutt que dutiliser des tableaux et des images pour personnaliser les bordures et la mise en page, nous pouvons nous reposer sur un code XHTML valide et des CSS pour ajouter la touche finale. Une habitude potentiellement mauvaise et facilement acquise lorsque lon cre des sites respectueux des standards web (particulirement ceux qui sappuient fortement sur les CSS) consiste ajouter des lments et attributs de classes outrance, l o ils ne sont pas le moins du monde ncessaires. En profitant des slecteurs descendants dans notre CSS, nous pouvons nous dbarrasser des <div>, <span> et autres classes superflus. Minimiser votre balisage se traduit par des pages web plus rapides charger et plus faciles maintenir: dans ce chapitre, nous allons dcouvrir quelques manires simples dy parvenir.

Comment minimiser le balisage lorsque nous crons dessites respectueux des standards web?
Minimiser le balisage est un sujet que nous nous devons dvoquer. La rduction du balisage est un bnfice considrable de la cration de sites en XHTML valide et reposant sur les CSS pour la prsentation. Moins de code induit un chargement plus rapide, ce qui constitue un atout majeur pour les internautes dots dune connexion lente (les modems 56K ont toujours cours) ou les utilisateurs mobiles (sur les rseaux cellulaires de type Edge, 3G,etc.). Moins de code signifie aussi moins despace occup sur le serveur et moins de bande passante consomme, ce qui ne peut que rencontrer lapprobation des administrateurs systme et des dirigeants. Subsiste pourtant un problme: veiller ce que vos pages soient conformes aux spcifications du W3C ne vous garantit pas fatalement un recours parcimonieux au code. Vous pouvez fort bien pimenter votre balisage valide de toutes sortes dlments superflus. Il est certes valide, mais nanmoins surcharg de code ajout pour simplifier lapplication des CSS. Nayez pas peur, il existe quelques astuces pour crire un balisage compact qui, la fois, reste valide et nous laisse un contrle suffisant ct CSS. Voyons immdiatement quelques petites choses simples qui peuvent nous aider minimiser le balisage.

150

Se faire plaisir aveclebalisage

Slecteurs descendants
Nous allons tudier ici deux mthodes permettant de baliser une barre latrale contenant des informations, des liens et autres lments usuels sur un site personnel. Nous plaons toutes ces bonnes choses dans un lment <div> auquel nous donnons un identifiant barrelat afin de le positionner un endroit particulier dans la fentre du navigateur (nous dvelopperons plus en dtail la mise en page laide de CSS dans la seconde partie de ce livre).

MthodeA: abondance de classes


<div id="barrelat"> <h3 class="titrelat"> propos de ce site</h3> <p>Cest mon site.</p> <h3 class="titrelat">Mes liens</h3> <ul class="lienlat"> <li class="lien"><a href="archives.html">Archives</a></li> <li class=lien><a href=auteur.html> propos de lauteur</a></li> </ul> </div>

Jai rencontr sur de nombreux sites des balisages analogues celui de la mthode A. Lorsquun concepteur de sites web dcouvre pour la premire fois la puissance des CSS, il se laisse facilement emporter et affecte des classes au moindre lment auquel il souhaite pouvoir appliquer un style distinct (on parle souvent, dans ce cas, de "classite aigu"). Dans lexemple prcdent, nous avons associ aux deux lments <h3> la classe titrelat afin de doter ces lments dun style diffrent des autres titres de la page. Nous avons fait de mme pour les lments <ul> et <il>. CSS: affaire classe Ct style, imaginons que nous voulions voir apparatre les titres en fonte serif, orange et avec une bordure infrieure gris clair. Dans la liste non ordonne de liens latraux, les puces seront dsactives et les lments de la liste safficheront en gras. La CSS requise par la mthodeA peut donc ressembler ceci:
.titrelat { font-family: Georgia, serif; color: #c63; border-bottom: 1px solid #ccc; } .lienlat { list-style-type: none; } .lien { font-weight: bold; }

Minimiser le balisage

151

En faisant rfrence chaque classe spcifie dans le balisage, nous pouvons appliquer des styles distincts aux composants associs. Vous pourriez mme imaginer organiser dautres sections de la page (navigation, pied de page, zones de contenu) de la mme manire, chacune tant constelle de dizaines de classes visant vous donner un contrle total sur le moindre lment. Certes, cela fonctionne plutt bien, mais il existe une faon simple de rduire le balisage requis par toutes ces classes, qui rend par ailleurs votre CSS plus lisible et mieux organise. Passons donc maintenant la mthodeB.

MthodeB: slection naturelle


<div id="barrelat"> <h3> propos de ce site</h3> <p>Cest mon site.</p> <h3>Mes liens</h3> <ul> <li><a href="archives.html">Archives</a></li> <li><a href=auteur.html> propos de lauteur</a></li> </ul> </div>

Voil qui est mieux et plus compact! Mais attendez, o sont donc passes toutes les classes? Eh bien vous allez voir que vous nen avez pas rellement besoin, principalement parce que nous avons plac tous ces lments dans un <div> lui-mme dot dun identifiant unique (en loccurrence, barrelat). Cest ici quentrent en jeu les slecteurs descendants : en faisant rfrence aux lments contenus dans barrelat simplement par leurs noms dlments, nous pouvons liminer toutes ces classes redondantes. CSS contextuelle Voyons un peu comment appliquer les mmes styles que dans la mthodeA, cette fois laide des slecteurs descendants, pour accder aux lments de notre barre latrale:
#barrelat h3 { font-family: Georgia, serif; color: #c63; border-bottom: 1px solid #ccc; } #barrelat ul { list-style-type: none; }

152

Se faire plaisir aveclebalisage

#barrelat li { font-weight: bold; }

En utilisant lidentifiant #barrelat comme rfrence, nous pouvons appliquer des styles distincts chaque lment qui apparat dans la barre. Ainsi, seuls les lments <h3> figurant dans le <div> de la barre latrale se verront appliquer ces rgles particulires. Cette manire contextuelle dappliquer des styles des lments est cruciale pour rduire le balisage. Bien souvent, nous navons pas besoin de surcharger nos lments de noms de classes si nous avons mis en place une structure smantique autour deux. Pas seulement pour les barres latrales Si nous navions prsent quune seule section de la page (la barre latrale), les mmes principes pourraient sappliquer lintgralit de la structure dune page: vous pouvez dcouper votre balisage en sections logiques (par exemple #nav, #contenu, #barrelat, #pied) puis appliquer des styles distincts chacune des sections et aux slecteurs descendants. Supposons, par exemple, que vous ayez utilis des lments de titres <h3> dans les deux sections de page #contenu et #barrelat et que vous souhaitiez afficher tous les titres <h3> en police serif. Par contre, vous voulez que le texte de ces lments apparaisse en violet dans lune des sections et en orange dans lautre. Point nest besoin de modifier votre balisage pour ajouter une classe lun ou lautre des titres. Nous pouvons dfinir un style global contenant les rgles communes tous les lments <h3>, puis faire appel aux slecteurs descendants pour donner au titre la couleur correspondant la section qui lhberge.
h3 { font-family: Georgia, serif; /* Tous les titres h3 doivent tre en serif */ } #contenu h3 { color: purple; } #barrelat h3 { color: orange; }

Au niveau gnral, nous avons indiqu que tous les lments <h3> doivent tre en police serif, tandis que la couleur sera violette ou orange suivant le contexte. Il nest pas ncessaire de rpter les rgles communes (dans le cas prsent, font-family) ce qui, en retour, minimise aussi la CSS et vite de dupliquer des rgles dans plusieurs dclarations. Non seulement le balisage supplmentaire sous la forme dattributs class est inutile, mais la structure de notre CSS commence prendre du sens, et donc devenir plus lisible tout en facilitant lorganisation de vos dclarations par section de page. Il devient dautant plus simple de reprendre ultrieurement le fichier pour modifier des rgles donnes, particulirement pour

Minimiser le balisage

153

les mises en page longues et complexes, qui peuvent contenir des centaines de rgles CSS dans un mme fichier. Si, par exemple, nous avions rparti les styles communs dans chaque dclaration et que nous souhaitions par la suite modifier tous les lments <h3> pour quils apparaissent en police sans serif, nous aurions alors modifier linformation en trois endroits au lieu dun seul. Moins de classes = maintenance facilite En plus de rduire le volume de code requis, favoriser les slecteurs descendants au lieu de crer des classes superflues se traduit par un balisage prt affronter lavenir. Supposons, par exemple, que vous souhaitiez voir apparatre les liens de la barre latrale en rouge au lieu du bleu par dfaut quutilise le reste de la page. Vous avez donc cr une classe rouge que vous avez ajoute vos ancres comme ci-aprs:
<div id="barrelat"> <h3> propos de ce site</h3> <p>Cest mon site.</p> <h3>Mes liens</h3> <ul> <li><a href="archives.html" class=rouge>Archives</a></li> <li><a href=auteur.html class="rouge"> propos de lauteur</a></li> </ul> </div>

Et la CSS requise pour passer ces liens en rouge (en supposant que la couleur des liens par dfaut soit diffrente) ressemble peu ou prou ceci:
a:link.rouge { color: red; }

Tout cela est fort bien et fonctionne parfaitement. Imaginons maintenant que vous changiez davis et que vous souhaitiez faire apparatre les mmes liens en vert. Ou que, de faon beaucoup plus terre terre, votre chef vous lance: "Le rouge nest plus la mode cette anne. Passez-moi ces liens de la barre latrale en vert." Bien sr, vous pourriez modifier la classe rouge dans la CSS, et cen serait fini. Mais le balisage fait toujours rfrence rouge dans lattribut class, ce qui na plus de sens au niveau smantique (pas plus que nen aurait le moindre nom de couleur utilis comme nom de classe). Bien que cela soit un bon argument en faveur de ladoption de noms de classes dissocis des aspects de prsentation, cela demanderait moins deffort (et de code) de ne pas affecter de classe du tout. De surcrot, ce serait plus sain au niveau smantique. Il nous suffirait dutiliser des slecteurs descendants pour accder spcifiquement ces liens de la barre latrale et pour leur appliquer le style de notre choix.

154

Se faire plaisir aveclebalisage

Le balisage serait alors identique celui de la mthodeB, et la rgle CSS associe aux liens de la barre latrale suivrait alors ce modle:
#barrelat li a:link { color: red; }

Essentiellement, nous indiquons que "seules les ancres utilisant lattribut href et figurant dans des lments <li> de la barre latrale #barrelat doivent apparatre en rouge". Notre balisage reste donc lger et efficace, tandis que notre CSS est le seul outil ncessaire pour toute mise jour future, quel que soit le style (rouge, vert, gras, italique, etc.) que doivent adopter nos liens. Intressons-nous maintenant une autre solution afin de minimiser notre balisage, en liminant les lments <div> superflus pour tirer parti des lments de niveau bloc prexistants.

Le <div> superflu
Outre le principe consistant limiter le nombre dattributs class ncessaires pour lapplication des styles, il existe une autre manire simple de limiter le balisage: liminer tout lment <div> pour lequel il existe dj un lment enfant de niveau bloc. En guise dillustration, tudions deux mthodes diffrentes.

MthodeA: en <div>
<div id="nav"> <ul> <li><a href=archives.html>Archives</a></li> <li><a href=auteur.html> propos de lauteur</a></li> </ul> </div>

Nous avons ici un menu de navigation (trs) succinct, constitu dune simple liste non ordonne. Nous avons affect lidentifiantnav llment <div> qui englobe la liste complte. Mais pourquoi ne pas affecter lid directement dans llment <ul> qui, comme le <div>, est par nature un lment de type bloc? Intressons-nous donc la mthodeB.

MthodeB: sans <div>


<ul id="nav"> <li><a href="archives.html">Archives</a></li> <li><a href=auteur.html> propos de lauteur</a></li> </ul>

Minimiser le balisage

155

La mthodeB indique que nous pouvons nous dbarrasser du <div> superflu et appliquer lidentifiant directement llment <ul>. Lapplication de styles dfinissant la position, les marges, les espacements,etc. peut se faire sur llment <ul> tout aussi facilement que sur le <div>; en retour, nous rduisons un peu notre balisage en nous dbarrassant de lenveloppe <div>. Il est important de souligner que cette solution est adapte uniquement aux cas o le blocnav ne contient pas dlment autre que la liste <ul> (<p>, <blockquote>, <form>, etc.). Comme il nest gnralement pas pratique de faire figurer ces lments dans une liste <ul>, une enveloppe <div> aurait alors plus de sens. Toutefois, pour les cas analogues celui trait dans les mthodesA etB, o la liste non ordonne est lunique lment contenu, il est alors sens de se dbarrasser du <div>. De fait, il est essentiel de vrifier lexistence de tout lment conteneur. Le <div> est-il vraiment ncessaire? Y a-t-il un lment de niveau bloc dj en place que nous pouvons exploiter? Un balisage compact est en jeu.

Autres exemples
Un autre exemple o nous pouvons liminer un <div> se prsente pour le traitement dun <form>. Ainsi, au lieu de:
<div id="monformulaire"> <form> ... lments du formulaire... </form> </div>

nous pourrions plus facilement procder ainsi:


<form id="monformulaire"> ... lments du formulaire... </form>

De la mme manire, si le pied de page dun site ne doit contenir quun seul paragraphe, au lieu de baliser:
<div id="pied"> <p>Copyright 1999-2010 Dan Cederholm</p> </div>

nous pourrions prfrer cette version plus synthtique:


<p id="pied">Copyright 1999-2010 Dan Cederholm</p>

condition, bien entendu, que le pied de page ne contienne pas dautre lment que ce paragraphe.

156

Se faire plaisir aveclebalisage

En rsum
Nous avons tudi deux manires simples de minimiser notre balisage: dune part en vitant de recourir systmatiquement, pour les besoins de la mise en forme, aux attributs class et en leur prfrant les slecteurs descendants; dautre part, en affectant lesid directement aux blocs prexistants, plutt que de faire appel des enveloppes <div>. Mme si lusage de lune ou lautre de ces mthodes ne reprsente en apparence quune conomie minime, mis bout bout sur lensemble dun site web, les rsultats sont vidents en termes de structuration et de compacit du code, et lconomie est relle. Vous vous rapprochez encore dun code plus lger, plus sain au niveau smantique et plus facile maintenir lavenir. Voyons comment nous pouvons aller encore plus loin avec les slecteurs descendants, en stylant des listes imbriques qui serviront mettre en forme un plan de site.

Pour aller plus loin


Pour cette session, nous allons tudier la faon dexploiter les slecteurs descendants afin dappliquer des styles distincts aux diffrents niveaux de listes imbriques. Lexemple qui nous servira de base est un extrait dun plan de site. Nous dcouvrirons que nous pouvons conserver un balisage trs lmentaire, ne ncessitant pas dajouter des attributs class supplmentaires et permettant nanmoins de styler individuellement chaque niveau de la liste. Commenons par nous familiariser avec le balisage.

Le balisage brut
un niveau trs lmentaire, les listes imbriques et non styles fournissent une organisation parfaite pour un sommaire ou, comme cest le cas dans notre exemple, pour un plan de site. Limbrication des listes nous garantit une structure correcte que tous les navigateurs et priphriques pourront lire et laquelle nous pourrons facilement, par la suite, appliquer des styles laide de CSS. Le balisage dun petit plan de site, qui contient trois lments au plus haut niveau et quelques lments imbriqus, pourrait ressembler ceci:
<ul> <li>Weblog</li> <li>Articles <ul> <li>Comment battre les Red Sox</li> <li>Lancer aprs la 7e priode <ul> <li>Partie I</li> <li>Partie II</li> </ul> </li>

Minimiser le balisage

157

<li>Quatre-vingt-cinq ans, ce nest vraiment pas si long</li> </ul> </li> <li> propos</li> </ul>

La Figure 9.2 indique la faon dont le balisage ci-dessus saffichera dans la plupart des navigateurs. Vous constatez que, par dfaut, la structure recherche est peu prs en place: la hirarchie est vidente, mme en labsence de tout style. Toutefois, lensemble nest pas spcialement plaisant et il est donc intressant de lui appliquer quelques rgles CSS.
Figure9.1
Affichage sans application de styles du balisage en listes imbriques.

Avoir du style
Supposons que nous souhaitions ajouter des dfinitions pour certains niveaux du plan du site. Tout ce que nous avons faire consiste ajouter au balisage un uniqueid, qui nous permettra de styler cette liste en particulier diffremment de toute autre liste pouvant apparatre sur la page et dote du balisage standard:
<ul id="plansite"> <li>Weblog</li> <li>Articles <ul> <li>Comment battre les Red Sox</li> <li>Lancer aprs la 7e priode <ul> <li>Partie I</li> <li>Partie II</li> </ul> </li> <li>Quatre-vingt-cinq ans, ce nest vraiment pas si long</li> </ul> </li> <li> propos</li> </ul>

L encore, grce aux slecteurs descendants, nous pouvons affecter un style distinct chaque niveau de la liste. Si, par exemple, nous souhaitons faire apparatre les niveaux les plus levs dans une police de grande taille, en gras et en orange, et que la taille de police

158

Se faire plaisir aveclebalisage

doive diminuer mesure que lon descend dans la hirarchie, nous pouvons dfinir ainsi la taille, la graisse et la couleur pour lintgralit de la liste:
#plansite { font-size: 140%; font-weight: bold; color: #f63; }

Cela passe lensemble de la liste en police de grande taille, en gras et en orange. Nous pouvons ensuite rduire la taille et changer la couleur des lments <li> qui apparaissent aux niveaux infrieurs:
#plansite { font-size: 140%; font-weight: bold; color: #f63; } #plansite li ul { font-size: 90%; color: #000; }

La CSS ci-dessus garantit que tous les lments du niveau le plus lev apparatront en grande taille, gras et orange, tandis que toutes les listes imbriques des niveaux infrieurs seront de couleur noire et avec une taille dfinie 90% (cest--dire, dans le cas prsent, 90% de 140%). Observez les rsultats la Figure9.2.
Figure9.2
Ajout de styles pour les lments de liste de plus haut niveau.

Nous navons pas besoin de dfinir une taille plus petite pour le troisime niveau car celui-ci se voit automatiquement appliquer une rduction 90% par rapport au deuxime niveau (la rgle CSS sapplique de faon cumulative, ce qui peut sembler un peu confus mais fonctionne!). Nous avons maintenant une taille de police dcroissante pour chaque niveau de la liste, laquelle nous allons tout de suite ajouter des puces.

Puces personnalises
Nous allons dsactiver la mise en forme par dfaut et ajouter des puces dcoratives uniquement aux lments de troisime niveau, laide de la proprit background. Commenons

Minimiser le balisage

159

par dsactiver, de manire gnrale, les styles par dfaut pour tous les lments <li>. Nous affecterons ensuite une image darrire-plan spcifiquement aux lments de troisime niveau. Pour mieux sparer les diffrents niveaux, nous allons aussi repasser les objets de troisime niveau en graisse normale (font-weight: normal;), supprimant ainsi le gras par dfaut de la liste.
#plansite { font-size: 140%; font-weight: bold; color: #f63; } #plansite li { list-tyle: none; /* dsactive les puces */ } #plansite li ul { font-size: 90%; color: #000; } /* pour le troisime niveau */ #plansite li ul li ul li { font-weight: normal; padding-left: 16px; background: url(puce.gif) no-repeat 0 50%; }

La Figure9.3 prsente le plan de site rsultant, avec une puce personnalise et une graisse normale qui ne sappliquent quaux lments <li> de troisime niveau. Nous avons ajout 16pixels despacement gauche pour tenir compte de la largeur de limage dcorative (et pour ajouter un peu despace vide entre la puce et le texte). Nous indiquons aussi au navigateur daligner limage 0pixel gauche et 50% du haut, cest--dire que limage est ferre gauche et verticalement centre par rapport au texte. Nous aurions certes pu utiliser ici une valeur en pixels, mais un pourcentage garantit un positionnement similaire de la puce si le texte est redimensionn.
Figure9.3
Ajout de puces personnalises aux lments de troisime niveau.

160

Se faire plaisir aveclebalisage

Ajouter une bordure


Pour complter notre plan de site, ajoutons une bordure pointille gauche des listes de deuxime niveau. Cela devrait fournir des indications visuelles supplmentaires lutilisateur, traduisant que les objets du plus haut niveau possdent des sous-options qui leurs sont lies. Pour obtenir cette bordure uniquement gauche des listes de deuxime niveau, nous ajoutons les rgles suivantes:
#plansite { font-size: 140%; font-weight: bold; color: #f63; } #plansite li { list-tyle: none; /* dsactive les puces */ } #plansite li ul { margin: 6px 15px; padding: 0 15px; font-size: 90%; color: #000; border-left: 1px dotted #999; } /* pour le troisime niveau */ #plansite li ul li ul { border: none; } #plansite li ul li ul li { font-weight: normal; padding-left: 16px; background: url(puce.gif) no-repeat 0 50%; }

Nous avons un peu ajust les marges et lespacement pour le deuxime niveau, et nous avons bien sr ajout la bordure pointille. la suite de cette rgle, nous dsactivons la bordure pour les listes de troisime niveau grce la rgle border: none;. La Figure9.4 prsente la liste rsultante avec les polices de taille variable, les bordures et les images en guise de puces.

Minimiser le balisage

161

Figure9.4
Plan du site finalis, avec les bordures pointilles appliques aux listes de deuxime niveau.

Pour construire des listes de type "table des matires", imbriquer des lments <ul> constitue une solution la fois saine sur le plan structurel et facile styler. En affectant un id unique llment <ul> de plus haut niveau, nous laissons les CSS se charger dappliquer les styles distincts aux diffrents niveaux et cela ne ncessite pas le moindre balisage supplmentaire. Quant aux possibilits en matire de styles cratifs, elles vont bien au-del de ce simple exemple! La Figure9.5 illustre la CSS applique un plan de site lgrement plus volumineux. Du fait que la CSS applique les styles suivant le niveau, le balisage de ce plan serait strictement identique celui de notre exemple. Les objets de la liste adoptent le style appropri en fonction de leur niveau dimbrication.
Figure9.5
Plan du site dpli, ralis avec des listes imbriques et des CSS.

162

Se faire plaisir aveclebalisage

Pour conclure
Dans ce chapitre, nous avons explor deux mthodes simples permettant de minimiser notre balisage, reposant sur lutilisation des slecteurs descendants et la suppression des lments <div> inutiles. Utiliser les slecteurs descendants limine le besoin dajouter des attributs class superflus, qui ne font que surcharger notre balisage. Dautre part, liminer les <div> l o lon dispose dun lment de niveau bloc prexistant peut contribuer conomiser quelques octets tout en rduisant le volume de code requis pour construire des mises en page complexes. Sil peut sembler trivial de grappiller quelques caractres seulement en utilisant ces mthodes, ramenes lchelle dun site entier, les conomies ralises peuvent devenir substantielles. Voil encore un outil contribuant un balisage lger et structur. partir de ce balisage, nous avons galement tudi comment utiliser les slecteurs descendants pour styler un plan de site structur autour de listes non ordonnes imbriques. Chaque niveau du plan peut se voir appliquer un style distinct sans quil soit ncessaire de recourir des attributs class supplmentaires: l encore, nous conomisons des octets de code et nous nous facilitons la tche pour toute mise jour future. Vive le code compact!

10

Le Document Object Model ouDOM


Pour conclure cette premire partie, voici un chapitre qui prend un peu daltitude par rapport au XHTML et prsente le Document Object Model (modle objet de document) ou DOM. Nous allons y aborder le concept des nuds et la structure arborescente des documents laide dexemples pratiques rdigs en langage JavaScript. Nous en profiterons pour prsenter quatre mthodes de ce langage, destines travailler sur la structure arborescente et dont vous pourrez rapidement constater lintrt pratique: getElementById, getElementsByTagName, getAttribute et setAttribute.

D pour document
Le Document Object Model ne peut pas fonctionner sans un document. Lorsque vous crez une page web et que vous la chargez dans un navigateur web, le DOM se rveille et entre en action. Il prend le document que vous avez rdig et le transforme en un objet. En langage de tous les jours, le mot "objet" nest gure parlant. Il est simplement synonyme de chose. Par contre, au niveau des langages de programmation, le mot "objet" revt un sens bien spcifique.

Objets du dsir
Les objets ne sont, en soi, que des "paquets" de donnes qui caractrisent lobjet. Il sagit dune part des variables, que lon appelle proprits de lobjet, dautre part des fonctions qui peuvent tre excutes sur lobjet, appeles mthodes. Un objet est cr partir dun prototype que lon appelle classe, qui dfinit la structure gnrale et le comportement des objets associs. Pour chaque objet cr, on parle alors dinstance de la classe. En JavaScript, qui est le langage utilis pour tous les exemples de ce chapitre, il existe trois types dobjets: les objets dfinis par lutilisateur, crs de toutes pices par le programmeur, que nous nallons pas traiter ici; les objets natifs du type Array (tableau), Math et Date, qui font partie intgrante de JavaScript; les objets htes fournis par le navigateur. Depuis les premiers jours de JavaScript, des objets htes trs importants ont t mis la disposition des auteurs de scripts. Parmi ceux-ci, lobjet le plus fondamental est lobjet window. Cet objet nest rien de moins quune reprsentation de la fentre du navigateur mme. On fait bien souvent rfrence aux proprits et mthodes de lobjet window en tant que Browser

164

Se faire plaisir aveclebalisage

Object Model (cest--dire modle objet du navigateur), mme sil serait peut-tre plus correct, smantiquement parlant, dutiliser le terme Window Object Model (ou modle objet de fentre). Le Browser Object Model prsente des mthodes du type window.open et window.blur qui, incidemment, sont responsables de toutes les ennuyeuses fentres pop-up et pop-under accablant le Web de nos jours. Ce nest ds lors gure surprenant que JavaScript ait si mauvaise rputation! Par chance, nous nallons pas vraiment travailler sur le Browser Object Model. Je vais plutt me concentrer sur ce que contient la fentre du navigateur. Lobjet qui gre le contenu dune page web est lobjet document. Pour le reste de ce chapitre, nous aborderons exclusivement les proprits et mthodes de lobjet document. Voil donc qui explique le rle des lettresD (document) etO (objet) de lacronyme DOM. Mais quen est-il de la lettreM?

Pour accder au modle, tapezM


LeM de lacronyme DOM reprsente le mot Model (modle), mais il pourrait aussi fort bien, en anglais, dsigner le terme Map (cest--dire un plan, une carte). Le Document Object Model reprsente la page web actuellement charge dans la fentre du navigateur et celui-ci fournit un plan (ou modle) de la page. Vous pouvez utiliser JavaScript pour lire ce plan. Les plans exploitent certaines conventions comme la direction, les contours et chelles. Pour pouvoir lire un plan, vous devez comprendre ces conventions et il en va de mme avec le Document Object Model. Afin de tirer des informations du modle, vous devez comprendre les conventions utilises pour reprsenter le document. La convention essentielle utilise par le Document Object Model est la reprsentation du document sous la forme dun arbre. Plus spcifiquement, le document est reprsent comme un arbre gnalogique. Un arbre gnalogique est un autre exemple de modle. Un tel arbre reprsente une famille relle, dcrit les relations entre membres de la famille et utilise des conventions du type parent, enfant et frre ou sur. Ces conventions peuvent servir reprsenter des relations potentiellement complexes: un membre de la famille peut tre le parent dun autre, tout en tant lenfant dun troisime membre et frre ou sur dautres membres encore. Le modle darbre gnalogique fonctionne tout aussi bien lorsquil sagit de reprsenter un document crit en (X)HTML. Jetons un coup dil cette page web trs simple (voir Figure10.1).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/ xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Liste de courses</title>

Le Document Object Model ouDOM

165

</head> <body> <h1> acheter</h1> <p title="un petit rappel">Noublie pas dacheter cela&nbsp;:</p> <ul id="courses"> <li>Une conserve de haricots</li> <li>Du fromage</li> <li>Du lait</li> </ul> </body> </html>

Figure10.1
Page web lmentaire.

Le graphe de la Figure10.2 illustre ce code.


Figure 10.2
Arborescence des lments dune page web simple.
html

head

body

meta

title

h1

ul

li

li

li

166

Se faire plaisir aveclebalisage

Parcourons la structure de la page web pour voir de quoi elle est compose et montrons pourquoi elle est si bien reprsente par le modle prsent la Figure10.2. Aprs la dclaration DOCTYPE, le document dbute par une balise ouvrante <html>. Tous les autres lments de la page web sont contenus dans cet lment, ce qui signifie quil est un parent. Parce quil contient la totalit des lments de la page, llment <html> na lui-mme pas de parent. Il na pas non plus de frre ou sur. Dans larbre, cet lment <html> est donc la racine. Llment racine est html. toutes fins utiles, llment html est le document. Si nous descendons dun niveau, nous dcouvrons deux branches: <head> et <body>. Ces deux lments sont cte cte, ce qui en fait donc des lments frres. Ils partagent le mme parent, <html>, mais ils possdent tous deux des enfants, ce qui en fait aussi des parents. Llment <head> a deux enfants: <meta> et <title> (qui sont frres lun de lautre). Les enfants de llment <body> sont <h1>, <p> et <ul> (tous frres les uns des autres). Si nous descendons encore plus bas dans larborescence, nous constatons que <ul> est galement un parent. Il a trois enfants, tous des lments <li>. Grce ces conventions simples de relations familiales, nous pouvons obtenir de nombreuses informations sur les relations entre les lments. Ainsi, quelle est la relation entre <h1> et <p>? La rponse est quils sont frres. Quelle est la relation entre <body> et <ul>? <body> est le parent de <ul>. <ul> est un enfant de <body>. Si vous pouvez voir les lments dun document comme une arborescence de relations familiales, vous utilisez alors les mmes termes que le DOM. Toutefois, la dnomination d"arbre gnalogique" nest pas tout fait correcte et il est plus exact de parler darborescence de nuds.

Nuds
Le terme nud provient du domaine des rseaux, o on lutilise pour dsigner un point de connexion un rseau. Un rseau est une collection de nuds. Dans le monde rel, tout est constitu datomes. Les atomes sont les nuds du monde rel. Mais les atomes eux-mmes peuvent tre dcomposs en particules plus petites, dites subatomiques. Ces particules subatomiques sont galement considres comme des nuds. Avec le Document Object Model, la situation est trs comparable. Un document est une collection de nuds jouant le rle de branches et de feuilles dans larborescence du document. Il existe un certain nombre de types de nuds diffrents. Tout comme les atomes contiennent des particules subatomiques, certains types de nuds contiennent dautres types de nuds. Nud lment Lquivalent de latome dans le DOM est le nud lment.

Le Document Object Model ouDOM

167

Lorsque jai dcrit la structure du document reprsentant ma liste de courses, jai utilis des lments tels que <body>, <p> et <ul>. Les lments sont les briques constitutives des documents sur le Web, et cest lagencement de ces lments dans un document qui lui donne sa structure. La balise fournit le nom dun lment. Les lments "paragraphe" portent le nomp, les listes non ordonnesul et les items de listeli. Les lments peuvent contenir dautres lments. Tous les lments des items de liste dans notre document sont contenus dans un lment de liste non ordonne. En fait, le seul lment qui nest pas contenu dans un autre lment est llment <html>. Cest la racine de notre arborescence de nuds. Nud texte Les lments ne sont quun type de nud parmi plusieurs. Si un document se composait uniquement dlments vides, il aurait une structure, mais le document lui-mme naurait gure de contenu. Sur le Web, o le contenu est roi, lessentiel du contenu est fourni par le texte. Dans notre exemple, llment <p> contient le texte "Noublie pas dacheter cela&nbsp;:". Il sagit dun nud texte. En XHTML, les nuds texte font toujours partie de nuds lments, mais un lment ne contient pas forcment de nuds texte. Dans le document correspondant notre liste de courses, llment <ul> ne contient pas directement de texte. Il contient dautres nuds lments (les lments <li>) qui, eux, contiennent des nuds texte. Nud attribut Il existe divers autres types de nuds mais je voudrais simplement en mentionner ici un dernier. Les attributs servent donner des informations plus prcises sur un lment. Lattribut title, par exemple, peut tre utilis dans nimporte quel lment afin de prciser son contenu:
<p title="un petit rappel">Noublie pas dacheter cela&nbsp;:</p>

Dans le Document Object Model, title="un petit rappel" est un nud attribut, comme lillustre la Figure 10.3. Parce que les attributs figurent toujours dans les balises ouvrantes, les nuds attributs font systmatiquement partie de nuds lments. Un lment ne contient pas forcment dattribut, mais un attribut est toujours contenu dans un lment.

168

Se faire plaisir aveclebalisage

Figure 10.3
Un nud lment contient un nud attribut et un nud texte.

nud lment

title= "un petit rappel"


nud attribut

N'oublie pas d'acheter cela &nbsp;:


nud texte

Dans notre exemple de document, vous verrez que nous avons ajout lattributid la liste non ordonne (<ul>). Vous devriez maintenant tre habitu aux attributs id et class, que nous avons dj exploits dans les chapitres prcdents pour appliquer nos CSS. Notre introduction au DOM donne nanmoins un clairage nouveau aux CSS.
Nous navons prsent ici que les principaux types de nuds mais, si vous souhaitez approfondir le sujet, la source de rfrence est, comme laccoutume, le site du W3C : http://www. w3.org/DOM/ est la page portail sur le site du W3C pour tout ce qui concerne DOM (il existe des traductions en franais des diffrentes spcifications, qui sont toutes rpertories sur la page http://www.w3.org/2003/03/Translations/byLanguage?language=fr). La liste complte des types de nuds figure dans la spcification de niveau 1 (plus prcisment, elle est disponible ladresse http://www.w3.org/TR/REC-DOM-Level-1/level-one-core. html#ID-1590626202).

Le DOM, les CSS et les pages web Le DOM nest pas la seule technologie qui interagit avec la structure des pages web. Les feuilles de style CSS visent indiquer au navigateur la faon dafficher le contenu dun document. Nous verrons dans la seconde partie de cet ouvrage que, linstar du JavaScript, il est possible de dclarer les styles soit dans len-tte <head> dun document (entre des balises <style>), soit dans une feuille de style externe. La syntaxe pour crer un style avec CSS est analogue celle des fonctions JavaScript:
slecteur { proprit: valeur; }

Les dclarations de style peuvent servir spcifier les couleurs, polices et tailles utilises par le navigateur pour afficher les lments:
p { color: yellow;

Le Document Object Model ouDOM

169

font-family: "arial", sans-serif; font-size: 1.2em; }

Lhritage est une fonctionnalit puissante des CSS. Celles-ci voient le contenu dun document comme une arborescence de nuds, celle du DOM. Les lments constitutifs de larborescence de nuds hritent des proprits de style de leurs parents. Ainsi, dclarer des couleurs ou des polices pour llment body appliquera automatiquement ces mmes styles tous les lments contenus dans llment body:
body { color: white; background-color: black; }

Ces couleurs seront appliques non seulement au contenu apparaissant directement dans la balise <body>, mais aussi tous les lments de niveau infrieur dans larborescence. La Figure 10.4 illustre notre page web dexemple, avec application des styles que nous venons de dfinir:
Figure 10.4
Page web dexemple avec application du style dfini pour llment body.

Lorsque vous appliquez des styles un document, il se peut que vous soyez amen cibler des lments spcifiques. Vous voudrez peut-tre afficher un paragraphe dune certaine couleur et dans une taille diffrente, tout en laissant les autres paragraphes inchangs. Pour atteindre ce niveau de prcision, vous aurez besoin dinsrer une information dans le document mme, afin didentifier ce paragraphe comme un cas particulier. Pour baliser les lments devant bnficier dun traitement spcial, vous pouvez utiliser lun des deux attributs class ouid.

170
class

Se faire plaisir aveclebalisage

Lattribut class peut apparatre autant de fois que vous le souhaitez et tre appliqu au nombre dlments de votre choix:
<p class="special">Ce paragraphe a une classe spciale.</p> <h2 class="special">Ce titre aussi.</h2>

Dans une feuille de style, on peut alors dfinir les styles appliquer tous les lments de cette classe:
.special { font-style: italic; }

Vous pouvez galement cibler certains types dlments dots de cette classe:
h2.special { text-transform: uppercase; }

id
Lattribut id ne peut apparatre quune seule fois dans une page web et vise identifier un lment de manire unique:
<ul id="courses">

Dans une feuille de style, on peut alors dfinir les styles appliquer spcifiquement cet lment:
#courses { border: 1px solid white; background-color: #333; color: #ccc; padding: 1em; }

Bien quelid lui-mme ne puisse tre appliqu quune seule fois, une feuille de style peut utiliserlid pour appliquer des styles des lments imbriqus au sein de llment identifi par lid:
#courses li { font-weight: bold; }

La Figure 10.5 illustre notre page web dexemple, avec application des styles que nous venons de dfinir sur une liste dote dun identifiant unique. Lattributid agit comme une sorte de "crochet" que CSS peut utiliser comme cible. La mise en uvre de DOM dans JavaScript peut aussi exploiter ce crochet.

Le Document Object Model ouDOM

171

Figure 10.5
Page web dexemple avec application dun style spcifique la liste.

getElementById
La mise en uvre de DOM dans JavaScript possde une mthode appele getElementById, qui fait exactement ce que son nom signifie en anglais: elle vous permet daccder directement au nud lment correspondant lid spcifi. Rappelez-vous que JavaScript est sensible la casse: par consquent, getElementById doit toujours tre crit en respectant les majuscules et minuscules. Si vous crivez GetElementById ou getElementbyid, vous nobtiendrez pas les rsultats attendus. Cette mthode est une fonction associe lobjet document. Une fonction est toujours suivie de parenthses contenant ses arguments. getElementById accepte un seul argument: lid de llment auquel vous souhaitez accder, encadr par des guillemets simples ou doubles.
document.getElementById(id)

Voici un exemple:
document.getElementById("courses")

On fait ici rfrence lunique lment dans lobjet document auquel a t affect lattribut HTMLid "courses". Cet lment correspond galement un objet. Vous pouvez le vrifier par vous-mme au moyen de loprateur typeof : cette instruction renvoie la nature de llment cibl (chane, nombre, fonction, valeur boolenne ou objet). La mthode employe dans lexemple ci-dessous pour ajouter du JavaScript un document est loin dtre optimale en termes de suivi du code. Toutefois, elle permet de lancer plus rapidement le test souhait. Insrez-donc les quelques lignes de code JavaScript dans le

172

Se faire plaisir aveclebalisage

document correspondant notre liste de courses, en les plaant juste avant la balise fermante </body>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/ xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Liste de courses</title> </head> <body> <h1> acheter</h1> <p title="un petit rappel">Noublie pas dacheter cela&nbsp;:</p> <ul id="courses"> <li>Une conserve de haricots</li> <li>Du fromage</li> <li>Du lait</li> </ul> <script type="text/javascript"> alert(typeof document.getElementById("courses")); </script> </body> </html>

Lorsque vous chargez le fichier XHTML dans un navigateur web, vous tes accueilli par une fentre pop-up indsirable vous indiquant la nature de document. getElementById("courses"). Il sagit dun objet. La Figure10.6 illustre la bote de dialogue dalerte rvlant la nature de llment vis:
Figure 10.6
Fentre pop-up indiquant la nature dun nud lment.

En fait, chaque lment prsent dans un document est un objet et, grce aux fonctions associes au DOM, vous pouvez accder chacun de ces objets.

Le Document Object Model ouDOM

173

Manifestement, il nest pas indispensable daffecter un identifiant unique chaque lment dun document: ce serait disproportionn. Par chance, lobjet document propose une autre mthode pour accder des lments.

getElementsByTagName
Si vous utilisez la mthode getElementsByTagName, vous accdez instantanment un tableau dont les lments sont toutes les occurrences dune balise donne. Comme get ElementById, cest une fonction qui accepte un seul argument, en loccurrence lintitul de la balise:
Element.getElementsByTagName(balise)

Elle ressemble beaucoup getElementById; cependant, cette fois, vous pouvez rcuprer des lments, au pluriel. Soyez prudent lorsque vous crivez vos scripts et faites attention ne pas crire getElementsById et getElementByTagName au lieu de getElementById et getElementsByTagName. Voici cette fonction en action:
document.getElementsByTagName("li")

Le rsultat est un tableau contenant tous les items de liste figurant dans lobjet document. Comme avec tout autre tableau, vous pouvez utiliser la proprit length pour obtenir le nombre total dlments. Supprimez le code dalerte que vous avez, un peu plus tt, plac entre les balises <script> et remplacez-le par ceci:
alert(document.getElementsByTagName("li").length);

Vous obtenez ainsi le nombre total ditems de liste dans le document, en loccurrence trois. Chaque valeur dans le tableau est un objet. Vous pouvez vrifier cela par vous-mme, en parcourant le tableau et en utilisant la fonction typeof sur chaque valeur. Pour ce faire, essayez par exemple dexploiter une boucle for:
for (var i=0; i < document.getElementsByTagName("li").length; i++){ alert(typeof document.getElementsByTagName("li")[i]); }

Mme si un seul lment correspond au nom de balise spcifi, getElementsByTagName renvoie toujours un tableau. Dans ce cas, sa longueur est simplement de1. Vous devez trouver quil est un peu pnible de taper systmatiquement document. getElementsByTagName("li") et que le code commence manquer de lisibilit.

174

Se faire plaisir aveclebalisage

Vouspouvez rduire la quantit de texte et amliorer du mme coup la clart de votre code en crant une variable pour contenir document.getElementsByTagName("li"). Remplacez linstruction dalerte qui figure entre les balises <script> par les instructions suivantes:
var items = document.getElementsByTagName("li"); for (var i=0; i < items.length; i++) { alert(typeof items[i]); }

Votre page affiche maintenant trois botes de dialogue dalerte, toujours aussi ennuyeuses, et chacune annonant la mme information: "object". Vous pouvez aussi utiliser avec getElementsByTagName un caractre de remplacement, ce qui signifie que vous pouvez crer un tableau pour chaque balise figurant dans le document. Le caractre de remplacement gnrique (lastrisque) doit tre encadr par des guillemets pour le diffrencier de loprateur de multiplication. Le caractre de remplacement vous donne le nombre total de nuds lments dans un document:
alert(document.getElementsByTagName("*").length);

Vous pouvez galement combiner getElementsByTagName et getElementById. Jusqu prsent, nous avons seulement appliqu getElementsByTagName lobjet document mais, si vous cherchez dterminer combien ditems de liste sont contenus dans llment didentifiant "courses", vous pouvez appliquer getElementsByTagName cet objet particulier:
var shopping = document.getElementById("courses"); var items = shopping.getElementsByTagName("*");

Dsormais, le tableau contient uniquement les lments affichs dans la liste "courses". Dans le cas prsent, il se trouve que le nombre total ditems de liste de llment "courses" est identique au nombre total ditems de liste dans le document entier:
alert (items.length)

Sil tait encore besoin dune preuve, vous pouvez vrifier que chacun de ces lments est bien un objet:
for (var i=0; i < items.length; i++) { alert(typeof items[i]); }

Pour faire le point


ce stade, laffichage de botes de dialogue dalerte contenant le mot "object" devient franchement exasprant. Je crois que ma dmonstration est claire: non seulement chaque nud lment dun document est un objet, mais chacun de ces objets est livr avec un arsenal de mthodes grce au DOM. Exploiter ces mthodes intgres vous permet de rcuprer des

Le Document Object Model ouDOM

175

informations au sujet de nimporte quel lment dun document. Vous pouvez mme en modifier les proprits. Voici un rsum rapide de ce que nous avons vu jusqu prsent: Un document est une arborescence de nuds. Il existe diffrents types de nuds: lments, attributs, texte,etc. Vous pouvez accder directement un nud lment donn laide de getElementById. Vous pouvez accder directement une collection de nuds lments au moyen de getElementsByTagName. Chacun de ces nuds est un objet. Je vais maintenant vous prsenter certaines des proprits et mthodes associes ces objets.

getAttribute
Jusqu prsent, vous avez vu deux solutions diffrentes pour accder des nuds lments, reposant sur les mthodes getElementById et getElementsByTagName. Une fois que vous avez rcupr llment, vous pouvez obtenir les valeurs de ses attributs grce la mthode getAttribute.
getAttribute est une fonction qui accepte un seul argument, lattribut dont vous souhaitez obtenir la valeur:
object.getAttribute(attribut)

Contrairement aux autres mthodes que nous avons abordes, on ne peut pas utiliser getAttribute sur lobjet document. Elle ne peut tre applique qu un objet dun nud lment. Ainsi, vous pouvez lutiliser conjointement getElementsByTagName pour obtenir lattribut title de chaque lment <p>:
var paras = document.getElementsByTagName("p"); for (var i=0; i < paras.length; i++ ){ alert(paras[i].getAttribute("title")); }

Si vous intgrez ce code la fin du document reprsentant notre liste de courses avant de rafrachir la page dans votre navigateur web, vous serez salu par une bote de dialogue dalerte contenant le texte "un petit rappel". Dans notre liste de courses, il nexiste quun seul lment <p>, qui possde un attribut title. En prsence dautres lments <p> non dots dattributs title, getAttribute("title") renverrait alors la valeur null. En JavaScript, null signifie labsence de valeur. Vous pouvez

176

Se faire plaisir aveclebalisage

vrifier ce point par vous-mme en insrant le paragraphe suivant aprs le paragraphe existant dans notre document:
<p>Ceci est juste un test</p>

Rechargez maintenant la page. Cette fois, vous verrez apparatre deux botes de dialogue dalerte. La seconde est compltement vide ou indique simplement "null", suivant la manire dont votre navigateur choisit dafficher ce type de valeurs. Nous pouvons modifier notre script afin quil ne fasse apparatre de message que lorsquun attribut title existe rellement. Nous allons ajouter une instructionif pour vrifier que la valeur renvoye par getAttribute est non nulle. Pendant que nous y sommes, nous allons employer quelques variables supplmentaires pour rendre le script plus lisible:
var paras = document.getElementsByTagName("p"); for (var i=0; i< paras.length; i++) { var title_text = paras[i].getAttribute("title"); if (title_text != null) { alert(title_text); } }

Si vous rafrachissez de nouveau la page, une seule bote de dialogue dalerte saffiche, contenant la valeur "un petit rappel". La Figure10.7 illustre cet exemple.
Figure 10.7
Affichage de la valeur de lattribut title associ un paragraphe du document.

Nous pouvons rendre le code encore plus synthtique. Chaque fois que vous souhaitez vrifier quune valeur est non nulle, vous vrifiez finalement si cette valeur existe. Une manire abrge dcrire cela consiste donc utiliser cette valeur comme condition dans une instructionif. if (quelquechose) est un raccourci strictement quivalent if (quelquechose != null). La condition de linstructionif est vrifie si "quelquechose" existe; elle est ngative si "quelquechose" nexiste pas.

Le Document Object Model ouDOM

177

Nous pouvons donc allger notre code en crivant tout simplement if (texte_title) au lieu de if (texte_title ! = null). Pendant que nous y sommes, nous pouvons aussi placer linstruction dalerte sur la mme ligne que linstruction if, afin de rendre le code plus compact:
var paras = document.getElementsByTagName("p"); for (var i=0; i< paras.length; i++) { var texte_title = paras[i].getAttribute("title"); if (texte_title) alert(texte_title); }

setAttribute
Toutes les mthodes que vous avez vues jusqu prsent ont port sur lextraction dinformations. setAttribute est un peu diffrente. Elle vous permet de changer la valeur dun nud attribut. Comme getAttribute, cette mthode est une fonction qui ne sapplique qu des nuds lments. Toutefois, setAttribute prend deux arguments:
object.setAttribute(attribut,valeur)

Dans cet exemple, je vais accder llment did "courses" et lui donner un attribut title de valeur "liste de courses":
var shopping = document.getElementById("courses"); shopping.setAttribute("title","liste de courses");

Vous pouvez utiliser getAttribute pour vrifier que lattribut title a bien t affect:
var shopping = document.getElementById("courses"); alert(shopping.getAttribute("title")); shopping.setAttribute("title","liste de courses"); alert(shopping.getAttribute("title"));

Actualiser la page affichera alors deux botes de dialogue dalerte. La premire, qui est excute avant setAttribute, est vide ou affiche "null". La seconde, qui est excute aprs que lon a dfini lattribut title, annonce "liste de courses". Dans cet exemple, nous avons dfini un attribut l o, auparavant, il nen existait pas. La mthode setAttribute cre lattribut puis en dfinit la valeur. Si vous utilisez setAttribute sur un nud qui possde dj lattribut spcifi, lancienne valeur sera crase. Dans le document qui reprsente notre liste de courses, llment <p> possde dj un attribut title de valeur "un petit rappel". Pour modifier cette valeur, utilisez setAttribute:
var paras = document.getElementsByTagName("p"); for (var i=0; i< paras.length; i++) {

178

Se faire plaisir aveclebalisage

var title_text = paras[i].getAttribute("title"); if (title_text) { paras[i].setAttribute("title","un tout nouvel intitul"); alert(paras[i].getAttribute("title")); } }

Voil qui applique la valeur "un tout nouvel intitul" lattribut title de chaque lment <p> du document pour lequel il existait dj un attribut title. Dans le document reprsentant notre liste de courses, la valeur "un petit rappel" a t modifie. Il convient de noter que, mme lorsquun document a t modifi par setAttribute, vous ne pourrez pas observer le changement dans le code source du document mme. Vous devez slectionner la section correspondante dans la page puis utiliser loption Code source de la slection de votre navigateur web (si cette option existe). En effet, le script JavaScript/ DOM met jour dynamiquement le contenu de la page aprs que celle-ci a t charge. La vritable puissance du DOM est de permettre la mise jour du contenu dune page sans avoir rafrachir la page dans le navigateur.

Et si on parlait contenu?
Identifier le type dun nud: nodeType
Nous avons vu jusqu prsent quil est facile daccder aux divers lments de cette arborescence et de dialoguer avec leurs attributs. Nous allons maintenant aborder comment interagir avec le contenu mme des nuds. Pour commencer, rappelons que nous travaillons sur deux types de nuds: les nuds lments et les nuds texte. Le DOM est justement capable didentifier le type dun nud grce la proprit nodeType qui contient respectivement les valeurs 1 pour un nud lment et 3 pour un nud texte. Pour illustrer cela, poursuivons nos manipulations sur notre liste de courses. Dans lexemple prcdent, nous avons rcupr lensemble des balises <p> grce linstruction getElementsByTagName("p") et nous avons constat que le rsultat est renvoy sous forme de tableau, mme si celui-ci ne doit contenir quune seule valeur. Nous avons aussi fait appel un index de positionnement pour numrer le contenu de ce tableau. Vrifions maintenant le type de nud que possde chacun des lments dans ce tableau.
var paras = document.getElementsByTagName("p"); for (var i=0; i < paras.length; i++) { alert(paras[i].nodeType) }

Rafrachissez la page correspondant la liste de courses dans votre navigateur: ce petit bloc de code isole la seule balise <p> figurant dans le balisage et une bote de dialogue dalerte renvoie alors la valeur1, traduisant un nud de type lment.

Le Document Object Model ouDOM

179

En revanche, le bloc de contenu hberg dans cette balise (Noublie pas dacheter cela&nbsp;:) est de type texte. Pour le voir, modifions la ligne de code contenue dans la boucle for suivant le modle ci-dessous:
alert(paras[i].firstChild.nodeType);

Cette ligne de code appelle une remarque: nous y utilisons la proprit firstChild, applique un nud de larborescence, cest--dire que nous consultons en fait le premier enfant de ce nud. La balise <p> est un nud de type lment qui joue un rle de conteneur: pour accder au contenu proprement dit, il faut descendre dans son arborescence et accder son premier enfant par lintermdiaire de firstChild. Rafrachir nouveau la page nous renvoie une bote de dialogue contenant la valeur3, qui correspond au contenu effectif de la balise <p> et confirme un nud de type texte.

Obtenir plus dinformations sur un nud: nodeName et nodeValue


ces deux valeurs de nodeType correspondent deux proprits, nodeName (qui renvoie le nom de balise lorsquil sagit dun nud de type lment) et nodeValue (qui renvoie le contenu dun nud lorsque celui-ci est de type texte). Modifions encore le code sur le modle suivant:
var paras = document.getElementsByTagName("p"); for (var i=0; i < paras.length; i++) { alert(paras[i].nodeType) alert(paras[i].nodeName) alert(paras[i].firstChild.nodeType) alert(paras[i].firstChild.nodeValue) }

Nous obtenons successivement quatre botes de dialogue dalerte, contenant les valeurs 1 (nodeType indiquant un nud lment), P (nodeName correspondant la balise <p>), 3 (nodeType correspondant au contenu de type texte) et Noublie pas dacheter cela : (nodeValue du contenu). Pour conclure cette section, ajoutons quil nest pas possible de modifier le nodeName dune balise, mais quil est trs simple de changer le nodeValue du contenu dun nud de type texte:
paras[i].firstChild.nodeValue = "Un nouveau texte dans la balise";

L encore, mme si le navigateur affiche le contenu modifi, le code source de la page est inchang: il contient toujours le code tel quil tait avant la modification, lors du chargement de la page.

180

Se faire plaisir aveclebalisage

Ajoutons quelques courses


DOM nous met disposition tout un ventail de mthodes qui nous permettent de crer facilement du contenu dans une page HTML. Pour illustrer ces fonctions, nous allons ajouter quelques lments notre liste de courses. Nous allons dans un premier temps modifier larborescence, pour lui ajouter une balise
<li>, avant dinsrer du contenu texte dans cet lment.

Crer un nud, quil soit de type lment ou texte, requiert toujours deux tapes. En ce qui concerne le nud de type lment, il faut tout dabord crer llment proprement dit et lassocier au document. On utilise pour cela la mthode createElement, que lon applique au document et laquelle on passe comme argument 'li' pour crer un item de liste. Llment est ensuite ancr dans larborescence lemplacement souhait, au moyen de la mthode appendChild(). En loccurrence, nous allons insrer llment cr la fin de notre liste non ordonne, cest--dire la suite des enfants de llment didentifiant courses. Pour le nud de type texte, qui va correspondre au contenu effectif de notre balise <li> nouvellement cre, nous devons galement commencer par crer llment de type texte en lassociant au document, cette fois au moyen de la mthode createTextNode() laquelle nous passons en argument le texte insrer (ici 'Des fruits secs'). Puis nous insrons le texte dans la balise qui doit le contenir, cest--dire la balise <li>. La traduction en JavaScript de ces explications correspond exactement au code ci-dessous. Modifions une fois encore le contenu des balises <script> dans le code HTML dexemple pour y insrer les lignes suivantes:
var element_li = document.createElement('li'); var courses = document.getElementById('courses'); courses.appendChild(element_li); var texte_li = document.createTextNode('Des fruits secs'); element_li.appendChild(texte_li);

Une fois la page HTML rafrachie dans le navigateur, llment supplmentaire apparat dans la liste de courses. Plutt simple et efficace, mme si le nouvel lment napparat toujours pas dans le code source de la page: le script JavaScript le gnre la vole, une fois la page charge. Dans ces deux derniers exemples, nous avons travaill sur du texte brut, ce qui rendait les choses simples. Mais comment grer un contenu balis en HTML?
Le cas peu vident des balises HTML imbriques Reprenons maintenant le code danalyse des types de nuds, prsent et utilis la section Obtenir plus dinformations sur un nud, et actualisons la page web pour analyser la balise ainsi modifie: Modifions le contenu du paragraphe <p> introduisant notre liste de courses pour lui ajouter une balise de mise en exergue:

Le Document Object Model ouDOM

181

<p title="un petit rappel">N'oublie pas <strong>d'acheter</strong> cela&nbsp;:</p> var paras = document.getElementsByTagName("p"); for (var i=0; i < paras.length; i++) { alert(paras[i].firstChild.nodeType) alert(paras[i].firstChild.nodeValue) }

Cette fois, bien que nous ayons toujours affaire un nud de type texte, la bote de dialogue dalerte ne renvoie pas la phrase complte: nous nobtenons que la premire partie, Noublie pas. En effet, le premier enfant de la balise <p> est bien un nud de type texte, mais la balise <p> comporte cette fois trois enfants et non pas un (comme ctait le cas prcdemment). La Figure10.8 illustre cela et montre lensemble des lments prsents.

N'oublie pas

<strong>

cela &nbsp;:

d'acheter

Figure10.8
Arborescence du contenu de la balise <p> et dtail de ses trois enfants.

182

Se faire plaisir aveclebalisage

Pour renvoyer lintgralit de la phrase en texte brut, il faudrait parcourir larborescence et filtrer les nuds un par un pour renvoyer uniquement le contenu des nuds de type texte. Coder cela entirement la main peut se rvler complexe mais cest la seule solution standard. Il existe en revanche une proprit non standard, mais qui nous permet de raliser lopration en une seule ligne de code: innerHTML.
innerHTML ne fait pas partie des spcifications du DOM mises par le W3C. Cest une proprit qui a t mise en place par Microsoft pour Internet Explorer et qui a t reprise, de manire parfois ingale, dans lensemble des navigateurs Internet. Avant de mettre en production votre code, vous devez donc vous assurer de son bon fonctionnement sur les diffrentes plates-formes cibles. Pour en savoir plus sur innerHTML, son histoire et son fonctionnement, vous pouvez commencer par consulter la page http://www.developer-x.com/content/innerhtml/, qui est dj trs complte. Reprenons notre exemple et adaptons le contenu de notre boucle de code Javascript afin dextraire la proprit innerHTML des lments <p> contenus dans le tableau:
var paras = document.getElementsByTagName("p"); for (var i=0; i < paras.length; i++) { alert(paras[i].innerHTML) }

Cette fois, si nous actualisons la page HTML, lensemble du contenu de la balise <p>, y compris le balisage interne, est bien renvoy par la bote de dialogue. Nous pouvons aussi exploiter innerHTML pour ajouter un lment ou modifier un lment existant. Ainsi, nous pouvons insrer dans la liste de courses un lment comportant du balisage HTML, suivant le modle dcrit dans lexemple dajout dun lment texte. Au lieu de crer un nud de type texte et de lajouter llment <li>, nous devons modifier la proprit innerHTML de llment <li>.
var element_li = document.createElement('li'); var courses = document.getElementById('courses'); courses.appendChild(element_li); element_li.innerHTML = 'Des <strong>fruits</strong> secs' ;

Un rafrachissement de la page fait apparatre la nouvelle ligne avec, mis en exergue, le mot fruits.

Pour conclure
Dans ce chapitre, nous vous avons prsent plusieurs proprits prvues par le Document Object Model et nous vous avons montr comment les manipuler avec JavaScript. Ces mthodes sont les pierres angulaires de nombreux scripts JavaScript/DOM et elles devraient vous permettre de crer vos premiers scripts. Toutefois, nous sommes loin davoir t exhaustifs sur le sujet, tant sur les fonctions DOM elles-mmes que sur les aspects de programmation (gestion des vnements, des exceptions, des documents lorsque le navigateur ne prend pas en charge JavaScript, etc.) qui dpassent largement le cadre de cet ouvrage. Si vous souhaitez approfondir ce sujet, nous vous suggrons de vous plonger dans des ouvrages ddis JavaScript, par exemple JavaScript, lessentiel du code et des commandes par Christian Wenz (CampusPress/Pearson France, 2007).

Partie
Styler en toute simplicit
Chapitre 11: Appliquer des CSS Chapitre 12: Styles pour limpression Chapitre 13: Mise en page avec les CSS Chapitre 14: Styler du texte Chapitre 15: Remplacement de texte par des images Chapitre 16: Styler llment <body> Chapitre 17: Pour aller encore plus loin

II

11

Appliquer des CSS


Si la premire partie de ce livre sest essentiellement focalise sur des exemples de balisage, nous avons galement abord la faon dappliquer des CSS ce balisage pour crer des effets graphiques et de style. Pour commencer cette seconde partie, nous allons voquer dans ce chapitre les diffrentes mthodes permettant dappliquer des CSS un document, un site ou mme un lment seul. Nous verrons aussi comment cacher les CSS aux navigateurs les plus anciens. Nous pourrons ainsi exploiter des techniques avances sans pour autant nuire la structure du balisage que tout navigateur ou priphrique doit pouvoir lire. Plus tard, la section Pour aller plus loin en fin de ce chapitre, nous nous intresserons aux feuilles de style alternatives, qui peuvent servir produire des thmes, fontes et couleurs multiples sans ncessiter de scripts ct serveur.

Comment appliquer des CSS un document?


Nous allons tudier quatre manires dappliquer des CSS un document, chacune prsentant ses propres avantages et inconvnients. Suivant la situation, lune ou lautre de ces mthodes se rvlera plus approprie. Chacune delles comprend un environnement valide et classique XHTML1.0 transitionnel pour le type de document, llment <html> et len-tte <head>. Voyons tout de suite la mthodeA.

MthodeA: l'lment <style>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Appliquer des CSS</title> <style type="text/css"> <![CDATA[ ... Dclarations CSS... ]]> </style> </head>

Cette mthode, galement connue sous la dnomination de feuille de style intgre au document (embedded style sheet, quon traduit aussi par feuille de style interne, incorpore,etc.), vous permet de rdiger toutes vos dclarations CSS directement dans le document XHTML. Llment <style> est situ au sein de la section <head> dune page et peut contenir autant de rgles CSS que vous le dsirez.

186

Styler en toute simplicit

Lattribut type et sa valeur text/css garantissent que le navigateur comprendra le type de langage de style que nous prsentons, et il est obligatoire. Nous utilisons aussi la syntaxe desection CDATA, que recommande le W3C pour cacher les rgles de styles aux navigateurs trop anciens pour les comprendre (www.w3.org/TR/xhtml1/#h-4.8).
Il existe deux faons de fournir un document XHTML: text/html (HTML simple) et application/ xhtml+xml (application XML). On peut prciser cette information dans len-tte du document, dans la balise <meta> laide de lattribut content. Toutefois, cela nest quindicatif et cest la manire dont le serveur fournit les pages qui prime. La majorit, pour ne pas dire la totalit des pages XHTML sont transmises comme des pages HTML simples, qui ne posent pas de problme dinterprtation par les navigateurs. Toutefois, si le serveur web hbergeant les pages est paramtr pour fournir des documents de type application/ xhtml+xml, on va au devant des ennuis. Les chevrons figurant dans le code JavaScript ou dans les styles CSS (utiliss en tant quoprateurs ou pour signaler des commentaires) peuvent alors interfrer avec la lecture du format XML et les rsultats sont imprvisibles. Pour viter ce genre de problmes, on dispose de deux solutions: externaliser les feuilles de style (ou les scripts), comme nous le verrons dans les mthodes suivantes, ou recourir aux balises CDATA comme dans cette mthode. Pour en savoir plus sur ce sujet, nous vous recommandons deux excellents articles: http://www.456bereastreet.com/archive/200501/the_perils_of_using_ xhtml_properly/; https://developer.mozilla.org/en/Properly_Using_CSS_and_JavaScript_in_ XHTML_Documents.

La comprhension nest pas toujours totale Un inconvnient majeur li la mthodeA est le fait que certains navigateurs trop anciens essaient autant que possible de rendre les rgles CSS hberges dans les lments <style>. Cette caractristique peut vous poser un problme si vous avez insr des rgles avances de mise en page et de positionnement, que seuls les navigateurs rcents peuvent comprendre. Si des rgles CSS complexes sont places dans des lments <style>, il est possible que les utilisateurs de vieux navigateurs reoivent un code confus et inutilisable. Pas de mise en cache Un autre inconvnient des feuilles de style intgres est que, du fait quelles sont hberges dans la page mme, il est indispensable de les tlcharger chaque fois que la page est charge. Par contre, grce la mthode qui suit, on peut ne tlcharger les styles quune seule fois (ils sont alors mis en cache par le navigateur). Toute modification devient fastidieuse Consquence directe du fait que les feuilles de style intgres apparaissent dans la page HTML, faire appel une feuille de style intgre signifie galement dupliquer les styles sils doivent tre appliqus plusieurs pages du site. Si vous devez modifier ces styles, vous devrez ritrer vos modifications sur chaque page incluant la feuille de style. Ce qui reprsente un travail fastidieux. Et considrable.

Appliquer des CSS

187

Un avantage pour le dveloppement Un aspect positif (quand mme): je trouve que, pour la phase de cration et de validation des CSS, il est trs pratique dcrire toutes les rgles dans la page que je teste au moyen de la mthodeA. Je travaille ainsi sur un unique document pour le balisage et pour le style, ce qui facilite les modifications frquentes. Une fois que les tests seront concluants, jappliquerai les rgles CSS la version publique par le biais dune autre mthode. Passons donc de nouvelles solutions.

MthodeB: feuille de style externe


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Appliquer des CSS</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head>

La mthodeB illustre le moyen de lier une feuille de style externe: dans ce cas, toutes les dclarations CSS sont conserves dans un fichier distinct, auquel il est ensuite fait rfrence la section <head> du document XHTML, laide de llment <link>. Lattribut href pointe vers lemplacement du fichier. La valeur peut tre un chemin relatif (comme cest le cas dans la mthodeB) ou un chemin absolu utilisant ladresse http:// complte du document. Notez aussi que llment <link> est un lment vide ou autofermant, qui doit donc contenir le caractre/ la fin de la balise. Fichier spar = maintenance facilite Conserver toutes vos rgles CSS dans un fichier distinct de votre balisage prsente un avantage vident: toute modification de style devant porter sur un site entier peut intervenir dans cet unique fichier, plutt que de devoir rpter les dclarations CSS dans chaque page (ce qui serait le cas avec la mthodeA). Cela, bien sr, est particulirement critique pour les sites de grande envergure, o des centaines, voire des milliers, de pages peuvent partager les mmes instructions de style, hberges dans un unique document. Un unique tlchargement Un avantage supplmentaire de la feuille de style externe est que, souvent, le fichier de style nest tlcharg quune seule fois et mis en cache par le navigateur. En cas de visites rptes, ou lorsque lutilisateur consulte plusieurs pages faisant appel la mme feuille de style, il en rsulte un gain de temps en termes de tlchargement.

188

Styler en toute simplicit

Un problme toujours pas rsolu Tout comme la mthodeA, la mthodeB laisse la porte ouverte linterprtation de la CSS par les navigateurs anciens, dont la prise en charge CSS est limite. Tout style conu pour les navigateurs modernes peut engendrer des dgts considrables dans un navigateur non pris en charge. Et cest dj la deuxime fois que je mentionne ce problme la mthode suivante devrait donc le rsoudre, non?

MthodeC: @import
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Appliquer des CSS</title> <style type="text/css"> <![CDATA[ @import "styles.css"; ]]> </style> </head>

Cette mthode est analogue la mthode B. Cependant, grce la rgle @import, nous pouvons importer des CSS depuis un document externe, soit partir de son chemin relatif (comme cest le cas dans cet exemple) ou de son chemin absolu. La mthode C prsente les mmes avantages que la mthode B (reposant sur llment
<link>). Du fait que les styles sont conservs dans un document externe, toute modifica-

tion ou mise jour de cet unique fichier peut impacter lensemble du site, et ce, de manire simple et rapide. Les feuilles de style externes sont mises en cache par le navigateur, ce qui reprsente un gain de temps de tlchargement pour les pages important le mme fichier. Jeu de cache-cache Lavantage historique majeur que reprsentait la mthodeC est que les versions4.x et infrieures de Netscape ne prenaient pas en charge la rgle @import, ce qui avait pour effet de "cacher" la CSS rfrence. Ctait assurment une astuce pratique dans la mesure o elle nous permettait de limiter les rgles CSS avances (pour les tches telles que la mise en page et les dtails de conception graphique) aux navigateurs les plus rcents, qui pouvaient les grer, tandis que les navigateurs plus anciens les ignoraient. Le problme avec Netscape4.x tait quil croyait prendre en charge les CSS aussi bien que les navigateurs qui les graient effectivement. Par consquent, mis part lexception de Netscape4.x, nous pouvions et pouvons toujours envoyer toute CSS et cest le navigateur qui dcide sil peut, ou non, lafficher.

Appliquer des CSS

189

Cest un point essentiel dans la construction de sites web respectueux des standards: nous pouvons sparer autant que possible notre balisage structur de la prsentation et rserver les styles et autres dtails graphiques aux navigateurs qui les grent effectivement. Cet aspect de la rgle _@import_ tient aujourdhui davantage de la curiosit historique que dune fonctionnalit rellement exploitable. Toutefois, nous verrons un peu plus loin que cette rgle est toujours dactualit car elle permet de lier entre elles des feuilles de styles CSS, ce qui nous permet de gagner en modularit et en souplesse. Au final, les concepteurs et dveloppeurs web peuvent ainsi aller de lavant plutt que continuer sappuyer sur des mthodes destines des versions prhistoriques de navigateurs, lesquels peuvent stouffer la premire rgle CSS un peu avance. Avec ou sans style titre de comparaison, jetez un il aux Figures11.1 et11.2, qui prsentent respectivement mon site personnel avec la CSS complte puis sans, tel quil serait rendu dans un vieux navigateur. La structure sans CSS reste vidente, lisible et utilisable par tous. Si je navais pas cach la CSS requise pour prsenter le site, les utilisateurs des anciens navigateurs lauraient reue sous une forme illisible.

Figure11.1
Mon site personnel, avec CSS.

190

Styler en toute simplicit

Figure11.2
La mme page, sans CSS, telle quelle safficherait dans un vieux navigateur.

CombinerB etC pour des feuilles de style multiples


Il peut se rvler avantageux dimporter plusieurs feuilles de style dans un document. Ainsi, vous pouvez par exemple conserver toutes les informations de mise en page dans une feuille de style, tandis quune autre hbergera les rgles de typographie. Pour les prsentations complexes, la maintenance dun nombre lev de rgles peut sen trouver facilite. Leffet camlon Dans le cas du site web du magazine Fast Company, javais souhait changer les couleurs du site tous les mois pour les assortir la couverture papier du mensuel. Pour faciliter ce changement de routine, jai conserv toutes les rgles CSS relatives aux couleurs dans un seul fichier, tandis que le reste des rgles CSS, qui ntaient pas modifies, taient hberges dans un autre fichier. Chaque mois, je pouvais ainsi raliser des mises jour faciles et rapides sur le fichier de couleurs, sans avoir parcourir les centaines de rgles requises pour la prsentation du site. Modifier cet unique fichier permettait de changer instantanment les couleurs de lensemble du site. Comment procder Pour combiner les mthodesB etC et importer plusieurs feuilles de style la fois, nous devons utiliser llment <link> dans len-tte <head> du document pour rfrencer un fichier CSS matre, exactement comme lillustre la mthodeB avec un lien vers un fichier styles.css. Ce fichier styles.css contiendrait alors simplement des rgles @import permettant dintgrer autant de fichiers CSS que souhait.

Appliquer des CSS

191

Si, par exemple, nous souhaitions importer trois feuilles de style, lune ddie la mise en page, la deuxime aux fontes et la troisime aux couleurs, le fichier styles.css contiendrait alors:
/* cach pour les navigateurs anciens */ @import url("miseenpage.css"); @import url("fontes.css"); @import url("couleurs.css");

Dsormais, notre lment <link> peut rester identique sur lensemble du site et ne rfrencer que le fichier styles.css. Cet unique fichier peut importer plusieurs feuilles de style grce des rgles @import. Toute nouvelle feuille de style peut tre ajoute dans ce fichier ce qui, en retour, affectera la totalit du site. Cela facilite normment les mises jour et le brassage des fichiers CSS. Si, par exemple, vous souhaitez ultrieurement subdiviser vos CSS en quatre fichiers au lieu des trois de lexemple, vous pouvez facilement modifier les URL dimport dans cet unique fichier, plutt que davoir modifier le balisage XHTML de tous les documents du site.

Styles "lo-fi" et "hi-fi"


Une autre astuce, lorsque lon utilise la rgle @import de la mthode C pour cacher les CSS aux vieux navigateurs, consiste exploiter leffet de cascade des CSS pour mettre disposition des styles dits "lo-fi" (lisibles par tout navigateur, rcent ou ancien) au moyen de la mthodeA ouB, puis faire appel @import pour fournir des styles avancs aux navigateurs qui les prennent en charge. Les navigateurs anciens ne reoivent que ce quils peuvent effectivement grer, tandis que les navigateurs plus rcents reoivent tous les styles prvus. Voyons un peu comment cela pourrait se traduire dans le code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Appliquer des CSS</title> <link rel="stylesheet" type="text/css" href="lofi.css" /> <style type="text/css"> @import "hifi.css"; </style> </head>

Le fichier lofi.css contient les rgles CSS basiques telles que couleurs des liens et tailles des polices, tandis que hifi.css peut contenir des rgles avances du type mise en page, positionnement et arrire-plans.

192

Styler en toute simplicit

Nous pouvons ainsi envoyer les versions "lo-fi" et "hi-fi" de la prsentation sans quil y ait besoin dun script ou dune identification ct serveur du navigateur utilis. Lordre est important Lordre dans lequel sont placs les lments <link> et <style> dans le balisage est fondamental. Le terme de "cascade" dans CSS fait rfrence la priorit donne aux rgles suivant leur ordre dapparition. Ainsi, du fait que les navigateurs modernes prennent en charge les deux mthodes, ils reoivent les deux feuilles de style et appliquent tous les styles de chacune delles. Les rgles de styles dans hifi.css prendront le pas sur les styles se rfrant aux mmes lments, dfinis dans lofi.css. La raison? hifi.css apparat aprs lofi.css dans le balisage. Les navigateurs anciens vont ignorer hifi.css parce que nous avons utilis la rgle @import. Par consquent, ils nappliqueront que les rgles figurant dans lofi.css.

Adopter la cascade
Vous pouvez exploiter la proprit de cascade de CSS votre avantage de diffrentes manires. titre dexemple, vous pouvez imaginer un scnario dans lequel un site entier partage un fichier CSS externe pour toutes ses informations de mise en page, positionnement, fontes, couleurs,etc. Vous pouvez utiliser la mthodeC sur chaque page du site pour importer le fichier et le cacher aux navigateurs anciens. Supposons quil y ait sur le site une page particulire, qui partage toutes les informations de mise en page et de positionnement mais ncessite des fontes ou couleurs personnalises. Pour cette page donne qui diffre du reste du site, nous pouvons toujours importer le fichier CSS principal mais, juste aprs dans llment <style>, importer un second fichier CSS contenant les styles personnaliss. Tout style du second fichier CSS prendra le pas sur les styles disponibles dans le premier fichier CSS et faisant rfrence aux mmes lments. Voyons un exemple en guise dillustration. maitre.css contient les rgles CSS utilises par lensemble du site pour la structure, les fontes, et ainsi de suite, tandis que perso.css nest import que sur une page donne afin de modifier les styles de certains lments.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Appliquer des CSS</title> <style type="text/css"> @import "maitre.css"; @import "perso.css"; </style> </head>

Du fait que perso.css vient en seconde position dans lordre de balisage, ses dclarations prennent le pas sur toutes celles trouves dans maitre.css et portant sur les mmes lments.

Appliquer des CSS

193

Supposons, par exemple, que dans maitre.css nous fassions apparatre tous les lments <h1> en serif et en rouge, tandis que tous les lments <h2> apparaissent en serif et en bleu:
h1 { font-family: Georgia, serif; color: red; } h2 { font-family: Georgia, serif; color: blue; }

Sur notre page personnalise, nous souhaitons changer le style des lments <h1>, tandis que les lments <h2> demeureront inchangs. Dans perso.css, il nous suffit donc de dclarer le nouveau style pour <h1>:
h1 { font-family: Verdana, sans-serif; color: orange; }

Cette dclaration prendra alors le pas sur celle dfinie dans maitre.css, car perso.css est import en dernier lieu. Les pages qui importent perso.css aprs maitre.css verront leurs lments <h1> apparatre en police Verdana de couleur orange, tandis que les lments <h2> safficheront toujours dans une police serif et de couleur bleue: la dclaration trouve dans maitre.css nest pas crase par perso.css. Exploiter la proprit de cascade des CSS peut tre une solution pratique pour partager des styles communs et ne remplacer que ceux devant tre personnaliss, l o cest ncessaire.

MthodeD: styles intgrs au balisage


<h1 style="font-family: Georgia, serif; color: orange;">Ceci est un titre</h1>

Il existe une quatrime mthode permettant dappliquer des rgles CSS et que nous devons aussi aborder: les styles intgrs. Lattribut style peut tre ajout quasiment tout lment et permet dappliquer des rgles CSS directement au niveau de llment, comme lillustre la mthodeD. Du fait que les styles intgrs sont au plus bas niveau possible de la cascade, ils prennent le pas sur nimporte quel style dclar en amont, dans une feuille de style externe ou dans llment <style> dans len-tte du document. Cela peut tre une solution simple pour ajouter des styles ici et l dans le document, mais elle a un prix.

194

Styler en toute simplicit

Le style est li au balisage Si nous nous reposons trop sur la mthodeD pour ajouter des styles nos documents, nous ne sparons pas rellement le contenu de la prsentation. Reprendre ultrieurement le fichier pour modifier les styles signifie modifier directement le balisage, l o conserver les rgles CSS dans un fichier spar en facilite la maintenance. Abuser de la mthode revient presque polluer votre balisage dlments <font> et autres gloubiboulga de prsentation. Ces dtails de prsentation doivent toujours tre dans un endroit spar. utiliser avec prudence Il y a certainement des usages, dans le monde rel, pour les styles intgrs. Ils peuvent nous sauver en dernier recours, lorsquil faut absolument ajouter un style un document mais que nous ne pouvons pas accder un fichier externe ou len-tte <head> du document, ou sil sagit de styles purement temporaires qui ne sont pas destins tre partags avec dautres lments de la page. Ainsi, si vous crez sur votre site une page pour annoncer une vente de gteaux, qui sera retire par la suite, et que vous souhaitiez donner aux lments de cette page des styles uniques, vous pouvez choisir dintgrer ces rgles particulires dans le balisage plutt que de les ajouter une feuille de style permanente. Nous vous conseillons simplement dtre prudent. Sachez quil nest pas facile de modifier ces styles sur une page un peu longue ou sur lintgralit dun site.

En rsum
Nous avons tudi quatre mthodes diffrentes permettant dappliquer des CSS un balisage, en exposant les mrites de chacune en fonction de la situation. Rcapitulons les mthodes ainsi que leurs avantages et inconvnients respectifs. MthodeA: Cette mthode ncessite de faire figurer les styles la section <head> de chaque document. Les styles ne peuvent pas tre partags dun document lautre et ils doivent tre tlchargs chaque chargement de la page. Les styles figurant dans llment <style> ne sont pas totalement cachs pour les navigateurs anciens. Cette mthode est adapte pour les tapes de dveloppement et de tests. Le balisage et les styles peuvent tre facilement modifis lorsquils sont dans le mme fichier. MthodeB: Cette mthode permet un jeu de styles dtre partag entre plusieurs documents, voire sur un site entier.

Appliquer des CSS

195

Les feuilles de style externes ne sont tlcharges quune seule fois et, la plupart du temps, sont mises en cache par le navigateur, ce qui reprsente un gain de temps de tlchargement lors des visites ultrieures. Conserver les styles communs dans un fichier unique facilite la maintenance et la mise jour de la prsentation. Les styles rfrencs dans llment <link> ne sont pas cachs pour les navigateurs anciens. MthodeC: Cette mthode permet un jeu de styles dtre partag entre plusieurs documents, voire sur un site entier. Les feuilles de style externes ne sont tlcharges quune seule fois et, la plupart du temps, sont mises en cache par le navigateur, ce qui reprsente un gain de temps de tlchargement lors des visites ultrieures. Conserver les styles communs dans un fichier unique facilite la maintenance et la mise jour de la prsentation. Utiliser @import cache les styles pour les navigateurs Netscape4.x. MthodeD: Les styles sont intgrs au balisage, ce qui maintient laspect prsentation trop prs du balisage. Les styles ne peuvent pas tre partags entre plusieurs lments, documents ou au sein du site. La maintenance est fastidieuse et inefficace. Cette mthode constitue une solution temporaire ou utilisable lorsquil est impossible daccder un fichier externe dans len-tte <head> du document. Maintenant que nous avons rcapitul les diffrentes mthodes grce auxquelles nous pouvons appeler nos styles dans notre balisage, allons un peu plus loin et tudions les feuilles de style alternatives.

Pour aller plus loin


Dans cette section, nous allons plonger un peu plus profondment dans le monde des feuilles de style afin dtudier plus en dtail les feuilles de style alternatives (cest--dire les styles multiples dfinis pour un mme balisage) et la faon dont nous pouvons donner davantage de contrle aux utilisateurs sur les styles quils peuvent choisir.

196

Styler en toute simplicit

Styles alternatifs
Au dbut de ce chapitre, nous avons abord quatre mthodes permettant dappliquer des CSS un document et nous avons montr les avantages quil y a rfrencer ou importer une feuille de style externe. Nous pouvons aller un cran plus loin et rfrencer des feuilles de style alternatives parmi lesquelles lutilisateur peut faire son choix (par exemple pour obtenir un texte de plus grande taille, changer les couleurs du site ou mme la mise en page complte). Pour ce faire, nous allons rfrencer plusieurs feuilles de style au moyen de llment <link> (de faon trs comparable la mthodeB prsente ci-dessus) en ajoutant la valeur alternate stylesheet lattribut rel. Ainsi, si nous souhaitons donner aux utilisateurs le choix entre deux tailles de texte supplmentaires, nous appelons la feuille de style principale comme laccoutume, puis nous ajoutons les feuilles de style alternatives:
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Appliquer des CSS</title> <link rel="stylesheet" type="text/css" href="defaut.css" title="defaut"/> <link rel="alternate stylesheet" type="text/css" href="textegrand.css" title="grand" /> <link rel="alternate stylesheet" type="text/css" href="texteplusgrand.css" title="plusgrand"/> </head>

Vous remarquerez que, dans les deux derniers lments <link>, en plus de la valeur alternate stylesheet pour lattribut rel, nous avons ajout chacun un attribut title destin nommer chaque feuille de style pour permettre leur slection future. La feuille de style defaut sera toujours active par le navigateur. textegrand.css et texteplusgrand.css seront tlcharges mais non utilises moins dtre actives par dautres moyens (que nous aborderons un peu plus loin). Cest la prsence de la valeur alternate stylesheet dans lattribut rel qui empche ces feuilles de style dtre actives par dfaut lorsque la page se charge.
Si nous souhaitons cacher les feuilles de style alternatives aux navigateurs anciens tels que Netscape4.x, la mthode @import est inutile. En effet, Netscape 4.x ne prend pas en charge la valeur alternate stylesheet pour l'attribut rel et, par consquent, ces styles ne seront jamais appliqus.

Trois tailles de police Parlons un peu plus de ce que contiendraient ces feuilles de style alternatives. Si, par exemple, nous souhaitons que lutilisateur puisse augmenter la taille du texte sur la page, nous pouvons spcifier une plus grande taille de police dans chacune des feuilles de style

Appliquer des CSS

197

alternatives. Ds que lune de ces feuilles de style est active, ses valeurs prennent le pas sur les rgles figurant dans defaut.css. Cela est particulirement pratique si nous choisissons de spcifier nos tailles de police en pixels, l o certains navigateurs ne permettent pas lutilisateur daugmenter la taille du texte. Si nous choisissons pour la taille de police de base une valeur difficile lire pour les utilisateurs malvoyants, nous pouvons utiliser les feuilles de style alternatives pour leur proposer des options de tailles plus leves. Ainsi, dans defaut.css, nous pourrions avoir dfini une taille de police de base pour le site:
body { font-size: 12px; }

Et, dans textegrand.css, nous pouvons craser cette rgle et dfinir une taille de police lgrement plus leve:
body { font-size: 16px; }

De faon similaire, dans texteplusgrand.css, nous pouvons laugmenter encore dun cran:
body { font-size: 20px; }

Une fois actives (je vous promets que je vous explique cela dans une minute), les feuilles de style textegrand.css et texteplusgrand.css prendront le pas sur la rgle par dfaut, augmentant ainsi la taille du texte pour la page. Toujours en cascade Soulignons que leffet de cascade des CSS sapplique toujours et que les feuilles de style alternatives fonctionnent exactement comme nimporte quelle autre feuille de style, dans la mesure o seules les rgles communes sont crases lorsque les styles alternatifs sont activs. Ainsi, si nous avons dfini dans defaut.css des rgles de mise en page, positionnement et autres paramtres globaux daffichage du site, sans les rpter dans les feuilles de style alternatives, ces rgles par dfaut sont toujours appliques. Faire fonctionner les styles alternatifs Formidable. Nous disposons donc de ces feuilles de style alternatives, qui nattendent que dtre utilises. Mais comment lutilisateur peut-il les activer? lheure actuelle, une majo-

198

Styler en toute simplicit

rit de navigateurs intgrent un mcanisme de choix des feuilles de style alternatives: Firefox, Safari, Opera et Internet Explorer entre autres. Si, par exemple, lutilisateur consulte le site laide de Firefox et que des feuilles de style alternatives soient disponibles, il peut choisir dactiver un style alternatif en passant par le menu Affichage> Style de la page (voir Figure11.3).
Figure11.3
Menu de slection des feuilles de style alternatives dans Firefox.

Avec un peu de chance, dautres navigateurs finiront par mettre en uvre des mcanismes similaires mais, dici l, il existe une autre manire dactiver une feuille de style alternative et mme denregistrer le choix de lutilisateur, laide des cookies. Paul Sowden a crit un tutoriel indispensable disponible sur le site du webzine A List Apart, intitul "Alternative Style: Working with Alternate Style Sheets" (www.alistapart.com/ articles/alternate/). Dans cet article, il prsente un jeu de fonctions JavaScript permettant dactiver ou de dsactiver les feuilles de style alternatives dans un navigateur moderne. Basculer dune feuille de style lautre seffectue grce un hyperlien figurant sur la page, grce auquel on peut effectivement passer lune ou lautre des feuilles de style partir de son attribut title. Le JavaScript garde en mmoire le dernier choix de lutilisateur en enregistrant un cookie, de sorte qu la visite suivante, la feuille de style correcte sera active en plus de toute feuille de style par dfaut. titre dexemple, il y a quelques annes, je proposais trois jeux de couleurs sur mon site personnel. Chaque thme tait activ par un clic sur licne correspondante qui, son tour, faisait appel au script de Paul Sowden. La premire icne tait la feuille de style par dfaut, tandis que la deuxime et la troisime activaient deux feuilles de style alternatives associes des thmes de couleurs diffrents. La Figure11.4 illustre cela. Dans la mesure o le JavaScript utilis tait bas ct client, le basculement tait instantan et il tait inutile de rafrachir la page dans son ensemble. Ctait trs rapide.
Le code JavaScript complet est disponible en tlchargement dans l'article de Paul Sowden l'adresse www.alistapart.com/articles/alternate/.

Appliquer des CSS

199

Figure11.4
Activation dune feuille de style alternative par un clic sur une icne.

Une taille de texte, mais pas seulement En plus de la fonctionnalit populaire dagrandissement du texte, les possibilits en matire de changement de styles sont infinies. Certains sites proposent lutilisateur de slectionner leur thme parmi un vritable arc-en-ciel de couleurs, tandis que dautres offrent le choix entre diffrentes polices, tailles de texte ou mme diffrentes prsentations de la page. Exploiter les cascades pour changer certaines rgles par dfaut et les placer dans des feuilles de style alternatives vous donne un contrle trs fin sur le rendu de vos pages web et vous permet de crer des effets intressants. Et ce, grce un simple script et quelques rgles CSS. Nonseulement vous conomisez de la bande passante, mais limpact est plus fort! Grce DOM Nous pouvons remercier un autre standard du W3C de nous permettre lutilisation des scripts pour accder aux feuilles de style alternatives. DOM, acronyme de Document Object Model, est selon les termes mmes du W3C:
"Le Document Object Model (ou DOM) est une interface indpendante de tout langage de programmation ou plate-forme, permettant des programmes et des scripts daccder au contenu, la structure ou au style dun document et de les mettre jour. Le document peut ensuite faire lobjet de traitements supplmentaires et les rsultats de ces traitements peuvent tre rincorpors au document tel quil sera prsent."

Cela vous semble familier, non? Cest exactement ce que nous faisons ici laide du script de basculement de feuilles de style: nous accdons dynamiquement au document et nous en changeons le style. Parvenir ce rsultat implique de suivre les standards du W3C; ainsi, les dveloppeurs peuvent crer des scripts accdant des lments prvisibles de notre balisage. Si nous tendons vers un balisage respectueux des standards, nous pouvons garantir que davantage de scripts bass sur DOM pourront tre crits lavenir, amliorant ainsi lexprience de lutilisateur sur nos pages.

200

Styler en toute simplicit

Le systme de slection de styles ne fait queffleurer les possibilits en matire de scripts bass sur DOM. Mais cest un autre exemple des bnfices que lon retire crer des sites respectueux des standards.

Styles de rinitialisation
Nous avons abord diffrentes manires dappliquer des CSS un document et cest maintenant le bon moment pour mentionner aussi le concept de feuille de style de rinitialisation. Eric Meyer a montr la voie par ses recherches et ses crits sur le sujet, et il explique sur son blog (http://meyerweb.com/eric/tools/css/reset/):
"Le but dune feuille de style de rinitialisation est de rduire les incohrences entre navigateurs sur des valeurs par dfaut telles que les hauteurs de lignes, marges, tailles de police pour les titres,etc."

En dautres termes, tous les navigateurs possdent des styles par dfaut, des rgles CSS qui sont appliques au niveau du navigateur pour afficher les lments HTML dune certaine manire. Ainsi, un lment <h1> apparat gnralement dans une police de grande taille, en gras, avec des marges ou un espacement au-dessus et en dessous, et ce, avant lapplication de la moindre de vos CSS. Les items de listes ordonnes ou non sont souvent indents. Le problme, comme le signale Eric Meyer, est que ces styles par dfaut peuvent varier dun navigateur lautre et dun systme dexploitation lautre. Pour mettre tout le monde sur un pied dgalit, on commence par appliquer un fichier reset.css pour "rinitialiser" toutes les valeurs susceptibles dtre appliques par le navigateur. En plus de contribuer une meilleure cohrence globale, une feuille de style de rinitialisation peut aussi reprsenter une conomie considrable de code. Dans une feuille de style volumineuse, nous sommes frquemment amens dfinir margin: 0; padding: 0; sur des lments dots de marges et despacements par dfaut. Cette modification doit tre rpte dans la feuille de style chaque dclaration o elle est ncessaire. Une feuille de style de rinitialisation sen charge une bonne fois pour toutes, ce qui vous vite de dupliquer ces rgles dans votre feuille de style principale. Un exemple de fichier reset.css Voici la version dun fichier reset.css propose par Eric Meyer. Comme vous pouvez le constater, celle-ci applique diverses rgles globales visant supprimer les mises en forme par dfaut que les navigateurs sont susceptibles dappliquer chaque lment.
/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,

Appliquer des CSS

201

del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }

Il faut signaler que votre fichier reset.css n'a pas besoin d'inclure tous les lments prsents ici. N'hsitez pas crer votre propre version personnalise, en ne rinitialisant que ce qui vous semble utile pour vos propres projets.

202

Styler en toute simplicit

Lide est ici dinclure cette feuille de style en premier lieu, avant dappliquer vos propres styles, afin de mettre en place les fondations. En utilisant la mthode dcrite un peu plus tt dans ce chapitre, nous pouvons importer la feuille de style de rinitialisation avant toute autre dans le fichier styles.css auquel le balisage fait rfrence:
/* cach pour les navigateurs anciens */ @import @import @import @import url("reset.css"); url("layout.css"); url("fonts.css"); url("colors.css");

Une fois rinitialises les valeurs par dfaut du navigateur pour les lments courants, les fondations sur lesquelles vos styles pourront sappuyer sont alors en place. Je vous recommande chaudement dutiliser les feuilles de style de rinitialisation dans vos propres travaux. Ainsi, vous gagnerez du temps et conomiserez du code. Dsormais, je dmarre tout projet en incluant ds le dbut un fichier reset.css, ce qui mvite rgulirement de dupliquer dinnombrables rgles CSS et me permet de partir sur une base propre.

Styles utilisateurs
Aussi bien conu quil soit, lagencement graphique dun site peut ne pas convenir tout le monde. Certains lments, rubriques, menus sont parfois peu accessibles ou difficilement lisibles. Pour un site que lon ne consulte quoccasionnellement, cela nest pas trs grave mais, pour un site qui se veut un outil de travail quotidien, cest un aspect crucial. Par chance pour les utilisateurs, le concepteur du site nest pas tout fait le seul matre bord et ils peuvent adapter le rendu du site leurs prfrences personnelles. Ils disposent pour cela de deux solutions: 1. Dune part, les paramtres du navigateur: ceux-ci permettent lutilisateur de choisir ses propres polices, la taille et la couleur des caractres, lapparence des liens ainsi que la couleur darrire-plan, et de forcer ces paramtres prendre le pas sur toute feuille de style utilise par les sites consults. Ce sont nanmoins des choix relativement limits. 2. Dautre part, pour des ajustements plus fins, lutilisateur peut crer sa propre feuille de style et lappliquer au site consult. Des navigateurs comme Opera ou Firefox proposent des extensions ou des fonctionnalits intgres pour raliser ce type de manipulations. Lextension Stylish de Firefox en est un exemple. Pour linstaller, rendez-vous sur le site http://www.userstyles.org/ ou directement ladresse https://addons.mozilla.org/fr/firefox/addon/2108. Une fois lextension mise en place, elle apparat sous la forme dune icne reprsentant un S blanc, en bas droite de la fentre du navigateur. Il vous suffit alors douvrir le site dont vous souhaitez modifier les styles. Une fois la page charge, cliquez sur licne et choisissez dans le menu contextuel Crer un nouveau style > Pour le site affich. Une bote de dialogue souvre alors et vous permet de saisir le code CSS correspondant aux modifications souhaites.

Appliquer des CSS

203

titre dexemple, nous allons modifier la feuille de style du site http://www.pearson.fr. Ajoutons le code suivant:
#bodyNav{ display:none; } div{ font-size:1.2em; }

Cela a pour effet de supprimer la barre de menu de navigation, situe sur la droite de la page, et daugmenter la taille des polices. La Figure10.5 illustre cette diffrence.
Figure11.5
Le site www.pearson.fr, avec les styles du site et avec application de styles personnaliss.

204

Styler en toute simplicit

Cest une fonctionnalit qui peut contrarier certains concepteurs de sites web, mais qui se rvle extrmement utile pour les personnes ayant besoin dune accessibilit minimale non garantie par le site.

Pour conclure
Dans ce chapitre, nous avons dcouvert les diffrentes mthodes nous permettant dappliquer des rgles CSS des lments, documents ou sites complets. Nous avons galement appris cacher les feuilles de style aux navigateurs anciens et importer plusieurs feuilles de style. Nous avons aussi abord la mise disposition de CSS "lo-fi" et "hi-fi" pour les navigateurs grant lune ou lautre version, sans que cela ne ncessite de script ou danalyse du navigateur, ct serveur. Enfin, nous avons tudi les feuilles de style alternatives et la faon dont elles peuvent proposer lutilisateur des choix dynamiques, quil sagisse de changer la taille de la police, la couleur ou la disposition des pages. Nous avons aussi discut de lutilisation dune feuille de style de rinitialisation, afin de faire table rase de tous les styles par dfaut quappliquent la plupart des navigateurs et, ainsi, de travailler dans de meilleures conditions. Jespre que ces techniques vous ont mis le pied ltrier pour appliquer des styles votre structure.

12

Styles pour limpression


Au Chapitre11, nous avons tudi les diffrentes mthodes notre disposition pour appliquer des CSS nos documents. Dans ce chapitre, nous allons aborder les styles pour limpression, cest--dire des rgles CSS spcifiques pour imprimer une page web. Avec quelques rgles seulement, nous pouvons garantir que notre balisage structur aura aussi fire allure sur le papier qu lcran. Pour commencer, nous allons parler des types de mdias et de la manire de les utiliser pour mettre disposition des CSS propres un priphrique.

Comment spcifier des styles pour l'impression?


Avant de rpondre cette question, nous devons nous familiariser avec lide que nous pouvons affecter des types de mdias nos CSS. Dclarer un type de mdia nous permet de cibler nos styles pour un support particulier. Si, par exemple, nous souhaitons associer une feuille de style particulire aux crans dordinateur uniquement, nous pouvons ajouter lattribut media llment <link> servant appeler la feuille de style, comme ci-aprs:
<link rel=stylesheet" type="text/css" media="screen" href="stylesecran.css" />

Le code ci-dessus garantit que les styles appels par le biais de cette dclaration seront utiliss seulement pour les crans dordinateur. Vous pouvez vous demander: "Mais quoi dautre pourrions-nous cibler?" La rponse est que les cibles sont plus nombreuses quon ne le pense.

Types de mdias
Outre la valeur screen prsente dans le code ci-dessus, il existe un certain nombre dautres valeurs envisageables. Voici une liste complte des types de mdias reconnus, dfinie par le W3C dans sa "Spcification CSS2.1" (disponible ladresse www.w3.org/TR/CSS21/ media.html): all: adapt tout support; braille: prvu pour les dispositifs retour tactile en braille; embossed: prvu pour les imprimantes embossage en braille;

206

Styler en toute simplicit

handheld: prvu pour les priphriques de poche (typiquement petit cran et faible bande passante); print: conu pour les documents dimpression et pour les documents affichs lcran en aperu avant impression; projection : prvu pour les prsentations (par exemple avec un rtroprojecteur) ; consultez la section sur les mdias pagins (www.w3.org/TR/CSS21/page.html) pour plus dinformations sur les questions de mise en forme spcifiques ce support; screen: prvu essentiellement pour les crans dordinateur en couleurs; speech: conu pour les synthtiseurs vocaux; il est noter que CSS2 proposait pour cet usage un type de mdia similaire, dnomm aural (voir lannexe sur les feuilles de style auditives www.w3.org/TR/CSS21/aural.html pour plus de dtails); tty: prvu pour un support utilisant une grille de caractres chasse fixe (par exemple les tltypes, les terminaux ou les priphriques portables dont les capacits daffichage sont limites); il est dconseill de spcifier des units en pixels avec le type de mdia tty; tv: conu pour les priphriques de type tlviseur (crans basse rsolution, en couleurs, dfilement limit et avec du son). Dans ce chapitre, nous nous intresserons plus particulirement aux types de mdias all, print et screen.

Deux manires de cibler


Le W3C indique que deux solutions soffrent nous pour affecter un type de mdia une CSS. Nous avons illustr lune de ces mthodes au dbut de ce chapitre: elle consiste utiliser llment <link> et un attribut media. Comparons ces deux solutions.

MthodeA: l'attribut media


<link rel="stylesheet" type="text/css" media="screen" href="stylesecran.css" />

Comme nous lavons dmontr un peu plus haut, dans la mthodeA, nous indiquons que le fichier stylesecran.css sapplique uniquement aux crans dordinateur. Cela devrait empcher lapplication des rgles contenues dans stylesecran.css lorsque lon imprime la page ou lorsque celle-ci saffiche par le biais dun projecteur, sur un priphrique de poche ou par un lecteur dcran.

Styles pour limpression

207

Prise en charge partielle Soulignons que la prise en charge concrte de tous les types de mdias est un peu la trane. Dans un monde idal, tous les priphriques et navigateurs devraient adhrer au type de mdia spcifi. Ainsi, si nous avions renseign:
<link rel="stylesheet" type="text/css" media="handheld" href="cssportable.css" />

nous pourrions esprer que seuls les priphriques portables de type ordinateur de poche, tlphone, etc. reconnatraient ces styles. Malheureusement, les standards ne se sont pas encore rpandus ce point au moment o nous crivons ces lignes, et certains types de priphriques ne grent pas correctement le type de mdia qui leur est associ. Pour cette raison, nous allons nous focaliser sur les types dots dusages dans le monde rel, par exemple les styles pour limpression.

MthodeB: @media ou @import


<style type="text/css"> @import url("stylesecran.css") screen; @media print { /* placer ici les rgles de feuille de style pour l'impression */ } </style>

La seconde mthode permettant daffecter un type de mdia sutilise conjointement une directive @import ou @media. Ainsi, lorsque lon recourt la mthode @import pour rfrencer une feuille de style externe, nous pouvons lui adjoindre un type de mdia. Par ailleurs, la rgle @media nous permet de crer des sections et de sparer les rgles en fonction du type de mdia associ. Comme dans la mthodeA, nous utilisons la rgle @media pour affecter des styles spcifiques pour limpression. Dans len-tte ou en fichier externe titre dexemple, nous avons plac la mthode B dans un lment <style> qui serait hberg dans len-tte <head> dun document. Mais nous pourrions galement placer les rgles @import et @media dans une feuille de style externe, laquelle nous ferions alors rfrence au moyen de llment <link> (voir la section CombinerB etC pour des feuilles de style multiples au Chapitre11).
Bien que la valeur par dfaut pour spcifier un type de mdia soit screen, c'est typiquement all que l'on utilise lorsque aucun type de mdia n'est affect. Autrement dit, par dfaut, la CSS est prvue pour tous les priphriques, qu'il s'agisse d'un cran, d'un ordinateur de poche, d'un projecteur, d'un lecteur d'cran,etc.

208

Styler en toute simplicit

Les valeurs multiples sont autorises


Que lon sappuie sur lune ou lautre de ces mthodes, il est permis daffecter plusieurs types de mdias la fois. Ainsi, si lon emploie la mthode A pour associer une mme feuille de style aux sorties sur cran et sur imprimante, le code ressemble alors ceci:
<link rel="stylesheet" type="text/css" media="screen, print" href="stylesecran.css" />

Des valeurs multiples dans lattribut media sont spares par des virgules. De faon similaire, si nous voulons raliser la mme opration avec la mthode B, le code rsultant ressemble :
<style type="text/css"> @import url("ecranetimpr.css") screen, print; @media print { /* placer ici les rgles de feuille de style pour l'impression */ } </style>

Dans lexemple ci-dessus, ecranetimpr.css est affecte la fois la lecture sur cran et limpression parce que nous avons spcifi plusieurs valeurs pour le type de mdia. Nous utilisons ensuite une rgle @media pour crer une section ddie uniquement aux styles dimpression. Maintenant que nous avons prsent les deux mthodes avec lesquelles spcifier des types de mdias, voyons un peu comment nous pourrions les utiliser pour mettre disposition des styles pour lcran et pour limpression.

Sparer les styles pour l'cran et pour l'impression


Imaginons que nous souhaitions mettre disposition deux fichiers CSS pour le mme document, lun ddi laffichage sur cran et lautre pour imprimer la page. Nous allons consulter mon site personnel titre dexemple. Jutilise llment <link> pour rfrencer les styles matres (styles.css) pour lensemble du site. Le contenu de ce fichier styles.css est une simple rgle @import appelant une feuille de style externe tout en la cachant pour les navigateurs anciens du type Netscape4.x. Ainsi, dans len-tte <head> de la page, je cre un lien vers le fichier matre styles.css de la manire suivante:
<link rel="stylesheet" type="text/css" href="/css/styles.css" />

Jai galement cr une feuille de style spare, ddie limpression (print.css). Dans ce fichier print.css, jcris les rgles qui sappliquent la page uniquement lorsquelle doit tre imprime:
<link rel="stylesheet" type="text/css" href="/css/styles.css" /> <link rel="stylesheet" type="text/css" href="/css/print.css" />

Styles pour limpression

209

Comment pouvons-nous donc nous assurer que chacun de ces fichiers CSS est utilis uniquement pour le support correct? Il nous suffit dajouter lattribut media llment <link>, comme lillustre la mthodeA dans ce chapitre:
<link rel="stylesheet" type="text/css" media="screen" href="/css/styles.css" /> <link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

En spcifiant screen pour le fichier styles.css, nous garantissons que les styles hbergs dans ce fichier ne sont appliqus que pour laffichage lcran dun ordinateur. De manire similaire, en spcifiant la valeur print pour lattribut media, nous nous assurons que les styles du fichier print.css ne seront appliqus que lorsque lutilisateur imprime la page. Maintenant que nous avons spar les styles daffichage lcran et dimpression, voyons un peu quels styles seraient appropris dans notre feuille de style dimpression.

Crer une feuille de style d'impression


Si notre fichier styles.css peut contenir des rgles CSS pour la mise en page, les fontes, les positions, les arrire-plans,etc., nous partons de rien en ce qui concerne le fichier print. css et les styles personnaliss pour la page imprime. Llment cl garder en tte lorsque lon cre une feuille de style dimpression est le support cible. Du fait que nous devons travailler avec une feuille de papier plutt quune fentre de navigateur, les dimensions exprimes en pixels ne sont pas le meilleur choix. Mise au point Il est parfaitement logique de spcifier des valeurs exprimes en points pour dfinir les tailles de police dans une feuille de style dimpression. La premire rgle de notre feuille de style dimpression peut donc dfinir une taille de police de base pour llment <body>, exprime en points.
body { font-family: "Times New Roman", serif; font-size: 12pt; }

Cest plutt simple, et nous avons une meilleure ide de la faon dont une police de 12points se prsente sur une page imprime que sil sagissait dune valeur en pixels. Nous avons galement pass le texte en serif, dont le rendu limpression est agrable et plus lisible. conomiser de lencre en cachant les lments superflus La version du document affiche lcran peut contenir de nombreux lments de page inutiles sur la version imprime. Des lments tels que les liens de navigation, les barres latrales, les formulaires et la publicit reprsentent souvent un gchis dencre limpression,

210

Styler en toute simplicit

et nous pouvons prcisment choisir de ne pas les imprimer laide de la proprit display dans la feuille de style dimpression. Bien souvent, cest le contenu que lutilisateur souhaite imprimer. Prenons lexemple dun site typique, comprenant des lments #nav, #sidebar, #advertising et #search qui correspondent respectivement la navigation du site, aux barres latrales, la publicit et un formulaire de recherche. Nous pouvons dsactiver tous ces lments dans la feuille de style dimpression, laide de la dclaration suivante:
body { font-family: "Times New Roman", serif; font-size: 12pt; } #nav, #sidebar, #advertising, #search { display: none; }

En spcifiant display: none dans notre feuille de style dimpression, nous cachons ces lments sur la page imprime. En activant ou dsactivant les sections de page de votre choix, vous pouvez facilement et rapidement crer une version de votre site personnalise et ddie limpression, base sur le mme balisage. Pas besoin dutiliser des usines gaz ct serveur pour gnrer une version parallle intgrale de votre site partir dun template dpouill: un simple fichier CSS supplmentaire associ au type de mdia print fera laffaire. Voil qui conforte lide quorganiser votre structure en "sections" de page logiques peut faciliter ultrieurement lapplication de styles. Si votre page contient une bannire publicitaire, lui affecter un identifiant est sens et cela vous donne un contrle complet de la bannire grce aux CSS. En loccurrence, vous pouvez la dsactiver pour limpression. Dsactiver les arrire-plans et couleurs est une autre solution qui engendre une conomie dencre tout en produisant une version dimpression facile lire. Si, par exemple, nous avons prcdemment dfini une image ou une couleur darrire-plan pour llment <body>, nous pouvons la dsactiver grce :
body { background: none; }

Nous pourrions, naturellement, recourir la mme solution pour tout lment auquel nous avons appliqu un arrire-plan dans la version affiche lcran. Extraire les liens Une autre astuce intressante, qui nest malheureusement utilisable quavec des navigateurs rcents prenant totalement en charge la spcification CSS2, est lextraction des URL des hyperliens, de sorte quils apparaissent limpression aprs le texte de lhyperlien.

Styles pour limpression

211

Au moyen de la pseudo-classe :after, nous pouvons rdiger une rgle CSS qui, dans les navigateurs grant cette fonctionnalit (essayez Firefox ou Safari pour le voir en action), vise imprimer lURL dun hyperlien aprs le texte qui lui est associ. En mme temps, cette rgle est indolore pour les utilisateurs de navigateurs ne grant pas la pseudo-classe :after: seul le texte associ lhyperlien apparatra (voir Eric Meyer, "CSS Design: Going to Print", www.alistapart.com/articles/goingtoprint/). Ajoutons donc notre feuille de style dimpression une rgle permettant dextraire les URL des hyperliens (dans notre zone de contenu seulement):
body { font-family: "Times New Roman", serif; font-size: 12pt; } #nav, #sidebar, #search { display: none; } #content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; }

En substance, nous indiquons la version dimpression de la page de rvler les URL des hyperliens aprs le texte associ, en plaant lURL entre parenthses et en ajoutant un espace avant la parenthse ouvrante et aprs la parenthse fermante. Cela ne sappliquera quaux hyperliens figurant la section #content du site. Nous aurions pu rdiger une rgle gnrale pour rcuprer tous les liens mais nous avons choisi de limiter cette fonctionnalit la zone de contenu de la page, excluant de fait les liens figurant dans les en-ttes, pieds de page et autres zones. L encore, mme si cela ne fonctionne que dans quelques navigateurs lheure o nous crivons ces lignes, cest une fonctionnalit inoffensive pour les navigateurs ne grant pas la pseudo-classe :after: ils lignoreront tout simplement. Texte du lien Nous avons fonc et fait quelque chose dintressant pour les URL de liens, mais noublions pas non plus de mettre en exergue le texte associ au lien, de manire diffrencier ses mots du flot normal du texte:
body { font-family: "Times New Roman", serif; font-size: 12pt; } #nav, #sidebar, #search { display: none; }

212

Styler en toute simplicit

a:link, a:visited { color: blue; text-decoration: underline; } #content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; }

Nous pourrions naturellement choisir ici nimporte quelle couleur. Jai adopt la combinaison par dfaut bleu et soulign, que lon identifie facilement comme un lien. Pour limpression en noir et blanc, procdez par essais pour obtenir une teinte offrant un contraste suffisant entre le lien et le texte normal. conomiser de lencre avec laperu avant impression Une autre astuce permettant dconomiser de lencre consiste utiliser la fonction daperu avant impression du navigateur, afin de tester les versions dimpression de vos pages sans rellement imprimer une page entire sur papier. La plupart des navigateurs proposent un aperu avant impression (via la bote de dialogue Fichier> Imprimer, par exemple, ou Fichier> Aperu avant impression) qui montre lallure de votre page imprime. Vous pouvez en profiter pour vrifier si votre feuille de style dimpression fonctionne correctement. Allure finale La feuille de style dimpression que jai utilise sur mon site personnel ressemble fortement lexemple que nous avons construit dans ce chapitre. En comparant les Figures12.1 et12.2, vous remarquerez que jai personnalis les styles dimpression afin de dsactiver des lments tels que la navigation et les barres latrales. Jai galement mis en uvre lextraction des liens et chang les polices et leurs tailles pour optimiser la lisibilit globale. Vous pouvez facilement constater quavec un tout petit fichier CSS, nous pouvons proposer une version entirement personnalise, sur un nombre quelconque de pages, ddie spcifiquement limpression. Cest une fonctionnalit facile ajouter un projet, mais qui contribue amliorer lexprience de lutilisateur lorsquil imprime les pages de votre site. La prochaine fois que votre chef vous annonce que "nous devons crer un nouveau template pour proposer une version imprimable du site, sur une copie intgrale de larborescence des fichiers", vous pourrez sortir cette petite astuce de votre chapeau (ou de lendroit o vous avez rang ce livre).
Pour plus d'informations sur les styles d'impression, n'oubliez pas de lire les articles indispensables du gourou des CSS, Eric Meyer: "CSS Design: Going to Print" (www.alistapart.com/articles/goingtoprint) et "Print Different" (www.meyerweb.com/eric/articles/webrev/200001.html).

Styles pour limpression

213

Figure12.1
Le site SimpleBits, affich dans un navigateur avec les styles pour lcran.

Figure12.2
Le site SimpleBits, dans sa version pour limpression.

214

Styler en toute simplicit

En rsum
Nous navons queffleur toutes les possibilits qui peuvent tre intgres aux feuilles de style dimpression. Du fait que nous pouvons sparer les styles pour laffichage lcran et pour limpression grce aux types de mdias, il devient facile de personnaliser, maintenir et organiser chaque support. Construire un doublon intgral du site pour proposer des pages imprimables devient inutile si nous pouvons exploiter le mme balisage structur en lui associant simplement une feuille de style diffrente. lavenir, jespre que dautres types de mdias seront plus largement pris en charge sur dautres priphriques. Lorsque les concepteurs de sites pourront compter sur des rgles CSS spcifiques un priphrique (par exemple pour les ordinateurs de poche, les tlphones portables et les lecteurs dcran), tout en utilisant le mme balisage XHTML structur, cela nous rendra la vie dautant plus aise.

13

Mise en page avec les CSS


Tout au long de ce livre, nous avons principalement abord les lments des pages web "de lintrieur". Mais que dire de leur enchssement dans la page? Cela fait des annes que les concepteurs de sites sappuient sur des tableaux pour structurer leurs mises en page en colonnes, imbriquant frquemment plusieurs tableaux les uns dans les autres afin dobtenir un espacement ou un effet graphique prcis. Ces mises en page surcharges peuvent tre lentes tlcharger et ralentir nos efforts lorsquil sagit den maintenir le code sans compter quelles sont souvent illisibles dans des navigateurs en mode texte, lecteurs dcran ou priphriques petit cran. Dans ce chapitre, nous combinerons les CSS et le balisage structur pour crer une mise en page sur deux colonnes, partir de quatre mthodes frquemment utilises. En retour, nous montrerons quil est possible de crer des prsentations en colonnes sans recourir aux tableaux imbriqus et aux GIF despacement. Un peu plus loin, la section Pour aller plus loin, nous aborderons les problmes du modle de botes qui surviennent dans Internet Explorer5 pour Windows et la faon de les contourner. Nous vous dvoilerons aussi une astuce toute simple pour obtenir des colonnes de mme longueur grce aux CSS.

Comment utiliser les CSS pour crer une mise en page surdeux colonnes?
En ralit, plusieurs solutions sont envisageables. Pour vous aider vous lancer dans laventure et comprendre la diffrence fondamentale entre deux des mthodes les plus populaires (par flottement et par positionnement), jai dcid de me concentrer sur quatre options conduisant toutes une mise en page sur deux colonnes, dote dun en-tte en haut de page et dun pied de page. Jespre ainsi que, en parcourant ce chapitre comme un guide, vous commencerez construire une mise en page pour des sites contenant par ailleurs beaucoup dautres exemples tirs de ce livre. Chacune des quatre mthodes auxquelles nous allons nous intresser intervient entre les lments <body> et </body> du document, et je prsente au dbut de chaque mthode la structure de balisage que nous allons utiliser. Pour vous donner une ide de la structure globale de la page qui encadre les mthodes, voici les autres lments qui y apparatraient:
<!DOCTYPE html PUBLIC "-/W3C//DTD XHTML 1.0 Transitional//EN" " / "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

216

Styler en toute simplicit

<head> <title>Mise en page avec les CSS</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <body> ... exemples de mthodes... </body> </html>

Maintenant, pour vous donner une ide gnrale de la prsentation en colonnes que nous cherchons atteindre travers chaque mthode, jetez un il laperu graphique de la Figure13.1.
Figure13.1
Schma de la prsentation dsire, sur deux colonnes.

En-tte Barre latrale

Contenu

Pied de page
Commenons par la premire mthode, qui utilise la proprit float.

MthodeA: faire flotter la barre latrale


<div id="entete"> ... contenu de l'en-tte... </div> <div id="barrelaterale"> ... contenu de la barre latrale... </div> <div id="contenu"> ... contenu principal... </div> <div id="pieddepage"> ... contenu du pied de page... </div>

Mise en page avec les CSS

217

Lexemple ci-dessus est le balisage dont nous allons nous servir pour crer une mise en page en colonnes, laide de rgles CSS et de la proprit float. Nous avons partag notre page en segments logiques au moyen dlments <div>, chacun possdant un identifiantid unique: #entete: contient un logo, la navigation et dautres lments de niveau le plus lev; #barrelaterale: contient des liens et informations contextuels; #contenu: contient le corps de texte principal, lment central de la page; #pieddepage: contient des informations de copyright, des liens annexes,etc. Dcouper ces lments de page en sections assure un contrle total sur la mise en page. En appliquant quelques rgles CSS, nous obtenons une prsentation sur deux colonnes en moins de temps quil nen faut pour le dire. Styler len-tte et le pied de page La premire tape dans la ralisation de notre mise en page en colonnes consiste ajouter une couleur darrire-plan ainsi quun espacement (padding) len-tte et au pied de page. Lensemble sera ainsi plus facile visualiser.
#entete { padding: 20px; background: #ccc; } #pieddepage { padding: 20px; background: #eee; }

Appliquer les rgles CSS ci-dessus la structure de la mthodeA aboutira au rsultat visible la Figure13.2. Jai ajout du contenu de remplissage pour fournir un peu de consistance aux sections. Au sein de ces dclarations pour #entete et #pieddepage, vous pourriez bien entendu ajouter dautres styles dfinissant ces sections, par exemple les polices et couleurs du texte et des liens. Passons maintenant la cration des deux colonnes.

218

Styler en toute simplicit

Figure13.2
Appliquer des styles len-tte et au pied de page.

Faire flotter la barre latrale Lessence de la mthodeA rside dans le fait quelle utilise la proprit float pour positionner la #barrelaterale dun ct ou de lautre du <div> de contenu. Pour cet exemple, nous la placerons droite du contenu, mais cela fonctionnerait tout aussi bien gauche. La cl pour faire flotter la #barrelaterale est que celle-ci doit apparatre avant le <div> de contenu dans le balisage. De cette manire, le haut de la barre latrale salignera sur le haut de la zone de contenu. Nous allons ajouter la proprit float la #barrelaterale et lui donner une largeur de 30% ainsi quune couleur darrire-plan:
#entete { padding: 20px; background: #ccc; } #barrelaterale { float: right; width: 30%; background: #999; } #pieddepage { padding: 20px; background: #eee; }

Mise en page avec les CSS

219

La Figure13.3 illustre le rsultat obtenu par application de la CSS ainsi dfinie. Vous pouvez constater que la barre latrale est place droite et est entoure par le contenu.

Figure13.3
Faire flotter la barre latrale la droite du contenu.

Trois colonnes Nous pourrions nous arrter ici mais, comme lillustre la Figure13.3, nous ne disposons pas encore tout fait dune prsentation sur deux colonnes. Pour parfaire leffet, nous allons donner au <div> de #contenu une marge droite de la mme largeur que la colonne de droite, ce qui crera effectivement lespace ncessaire pour accueillir la #barrelaterale. La CSS est aussi simple que ceci:
#entete { padding: 20px; background: #ccc; } #barrelaterale { float: right; width: 30%; background: #999; } #contenu { margin-right: 34%; } #pieddepage { clear: right;

220

Styler en toute simplicit

padding: 20px; background: #eee; }

Notez que nous avons donn 4% de plus la marge de droite qu la largeur de la #barrelaterale. Cela mnagera un peu despace supplmentaire entre les deux colonnes. La Figure13.4 illustre le rsultat affich dans un navigateur: vous constatez quen ajoutant une marge droite au <div> de contenu, nous crons lillusion dune seconde colonne. Remarquez aussi que nous avons ajout une rgle clear: right; la dclaration #pieddepage. Cest important et cela garantit que le pied de page apparatra toujours sous les zones correspondant la barre latrale et au contenu, indpendamment de la hauteur de lune ou lautre des colonnes. Le pied de page annule (clear) tout flottement qui le prcde.

Figure13.4
Mise en page sur deux colonnes.

Nous disposons maintenant dune mise en page sur deux colonnes, oprationnelle, et nous pouvons facilement ajouter des informations despacement, darrire-plan, de bordures,etc. aux dclarations CSS existantes pour rendre lensemble plus attrayant.
Jusqu' prsent, nous avons utilis pour les largeurs des colonnes des valeurs exprimes en pourcentage, ce qui cre une mise en page largeur variable (les colonnes s'largissent ou se contractent suivant la largeur de la fentre de l'utilisateur). Nous pourrions facilement spcifier des valeurs en pixels pour obtenir une prsentation largeur fixe mais, si la compatibilit avec IE5/Windows est requise, il faut garder en tte l'interprtation errone que ce navigateur fait du modle de botes CSS lorsqu'il ajoute les marges et l'espacement chacune des colonnes. Nous parlerons d'ici peu du modle de botes et de solutions de contournement envisageables, la section Pour aller plus loin de ce chapitre.

Mise en page avec les CSS

221

MthodeB: le double flottement


<div id="entete"> ... contenu de l'en-tte... </div> <div id="contenu"> ... contenu principal... </div> <div id="barrelaterale"> ... contenu de la barre latrale... </div> <div id="pieddepage"> ... contenu du pied de page... </div>

La mthodeA prsente un inconvnient: pour faire flotter la barre latrale, nous devons la placer avant le <div> de contenu dans le balisage. Les navigateurs en mode texte, lecteurs dcran et autres priphriques ne grant pas les CSS feront apparatre (ou liront) le contenu de la barre latrale avant le contenu principal de la page. Voil qui nest pas tout fait idal. Nous pouvons toujours utiliser la mthode float et contourner ce problme en changeant les positions des <div> du contenu et de la barre latrale dans le balisage (comme visible dans le code ci-dessus) puis, dans la CSS, en faisant flotter ces deux lments loppos lun de lautre:
#entete { padding: 20px; background: #ccc; } #contenu { float: left; width: 66%; } #barrelaterale { float: right; width: 30%; background: #999; }

222

Styler en toute simplicit

#pieddepage { clear: both; padding: 20px; background: #eee; }

En faisant flotter les deux <div> loppos lun de lautre, nous pouvons ordonner notre code source de manire optimale et faire figurer le contenu avant la barre latrale dans le balisage, tout en parvenant au mme rsultat visuel qu la Figure13.4.

clear both Il est galement essentiel de dfinir la valeur both la proprit clear dans la dclaration CSS de #pieddepage. De cette manire, indpendamment de la longueur des colonnes, le pied de page apparatra toujours en dessous delles.
Le rsultat devrait tre identique la Figure13.4 mais nous avons amlior lordre de notre balisage.

MthodeC: faire flotter le contenu


<div id="entete"> ... contenu de l'en-tte... </div> <div id="contenu"> ... contenu principal... </div> <div id="barrelaterale"> ... contenu de la barre latrale... </div> <div id="pieddepage"> ... contenu du pied de page... </div>

Il existe une autre mthode quil est intressant de mentionner ici, utilisant une unique proprit float et parvenant quand mme positionner le <div> du contenu avant la barre latrale dans le balisage. Cette fois, nous faisons flotter le <div> de contenu gauche et nous lui affectons une largeur infrieure 100%. Cela cre un espace suffisant droite pour hberger la barre latrale. La CSS La CSS requise pour la mthodeC est on ne peut plus simple: une unique proprit float, la largeur dsire pour la zone de contenu et une petite marge entre les deux colonnes, voil tout ce dont nous avons besoin.

Mise en page avec les CSS

223

#entete { padding: 20px; background: #ccc; } #contenu { float: left; width: 66%; } #barrelaterale { background: #999; } #pieddepage { clear: left; padding: 20px; background: #eee; }

Remarquez que nous navons pas besoin de dfinir une largeur pour la barre latrale, car elle occupera simplement la largeur restante non utilise par le <div> de contenu (dans le cas prsent, 34%). Un arrire-plan envahissant La Figure13.5 illustre le rsultat. Oups: dans certains navigateurs populaires, la couleur darrire-plan de la barre latrale stend jusque sous la zone de contenu. Du fait quaucune largeur particulire nest dfinie pour la barre latrale, celle-ci cherche stendre sur toute la largeur de la fentre du navigateur. Nous pouvons viter ce dsagrment en ajoutant la barre latrale une marge gauche gale la largeur de la zone de contenu. Nous pouvons mme, en fait, fixer pour cette marge une largeur lgrement suprieure celle de la zone de contenu, de manire espacer un peu les colonnes.
#entete { padding: 20px; background: #ccc; } #contenu { float: left; width: 66%; }

224

Styler en toute simplicit

#barrelaterale { margin-left: 70%; background: #999; } #pieddepage { clear: left; padding: 20px; background: #eee; }

Figure13.5
Contenu flottant: larrire-plan de la barre latrale stend au contenu.

En toute simplicit Alternativement, si aucune couleur darrire-plan nest requise par la prsentation, alors la marge gauche nest pas ncessaire. La Figure13.6 illustre la prsentation obtenue en supprimant la totalit de la dclaration #barrelaterale et en ajoutant une petite marge droite pour le <div> de contenu. Les deux colonnes partagent la couleur darrire-plan par dfaut dfinie pour la page. La CSS est alors rduite :
#entete { padding: 20px; background: #ccc; } #contenu { float: left; width: 66%;

Mise en page avec les CSS

225

margin-right: 6%; } #pieddepage { clear: left; padding: 20px; background: #eee; }

Figure13.6
Contenu flottant, sans couleur darrire-plan.

Pour obtenir des colonnes en couleurs, il existe une solution alternative l'ajout d'une marge gauche: elle repose sur l'utilisation d'une image d'arrire-plan, et je vous prsenterai cette astuce la section Pour aller plus loin, en fin de chapitre.

Pour crer des mises en page en colonnes, nous pouvons utiliser le positionnement au lieu de la proprit float. Voyons donc ce sujet la dernire option reprsente par la mthodeD.

MthodeD: positionnement
<div id="entete"> ... contenu de l'en-tte... </div> <div id="contenu"> ... contenu principal...

226

Styler en toute simplicit

</div> <div id="barrelaterale"> ... contenu de la barre latrale... </div> <div id="pieddepage"> ... contenu du pied de page... </div>

Pour la mthodeD, nous utiliserons la mme structure de balisage et nous allons demble ordonner les <div> de la manire la plus efficace, avec le contenu figurant avant la barre latrale. Les lecteurs ne bnficiant pas des styles recevront ainsi le contenu en premier lieu et la barre latrale ensuite. Lorsque nous utilisons la mthode de positionnement, lordre du balisage devient indpendant de lemplacement des lments dans la page. Hauteur prvisible La CSS est assez comparable celle utilise dans les trois premires mthodes. La premire diffrence consiste assigner len-tte une hauteur exprime en pixels. Nous avons besoin dune hauteur prvisible pour pouvoir positionner la barre latrale par la suite. Jutilise ici une valeur totalement arbitraire, qui doit tre adapte au contenu figurant dans len-tte (logo, barre de navigation, formulaire de recherche,etc.).
#entete { height: 40px; background: #ccc; } #pieddepage { padding: 20px; background: #eee; }

De lespace pour la colonne Passons maintenant au <div> de #contenu et affectons-lui une marge droite, un peu comme nous lavons fait dans les mthodes prcdentes. Cela laisse un espace suffisant pour la colonne de droite que nous allons insrer au moyen dun positionnement absolu plutt que par flottement.
#entete { height: 40px; background: #ccc; } #contenu { margin-right: 34%; }

Mise en page avec les CSS

227

#pieddepage { padding: 20px; background: #eee; }

Insrer la barre latrale Enfin, nous allons placer le <div> de la #barrelaterale dans la marge de la zone de #contenu, au moyen dun positionnement absolu. Nous allons galement rinitialiser toute marge et tout espacement par dfaut susceptibles dtre appliqus par le navigateur sur le primtre complet de la page. Ainsi, nos coordonnes de positionnement produiront des rsultats identiques sur tous les navigateurs.
body { margin: 0; padding: 0; } #entete { height: 40px; background: #ccc; } #contenu { margin-right: 34%; } #barrelaterale { position: absolute; top: 40px; right: 0; width: 30%; background: #999; } #pieddepage { padding: 20px; background: #eee; }

En spcifiant position: absolute, nous pouvons utiliser les coordonnes top (haut) et right (droite) pour placer la #barrelaterale exactement l o nous le souhaitons (voir Figure13.7).

228

Styler en toute simplicit

Figure13.7
Mise en page sur deux colonnes utilisant le positionnement.

Cela revient dire "placer le <div> de la #barrelaterale 40pixels du haut et 0pixel du bord droit de la fentre du navigateur". Pour dfinir des coordonnes de positionnement, nous disposons galement des proprits alternatives bottom (bas) et left (gauche). Problme de pied Lorsque lon fait flotter des colonnes comme dans les mthodes prcdentes, la proprit clear permet de sassurer que le pied de page stend sur toute la largeur de la fentre du navigateur, indpendamment de la hauteur des colonnes de contenu ou de la barre latrale. Avec la mthode de positionnement, la barre latrale est extraite du flot normal du document, de sorte que si la barre latrale devait se rvler plus longue que la zone de contenu, elle chevaucherait le pied de page (voir Figure13.8). Une solution ce problme, laquelle jai recours frquemment, consiste attribuer au pied de page la mme marge droite que celle dfinie pour la zone de contenu. La colonne de droite stend ainsi jusquau bas de la page, droite du contenu et du pied de page. Pour ce faire, il suffit dajuster la CSS sur ce modle:
body { margin: 0; padding: 0; } #entete { height: 40px; background: #ccc; }

Mise en page avec les CSS

229

#contenu { margin-right: 34%; } #barrelaterale { position: absolute; top: 40px; right: 0; width: 30%; background: #999; } #pieddepage { margin-right: 34%; padding: 20px; background: #eee; }

Figure13.8
Chevauchement de la barre latrale et du pied de page.

Cette solution peut revtir une apparence un peu trange sur les pages dont le contenu est succinct et la barre latrale trs longue mais, au final, elle fonctionne. Les rsultats sont visibles la Figure13.9: nous vitons le chevauchement de la barre latrale et du pied de page.

230

Styler en toute simplicit

Figure13.9
Pied de page avec une marge droite correspondant celle de la zone de contenu.

Jamais deux sans trois Mais que faire si nous souhaitons une mise en page sur trois colonnes? Pas de problme, il est trs facile dajouter une troisime colonne lorsque lon utilise le positionnement. Il suffit simplement dajouter une marge gauche pour les zones de contenu et de pied de page, dune valeur correspondant la largeur souhaite pour notre troisime colonne. La barre latrale supplmentaire peut tre place nimporte o dans le balisage puisque, l encore, nous utiliserons le positionnement pour la loger dans la page. Supposons que nous ayons ajout une seconde barre latrale intitule #colonnegauche. Pour crer lespace ddi la colonne et la positionner gauche, nous devons donc insrer les rgles CSS suivantes:
body { margin: 0; padding: 0; } #entete { height: 40px; background: #ccc; } #contenu { margin-right: 24%; margin-left: 24%; } #colonnegauche { position: absolute; top: 40px; left: 0; width: 20%; background: #999; }

Mise en page avec les CSS

231

#barrelaterale { position: absolute; top: 40px; right: 0; width: 20%; background: #999; } #pieddepage { margin-right: 24%; margin-left: 24%; padding: 20px; background: #eee; }

Nous avons ici cr une marge gauche dans les zones de contenu et de pied de page (pour viter tout chevauchement), exactement comme nous lavions fait prcdemment pour la barre latrale de droite. Puis nous avons insr une nouvelle #colonnegauche utilisant un positionnement absolu, 40pixels du haut et 0pixel de la gauche de la page. Vous remarquerez que nous avons lgrement modifi les largeurs pour insrer cette troisime colonne. Du fait que nous utilisons des pourcentages, ces mises en page stendent ou se contractent proportionnellement la largeur de la fentre du navigateur. Vous pouvez aussi affecter des largeurs en pixels lune ou lautre de ces colonnes, ou aux trois si vous souhaitez obtenir une prsentation largeur fixe. La Figure 13.10 prsente les rsultats affichs dans un navigateur : nous obtenons une prsentation souple trois colonnes, cre laide de CSS et du positionnement absolu.

Figure13.10
Une prsentation souple sur trois colonnes, grce la mthode de positionnement.

232

Styler en toute simplicit

En rsum
Dans ce chapitre, nous avons tout juste effleur les possibilits en matire de cration de mises en page bases sur les CSS. Notre intention est ici de vous fournir les bases partir desquelles vous pourrez progresser, en vous prsentant les deux mthodes principales: par flottement et par positionnement. Jespre que vous approfondirez par vous-mme tout ce quil est possible de faire grce aux techniques de mise en page par CSS et que vous dbarrasserez ainsi vos pages des tableaux imbriqus pour leur prfrer un balisage lger et structur, accessible davantage de navigateurs et de priphriques. Pour plus dinformations sur les mises en page base de CSS, pensez consulter les ressources suivantes: "The Layout Reservoir" (www.bluerobot.com/web/layouts/): de formidables exemples de mises en page multicolonnes, cres en positionnement absolu. "From Table Hacks to CSS Layout: A Web Designers Journey" (www.alistapart.com/ articles/journey/) : un formidable tutoriel crit par Jeffrey Zeldman, qui relate les tapes ncessaires la construction dune mise en page sur deux colonnes. "CSS Layout Techniques: For Fun and Profit" (www.glish.com/css/): la collection de mises en page CSS dEric Costello. "Little Boxes" (www.thenoodleincident.com/tutorials/box_lesson/boxes.html): une interface belle et simple donnant accs de nombreuses dmonstrations de mises en page par CSS, cres par Owen Briggs. "Layouts.IronMyers.com" (http://layouts.ironmyers.com/) : collection de 224 mises en page de type grille et CSS, ralise par JacobC. Myers. Diffrentes configurations sont disponibles en aperu et en tlchargement. "CSS Zen Garden" (www.csszengarden.com/): "une dmonstration de ce quon peut accomplir laide de CSS pour la conception web". Cultiv par Dave Shea, ce "jardin" est une vitrine de crations CSS dernier cri (y compris des mises en page) proposes par les lecteurs et reposant sur un mme fichier XHTML. Une ressource fantastique pour observer le meilleur des mises en page CSS. "Elastic Design" (http://www.alistapart.com/articles/elastic/) : nous navons pas abord les mises en page bases surem (ou dites "lastiques") mais je vous encourage tudier cette mthode alternative de cration de mises en page CSS, utilisant des units relatives calcules en fonction de la taille de police de base. Lauteur, Patrick Griffiths, explique comment adapter le texte ajuste aussi les largeurs calcules pour les colonnes de mise en page, ce qui procure ainsi une interface souple et adaptable.

Mise en page avec les CSS

233

"The Incredible Em & Elastic Layouts with CSS" (http://jontangerine.com/ log/2007/09/the-incredible-em-and-elastic-layouts-with-css): le concepteur web Jon Tan vous guide dans la cration dune mise en page base surem grce ses explications dtailles. Un excellent tutoriel pour tous ceux qui envisagent dexprimenter la mise en page avecem. Le site Alsacreations.com de faon gnrale, et en particulier ces trois articles: http://www.alsacreations.com/tuto/lire/564-Design-XHTML-CSS-completavec-2-colonnes-de-meme-hauteur.html, un tutoriel complet pour crer une mise en page sur deux colonnes; http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html, autre tutoriel, cette fois pour la cration dune mise en page sur trois colonnes, laide dlments flottants; http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html, qui fournit une analyse, des explications et des ressources sur le positionnement CSS.

Pour aller plus loin


Maintenant que nous avons trait les bases de la cration de mises en page CSS, il est important daborder Internet Explorer5 et5.5 pour Windows, ainsi que leur interprtation malheureuse et errone du modle de botes CSS. Ces navigateurs ne sont assurment plus tout jeunes, et leur prsence sur le march est aujourdhui anecdotique. Leur prise en charge a donc peu de chances dtre fondamentale pour vous. Nanmoins, vous pouvez fort bien tre amen travailler sur du code HTML hrit de cette poque et comportant le contournement que nous prsentons ici. Un peu plus loin, nous vous rvlerons aussi un secret permettant dobtenir des colonnes de mme hauteur, en utilisant une image darrire-plan en mosaque.

Le problme du modle de botes


Un peu plus haut dans ce chapitre, nous avons abord la cration de mises en page CSS multicolonnes utilisant uniquement la proprit width pour dfinir lespace allou chaque colonne. Les choses sont un peu plus compliques lorsque lon ajoute de lespacement ou des marges directement ces colonnes. Pourquoi donc? Malheureusement, la version5 dInternet Explorer pour Windows calcule de faon incorrecte la largeur dun conteneur lorsquon lui ajoute des espaces ou des bordures.

234

Styler en toute simplicit

Par exemple, dans nimporte quel navigateur compatible CSS1 sauf IE5/Windows, la largeur totale dun conteneur correspond la somme de sa largeur, des espaces dfinis autour et des bordures. Cest ainsi que tout navigateur est cens, selon le W3C, interprter le modle de botes CSS. Mais IE5/Windows considre que la bordure et lespacement font partie intgrante de la largeur spcifie. Cest confus? Ne vous inquitez pas: un schma devrait rendre les choses plus claires. Voir pour croire Comparons les Figures13.11 et13.12. La Figure12.11 illustre une bote de 200pixels de large, avec 10 pixels despacement appliqus de part et dautre, ainsi quune bordure de 5pixels de large. La somme de toutes ces valeurs rvle une largeur totale de 230pixels. Cest le modle de botes tel quil a t conu: la proprit width dfinit toujours la zone de contenu dune bote, et lespacement ou les bordures viennent sajouter cette valeur.
Figure13.11
Calcul correct du modle de botes.

Ainsi, si nous avons donn une barre latrale une largeur de 200pixels, et que nous lui ayons ajout de lespacement et des bordures, la dclaration CSS devrait ressembler :
#barrelaterale { width: 200px; padding: 10px; border: 5px solid black; }

Nous avons spcifi une largeur de 200pixels mais lespace physique total requis par la barre latrale est de 230pixels sauf dans IE5/Windows, o la largeur totale de la colonne sera de 200pixels, y compris les espacements et les bordures qui seront placs lintrieur. La Figure13.12 indique que, lorsque nous spcifions 200pixels dans la proprit width, la largeur de lespacement et des bordures est dduite de la zone de contenu au lieu de lui tre ajoute.

Mise en page avec les CSS

235

Figure13.12
Calcul incorrect, dans IE5/Windows, de la largeur, de lespacement et des bordures.

Largeurs variables Nous sommes donc confronts un problme lorsque nous utilisons des espacements et des bordures pour nos botes: la largeur totale varie suivant le navigateur utilis. Beurk. Cela nest finalement repoussant que pour la poigne de gens qui utilisent encore le navigateurIE5 sur Windows, dj plutt ancien. Sil nest pas crucial aujourdhui, au vu des parts de march dIE5 qui sont rduites peau de chagrin, de se proccuper des problmes que pose le modle de bote, il est intressant de comprendre pourquoi ctait, historiquement, un problme et pourquoi vous pouvez voir apparatre les corrections associes dans du code hrit de cette poque. Quavons-nous donc fait? Eh bien, par chance, il existe une astuce pour corriger ces divergences apparaissant dans IE5/Windows. Le "hack" nous permet de dfinir deux largeurs diffrentes, lune pour IE5/Windows et lautre pour nimporte quel autre navigateur traitant correctement le modle de botes. Le "Box Model Hack" Conu avec amour par Tantek elik, le "Box Model Hack" ou astuce du modle de botes (www.tantek.com/CSS/Examples/boxmodelhack.html) nous permet de spcifier deux largeurs, lune tant adapte et reconnue uniquement par Internet Explorer5 pour Windows, lautre destine tout autre navigateur du march. En tirant parti dun bug danalyse de la CSS qui se manifeste uniquement dansIE5 etIE5.5 sur Windows, nous pouvons dfinir une largeur de valeur plus leve (pour intgrer lespacement et les bordures), puis craser cette valeur par la largeur relle, que les autres navigateurs interprteront correctement. Le code par lexemple Supposons, par exemple, que la zone de contenu de notre barre latrale doive avoir une largeur de 200pixels, laquelle sajoutent 10pixels despacement de part et dautre et une bordure de 5pixels. Notre dclaration CSS devrait donc se prsenter ainsi:
#barrelaterale { width: 200px; padding: 10px; border: 5px solid black; }

236

Styler en toute simplicit

Pour IE5/Windows, nous devons dfinir une largeur de 230pixels (cest--dire la largeur totale incluant lespacement et les bordures de part et dautre), puis craser cette valeur par les 200pixels initialement prvus pour les navigateurs conformes:
#barrelaterale { padding: 10px; border: 5px solid black; width: 230px; /* pour IE5/Win */ voice-family: "\"}\""; voice-family: inherit; width: 200px; /* valeur relle */ }

Notez que la valeur correspondant IE5/Windows apparat en premier lieu, suivie de quelques rgles destines faire croire au navigateur que la dclaration est finie. Nous utilisons ici la proprit voice-family, choisie tout simplement parce quelle nimpactera pas laffichage graphique pour les navigateurs qui la comprennent. Enfin, nous spcifions la valeur relle de la largeur, crasant de fait la valeur prcdemment dfinie dans width. La seconde rgle width est ignore par IE5/Windows. Les rsultats seront identiques dans IE5/Windows et dans tout autre navigateur compatible CSS2. Sans cette astuce, les utilisateurs dIE5 sous Windows obtiendraient une colonne plus troite que prvu. tre sympa avec Opera Pour les navigateurs compatibles CSS2 qui sont galement victimes du bug danalyse dIE5/ Windows, nous allons devoir ajouter une dclaration supplmentaire aprs toute instance du Box Model Hack. Cette rgle, surnomme "tre sympa avec Opera", garantit que les navigateurs grant correctement la largeur ne seront pas "coincs" par le bug danalyse et quils afficheront la largeur prvue.
#barrelaterale { padding: 10px; border: 5px solid black; width: 230px; /* pour IE5/Win */ voice-family: "\"}\""; voice-family: inherit; width: 200px; /* valeur relle */ } html>body #barrelaterale { width: 200px; }

Cela conclut notre prsentation du palliatif de lerreur dinterprtation du modle de botes CSS par IE5/Windows, et tout le monde devrait en sortir satisfait.

Mise en page avec les CSS

237

Pas seulement pour les largeurs Si nous avons utilis le Box Model Hack pour obtenir, dans cet exemple, des largeurs gales sur tout navigateur, lastuce peut galement tre exploite tout moment pour proposer des rgles CSS diffrentes pour IE5/Windows. Tout "hack" doit tre utilis avec prudence et uniquement en cas de ncessit. Il est judicieux de laisser dans le code une trace signalant que vous avez eu recours cette astuce, afin de pouvoir la supprimer facilement lavenir. Cette astuce, si elle nest plus indispensable aujourdhui, a longtemps t ncessaire pour compenser ce dfaut particulier dIE5.
La version 6 d'Internet Explorer rsout ce problme et gre correctement le modle de botes, dans la plupart des cas. L'article http://www.alsacreations.com/article/lire/573-A-propos-duModele-de-bote-Microsoft-ou-quirks.html prsente une analyse de la situation et dresse la liste des cas susceptibles de poser problme dansIE6. On notera avec intrt qu'un document respectant les standards sera, dans tous les cas, correctement trait.

Des colonnes factices


La section suivante est l'origine parue sous le titre "Faux columns" dans l'dition de janvier 2004 du magazine A List Apart (www.alistapart.com/articles/fauxcolumns/).

Voici une question que lon me pose trs souvent propos de la prsentation de mon site personnel: "Comment fais-tu pour tendre la couleur darrire-plan de la colonne de droite sur toute la hauteur de la page?" Cest un concept trs simple, vraiment, et que vous pouvez appliquer nimporte quelle mthode de mise en page que jai prsente prcdemment dans ce chapitre. tendue verticale Lune des proprits quelque peu frustrantes de CSS est le fait que ltendue verticale des lments ne va pas au-del du strict ncessaire. En dautres termes, si lon intgre une image de 200pixels de haut dans un lment <div>, celui-ci stendra sur une hauteur de 200pixels seulement. Cela pose donc un dilemme intressant lorsque lon utilise, pour sparer le balisage en sections, des lments <div> auxquels on applique ensuite des CSS, par exemple pour crer une mise en page en colonnes comme nous lavons fait dans ce chapitre. Une colonne peut tre plus longue que lautre (voir Figure 13.13). Le volume de contenu figurant dans les colonnes ne permet pas de crer facilement une mise en page avec deux colonnes de mme

238

Styler en toute simplicit

hauteur et leffet visuel nest gure russi si lon souhaite appliquer une couleur individuelle darrire-plan pour chaque colonne.
Figure13.13
Colonnes de longueurs diffrentes.

Il existe plusieurs solutions pour donner limpression que les colonnes ont la mme longueur, indpendamment du contenu quelles hbergent. Je vous donne ici ma solution personnelle, utiliser avec une mise en page en positionnement absolu, et qui se trouve tre vraiment simple. Lastuce Lastuce, dune simplicit drangeante, consiste utiliser une image darrire-plan rpte en mosaque verticale pour donner lillusion de colonnes de couleur. Dans une incarnation antrieure du site SimpleBits (www.simplebits.com), limage darrire-plan que jai utilise ressemblait celle de la Figure13.14 (aux dimensions prs, modifies pour les besoins de la dmonstration). Elle comprenait gauche une dcoration de type rayure, une large section blanche pour la colonne de contenu, une bordure de 1pixel de large, une section beige pour larrire-plan de la colonne de droite et enfin une bordure dcorative symtrique de celle figurant gauche.
Figure13.14
mosaique.gif: une image

darrire-plan de 2pixels de haut, avec les largeurs alloues aux colonnes.

Limage complte ne faisait que quelques pixels de haut mais, rpte en mosaque verticale, cela crait un effet de colonnes en couleurs sur toute la hauteur de la page, indpendamment de la longueur du contenu et des colonnes. La CSS Jai ajout cette rgle CSS lmentaire llment <body>:
background: #ccc url(mosaique.gif) repeat-y 50% 0;

En substance, nous passons lintgralit de larrire-plan de la page en gris et nous faisons en sorte que limage se rpte en mosaque verticale uniquement (repeat-y). Les paramtres

Mise en page avec les CSS

239

50% 0 se rfrent au positionnement de limage de fond (en loccurrence, 50% du bord

gauche de la fentre du navigateur, ce qui a pour effet de centrer limage, et 0pixel du haut). Les colonnes positionnes Limage darrire-plan tant en place, ma mise en page par positionnement venait se poser par-dessus. Des espacements et des marges ont t ajouts aux colonnes de droite et de gauche, afin de sassurer quelles sont correctement alignes avec les colonnes factices cres par limage de fond (voir Figure13.15).
Figure13.15
Limage darrire-plan, en mosaque, cre les colonnes de couleur.

Soulignons que si des bordures, espacements et marges sont requis sur lune ou lautre des colonnes et si le site doit pouvoir tre lu sous IE5/Windows, nous devons toujours tenir compte du problme caus par le modle de botes et insrer lastuce de Tantek elik (voir la section Le problme du modle de botes, un peu plus haut dans ce chapitre). Toutefois, si lon peut viter les bordures et espacements laide uniquement des marges, ou si la prise en charge dIE5 nest pas requise (et il serait surprenant, aujourdhui, quelle le soit), le Box Model Hack nest alors pas ncessaire. Et si le contenu des colonnes est simplement pos (en transparence) sur larrire-plan en mosaque, il devrait tre assez facile dviter le recours cette astuce. Comme il vous plaira Si jai utilis un positionnement absolu pour crer une mise en page sur deux colonnes sur mon propre site, on peut obtenir des rsultats tout aussi russis laide de nimporte laquelle des mthodes de mise en page que nous avons prsentes dans ce chapitre. La mme ide doit tre applique: rpter limage darrire-plan en mosaque, puis faire flotter une colonne dans la bonne position et la superposer la colonne factice qui apparat en fond. Cest une ide simple mais qui peut allger lune des causes de frustration laquelle les concepteurs web sont frquemment confronts lorsquils crent des mises en page bases sur les CSS.

240

Styler en toute simplicit

Bob ou Robert? Lorsque nous sommes amens nommer les zones de structure de nos documents, nous sommes toujours tents dutiliser des noms bien franais, qui ont lavantage dtre clairs pour nous. Tant que lquipe travaillant sur le site web est composes de francophones, cela ne pose pas de problme. Mais aujourdhui, lre dInternet, un projet peut rapidement prendre une ampleur internationale et faire intervenir des dveloppeurs polonais, grecs ou espagnols. Dans ce cadre, il est bien plus facile pour tous de comprendre le terme "sidebar" plutt que "barrelaterale". Sans compter que lon est alors moins tent de taper dans le code des accents, quil est toujours prudent dviter. La question du nommage des zones a par ailleurs conduit une proposition mise il y a quelques annes par certains dveloppeurs, allant dans le sens dune normalisation des termes utiliss. Cette solution permettrait de crer des CSS interchangeables car toutes bases sur la mme structure de document. Andy Clarke, lun de ces dveloppeurs, a publi sur son site un tableau des noms de zones employs par une liste de concepteurs de sites web parmi les plus influents. Vous pouvez la consulter ladresse http://www.stuffandnonsense.co.uk/archives/naming_conventions_ table.html et en tirer vos propres conclusions pour la mise en place de votre prochain projet.

Pour conclure
Jespre que ce chapitre vous a mis le pied ltrier pour plonger dans lunivers passionnant des mises en page CSS. Pour commencer ce chapitre, nous avons tudi quatre mthodes diffrentes permettant de construire des mises en page: trois dentre elles utilisaient la proprit float, la dernire reposait sur le positionnement absolu. Noubliez pas de consulter les ressources supplmentaires dont jai donn la liste pour y trouver davantage de techniques et dmonstrations de mise en page. Nous avons galement parl de limportance du Box Model Hack pour le calcul des largeurs de colonnes contenant des espacements et des bordures, afin de garantir quelles apparatront de faon cohrente dans IE5/Windows et dans tout autre navigateur. Vous naurez probablement pas besoin de garantir cette cohrence, dans la mesure o les parts de march dIE5 sont quasi nulles au moment o nous traduisons ces lignes. Si votre chef ou votre client choisit dignorer ce navigateur, considrez que vous avez de la chance et, au moins, vous aurez appris une petite partie de lhistoire des CSS. Enfin, je vous ai rvl une astuce bien pratique pour construire des mises en page CSS avec des colonnes de mme hauteur, ce qui vous semble probablement trs lmentaire mais qui, en ralit, peut se rvler trs frustrant. Avec laide dune mosaque dimages darrire-plan, vous les colonnes qui se droulent sur toute la hauteur de la page (indpendamment de la longueur du contenu)!

14

Styler du texte
Revenir aux bases un chapitre durant me semble une bonne ide, afin daborder lusage des CSS pour styler du texte. La manipulation des fontes est probablement le domaine o les CSS sont le plus utilises, mme sur des sites qui nintgrent pas totalement les standards du Web. viter davoir rpter les lments <font> partout dans le balisage a toujours t attirant pour les concepteurs web, et il nest pas difficile de voir un avantage majeur dans le contrle de la typographie via les CSS: cela nous permet de sparer encore davantage la prsentation et le contenu. Nous savons maintenant, grce aux nombreux exemples tudis dans ce livre, que les CSS sont capables de bien davantage. Pourtant, appliquer des styles aux textes peut tre lune des solutions les plus simples pour donner un peu dallure aux pages web, mme les plus lmentaires. Et, en sappuyant sur les CSS pour styler du texte, nous pouvons viter lajout dimages inutiles nos pages. Dans ce chapitre, nous allons passer en revue quelques exemples dutilisations cratives des CSS pour transformer un bloc de texte fade et lui faire atteindre de nouveaux sommets (ainsi que de nouvelles couleurs, tailles et fontes).

Comment donner un peu d'allure un hypertexte?


Styler du texte est quelque chose que les CSS font bien, parfois mme y compris dans les navigateurs anciens, o les rgles CSS avances nont jamais t totalement prises en charge. Par le pass, autant les concepteurs que les dveloppeurs web se sont appuys sur les images pour tous les cas o il fallait appliquer au texte un style dpassant le simple changement de taille ou de graisse. Certains sites ont pouss le bouchon trop loin, ce qui a conduit un cauchemar en termes daccessibilit, lequel nest tout simplement pas tolrable au vu des normes actuelles. Vous avez dj essay de lire un site dont le texte est essentiellement gr par le biais dimages dans un navigateur en mode texte? Pour vous donner quelques alternatives la cration dimages et pour rpondre la question qui prside cette section, nous allons prendre un bloc dhypertexte sans le moindre style et lui appliquer progressivement diverses rgles CSS pour le rendre plus attrayant.

Police!
Pour commencer, jetons un il au bloc de texte que nous allons manipuler et voyons comment il saffiche avec la police par dfaut du navigateur. En loccurrence, il sagit dune police sans serif, de 16 pixels. Les captures dcran de ce chapitre sont ralises avec Konqueror sous Linux et, de ce fait, le texte est liss (antialiasing). On obtient des rsultats similaires avec Safari sous MacOSX ou lorsque ClearType est activ dans Windows.

242

Styler en toute simplicit

Times (ou sa variante Times New Roman) et Verdana sont les polices que lon trouve configures par dfaut sur la majorit des navigateurs. Toutefois, il est trs facile pour lutilisateur de changer ce paramtre et de fixer la police de son choix; nous ne pouvons donc pas nous y fier avec certitude. La Figure14.1 illustre le texte non styl que nous allons utiliser tout au long de ce chapitre. Il sagit dun simple titre balis par un lment <h1>, suivi de trois paragraphes de fascinants conseils pour la rnovation intrieure.
Figure14.1
Affichage par dfaut du titre et du texte dans un navigateur.

Interligne: la hauteur entre deux lignes


Lune des solutions les plus simples et les plus efficaces pour styler du texte consiste appliquer la proprit line-height. Espacer un peu les lignes peut rendre les paragraphes plus lisibles et plus attrayants. Voil qui fera des merveilles sur vos pages. Ajouter la rgle CSS suivante llment <body> fait tout fait laffaire. Nous pourrions galement ajouter cette rgle tout lment de notre choix, par exemple si nous souhaitons augmenter linterligne uniquement pour les lments <p>:
body { line-height: 1.5em; }

En substance, nous indiquons que la hauteur de ligne pour le texte de la page doit tre dune fois et demie la hauteur du caractre. Jaime utiliser les units em pour line-height, car elles sont proportionnelles la taille de la fonte.

Styler du texte

243

La Figure 14.2 illustre le rsultat de lapplication de la proprit line-height notre exemple, qui a dj bien meilleure allure. Cest fou ce quune petite proprit line-height peut faire.
Figure14.2
Texte par dfaut, aprs augmentation de linterligne.

Toute la famille
Nous pouvons naturellement changer aussi la police, en gardant lesprit que nous sommes limits aux polices installes sur le systme de lutilisateur. Dfinissons une famille de fontes prfrentielles pour notre exemple, au moyen de la proprit font-family. Lide ici est de spcifier une liste de polices spares par des virgules, dans lordre de prfrence. Si la premire police de la liste nest pas installe sur le systme de lutilisateur, le navigateur choisira la suivante dans la liste, et ainsi de suite.
body { font-family: Georgia, Times, serif; line-height: 1.5em; }

244

Styler en toute simplicit

Dans lexemple prcdent, nous indiquons dafficher tout le texte en police Georgia. Si la police Georgia nest pas installe sur le systme de lutilisateur, utiliser Times. Si Times nest pas installe, utiliser la police serif. La Figure14.3 illustre le texte dexemple aprs application de la proprit font-family.
Figure14.3
Notre exemple affich en police Georgia.

Grer les espaces dans les noms de police Pour spcifier des noms de police incluant des espaces (par exemple, Lucida Grande), nous devons enchsser ces noms dans des guillemets doubles. Dans lexemple qui suit, nous spcifions Lucida Grande (une police populaire sur MacOS) comme police prfre, avec TrebuchetMS (une police populaire sous Windows) comme deuxime choix. Enfin, nous ajoutons la police gnrique sans serif, qui correspond la police sans serif par dfaut de lutilisateur et qui jouera le rle de "voiture-balai" si les deux polices prcdentes sont absentes sur le systme.
body { font-family: "Lucida Grande", "Trebuchet MS", sans-serif; line-height: 1.5em; }

Crnage: l'espace entre les lettres


Le mot "crnage" est un terme de typographie dsignant lespace entre deux caractres. La proprit CSS correspondante est letter-spacing. Cest donc la prochaine proprit que nous allons utiliser sur nos lments <h1> pour pimenter un peu le titre de notre exemple.

Styler du texte

245

En appliquant letter-spacing aux lments <h1>, nous pouvons obtenir des titres lgants, sans avoir recourir une application de cration graphique pour gnrer des images de texte. Commenons par appliquer un espacement ngatif pour rapprocher les lettres du titre:
h1 { letter-spacing: -2px; }

Le rsultat est visible la Figure14.4.


Figure14.4
Espacement ngatif appliqu aux lettres de notre titre <h1>.

Inversement, essayons dappliquer un espacement positif et utilisons aussi la proprit


font-style afin que le titre apparaisse en italique.
h1 { letter-spacing: 4px; font-style: italic; }

La Figure14.5 illustre le rsultat. Voil qui est plutt lgant pour un simple titre, nest-ce pas? Il est sage de ne pas appliquer un espacement trop important en valeur absolue, car cela peut rapidement rendre le texte plus difficile lire. Et si le texte est illisible, peu importe quil soit lgant ou non

246

Styler en toute simplicit

Figure14.5
Espacement positif et italique appliqus aux lettres de notre titre.

Lettrines
Les lettrines sont monnaie courante dans le monde de limpression. Elles apportent un certain panache et de llgance aux paragraphes de texte et, oui, il est possible dajouter des lettrines sans image, en utilisant uniquement les CSS. Commenons par ajouter un "crochet de style" au balisage, afin que nous puissions identifier de manire unique la premire lettre du premier paragraphe. Nous allons encadrer le"L" par des lments <span> et lui affecter une classe lettrine que nous pourrons rutiliser ailleurs dans la page ou dans le site.
<p><span class="lettrine">L</span>orsque vous utilisez des peintures au latex...

Dans certains navigateurs rcents qui grent correctement la spcification CSS2, il est possible d'utiliser la pseudo-classe:first-letter pour accder la premire lettre d'un paragraphe, sans avoir ajouter l'lment supplmentaire <span>. Si cette solution est suprieure du point de vue smantique, ses effets ne seront malheureusement pas visibles dans Internet Explorer en versions5, 6 et7, tandis que la prise en charge dans Firefox2 et Opera est incohrente. Toutefois, Safari gre correctement:first-letter depuis sa version1.

Maintenant que nous avons un contrle total sur le"L" du premier paragraphe, ajoutons la dclaration CSS qui nous permettra dagrandir la lettre et de la faire flotter gauche (afin que le reste du texte se rpartisse autour). Nous allons galement ajouter un arrire-plan et une bordure dcoratifs:

Styler du texte

247

.lettrine { float: left; font-size: 400%; line-height: 1em; margin: 4px 10px 10px 0; padding: 4px 10px; border: 2px solid #ccc; background: #eee; }

La Figure14.6 illustre la faon dont la lettrine rsultante apparat dans un navigateur aprs application de cette rgle, couple avec les styles dj appliqus lexemple jusqu prsent. Tout cela sans la moindre image et en utilisant simplement les CSS et le balisage.
Figure14.6
Exemple de lettrine cre avec CSS.

Alignement du texte
Si nous nous tournons une fois encore vers le monde de limpression comme source dinspiration, nous pouvons appliquer une justification notre texte, au moyen de la proprit text-align. La justification applique des espaces variables entre les mots du texte, de manire que toutes les lignes aient la mme longueur, donnant ainsi lapparence dune colonne compacte et bien dessine.

248

Styler en toute simplicit

La rgle CSS permettant dactiver la justification pour tout le texte de notre exemple est aussi simple que:
body { font-family: Georgia, Times, serif; line-height: 1.5em; text-align: justify; }

La Figure14.7 illustre notre bloc de texte dexemple, maintenant justifi!


Figure14.7
Un exemple de texte justifi au moyen de la proprit text-align.

Notez que les lignes de texte salignent parfaitement, aussi bien sur le bord droit que sur le bord gauche du paragraphe. Les autres valeurs possibles pour la proprit text-align sont left, right et center. Ainsi, nous pouvons aussi appliquer la proprit text-align llment <h1> pour centrer le texte de notre exemple, en ajoutant la rgle suivante:
h1 { letter-spacing: 4px; font-style: italic; text-align: center; }

La Figure13.8 prsente le rsultat de cette modification.

Styler du texte

249

Figure14.8
Titre <h1> centr au moyen de la proprit text-align.

Transformer le texte
La proprit text-transform peut modifier la casse du texte, indpendamment de la faon dont cette casse apparat dans le balisage. Ainsi, dans notre exemple, notre titre est balis comme ceci:
<h1>Astuce de peinture</h1>

Si nous utilisons la proprit text-transform dans notre CSS, nous pouvons passer le titre entier en capitales (ou en bas de casse, notre convenance), sans avoir modifier le balisage. Outre les styles que nous avons dj ajouts aux lments <h1>, la rgle CSS permettant de passer notre titre en capitales est simple:
h1 { letter-spacing: 4px; font-style: italic; text-align: center; text-transform: uppercase; }

Le rsultat est visible la Figure14.9. Sans avoir besoin de retravailler notre balisage, nous pouvons modifier lenvi la casse de certains lments sur la page ou sur lintgralit du site, en modifiant seulement la CSS.

250

Styler en toute simplicit

Figure14.9
Passage du titre en capitales au moyen de CSS.

Petites capitales
La plupart des navigateurs vont reconnatre la proprit font-variant, ce qui nous permet dafficher du texte en petites capitales (cest--dire que le texte apparat en capitales de diffrentes tailles). Appliquons donc la proprit font-variant au titre de notre exemple:
h1 { letter-spacing: 4px; text-align: center; font-variant: small-caps; }

La Figure14.10 illustre le rsultat sur notre titre, qui apparat maintenant en petites capitales: une autre manire dimiter le monde de limpression en nutilisant que le balisage et les CSS.

Styler du texte

251

Figure14.10
Notre titre, affich en petites capitales.

Indentation de paragraphe
Si nous nous tournons de nouveau vers le monde de limpression (hum, il y a comme une tendance l, non?), nous pouvons indenter la premire ligne de chaque paragraphe au moyen de la proprit text-indent. Une valeur positive indente le texte dautant. Indentons donc chaque paragraphe de notre exemple de 3em (cest--dire environ la largeur maximale de trois caractres). Je vais supprimer les lettrines de notre mise en forme, afin quelles ninterfrent pas avec lindentation de la premire ligne du premier paragraphe.
Em. L'em est une unit de mesure typographique associe au cadratin. Le cadratin est, lorigine, un plomb carr dun em de ct, servant crer des espaces dans un texte imprim. Il semble quun em correspondait la largeur dun M majuscule dans la police et la taille utilises (cest dailleurs ce M qui donne son nom lunit). Toutefois, cette dfinition a volu avec les usages typographiques (intgration de caractres trangers dans les polices, apparition des CSS). En typographie moderne, elle correspond plutt la hauteur des plombs sur lesquels les caractres sont poss. Utilise dans la dfinition des rgles CSS, cette unit permet de dfinir des dimensions proportionnelles la taille de la fonte. On peut ainsi prserver les rapports de taille entre texte et titres ou conserver lhomognit de positionnement et ce, quelle que soit la taille daffichage des caractres. Attention toutefois au fait que lem donne des rsultats variables en fonction des fontes choisies et des paramtres de polices du navigateur : veillez tester vos feuilles de style sur autant de plates-formes (systme dexploitation et navigateur) que possible !

252

Styler en toute simplicit

La rgle CSS permettant dindenter la premire ligne de tout lment <p> ressemble :
p { text-indent: 3em; }

La Figure14.11 illustre les rsultats et vous pouvez constater que seule la premire ligne de chaque paragraphe est effectivement indente, de la quantit que nous avons spcifie. Jai choisi dutiliser des unitsem afin que lindentation reste proportionnelle la taille de la police, ce qui est particulirement intressant si les utilisateurs dcident daugmenter ou de diminuer par eux-mmes la taille des polices.
Figure14.11
Paragraphes indents au moyen de la proprit text-indent.

Contraste
Un autre point capital que vous devez garder en tte en matire de typographie sur le Web est le contraste. Par dfaut, la plupart des navigateurs affichent le texte en noir pur (#000) sur un fond blanc (#fff). Adoucir le noir dun ou deux tons peut se rvler bien plus quagrable. Si, par exemple, votre prsentation affiche le texte en noir sur fond blanc, vous pouvez dfinir un noir lgrement moins noir comme valeur par dfaut pour llment body:
body { color: #333; background: #fff; }

La diffrence est subtile, mais le texte se rvlera moins agressif pour les yeux.

Styler du texte

253

Inversement, si votre mise en forme affiche le texte en blanc sur fond noir, vous pouvez en amliorer la lisibilit en grisant trs lgrement ce blanc pur:
body { color: #ddd; background: #000; }

L encore, la diffrence est trs subtile mais ce sont les petits dtails de ce type qui font toute la diffrence pour une prsentation charge en texte.

En rsum
En vous faisant dcouvrir quelques proprits CSS associes la mise en forme du texte, jespre vous faire raliser quun outil de cration dimages nest pas toujours indispensable pour grer du texte de manire lgante. Bien souvent, appliquer un peu de style au balisage suffit amplement et il nest pas rare que le rsultat soit mme trs russi. Assurment, certaines situations exigent que nous recourions la cration dlments graphiques, par exemple pour un logo ou lorsquune police trs particulire est ncessaire la prsentation de certains lments de page. La cl, comme pour tout le reste, est de trouver un quilibre. Essayez avant toute chose dappliquer des styles CSS, et votre balisage restera plus propre et plus accessible. Les CSS nous donnent assez de contrle pour donner forme et style notre texte, pour des rsultats tonnamment russis. Cest un outil de plus ajouter votre arsenal de conception, et vous garderez ainsi votre balisage lger et efficace.

15

Remplacement de texte pardesimages


Dans les premiers temps de ladoption des standards web, et plus particulirement des CSS, de plus en plus de dveloppeurs et concepteurs en dcouvraient les avantages: chaque jour, de nouvelles solutions mergeaient et les frontires techniques taient sans cesse repousses. Des manires nouvelles et meilleures de parvenir un but donn voyaient continuellement le jour et voluaient rgulirement. Le "remplacement par des images", technique grce laquelle on recourt aux CSS pour remplacer de lhypertexte simple par des images stylises, constitue un excellent exemple de cette volution.

Comment utiliser les CSS pour remplacer du texte par desimages?


Idalement, tous les lments graphiques de prsentation (non essentiels ou dcoratifs) devraient tre grs dans la CSS. Ainsi, vous pouvez changer facilement les images lors de mises jour, tout en conservant exactement le mme balisage. De plus, cela garantit que les navigateurs et priphriques obtiennent en premier lieu le sens du balisage, et ce, quils grent ou non les rgles CSS avances ncessaires pour afficher des images au lieu du texte. Tout au long de cet ouvrage, jai fait la promotion de ce type davantages.

Aucune solution n'est parfaite


Toutefois, dnicher la mthode "parfaite" pour remplacer du texte par des images rfrences uniquement par la CSS sapparente quelque peu la qute du Graal. Cette solution nexiste pas encore. Il existe bien des mthodes fonctionnant dans tous les navigateurs, mais elles chouent avec des logiciels dassistance tels que les lecteurs dcran. Dautres mthodes fonctionnent correctement, moins que lutilisateur nait paramtr son navigateur pour nafficher aucune image (tout en activant les CSS). Si aucune mthode, au moment o nous crivons ces lignes, ne peut satisfaire tout le monde ou, du moins, tous les utilisateurs, les techniques ont nanmoins effectivement cours aujourdhui sur un large ventail de sites. Vous devez tre prudent lorsque vous appliquez la moindre mthode de remplacement de texte et vous devez comprendre les inconvnients quelle implique.

256

Styler en toute simplicit

utiliser, mais avec modration


Cest l lobjectif de ce chapitre: expliquer la souplesse quautorise le remplacement de texte par des images, mais aussi montrer ses limites. Avec le temps, les aficionados des CSS dcouvriront peut-tre de meilleures solutions susceptibles dengendrer les mmes rsultats. En attendant, nous devons nous contenter de ce que nous avons, ce qui implique de peser le pour et le contre. Pour vous familiariser avec le concept du remplacement de texte par des images, tudions quelques mthodes populaires, commencer par la technique dnomme Fahrner Image Replacement (FIR) qui est lorigine de tout.

MthodeA: Fahrner Image Replacement (FIR)


Baptise ainsi daprs Todd Fahrner, qui a dvelopp cette technique, FIR est la mthode dorigine utilise pour remplacer du texte par une image au moyen de la proprit background (ou background-image) de CSS. Douglas Bowman a popularis cette mthode grce son fantastique tutoriel "Using background-image to Replace Text" (http://stopdesign.com/archive/2003/03/07/ replace-text.html). Pour lillustrer, suivons un exemple simple dutilisation de la mthode FIR pour remplacer un titre en texte par un lment graphique.

Le balisage
Le balisage dont nous allons nous servir pour le remplacement est le suivant:
<h1 id="fir">Fahrner Image Replacement</h1>

Un simple lment de titre, avec un texte que nous allons remplacer ultrieurement par une image. Vous remarquerez que nous avons affect unid unique llment <h1>, de manire exercer ensuite, dans la CSS, un contrle total sur ce titre en particulier. La Figure15.1 illustre le rsultat obtenu en affichant ce balisage dans un navigateur typique. Le titre apparat dans la police par dfaut du navigateur (en loccurrence, la police Verdana). Plutt prvisible et gure excitant pour le moment.
Figure15.1
Rendu par dfaut de notre titre.

Llment supplmentaire La mthode FIR ncessite dencadrer le texte du balisage par un lment supplmentaire, en plus de llment de titre. Nous pouvons utiliser llment de notre choix, mais laspect

Remplacement de texte pardesimages

257

gnrique de llment <span> en fait loutil parfait pour cette tche. Si lon affiche le balisage sans le moindre style, la balise <span> naura aucun effet sur lapparence du texte. Notre balisage modifi ressemble donc dsormais :
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>

Maintenant que notre lment <span> supplmentaire est en place, nous sommes prts pour la CSS.

La CSS
Lessence de la mthodeA consiste utiliser les deux lments dont nous disposons pour accomplir deux tches distinctes. Nous allons utiliser llment <span> pour "cacher" le texte, puis nous affecterons une image darrire-plan via les styles llment <h1>. Cest cause de ces deux tapes que nous avons besoin des deux lments sur lesquels travailler. Cacher le texte Commenons par cacher le texte au moyen de la proprit display applique llment <span>:
#fir span { display: none; }

Cette rgle cache totalement le texte contenu dans les lments <span> de ce titre particulier. Les navigateurs nafficheront rien. Cest la premire tape, qui consiste se dbarrasser du texte dans sa totalit. Pas besoin de vous montrer une capture dcran du rsultat qui, comme vous pouvez limaginer, serait vide. Assigner un arrire-plan Jai cr une version graphique et, mon sens, lgante du texte dans Photoshop (voir Figure15.2). Vous pouvez faire de mme dans lditeur dimages de votre choix. Notez bien les dimensions en pixels, car nous allons trs vite en avoir besoin.
Figure15.2
fir.gif, limage que nous allons utiliser pour remplacer le texte.

258

Styler en toute simplicit

Les dimensions en pixels de limage visible la Figure15.2 sont de 287pixels de large sur 29pixels de haut. Nous allons prendre limage ainsi que ses dimensions et intgrer lensemble en tant quimage darrire-plan affecte llment <h1>:
#fir { width: 287px; height: 29px; background: url(fir.gif) no-repeat; } #fir span { display: none; }

ltape prcdente, nous avons cach le texte au moyen de la proprit display applique llment <span>; ici, nous spcifions la hauteur et la largeur de limage que nous utilisons en remplacement, ainsi que le chemin de limage elle-mme, au moyen de la proprit background. Nous avons ouvert une "fentre" sur llment <h1>, qui possde les dimensions exactes de limage (287 29pixels), tandis que limage apparatra en transparence, derrire le texte que nous cachons au moyen de la proprit display. La Figure15.3 illustre le titre tel quil saffiche dans un navigateur. Nous ne voyons que limage et son intitul graphique. Parfait!
Figure15.3
Rsultat de la mthode FIR.

Avantages
Utiliser les CSS plutt que le balisage pour mettre disposition limage nous garantit que les navigateurs ne grant pas les CSS afficheront simplement le texte brut. Changer les lments graphiques ne requiert que la mise jour dun unique fichier CSS plutt que la modification du balisage. Toutefois, ces avantages impliquent quelques inconvnients notables.

Remplacement de texte pardesimages

259

Inconvnients
Lexpert en accessibilit Joe Clark a conduit des recherches approfondies sur le comportement de la mthode FIR avec les lecteurs dcran et autres logiciels dassistance la lecture de pages web. Vous pouvez consulter en ligne larticle complet dvoilant les rsultats de ses tests: "Facts and Opinion About Fahrner Image Replacement" (www.alistapart.com/articles/fir/). Dans cet article, il montre (entre autres choses) que la plupart des lecteurs dcran obissent (peuttre tort) cette dclaration CSS:
#fir span { display: none; }

Le texte nest pas seulement cach visuellement mais aussi, cause de cette rgle, totalement omis par tout lecteur dcran. Certains avanceront que la proprit display, par sa nature mme, ne devrait tre reconnue que par les navigateurs visuels et quil faudrait peuttre crer un nouveau type de mdia CSS spcifique aux lecteurs dcran, afin de donner davantage de contrle aux concepteurs web sur le rsultat des techniques de remplacement de texte. On pourrait aussi soutenir que les logiciels de lecture dcran doivent adhrer lun des types de mdias existants, par exemple aural. Outre les questions daffichage du texte pour les lecteurs dcran, la mthode FIR pose deux autres problmes: Llment <span>, qui na pas de sens au niveau smantique, est requis pour le bon fonctionnement de cette mthode. Dans le cas (rare) o les utilisateurs ont dsactiv les images dans leur navigateur (souvent pour conomiser la bande passante), mais quils ont laiss les CSS actives, ni le texte ni limage darrire-plan napparatront.

Peser le pour et le contre


Force est de constater que, avec la mthode FIR, les concepteurs de sites prennent le risque de fournir des contenus incomplets aux utilisateurs handicaps et ceux (mme si ce risque est moindre) dont le navigateur est paramtr pour accepter les CSS et refuser les images. Le point cl ici est de peser le pour et le contre, en comprenant bien les inconvnients et en restant prudent. Il existe quelques cas o la mthode FIR est sense, et je vais en prsenter deux la section Pour aller plus loin, en fin de chapitre. Parce que ces analyses daccessibilit ont fait surface, dautres concepteurs et dveloppeurs ont peaufin le concept de remplacement de texte, identifiant ainsi de nouvelles manires de

260

Styler en toute simplicit

"cacher" le texte normal tout en affichant une image en arrire-plan. Voyons quelques autres mthodes allant dans ce sens.

MthodeB: Leahy/Langridge Image Replacement (LIR)


Dveloppe simultanment par Seamus Leahy (www.moronicbajebus.com/playground/ css-play/image-replacement/) et Stuart Langridge (www.kryogenix.org/code/browser/ lir/), la mthode LIR vise grer le remplacement de texte sans llment <span>, indispensable dans la mthode FIR mais dpourvu de sens. Au lieu dutiliser la proprit display pour cacher le texte, la mthode LIR lcarte du chemin en fixant la hauteur de llment conteneur (dans notre exemple, <h1>) 0 et paddingtop une hauteur gale celle de limage de remplacement.

Le balisage et la CSS
Puisque llment <span> est devenu inutile pour cette mthode, notre balisage se rduit simplement :
<h1 id="lir">Leahy/Langridge Image Replacement</h1>

La CSS requise pour remplacer le texte par limage visible la Figure15.4 se limite alors une unique dclaration:
#lir { padding: 90px 0 0 0; overflow: hidden; background: url(lir.gif) no-repeat; height: 0px !important; /* pour la plupart des navigateurs */ height /**/:90px; /* pour IE5/Win */ }

Figure15.4
lir.gif, cr dans un diteur dimages.

Limage choisie pour remplacer le texte fait 90pixels de haut, ce qui explique que lon a fix la mme valeur pour lespacement haut (padding). Pour la plupart des navigateurs, nous fixons une hauteur nulle, ce qui nous dbarrasse effectivement du texte (ou de tout autre

Remplacement de texte pardesimages

261

contenu plac dans llment <h1>). Nous utilisons la rgle !important pour nous assurer que la valeur prcdente est reconnue en priorit sur celle qui suit (qui ne concerne queIE5 sur Windows). Les navigateurs comptents (y comprisIE6) ignoreront cette deuxime rgle de hauteur, tandis que IE5/Windows la reconnatra.

Ajuster le modle de botes


La dernire rgle est mise en place pour pallier le problme dinterprtation du modle de botes CSS dans IE5/Windows (voir le chapitre prcdent sur ce point). Du fait que nous ajoutons un espacement (padding) en plus des valeurs de hauteur et de largeur, nous devons fournir une valeur ajuste spcialement pour IE5/Windows. Dans ce cas, la hauteur est toujours gale celle de limage utilise en remplacement. L encore, vous navez pas forcment besoin de prendre en charge un navigateur aussi ancien, dont les parts de march sont aujourdhui quasi nulles. Si tel est le cas, vous pouvez ignorer cette astuce.

Inconvnients
Si la mthodeB est utile pour se dbarrasser des lments <span> (et laguer le code est toujours une bonne chose), elle partage avec la mthodeA un inconvnient: un utilisateur, dont le navigateur est paramtr pour accepter les CSS mais ne pas afficher les images, ne verra rien du tout. Nous pourrions galement soulever comme autre inconvnient de la mthode LIR le fait quelle ncessite le Box Model Hack pour que IE5/Windows se comporte correctement. Dans la mesure o la mthodeB ne fait pas appel la proprit display pour cacher le texte, on pourrait supposer quelle constitue un meilleur choix pour les utilisateurs de lecteurs dcran. Toutefois, comme la mthodeA, la mthode LIR doit tre manie avec prudence, en tenant compte du souci daccessibilit que pose un navigateur o les images sont dsactives et les CSS actives. Penchons-nous maintenant sur une autre variation sur le thme du remplacement de texte, dveloppe par Mike Rundle.

MthodeC: la mthode Phark


Lun des aspects vraiment enthousiasmants du Web est que les dveloppeurs essaient constamment damliorer les techniques en cherchant des solutions alternatives pour parvenir au mme but. En aot2003, Mike Rundle a mis au point sa propre variante de rem-

262

Styler en toute simplicit

placement de texte (http://phark.typepad.com/phark/2003/08/accessible_imag.html) exploitant une ide unique: appliquer une valeur text-indent ngative trs grande au texte que lon cherche cacher. Le texte est toujours prsent lcran, mais tellement hors de porte quil napparatra jamais, mme sur le plus grand cran imaginable. Plutt ingnieux.

Le balisage et la CSS
Tout comme la mthodeB, la mthode Phark (baptise ainsi daprs le nom du site de Mike) lude le besoin en balisage supplmentaire. Notre balisage de titre se limite donc :
<h1 id="phark">The Phark Method</h1>

Llment <span> supplmentaire requis pour la mthode FIR est ici inutile. Jetons un il la CSS simpliste utilise pour cacher le texte et le remplacer par limage visible la Figure15.5.
Figure15.5
phark.gif, limage de 26pixels de haut que nous allons utiliser en remplacement.

#phark { height: 26px; text-indent: -5000px; background: url(phark.gif) no-tepeat; }

Comme vous le constatez, la mthodeC est de loin la plus simple et ne ncessite ni Box Model Hack, ni balisage supplmentaire. En mettant le texte en retrait dune valeur ngative ridiculement leve, il est repouss hors de lcran et ne peut donc tre vu par lutilisateur. Tout comme avec la mthodeB, les utilisateurs de lecteurs dcran devraient tre en mesure de lire le texte sans problme avec cette mthode, ce qui est assurment une amlioration.

Une solution encore imparfaite


Si la mthode Phark est la plus simple mettre en uvre, elle choue encore si lutilisateur a activ les CSS mais dsactiv les images dans son navigateur. En dpit de la raret de ce cas de figure, ce stade, il nexiste pas encore de solution parfaite.

Remplacement de texte pardesimages

263

MthodeD: sIFR
sIFR, labrviation de Scalable Inman Flash Replacement, est un jeu de scripts ingnieux permettant de remplacer du texte HTML par un film en Flash, ce qui donne au concepteur la possibilit dutiliser toute police de son choix. Du fait que les polices sont intgres au Flash et caches lutilisateur, cette solution permet denrichir la typographie de toute page web grant JavaScript et Flash. La Figure15.6 illustre une page de test cre par lun des pionniers de la mthode sIFR, Mike Davidson. Le texte prsent est un hypertexte remplac par des polices originales, peu susceptibles de figurer sur le systme de lutilisateur. sIFR produit ce rsultat grce JavaScript et Flash.
Figure15.6
Une page de test pour sIFR, cre par Mike Davidson.

sIFR est sans doute la technique la plus accessible parmi toutes celles mentionnes ici, dans la mesure o elle ne recourt pas au balisage supplmentaire et reste utilisable par les lecteurs dcran. Si JavaScript ou Flash sont dsactivs ou non pris en charge dans le navigateur de lutilisateur, le texte reste lisible et on peut lui appliquer des styles CSS de secours. Si sIFR propose un choix et un contrle illimits sur les polices, cest une solution qui peut tre difficile mettre en uvre. Par chance, nous disposons de nombreux exemples et dune bonne documentation pour nous aider. Mettre en place correctement et au bon endroit les fichiers CSS, JavaScript et Flash peut tre source de confusion pour les dbutants. Toutefois, une fois le systme en place, sIFR offre ce quaucune autre mthode ne propose: utiliser toutes les polices de votre choix, sans faire appel aux images.

264

Styler en toute simplicit

Pour plus dinformations sur sIFR, consultez http://wiki.novemberborn.net/sifr3 et http:// www.mikeindustries.com/blog/sifr/. Rcapitulons maintenant les diffrences et rsultats de chacune des mthodes prsentes.

En rsum
Nous avons examin quatre mthodes populaires de remplacement de texte, en partant de la solution historique Fahrner Image Replacement et en dcouvrant ensuite trois de ses hritires. Si aucune des quatre mthodes nest une solution parfaite, des techniques telles que celle de Mike Rundle sen approchent bigrement et peuvent avoir des applications relles, tant que lon ne nglige pas leurs piges et inconvnients. Faisons le point sur les diffrences principales entre les quatre mthodes prsentes: MthodeA: Cette mthode ncessite un lment <span> supplmentaire dpourvu de sens particulier. Les logiciels de lecture dcran couramment utiliss au moment o nous rdigeons ces lignes ne sont pas en mesure de lire quoi que ce soit parce quils tiennent compte de la proprit display (selon les rsultats de Joe Clark). Rien napparat dans le cas o les images sont dsactives et les CSS actives dans le navigateur de lutilisateur. MthodeB: Cette mthode ne ncessite pas de balisage supplmentaire. Les lecteurs dcran doivent pouvoir lire le texte normalement. Le Box Model Hack est ncessaire pour IE5/Windows. Rien napparat dans le cas o les images sont dsactives et les CSS actives dans le navigateur de lutilisateur. MthodeC: Cette mthode ne ncessite pas de balisage supplmentaire. Les lecteurs dcran doivent pouvoir lire le texte normalement. Rien napparat dans le cas o les images sont dsactives et les CSS actives dans le navigateur de lutilisateur. MthodeD: Cette mthode ne ncessite pas de balisage supplmentaire. Cette mthode passe bien auprs des lecteurs dcran. Elle permet dutiliser toute police souhaite par le concepteur. Elle ncessite JavaScript et Flash pour afficher les polices personnalises. Cest une solution qui peut tre difficile mettre en uvre.

Remplacement de texte pardesimages

265

part avec la mthode D (sIFR), toutes les solutions populaires actuelles prsentent le mme inconvnient. Plusieurs annes se sont coules depuis la dcouverte dune nouvelle technique de remplacement de texte et il y a donc de fortes chances que nous soyons limits aux choix prsents dans ce chapitre. Nanmoins, le module Web Fonts de CSS3 (http://www.w3.org/TR/css3-webfonts/) incarne un espoir en introduisant la proprit @font-face. Lauteur de la CSS peut alors crer un lien vers un fichier de police par le biais dune URL, exactement comme il pourrait le faire pour une image, une vido ou tout autre fichier tlchargeable. Cest une formidable promesse, car vous pourrez ainsi intgrer toute police de votre choix et la styler au moyen de CSS. Toutefois, cela ouvre aussi la porte une foule de questions et de problmes juridiques pour les lettristes et fonderies de caractres. En attendant que ces questions soient rsolues, il existe quelques applications pratiques du concept de remplacement de texte par des images et nous allons en tudier deux la prochaine section de ce chapitre.
Il est important de signaler que Dave Shea, concepteur de sites web respectueux des standards, ralise une veille exhaustive sur le sujet du remplacement de texte. Il maintient une page bien organise qui couvre l'ensemble des mthodes prsentes dans ce chapitre et bien davantage encore. Pensez donc jeter rgulirement un il l'article "Revised Image Replacement" de Dave sur www.mezzoblue.com/ tests/revised-image-replacement/.

Pour aller plus loin


Dans cette section, nous allons tudier deux circonstances dans lesquelles le remplacement de texte peut jouer un rle lgitime. Tout dabord, nous allons aborder lide intressante des logos interchangeables, qui ma t expose pour la premire fois par Douglas Bowman (lequel a popularis la technique FIR historique prsente la mthodeA). Ensuite, je vous prsenterai un systme donglets de navigation conu pour le site de Fast Company et reposant sur une technique de remplacement de texte sans JavaScript.

Logos interchangeables
Un peu plus tt dans ce chapitre, nous avons tudi la faon dutiliser des CSS pour remplacer du texte par une image. Chacune des mthodes abordes comprenait un certain nombre dinconvnients, mais ceux-ci nont plus cours si lon choisit de remplacer une image par une autre image. Mais quel serait donc lintrt de procder ainsi?

266

Styler en toute simplicit

"Hi-fi" et "lo-fi" Une justification possible pour le remplacement dune image par une autre serait de proposer diffrents logos pour le site, lun pour les navigateurs capables de grer correctement les CSS (le logo tant alors rfrenc dans la proprit background) et lautre pour les navigateurs anciens, les priphriques de poche, les lecteurs dcran,etc. Cette solution est particulirement pratique lorsque votre logo labor et compatible CSS prsente de la transparence ou des couleurs spcifiques la prsentation CSS de votre site. Vous pouvez souhaiter, dans la version non style de votre site, en afficher une version "lo-fi" qui reste prsentable lorsque les CSS ne sont pas prises en charge ou actives. Exemple Pour contourner les ventuels problmes de copyright, je vais utiliser une fois encore mon site personnel en tant quexemple. Non seulement il propose ce systme de double logo, mais il gre aussi le fait que, sur toute page autre que la page daccueil, lutilisateur peut cliquer sur la version "CSS active" du logo pour revenir la page daccueil. Jetons un coup dil au balisage reprsentant le logo dans une version prcdente de ma page daccueil, ainsi que sur les autres pages: Pour la page daccueil:
<div id="logo"> <span><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /></span> </div>

Sur toutes les autres pages, les utilisateurs peuvent cliquer sur le logo pour revenir la page daccueil:
<div id="logo"> <span><a href="/"><img src="/images/logo_lofi.gif" width="173" height="31" alt="SimpleBits" /></a></span> </div>

Deux logos Les Figures15.7 et 15.8 prsentent les deux logos que jai utiliss le premier est intgr au balisage de la page pour la version sans style (lo-fi) et le second est rfrenc dans la feuille de style pour la version destine aux navigateurs modernes (hi-fi).

Remplacement de texte pardesimages

267

Figure15.7
logo_lofi.gif, utilis pour

laffichage sans application des styles (lo-fi)

Figure15.8
logo_corn.gif, utilis pour

laffichage avec application des CSS (hi-fi)

Le texte du logo hi-fi est blanc sur un fond transparent, car il devait figurer sur un arrireplan color: il donnerait donc un rsultat bizarre pour les utilisateurs de la version non style du site. Cest pour cette raison que jai choisi dutiliser les CSS pour changer les logos et, ainsi, afficher le logo adapt aux capacits du navigateur. La CSS Regroupons donc tous les lments dans la CSS charge de grer laffichage. Commenons par cacher limage intgre au balisage en fixant sa largeur 0: gardez en tte quen vitant dutiliser la proprit display pour cacher le logo lo-fi, nous amliorons la probabilit quun lecteur dcran puisse lire limage cache (en exploitant le texte alt fourni pour limage):
#logo img { display: block; width: 0; }

Ajoutons maintenant le logo hi-fi laide de la proprit background applique llment <span> que jai gliss dans le code. Oui, il ne prsente aucun intrt ni sens smantique, mais faisons une exception ici.
#logo span { width: 173px; height: 31px; background: url(../images/logo_corn.gif) no-repeat; }

268

Styler en toute simplicit

Vous remarquerez que tout ce que nous avons faire consiste fixer une hauteur et une largeur correspondant celles du logo que nous utilisons en remplacement, ainsi qu dfinir limage darrire-plan dans la version hi-fi. Restaurer lhyperlien Enfin, pour les pages autres que la page daccueil, nous voulons toujours que les utilisateurs puissent cliquer sur le logo pour revenir laccueil du site. Mais comment y parvenir, sachant que nous avons fix la largeur de limage 0? La zone cliquable est littralement rduite nant. Nous pouvons ajouter une dclaration pour llment <a> du logo, qui va "tendre" la zone cliquable sur toute la surface de limage darrire-plan. La largeur est gale celle de limage remplace.
#logo a { border-style: none; display: block; width: 173px; }

En dfinissant dans la CSS la largeur de llment <a>, nous pouvons mme envisager de proposer deux logos dont les dimensions diffrent aussi. Dans cet exemple, ils ont la mme taille. Nous avons aussi ajout une premire rgle pour nous dbarrasser de la bordure par dfaut que la plupart des navigateurs font apparatre autour des images proposant un hyperlien (voir Figure15.9).
Figure15.9
Logo avec lhyperlien, la zone cliquable est matrialise

Rsultats Jetons un il aux Figures15.10 et 15.11: vous pouvez constater quavec le balisage et les styles que nous venons de prsenter, le site fournit le logo adapt la version daffichage de lutilisateur. Lorsque le logo doit tre associ un hyperlien, nous pouvons toujours spcifier la zone cliquable au moyen dune rgle CSS simple. Je crois que cet exemple montre que lon peut utiliser le remplacement de texte lesprit tranquille, en particulier sil sagit de remplacer une image existante intgre au code HTML par une image rfrence dans la CSS.

Remplacement de texte pardesimages

269

Figure15.10
Logo hi-fi pour les navigateurs grant les CSS

Figure15.11
Logo lo-fi pour les navigateurs nappliquant pas les styles

Nous allons maintenant nous pencher sur un autre cas inspir de la ralit, un systme de navigation que jai conu pour le site web de Fast Company en 2003, qui combinait une liste non ordonne et une technique de remplacement dimage... avec un petit truc en plus.

Onglets base d'images, effet de survol et accessibles


Il est un peu faux de qualifier cette solution d"accessible". La navigation base sur des ongletsimages que jai conue pour le site web de Fast Company prsente lun des inconvnients communs aux techniques de remplacement de texte dcrites dans ce chapitre: le fait que les utilisateurs ayant activ les CSS et dsactiv les images dans leur navigateur ne verront probablement rien. Toutefois, pour les cas dans lesquels vous devez imprativement utiliser des images pour la navigation (que ce soit pour des contraintes despace ou de typographie), il est intressant de comprendre cette mthode. Laspect accessible provient du fait que, mme si au final nous utilisons des images pour reprsenter les onglets de navigation, le balisage reste celui dune liste non ordonne, lger et structur, accessible tout navigateur, tlphone, ordinateur de poche, etc. Voyons tout de suite comment sagence cette solution. Le problme Lorsque jtais membre de lquipe web de Fast Company, nous avons t amens ajouter des lments la barre de navigation, en haut du site. Mais un moment, lespace nous a manqu. Auparavant, le balisage de la navigation tait gr par une simple liste non ordonne et style par CSS. Mais avec une rsolution dcran de 800 600, il ny avait pas

270

Styler en toute simplicit

assez despace horizontal disponible pour ajouter ne ft-ce quun lment la prsentation existante. La solution Pour crer des onglets base dimages, effet de survol, accessibles et sans JavaScript (voir Figure15.12), jai choisi de combiner et modifier deux approches: lune conue par lauteur tchque Petr Stanicek (aka Pixy), prsente dans larticle "Fast Rollovers, No Preload Needed" (http://wellstyled.com/css-nopreload-rollovers. html); lautre tant la mthode LIR (Leahy/Langridge Image Replacement) prsente un peu plus tt dans ce chapitre.

Figure15.12
Onglets de navigation pour FastCompany.com, fvrier2004.

Comment cela fonctionne-t-il? Le balisage: une liste pour les gouverner tous Jai voulu continuer utiliser, dans le balisage, une simple liste non ordonne pour la navigation. Nous avons dj beaucoup parl de lutilisation des listes pour la navigation, dans cet ouvrage: elles sont compactes, lgres et accessibles aux navigateurs en mode texte, lecteurs dcran, tlphones et ordinateurs de poche. Voici quoi ressemblait la liste lorigine (jen ai supprim quelques lments pour en faciliter lutilisation ici):
<ul id="nav"> <li><a href="/" class="selected">Home</a></li> <li><a href="/guides/">Guides</a></li> <li><a href="/magazine/">Magazine</a></li> <li><a href="/articles/">Archives</a></li> </ul>

Simple et lgant. Ajoutons maintenant un identifiant unique chaque lment <li> de manire pouvoir lui adjoindre une touche de fantaisie ( savoir remplacer le texte fade dechaque onglet par une image plus seyante):
<ul id="nav">

Remplacement de texte pardesimages

271

<li <li <li <li </ul>

id="thome"><a href="/" class="selected">Home</a></li> id="tguides"><a href="/guides/">Guides</a></li> id="tmag"><a href="/magazine/">Magazine</a></li> id="tarchives"><a href="/articles/">Archives</a></li>

Nous sommes maintenant prts crer les images des onglets dans Photoshop ou dans votre diteur dimages favori. Une image, trois tats Lessence de lapproche brillante adopte par Pixy pour les effets de survol rapides implique de crer une unique image pour chaque lment de la navigation, incluant les tats normal, hover et active empils les uns au-dessus des autres. Un peu plus tard, nous utiliserons les CSS pour changer la proprit background-position qui rvle chaque tat au moment appropri. Cette mthode limine la ncessit de recourir ce qui, historiquement, tait du code JavaScript charg de commuter les images et de prcharger des jeux dimages multiples. Quelle conomie de temps de dveloppement, sans parler des temps de tlchargement des images! La Figure15.13 prsente une image dexemple que jai cre et utilise pour le site de Fast Company. Chaque tat fait 20 pixels de haut, et la hauteur totale de limage est donc de 60pixels. Les 20pixels du haut reprsentent ltat normal, ceux du milieu reprsentent ltat de survol et ceux du bas ltat actif (qui est galement utilis pour crer leffet dindication "vous tes ici"). Une image similaire est cre pour chaque onglet dont on souhaite se servir.
Figure15.13
Une seule image contenant les trois tats.

Utiliser une image pour chaque tat nous permet de nous dbarrasser de laffreux code JavaScript de rigueur traditionnellement pour des effets similaires. la place, de simples rgles CSS feront laffaire pour les effets de survol, ce qui est une bonne chose. Nous viterons ainsi leffet de "clignotement" dont souffrent dautres mthodes CSS qui ncessitent des images distinctes pour les tats actif/inactif. Encore une bonne chose. Et nous naurons pas non plus besoin de prcharger dimages supplmentaires: de nouveau, cest une bonne chose.

272

Styler en toute simplicit

La CSS: l o toute la magie intervient Nous allons commencer par mettre en place les rgles communes tous les lments de navigation. Cela nous vitera de dupliquer les rgles pour chaque onglet. Ensuite, nous ajouterons une rgle distincte pour chaque identifiant apparaissant dans la liste dlments, ce qui nous permettra de dfinir pour chaque lment <li> sa propre image darrire-plan et sa propre largeur: ce sont les deux seules variables qui diffrent pour chaque onglet.
#nav { margin: 0; padding: 0; height: 20px; list-style: none; display: inline; overflow: hidden; } #nav li { margin: 0; padding: 0; list-style: none; display: inline; } #nav a { float: left; padding: 20px 0 0 0; overflow: hidden; height: 0px !important; height /**/:20px; /* pour IE5/Win seulement */ } #nav a:hover { background-position: 0 -20px; } #nav a:active, #nav a.selected { background-position: 0 -40px; }

En substance, le code ci-dessus dsactive lespacement et les styles des listes, passe la liste lhorizontale et cache le texte associ chaque hyperlien de la liste. Notez les rgles:hover et:active. Il sagit de rgles communes tous les lments <a> apparaissant dans #nav, de sorte que nous navons pas rpter ces rgles particulires pour chaque lment. Jai galement ajout une classe selected pour longlet que je souhaite souligner de faon permanente, afin de signaler la section du site actuellement consulte. Les rgles de cette classe sont communes avec celles de ltat:active. Vous remarquerez peut-tre aussi que list-style: none; et display: inline; sont dupliques dans les slecteurs #nav et #nav li. Cela vise satisfaire IE5/Windows. Dans un monde parfait, dclarer ces rgles une seule fois dans #nav serait parfaitement suffisant

Remplacement de texte pardesimages

273

(et, dans la mesure oIE5 nest quasiment plus utilis aujourdhui, cette rgle est probablement largement suffisante). Nous ajoutons maintenant une rgle pour chaque id auquel nous associons limage darrire-plan et la largeur appropries. En voici un exemple:
#thome a { width: 40px; background: url(home.gif) top left no-repeat; }

Naturellement, une dclaration similaire est requise pour chaque onglet. Rsultats La Figure15.14 prsente les onglets rsultants dans les tats normal, de survol et de slection. Pour voir ce code en action, consultez lexemple ainsi que le code source associ, disponibles sur le site SimpleBits (www.simplebits.com/bits/tab_rollovers.html).
Figure15.14
Rsultat: navigation base donglets, avec dmonstration de chacun des trois tats.

Pourquoi utiliser cette solution? Elle est lgre. Le balisage nutilise quune liste non ordonne. Elle est accessible. Grce la mthode LIR, nous garantissons que les lecteurs dcran peuvent lire le texte des liens. Pas de JavaScript. Nous navons pas besoin de prcharger ou de crer des fichiers distincts pour chaque tat. Nous navons pas non plus besoin de JavaScript destin contrler les effets de survol. Merci Pixy! Elle est lgante. Faire rentrer un hypertexte dans une zone de dimensions dfinies peut tre difficile. Grce cette solution, il est possible dutiliser des images, plus lgantes. Mais attendez: le texte ne peut pas tre agrandi! Suite une suggestion trs pertinente de Douglas Bowman, et en rponse des problmes de lisibilit ainsi que de limpossibilit de redimensionner le texte des images, je suis all un cran plus loin et jai cr un second jeu dimages dotes dintituls plus grands. Jai alors adapt les rgles pour les craser au besoin laide de feuilles de style alternatives "medium" et "large". Les feuilles de style alternatives sont actives laide du commutateur propos par Paul Sowden, dont jai parl la section Pour aller plus loin du Chapitre10.

274

Styler en toute simplicit

Voici un exemple de rgle modifie, quasiment identique la version dorigine, o seuls la largeur et le chemin de limage ont t modifis:
#thome a { width: 46px; background: url(guides_lg.gif) top left no-repeat; }

La Figure15.15 illustre les onglets de grande taille tels quils apparaissaient sur le site de Fast Company. Vous remarquerez que lespacement horizontal entre les intituls est moins important, tandis que la hauteur des onglets reste identique la version dorigine. Toutefois, en intgrant la possibilit daugmenter la taille des hypertextes ainsi que celle des images des onglets, nous aidons les utilisateurs malvoyants tout en respectant nos contraintes de prsentation.
Figure15.15
Navigation base donglets, avec un jeu dimages agrandies activ depuis une feuille de style alternative.

Compatibilit Cette mthode a t teste et devrait fonctionner dans tous les navigateurs raisonnablement rcents (postrieurs Internet Explorer version5.0).

Pour conclure
Maintenant que vous savez tout ou presque sur les merveilles du remplacement de texte, il est essentiel, en labsence pour le moment de solution parfaite, de comprendre ce concept et de lexprimenter. Par ailleurs, jespre vous avoir mis sur la voie en vous prsentant deux exemples concrets de la mise en uvre du remplacement de texte. Et ce sera peut-tre vous oui, vous, qui dcouvrirez la prochaine mthode optimale. La gloire et la fortune vous attendent!

16

Styler llment <body>


Lun des avantages sparer contenu et prsentation est la souplesse qui en dcoule. En utilisant les CSS pour contrler la prsentation dun site (comme nous lavons vu au Chapitre13), nous pouvons contrler lapparence dun site entier. Il suffit de changer quelques rgles pour mettre jour instantanment et de faon spectaculaire des milliers de pages. La souplesse que lon peut atteindre en choisissant les CSS pour contrler la prsentation dun site est illustre par lapplication de styles llment <body>. En ajoutant un attribut id ou class llment <body>, vous bnficiez dun contrle personnalis sur tout lment de la page, ce qui rend inutiles les rgles communes dupliques. Dans ce chapitre, vous dcouvrirez comment ajouter de la class llment <body> vous permet de basculer entre deux prsentations distinctes, tout en conservant la mme structure de balisage.

Deux colonnes et parfois trois


Lorsque lon conoit la prsentation dun site web, il peut tre ncessaire de diffrencier la mise en page suivant le type de contenu. Le site du webzine A List Apart illustre cette ide: si les lments de navigation, den-tte ou de pied de page, par exemple, restent identiques dune page lautre, la page daccueil se distingue des pages de contenu par sa structure visuelle. La page daccueil (voir Figure16.1), qui joue un rle de portail pour la navigation et, en quelque sorte, ddito, doit conduire lutilisateur vers les diffrentes ressources disponibles. Cette page est donc structure sur trois colonnes. Le second type de prsentation (voir Figure16.2) concerne les articles proprement dits. Pour en amliorer la lisibilit et rendre la page plus are, on supprime la colonne centrale. Il ne reste donc que deux colonnes: le contenu au centre et le panneau de navigation droite.

276

Styler en toute simplicit

Figure16.1
Page daccueil du site A List Apart, sur trois colonnes.

Figure16.2
Page de contenu du site A List Apart, sur deux colonnes.

Styler llment <body>

277

Quel est lintrt dexpliquer tout cela? Il ne sagit pas de dmontrer que les concepteurs ont rsolu un problme compliqu de mise en page, mais plutt de montrer quappliquer un attribut class llment <body> permet dajuster la largeur des colonnes et de faire apparatre ou non une troisime colonne suivant le type de page. Pour ce faire, pas besoin de dupliquer la moindre rgle, ni dimporter de feuille de style supplmentaire.

Structure du balisage et du style


Cela aura un peu plus de sens si je vous prsente un exemple de balisage grce auquel on parvient ce type de rsultat. Pour obtenir une mise en page base de colonnes, jutilise ici un positionnement absolu, comme dcrit au Chapitre13. Dans notre exemple, nous supposerons que la page daccueil prsente une colonne supplmentaire gauche par rapport aux pages de contenu. Page darticle Pour les pages darticles, une version simplifie du balisage ressemblerait peu ou prou ceci:
<div id="entete"> ... en-tte... </div> <div id="contenu"> ... contenu... </div> <div id="droite"> ... colonne de droite... </div> <div id="pied"> ... pied de page... </div>

Les rgles CSS mises en place doivent laisser une marge droite suffisamment large dans #contenu et #pied pour que la colonne #droite soit positionne de faon absolue. Nous adoptons ici une valeur de 190pixels.
#contenu, #pied { margin: 10px 190px 10px 10px; }

278

Styler en toute simplicit

Page daccueil Pour la page daccueil, la structure du balisage est absolument identique, ce qui nous vite de devoir dupliquer des rgles CSS partages, lexception dun <div> supplmentaire ajout pour la troisime colonne (#gauche) qui apparat gauche du #contenu.
<div id="entete"> ... en-tte... </div> <div id="gauche"> ... colonne de gauche... </div> <div id="contenu"> ... contenu... </div> <div id="droite"> ... colonne de droite... </div> <div id="pied"> ... pied de page... </div>

Pour cette structure sur trois colonnes, il nous faut non seulement une marge droite suffisante dans #contenu et #pied pour accueillir la colonne de droite, mais aussi une marge gauche permettant dhberger la nouvelle colonne de gauche. Nanmoins, comme nous avions prcdemment spcifi la marge gauche 10 pixels de large seulement pour la mise en page par dfaut des articles, nous sommes coincs.

Ce <body> a la class
Cest ici que llment <body> entre en scne. En affectant llment <body> une classe signifiant quil sagit dune page daccueil, nous pouvons rdiger des rgles spcifiques cette classe seulement. Ainsi, pour modifier la marge par dfaut de 10pixels, nous ajoutons lattribut class suivant llment <body> uniquement sur la page daccueil:
<body class="accueil">

Puis, aprs la rgle dorigine dfinissant les marges pour #contenu et #pied, nous pouvons ajouter la rgle CSS que voici:
#contenu, #pied { margin: 10px 190px 10px 10px; } body.accueil #contenu, body.accueil #pied {

Styler llment <body>

279

margin-left: 190px; }

Pour les seules pages o la classe accueil est lie llment <body>, une marge de gauche agrandie 190pixels (correspondant la colonne de droite) est applique afin daccueillir la colonne de gauche. Si la classe accueil nest pas prsente, la marge de gauche sera de 10pixels comme indiqu dans la dclaration par dfaut. Nous pouvons maintenant basculer dune mise en page lautre simplement en affectant la classe adapte llment <body> et en ajoutant dans le balisage llment <div> appropri. On peut aussi mettre en place des classes supplmentaires, sans limitation sur le nombre de types de pages que lon peut inclure. Les sections du balisage et les noms peuvent rester les mmes tout en tant lgrement personnaliss suivant le type de page.

Pas seulement pour les colonnes


Si jai utilis ici, titre dexemple, un systme de modification du nombre de colonnes, la mme ide peut tre applique pour personnaliser nimporte quel lment de la page. Ainsi, si vous souhaitez quapparaissent sur la page daccueil tous les titres baliss par <h1> en orange (plutt que dans leur couleur par dfaut), vous pourriez ajouter une dclaration CSS supplmentaire aprs la dclaration par dfaut. Pour toutes les pages, vous utilisez la rgle CSS suivante:
h1 { font-family: Arial, Verdana, sans-serif; font-size: 140%; color: purple; }

Et la rgle ci-dessous sappliquerait uniquement la page daccueil:


body.index h1 { color: orange; }

Vous remarquerez que, dans la dclaration spcifique la page daccueil, nous navons besoin dinsrer que les rgles qui doivent modifier la valeur par dfaut. Dans ce cas, sur les pages o figure <body class="accueil">, les lments <h1> seront styls en police Arial de 140% et de couleur orange, sans quil soit ncessaire dajouter un attribut class aux lments <h1> ou de surcharger le balisage. Je prsente ici des exemples trs simples, mais vous pouvez imaginer la cration de types de pages multiples en ajoutant un attribut class appropri llment <body>. En retour,

280

Styler en toute simplicit

les classes pourront dclencher des mises en page, des thmes de couleurs et des prsentations totalement diffrents, tout cela au moyen dun balisage similaire et dun unique fichier CSS.

"Vous tes ici"


Outre lajout dun attribut class llment <body>, vous pouvez obtenir des rsultats intressants en ajoutant aussi unid. Ainsi, un concepteur ingnieux peut lier un identifiant id llment <body> pour faire apparatre des lments de navigation indiquant lutilisateur la page sur laquelle il se trouve. Voyons un peu comment cela pourrait fonctionner.

La liste de navigation
Pour cet exemple, nous allons reprendre les mini-onglets de forme gomtrique que nous avions prsents la section Pour aller plus loin du Chapitre1. La navigation repose sur une simple liste non ordonne, contenant plusieurs liens comme ceci:
<ul id="minitabs"> <li><a href="/pommes/">Pommes</a></li> <li><a href="/spaghettis/">Spaghettis</a></li> <li><a href="/haricotsverts/">Haricots verts</a></li> <li><a href="/lait/">Lait</a></li> </ul>

Vous vous rappelez peut-tre que nous avons appliqu cette liste des styles CSS pour ordonner les lments horizontalement et ajouter un onglet de forme gomtrique, apparaissant au survol dun lment par la souris. La Figure 16.3 illustre le rsultat dans un navigateur.
Figure16.3
Barre de navigation horizontale avec des onglets de forme gomtrique.

Vous vous rappelez peut-tre aussi que, pour raliser un effet "vous tes ici" (longlet tant maintenu "actif" pour le lien concern), nous avons ajout une classe pour le lien que nous souhaitons mettre en valeur:
<li><a href="/spaghettis/" class="active">Spaghettis</a></li>

Une rgle CSS a t ajoute pour appliquer une image darrire-plan au lien auquel class="active" a t attache:
#minionglets a.active { color: #000;

Styler llment <body>

281

background: url(onglet_pyra.gif) no-repeat bottom center; }

Il existe toutefois une solution alternative pour grer cela, qui ne modifie pas fondamentalement la structure du balisage du menu mais permet quand mme de signaler la page sur laquelle se trouve lutilisateur: assigner unid llment <body>.

Identifier les parties


Tout dabord, nous allons devoir ajouter des attributs id chaque lment <li> de notre navigation. Cette opration ne doit tre ralise quune seule fois ; ensuite, la liste non ordonne sera identique sur toutes les pages, mme pour raliser leffet "vous tes ici".
<ul id="minitabs"> <li id="pommes_tab"><a href="/pommes/">Pommes</a></li> <li id="spag_tab"><a href="/spaghettis/">Spaghettis</a></li> <li id="haricots_tab"><a href="/haricotsverts/">Haricots verts</a></li> <li id="lait_tab"><a href="/lait/">Lait</a></li> </ul>

Dans lextrait de code ci-dessus, nous avons ajout un petitid chaque lment <li>, en le suffixant par _tab pour le distinguer dun autre lment (nous verrons pourquoi dici peu). Nous en avons maintenant termin, une bonne fois pour toutes, avec le balisage de notre liste. Nous pouvons loublier, ce qui peut se rvler plutt pratique suivant le systme de template ou de gestion de contenu avec lequel vous travaillez. La variable, dans tout cela, est unid qui est associ uniquement llment <body> et qui indique la page sur laquelle se trouve lutilisateur. Si, par exemple, nous souhaitons indiquer au navigateur que nous sommes sur la page Pommes, nous pouvons ajouter unid llment <body> de la manire suivante:
<body id="pommes">

Sur la page Haricots, nous ajouterions lid correspondant:


<body id="haricots">

et ainsi de suite.

La CSS magique
Pour que longlet apparaisse en fonction de lidentifiant plac dans llment <body>, nous navons crire quune seule dclaration CSS lui indiquant dafficher longlet pour chaque combinaison possible:

282

Styler en toute simplicit

body#pommes #pommes_tab a, body#spag #spag_tab a, body#haricots #haricots_tab a, body#lait #lait_tab a { color: #000; background: url(onglet_pyra.gif) no-repeat bottom center; }

Essentiellement, cela signifie : "Si llment <body> est dot dun id valant pommes, ajouter longlet darrire-plan et passer le texte en noir pour le lien figurant dans llment #pommes_tab de la liste." Puis nous rptons cette procdure pour chaque option donglet. La seule chose ncessaire maintenant pour faire apparatre longlet appropri dans la barre de navigation consiste changer lidentifiant contenu dans llment <body>. La dclaration CSS gre le reste et peut tre modifie tout moment pour grer dautres combinaisons, si nous ajoutons ultrieurement dautres pages au site. Si, par exemple, nous souhaitions souligner longlet Haricots pour indiquer aux utilisateurs quil sagit bien de la page ponyme, nous naurions qu ajouterlid llment <body> suivant le modle ci-aprs:
<body id="haricots_tab">

et longlet adapt serait alors slectionn comme lillustre la Figure16.4 (o nous avons appliqu les styles "mini-onglet" dcrits au Chapitre1).
Figure16.4
Onglet slectionn en affectant unid llment <body>.

Nous pouvons ainsi faire apparatre longlet de notre choix en ajoutant llment <body> lun desid que nous avons dclars la fois dans le balisage de la liste et dans la CSS. Vous pouvez galement utiliser ce concept pour dclencher dautres vnements contextuels sur la page, par exemple une sous-navigation ou des couleurs dpendant de lid de page. Du fait que llment <body> est au niveau le plus lev dans la structure, lidentifiant quil contient peut servir contrler nimporte quel lment qui figure en dessous dans la hirarchie.
Dans la continuit de lide dinterchangeabilit des feuilles de style CSS, que nous avons voque au Chapitre 13, Eric Meyer a mis lide dune signature web. De quoi sagit-il exactement? Sa proposition consiste donner la balise <body> un identifiant propre au site, sur le modle <body id="www. monsite.fr">. Un tel systme permettrait chaque lecteur du site den modifier laspect graphique par le biais dune feuille de style utilisateur. Les explications dtailles fournies par Eric Meyer sont disponibles ladresse http://archivist.incutio.com/viewlist/css-discuss/13291.

Styler llment <body>

283

En rsum
En passant des mises en page bases sur les CSS, vous serez merveill par le surcrot de souplesse quelles procurent. Dans ce chapitre, nous avons tudi une mthode qui tire parti de cette souplesse, consistant utiliser des attributs class ou id dans llment <body> pour contrler la structure des colonnes dune page ou pour indiquer visuellement sur quelle page se trouve lutilisateur. Ce nest quun exemple parmi dautres illustrant quel point la construction de sites reposant sur les standards web peut tre modulaire : changer la prsentation, lapparence et le style dune page ou dun site entier ne requiert quune simple directive dans llment <body>.

17

Pour aller encore plus loin


Maintenant que vous tes par et que vous connaissez la faon dont les standards web peuvent amliorer vos sites web, noubliez pas que lapprentissage ne sarrte jamais. Les mthodes et techniques sont sans cesse peaufines, amliores et mises jour, tandis mme que je tape les derniers mots de ce chapitre. Quel meilleur moyen que le Web lui-mme pour rester en tte de la course? Vous y trouverez des milliers de sites utiles explorant les merveilles de la conception et du dveloppement web respectueux des standards.

O aller maintenant?
Pour conclure cet ouvrage, jai rassembl ici quelques-unes de mes ressources prfres et je vous recommande fortement de les consulter frquemment pour rester jour des derniers dveloppements du monde des standards web1.

Organisations et publications
W3C www.w3.org Le World Wide Web Consortium est la source de tout. Il sagit de lorganisation qui dfinit et recommande les standards guidant le Web que nous utilisons quotidiennement. Ce site joue un rle de rfrence bourr de dtails techniques sur lensemble des standards. Bien quil puisse tre difficile dy naviguer et de le "digrer", ce site est la ressource dfinitive en matire de standards. Les outils de validation du W3C (validator.w3.org) sont particulirement utiles. Faites-y appel frquemment pour garantir que votre balisage est au sommet de sa forme. Vous pouvez valider vos pages en fournissant leur URL ou en soumettant un fichier sur lequel vous travaillez localement. Notons enfin, pour cette dition franaise du livre, quil existe des traductions francophones non officielles des spcifications produites par le W3C. Vous pouvez retrouver l'essentiel des traductions sur deux sites : http://la-grange.net/w3c/ et http://www.yoyodesign.org. Le site officiel du W3C fournit par ailleurs une liste complte des traductions franaises disponibles, ladresse http://www.w3.org/2003/03/Translations/byLanguage?language=fr.

1.

Dans la mesure o lessentiel de ces ressources est en anglais, nous nous sommes efforcs de fournir les rfrences de traductions francophones des ouvrages cits (lorsque ces traductions existent) et de complter la liste par des ressources francophones reconnues dans le domaine des standards web. (NdT)

286

Styler en toute simplicit

WHATWG www.whatwg.org Le Web Hypertext Application Technology Working Group est un groupe de travail constitu en marge du W3C, dont les membres sont majoritairement des dveloppeurs de navigateurs web. Leurs travaux se focalisent essentiellement sur les technologies implmenter dans les navigateurs et leurs propositions, visant rpondre aux attentes des professionnels aussi bien que des utilisateurs, ont t adoptes par le W3C comme base de travail pour ce qui doit devenir la spcification HTML5. Web Standards Project www.webstandards.org Form en1998, le projet Web Standards (Web Standards Project ou WaSP) assure la promotion des standards du Web auprs du public et fournit des ressources ducatives pour les concepteurs et dveloppeurs de sites web, afin de mettre en uvre des mthodes conformes aux standards. WaSP travaille aussi avec les concepteurs de logiciels et de navigateurs, et les encourage adhrer aux standards que soutient lorganisation. Le site du projet WaSP est rempli de ressources sur tous les domaines lis aux standards. Collectif OpenWeb www.openweb.eu.org Le collectif OpenWeb, cr en2002, a pour objectif de promouvoir et de soutenir lutilisation des standards en proposant sur son site de la documentation, des outils, des analyses et des exemples concrets. Il rassemble des experts de tous horizons, uvrant ensemble la construction dun Web ouvert et respectueux des standards. Un site de rfrence dans le monde francophone. A List Apart www.alistapart.com Fond par Jeffrey Zeldman et Brian Platz en 1998, le webzine A List Apart explore la conception, le dveloppement et la signification des contenus web, en sintressant plus particulirement aux techniques de conception respectueuses des standards et aux bnfices quelles procurent. Ce magazine en ligne indispensable a publi de nombreuses astuces et techniques formidables, sur un large ventail de sujets lis la conception et au dveloppement respectueux des standards, ainsi quaux aspects conomiques associs. Un site consulter absolument pour tout crateur de sites web. CSS Zen Garden www.csszengarden.com en anglais; www.csszengarden.com/tr/francais/ en franais

Pour aller encore plus loin

287

Cr et gr par le gourou des standards et membre minent du WaSP Dave Shea, le Jardin Zen CSS est "une dmonstration de ce quon peut accomplir lorsquon utilise les CSS pour la conception web". Les crateurs peuvent soumettre leurs propres feuilles de style CSS, chacune faisant rfrence la mme structure de balisage. Il en rsulte une vitrine perptuellement renouvele de crations CSS de pointe. Une inspiration fantastique, et aussi une excellente destination suggrer aux opposants aux CSS (je pense ici tous ceux qui croient que les CSS ne permettent pas de crer des interfaces russies. Ah! Quand on pense que cela peut ne serait-ce que traverser lesprit de certains). Alsacrations www.alsacreations.com Le lieu de rendez-vous pour la communaut francophone qui sintresse de prs ou de loin aux standards et laccessibilit du Web. Ce site est une mine dor tous les points de vue: on y trouve la fois des tutoriels, des outils, de la documentation, un forum de discussion, des analyses, et mme des offres demploi toujours en rapport avec les standards et laccessibilit. Si ce livre vous a convaincu, vous faites dj partie de la communaut des alsanautes Dive Into Accessibility (Plongez dans laccessibilit) www.diveintoaccessibility.org Mark Pilgrim a publi cet ouvrage en ligne pour aider les gens mieux comprendre quel point il est facile de mettre en uvre les fonctionnalits daccessibilit et qui peut en bnficier. Les informations, qui adoptent la perspective de cinq personnes dont chacune prsente un handicap diffrent, sont incroyablement simples comprendre. Lisez les explications de Mark et vos sites ne pourront quen sortir amliors. Cet ouvrage a t traduit en franais par Karl Dubost. Vous pouvez consulter sa traduction ladresse http://www.la-grange.net/accessibilite/. Accessiweb www.accessiweb.org Le site Accessiweb est un centre de ressources ddies laccessibilit du Web au sens large (spcifications et recommandations, mise en uvre et outils, aspects lgaux), mais aussi une vitrine de lassociation BrailleNet pour son action en faveur de laccessibilit. Dote dun groupe de travail trs actif, elle a aussi mis en place un label de conformit avec les critres Accessiweb, bass sur les recommandations du WAI (Web Accessibility Initiative du W3C).

288

Styler en toute simplicit

css-discuss www.css-discuss.org css-discuss est une liste de diffusion ddie aux discussions autour des CSS et des manires de lutiliser dans le monde rel. Cest un endroit idal pour poser vos questions et obtenir des rponses quand vous explorez les avantages des CSS. Tellement de gens sont prts vous donner un coup de main, dont les connaissances peuvent vous aider raliser quasiment tout ce que vous voulez. Digital Web Magazine www.digital-web.com Publi par Nick Finck, Digital Web Magazine tait un webzine rempli de chroniques, dactualits et de tutoriels pour les concepteurs de sites web. Le site a ferm ses portes en mars2009, mais ses archives valent la peine dtre lues. Vitamin carsonified.com/blog/ Publication en ligne sur la cration et le dveloppement web exposant des articles de fond, des interviews audio, des sessions de formation et des revues commentes, prsente par les employs de Carsonified, une socit qui met sur pied des confrences et ateliers populaires, ainsi que dautres produits lis au web. Pompage www.pompage.net Pompage est un webzine francophone cr en 2001 et dont les bnvoles traduisent des articles de pointe en matire de standards web, daccessibilit et de cration de sites web. Vous y trouverez, en franais, des publications provenant de grands noms du Web comme Jeffrey Zeldman, Eric Meyer ou Christian Heilmann, ainsi que des liens vers dautres sites, documents et traductions intressants. Une ressource formidable tant par la varit des sujets abords que par leur qualit de traitement. Temesis www.temesis.com Temesis est une socit franaise experte dans le domaine de la qualit, de laccessibilit et de la conformit aux standards web. Elle est notamment lorigine du rfrentiel Opquast (Open Quality Standards), liste de bonnes pratiques pour la conception de sites web. Le site web de la socit comprend un blog, toujours la pointe sur lactualit des standards et de laccessibilit, anim par les employs de Temesis.

Pour aller encore plus loin

289

Blogs influents et sources d'inspiration


Bon nombre des concepteurs et dveloppeurs web les plus talentueux de la communaut des standards publient rgulirement des contenus sur leurs sites web personnels. En consultant rgulirement ces blogs, vous pourrez apprendre directement des matres qui transmettent leur savoir. Jeffrey Zeldman Presents The Daily Report www.zeldman.com Jeffrey Zeldman est essentiellement le parrain des standards du Web. Il publie des informations et des actualits relatives la conception de sites web depuis1995. Zeldman est cofondateur du Web Standards Project mentionn plus haut, diteur du magazine A List Apart et auteur du livre Design web: utiliser les standards. Louvrage que vous avez entre les mains naurait pas pu tre crit sans le travail de Jeffrey. Ce site est une mine dinformations au sujet de la conception de sites respectueuse des standards et elle est un passage oblig dans votre liste de favoris. Stopdesign www.stopdesign.com Douglas Bowman, plus connu pour son travail de refonte respectueuse des standards sur les sites de Wired News (www.wired.com) et Adaptive Path (www.adaptivepath.com), publie des tutoriels, et commentaires utiles, ainsi que des analyses sur lesprit dun concepteur voluant dans le monde des standards web. Son travail sur le site de Wired News a eu une influence norme sur mes propres travaux de refonte du site de Fast Company. Lattention quil accorde aux dtails est sans pareille. mezzoblue www.mezzoblue.com Personne ne prend le pouls de la communaut des standards mieux que Dave Shea, qui soccupe par ailleurs du site CSS Zen Garden mentionn plus haut. Sur mezzoblue, Dave sattaque aux questions de pointe en matire de conception web respectueuse des standards et parvient souvent impliquer la communaut dans la rsolution des problmes existants. Une ressource fantastique. meyerweb.com www.meyerweb.com Reconnu comme un expert pour tout ce qui concerne les CSS, Eric Meyer a rdig plusieurs ouvrages formidables sur le sujet et dfend depuis longtemps les standards du Web travers

290

Styler en toute simplicit

son activit de conseil, ses interventions et son travail avec Netscape. Son site prsente dexcellents commentaires sur les CSS ainsi que des dmonstrations et expriences intressantes. Tantek elik http://tantek.com/log Archive du journal de Tantek elik, auteur du fameux Box Model Hack dcrit un peu plus tt dans cet ouvrage, cofondateur du site microformats.org et reprsentant du W3C auprs des groupes de travail sur les CSS et HTML. 456 Berea Street www.456bereastreet.com Site du dveloppeur web sudois Roger Johansson, qui sintresse plus particulirement la conception de sites web accessibles grce aux standards.

Jason Santa Maria www.jasonsantamaria.com Site personnel de lextraordinaire concepteur web Jason Santa Maria. Une source dinspiration. Jina Bolton www.sushiandrobots.com/journal Jina Bolton, conceptrice dinteractions graphiques et artiste travaillant dans la Silicon Valley, sexprime ici sur la conception de sites web. Adactio www.adactio.com/journal Site personnel de Jeremy Keith, une des ttes pensantes pour tout ce qui touche au balisage, aux CSS, aux scripts DOM et aux microformats. Cameron Moll www.cameronmoll.com Site de Cameron Moll, crivain, confrencier et Superdesigner. Mark Boulton www.markboulton.co.uk Site de Mark Boulton, concepteur web et prodige de la typographie.

Pour aller encore plus loin

291

Molly.com www.molly.com Au fil des ans, MollyE. Holzschlag a accompli un norme travail pour les standards web en tant que militante, formatrice et crivain. Shaun Inman www.shauninman.com Site de Shaun Inman, pionnier des explorations CSS et JavaScript, contributeur sIFR (Scalable Inman Flash Replacement) et concepteur de sites. Stuff and Nonsense www.stuffandnonsense.co.uk Site de lauteur, confrencier et concepteur de sites Andy Clarke. Unstoppable Robot Ninja www.unstoppablerobotninja.com/ Site dEthan Marcotte, ninja en matire de balisage et de style. Subtraction www.subtraction.com/ Site du matre de la conception en grille, Khoi Vinh. Veerles Blog veerle.duoh.com/ Site de Veerle Pieters, talentueuse cratrice web et graphique. D. Keith Robinson dkeithrobinson.com/ Site du concepteur et dveloppeur de sites web D.Keith Robinson, qui propose ses rflexions et questions sur les standards et le dveloppement web. Simon Willisons Weblog simonwillison.net/ Dveloppeur et membre du Web Standards Project, Simon Willison parle de PHP, Python, CSS, XML et du dveloppement web en gnral. Il est toujours la pointe des standards web et de leurs rapports aux autres aspects du dveloppement web.

292

Styler en toute simplicit

Blog Webatou blog.webatou.info Monique Brunel est lune des figures phares de la communaut francophone des standards web. Membre, notamment, du collectif OpenWeb, elle partage ses connaissances et son enthousiasme pour les standards et laccessibilit travers ses crits, ses confrences et ses interventions. Standblog standblog.org/blog/ Tristant Nitot est le fondateur et prsident de la fondation Mozilla Europe. Fervent dfenseur des standards du Web, il commente sur son blog lactualit des standards, de Mozilla et dInternet en gnral.

Livres
Je me dois de mentionner aussi quelques ouvrages. Tous ceux qui figurent ici sont des ressources indispensables pour tout concepteur de sites web en activit. Designing With Web Standards, 2nded., de Jeffrey Zeldman, New Riders, 2006; traduction en franais: Design web: utiliser les standards: CSS et XHTML, Eyrolles, 2006. Cascading Style Sheets: The Definitive Guide, 2nded., dEric Meyer, OReilly, 2004. More Eric Meyer on CSS, dEric Meyer, New Riders, 2004; traduction en franais: CSS par Eric Meyer, CampusPress/Pearson France, 2007. CSS Web Site Design Hands-On Training, dEric Meyer, Peachpit Press, 2007; traduction en franais: Conception de sites Web avec les CSS, Pearson, 2008. Bulletproof Web Design, 2nded., de Dan Cederholm, New Riders, 2007. CSS Mastery, 2nded., dAndy Budd, Simon Collison, Cameron Moll, Friends ofED, 2009; traduction en franais: Matrise des CSS, 2ed., Pearson, 2010. Professional CSS, de Christopher Schmitt, Todd Dominey, Cindy Li, Ethan Marcotte, Dunstan Orchard et Mark Trammell, Wrox, 2008. The Zen of CSS Design, de Dave Shea et Molly E. Holzschlag, New Riders, 2005 ; traduction en franais: Le Zen des CSS, Eyrolles, 2005. Transcending CSS, dAndy Clarke et MollyE. Holzschlag, New Riders, 2006; traduction en franais: Transcender CSS, Eyrolles, 2007. CSS Cookbook, de Christopher Schmitt, OReilly, 2010; traduction en franais: CSS en action, OReilly, 2005. Microformats: Empowering Your Markup for Web2.0, de John Allsopp, Friends ofED, 2007.

Pour aller encore plus loin

293

Speed Up Your Site: Web Site Optimization, de AndrewB. King, New Riders, 2003; traduction en franais: Optimisation de sites web, CampusPress/Pearson 2003. Dont Make Me Think: A Common Sense Approach to Web Usability, 2nded., de Steve Krug, New Riders, 2005; traduction en franais: Je ne veux pas chercher!: optimisez la navigation de vos sites et menez vos internautes bon port, CampusPress/Pearson, 2007. Prioritizing Web Usability, de Jakob Nielsen et Hoa Loranger, New Riders, 2006; traduction en franais: Site Web: priorit la simplicit, CampusPress/Pearson France, 2007.

En guise d'adieu
Et nous voici arrivs la fin. Jespre que la lecture de ce livre vous a donn une nouvelle perspective sur les avantages que procure la cration de sites web respectueux des standards. En tudiant diverses solutions qui permettent dobtenir les mmes rsultats, vous pouvez commencer faire de meilleurs choix dans vos propres projets et, je le crois, vous serez mieux prpar remplacer vos vieux balisages surchargs par des crations XHTML et CSS structures et lgres. Merci de mavoir lu: ce fut un bon moment.

Index
Symboles
# 117 456 Berea Street 92, 290 <a> 117, 118 href 124 style CSS global 118, 121 <abbr> 102, 105, 113 affichage avec IE6 sous Windows 107 CSS 106 infobulle 107 rendu par dfaut 106 title 105 <acronym> 102, 105, 106 affichage avec IE6 sous Windows 107 CSS 106 HTML5 106 infobulle 107 rendu par dfaut 106 title 105 :active 124 :after 62 content 62 <b> 24, 95 <strong> 95, 97 :before 62 content 62 <blockquote> 58 background 65 background-image 65 <br /> 58 cite 60 dgradation 69 id 64 <p> 58 retrait 59 styler 63 utilisation errone 59 <body> 90, 166, 275 class 275, 278 effet 281 id 275, 280, 281 styles 275 varier le nombre de colonnes 275 <br /> 10 <caption> 39 <cite> 60, 101, 102 CSS 103 exploiter 104 styler 103 <code> 101 CSS 108 <dd> 78, 141 background 142 <dfn> 101 <div> 58, 76, 113, 150, 151, 154 id 154 superflu 154 <dl> 78, 141 <dd> 78, 141 <dt> 78, 141 <dt> 78, 141 CSS 142 icne 142 <em> 95 class 100 <i> 95, 97 <span> 100 W3C 96 <fieldset> 81, 87 CSS 88 :focus 93, 124, 128 <form> 73, 74, 75, 78 id 155 <h1> 25, 166 CSS 28 optimisation pour les moteurs de recherche 26 rendu par dfaut 25 structure du document 25 styler 25 <head> 166, 185 <link> 187 <style> 185 :hover 124 <html> 166, 185 <i> 95 <em> 95, 97 <img> 32, 33 align 34 alt 267 background 33 @import 188, 207 chemin absolu 188 chemin relatif 188 document externe 188 feuille de style externe 207 fichier CSS matre 190 importer plusieurs feuilles de style 190 <link> 207 maintenance 188 mise en cache 188 navigateurs anciens 188 <style> 207 <input> 73, 74, 75 CSS 84 margin 75 size 84 tabindex 82 width 84

296

Bonnes pratiques des standards du Web

<kbd> 102, 109 <label> 75, 76, 77 accessibilit 76 accesskey 83 CSS 85 for 77 styler le texte 85 <legend> 87 CSS 88 effet de relief 89 <li> 12, 166 id 144, 281 <ol> 11 <ul> 11, 14 :link 124 <link> 187 alternate stylesheet 196 chemin absolu 187 chemin relatif 187 feuille de style externe 187 href 187 maintenance 187 media 205, 206, 209 mise en cache 187 navigateurs anciens 188 ordre de <link> et <style> 192 rel 196 title 196 @media 207 feuille de style externe 207 <link> 207 <style> 207 <meta> 166, 186 &nbsp; 62 <ol> 11, 137, 144 id 144 <li> 11 numrotation automatique 137 retour la ligne 137 type 139 <p> 24, 28, 57, 74, 166 id 155

<q> 60 cite 61 gestion des guillemets 61 imbriquer 61 lang 61 &raquo; 62 <samp> 101, 108 <script> 172 <span> 23, 27, 113, 246, 257 classe 23 CSS 23 <strong> 68, 95 <b> 95, 97 class 100 W3C 96 <style> 185 feuille de style intgre 185 @import 207 maintenance 186 @media 207 mise en cache 186 navigateurs anciens 186 ordre de <link> et <style> 192 tests 187 <table> 38 border 46 <caption> 39 summary 40 <tbody> 45 <tfoot> 45 <thead> 45 <tbody> 45 CSS 46 <td> 41 bordure 47 diffrence avec <th> 41 headers 42 <tfoot> 45 <th> 41 abbr 44 arrire-plan 51 bordure 47

CSS 50, 51 diffrence avec <td> 41 icne 53 id 42 mosaque 51, 52 <thead> 45 <title> 166 <ul> 11, 13, 135, 166 id 154, 157 imbriquer 161 <li> 11 numrotation 136 puces 136 <var> 102, 108 CSS 108 :visited 124

A
abbr 44 Abrviation 102 <abbr> 105 Accessibilit 1, 3, 38, 76, 81, 123 accesskey 81, 83 <label> 76, 77 OpenWeb 84 tabindex 81, 82 title 123 WCAG 1 Accessiweb 287 accesskey 81, 83 <label> 83 prise en charge par les navigateurs 83 Acronyme 102 <acronym> 105 active 19, 127, 272 Adactio 290 AdWords. VoirGoogle AdWords after 211 Ajax 2

Index

297
headers 42 href 124, 187 id 18, 42, 52, 76, 119, 121, 144, 154, 155, 157, 168, 170, 217, 256, 275, 280, 281 lang 61, 63 media 205, 206, 209 name 117, 118, 119, 121 rel 196 setAttribute 177 size 84 style 193 summary 40 tabindex 81, 82 title 105, 123, 167, 175, 196 type 139, 186 dcoupage logique 152 dfinition 101 de prsentation 95 de structure 95 liste 9 minimiser 149 rfrence 101, 102 smantique 5, 95 sortie dun programme 101 structur 5 styles intgrs 193 texte saisir par lutilisateur 102 titres 23 valide 5, 9 variable 102 Balise 11. Voir aussilments Bolton, Jina 290 border 18, 29, 47, 126 couleur 126 dashed 126 dotted 126 solid 126 border-collapse 48 problme avec IE sous Mac 48 Boulton, Mark 290 Box Model Hack 235 compatibilit Opera 236 voice-family 236 BrailleNet 287 Browser Object Model 163

A List Apart 21, 198, 211, 212, 232, 237, 259, 286 Alsacreations 233, 237, 287 alt 267 Alternatifs (styles) 196 choix dans le navigateur 198 DOM 199 effet de cascade 197 fonctions JavaScript 198 navigateurs anciens 196 Ancres 117 # 117 <a> 117, 118 accessibilit 123 compatibilit 121 lment vide 117 id 119, 121 name 117, 118, 119, 121 partage de noms 121 style CSS global 118, 121 title 123 titre cible 118 top 120 appendChild 180 application/xhtml+xml 186 Argument 102 <var> 108 Aspect visuel 98 Attribut abbr 44 accesskey 81, 83 alt 267 border 46 cite 60, 61 class 150, 170, 275, 278 content 186 filtrage 131 for 77 getAttribute 175

B
background 17, 33, 54, 64, 65, 142, 256, 258 bottom 21 center 21 icne 53 mosaque 31 no-repeat 17, 32 repeat-x 31 repeat-y 31 <th> 53 background-color 30 background-image 65, 256 images multiples 70 background-position 271 Balisage abrviation 102 acronyme 102 argument 102 citation 101, 102 code informatique 101

C
Cadratin 251 Cameron Moll 290 caption, CSS 50 Caractres spciaux 63 charset 63

298

Bonnes pratiques des standards du Web

entits HTML 63 Unicode 63 UTF-8 63 CDATA 186 elik, Tantek 235, 290 Box Model Hack 235 charset 63 Citation 57, 101 arrire-plan 64 background 64 <blockquote> 58 cadre 64 <cite> 60, 102 dgradation 69 <div> 58 guillemets 61, 64 imbriquer 61 margin 66 <p> 57 padding 67 <q> 60 rfrence 102 <strong> 68 cite 60, 61 class 150, 170, 275, 278 Classe 163 instance 163 clear both; 222 right; 220 Code <code> 107 informatique 101 Collectif OpenWeb 286 Colonnes arrire-plan en mosaque verticale 238 factices 237 varier le nombre 275 color 29 Compatibilit 3 Contacts Conversion Service 114

content 62, 186 Contextuel (slecteur) 33 Coordonnes bottom 228 left 228 right 227 top 227 createElement 180 createTextNode 180 Crnage 244 ngatif 245 positif 245 CSS 2, 168 absolute; 227 active 19, 127 after 62, 211 align 34 appliquer un document 185 arrire-plan 30 en mosaque 31 background 17, 33, 64, 65, 142, 256, 258 background-color 30 background-image 65, 256 background-position 271 before 62 block; 129 border 18, 29, 47, 126 border-collapse 48 both; 222 CDATA 186 colonnes 215 color 29 crnage 244 dgradation 69 display 18, 257 effet 281 de cascade 191, 192, 197 de relief 30 de survol des liens 127 lment de niveau bloc 29

em 251 espaces dans les noms de police 244 exploiter class 278, 279 factoriser les rgles 54, 87, 152 feuille de style externe 187 intgre 185 first-letter 246 float 18, 217, 218, 221, 222 focus 128 @font-face 265 font-family 29, 243 font-size 29 font-style 245 font-variant 250 height 226 hritage 87, 169 hover 19, 127 icnes 31 @import 188 impression 205 justifier un texte 247 letter-spacing 244 lettrine 246 line-height 242 lisibilit 152 list-style 15 list-style-image 16 list-style-type 138, 145 maintenance 153 margin 66, 219, 224, 225 mise en page 215 no-repeat 17 ordre de <link> et <style> 192 overline 125 padding 16, 29, 49, 67 partage de rgles 20 pourcentage 90 proprit 168 right 227

Index

299
Dive Into Mark 104 D. Keith Robinson 291 DOCTYPE 166 Document 175 arborescence 175 nuds 175 Document Object Model 163, 199 arborescence 164 conventions 164 document 163 enfant 164, 166 frre 164, 166 modle 164 nud 166 attribut 167 texte 167 objet 163 parent 164, 166 racine 166 document (objet) 164, 171 createElement 180 createTextNode 180 getElementById 171 getElementsByTagName 173 DOM 2, 199 dotted 126 <br /> 10 <caption> 39 <cite> 60, 101, 102 <code> 101, 107 <dd> 78, 141 de niveau bloc 4, 13, 24, 25, 27, 49, 54, 83, 90, 92, 106, 115, 120, 126, 131, 139, 198, 201, 207, 212, 220, 225, 237, 246, 265 de niveau texte 24 de phrase 95, 101 <dfn> 101 <div> 58, 76, 113, 150, 151, 154 <dl> 78, 141 <dt> 78, 141 <em> 95 en ligne 13 de niveau texte 24 <fieldset> 81, 87 <form> 74, 75, 78 <h1> 25, 166 <head> 166, 185 <html> 166, 185 <i> 95 <img> 32, 33 <input> 73, 74, 75 <kbd> 102, 109 <label> 75, 76, 77 <legend> 87 <li> 11, 12, 166 <link> 187 <meta> 166, 186 <ol> 11, 137, 144 <p> 24, 28, 57, 74, 166 <q> 60 <samp> 101, 108 <span> 23, 27, 113 <strong> 68, 95 <style> 185

right; 220 slecteur 168 structure 152 <style> 185 style 193 styles 191 styles utilisateurs 202, 282 Stylish 202 syntaxe 168 text-align 247 text-indent 251, 262 text-transform 249 top 227 type de mdia 205 underline 125 utilisation des attributs id 18 visited 127 voice-family 236 Web Fonts 265 width 84, 233, 234 css-discuss 288 CSS Zen Garden 232, 286

D
dashed 126 Dave Shea 131, 232, 265, 287, 289 decimal 138 Descendant (slecteur) 146, 149, 150, 151 CSS 157, 158 lisibilit CSS 152 maintenance CSS 153 structure CSS 152 Digital Web Magazine 288 display 18 block; 129 Dive Into Accessibility 77, 287 la-grange.net 287

E
Effet donglets 18 lment <a> 117, 118 <abbr> 102, 105, 113 <acronym> 102, 105 autofermant 187 <b> 24, 95 <blockquote> 58 <body> 90, 166, 275

300

Bonnes pratiques des standards du Web

<table> 38 <tbody> 45 <td> 41 <tfoot> 45 <th> 41 <thead> 45 <title> 166 <ul> 11, 13, 135, 166 <var> 102, 108 vide 187 em 242, 251 Entit HTML 62, 63 laquo; 62 nbsp; 62 raquo; 62 Entits de caractres 119 Eric Meyer 282 Externe (feuille de style) 187

F
Fahrner Image Replacement 256 accessibilit 259 assigner un arrire-plan 257 avantages 258 background 256, 258 background-image 256 cacher le texte 257 display 257 id 256 inconvnients 259 <span> 257, 259 Fahrner, Todd 256 Fast Company 32 Feuile de style. Voir aussiCSS Feuille de style 3 alternate stylesheet 196 alternatives 195 de rinitialisation 200 effet de cascade 197 externe 187 intgre 185 orale 105

Filtrage par attributs 131 FIR 256 accessibilit 259 assigner un arrire-plan 257 avantages 258 background 256, 258 background-image 256 cacher le texte 257 display 257 id 256 inconvnients 259 <span> 257, 259 firstChild 179 first-letter 246 Fitts (loi de) 129, 131 block; 129 float 18, 218, 221, 222 Fontes 241 font-family 29, 243 font-size 29 font-style 245 font-variant 250 small-caps 250 for 77 id 77 Formulaire 73 accesskey 81, 83 arrire-plan des lments 91 bordures des lments 91 comparaison des lments 92 <dd> 78 <div> 76 <dl> 78 <dt> 78 <fieldset> 81, 87 <form> 73, 74, 75, 78 id 76 <input> 73, 74, 75 <label> 75, 76, 77 <legend> 87 liste de dfinitions 78 <p> 74

styler une liste de dfinitions 79 tabindex 81, 82 tableau 73

G
getAttribute 175 title 175 getElementById 171, 175 getElementsByTagName 173, 175 caractre de remplacement 174 Google Maps 116 Gras 98 bold 99 italique 99 GreaseMonkey 115 Guillemets 61, 62

H
H2VX 114 haslayout 131 hCard 111 <abbr> 113 balisage 112 Contacts Conversion Service 114 <div> 113 H2VX 114 <span> 113 vCard 114 headers 42 height 226 Hi-fi 191, 266 Holly Hack 130, 131 Holzschlag, MollyE. 291 hover 19, 127, 272 href 124, 187 HTML 1, 4 entit 62, 63 HTML5 4 <acronym> 106 WHATWG 4

Index

301
cacher les lments superflus 209 dsactiver les arrire-plans et couleurs 210 display 210 extraire les liens 210 feuille de style 209 media 209 sparer des styles pour lcran 208 tailles en points 209 texte dun lien 211 Infobulle 107, 124 Inman, Shaun 291 innerHTML 181 Instance 163 Intgre (feuille de style) 185 Interligne 242 line-height 242 Internet Explorer 131 haslayout 131 Holly Hack 131 Italique 98 font-style 245 gras 99 italic 99 innerHTML 181 length 173 nodeName 179 nodeType 178 nodeValue 179 null 175 objets dfinis par lutilisateur 163 htes 163 natifs 163 <script> 172 setAttribute 177 typeof 171, 173 var 174 window 163 Jeffrey Zeldman 232, 286, 289 Jina Bolton 290

HTTP 2 Hyperliens 124 active 19, 124, 127 arrire-plan 125 block; 129 border 126 CSS 125, 126 effet de survol 127 espace vertical supplmentaire dans IE6 130 focus 128 hover 19, 124, 127 href 124 icne 125 link 124 loi de Fitts 129, 131 mnmotechnique LoVe/HAte 128 ordre des pseudo-classes 128 pseudo-classes 124 utilisabilit 129 visited 124, 127

L
la-grange.net, spcifications du W3C 285 lang 61, 63 codes de langues 61 Langridge, Stuart 260 Leahy/Langridge Image Replacement 260 hauteur nulle 260 inconvnients 261 modle des botes CSS 261 padding-top 260 Seamus Leahy 260 Stuart Langridge 260 Leahy, Seamus 260 Lecteur dcran 96 <em> 98 feuille de style orale 105 <strong> 97 title 105, 124

I
Icnes 31 background 33 <img> 32, 33 id 18, 52, 76, 119, 121, 144, 154, 155, 157, 168, 170, 217, 256, 275, 280, 281 effet 281 for 77 icne 52 idCSS 170 idDOM 170 if 176 Impression (styles) 205 after 211 aperu avant impression 212

J
Jason Santa Maria 290 JavaScript 163 appendChild 180 Browser Object Model 163 createElement 180 createTextNode 180 document (objet) 164, 171 firstChild 179 getAttribute 175 getElementById 171, 175 getElementsByTagName 173, 175 if 176

302

Bonnes pratiques des standards du Web

length 173 letter-spacing 244 ngatif 245 positif 245 Lettrine 246 first-letter 246 <span> 246 Liens HTML 117. Voir aussiAncres line-height 242 LIR 260 hauteur nulle 260 inconvnients 261 modle des botes CSS 261 padding-top 260 Seamus Leahy 260 Stuart Langridge 260 Listamatic 147 Liste 9, 135 border 18 bordure 160 de dfinitions 78, 140 CSS 142 <dd> 78, 141 description 141 <dl> 78, 141 <dt> 78, 141 formulaire 78 styler un formulaire 79 terme 141 <ul> 140 display 18 effet donglets 18 float 18 imbrication 139 imbriques 156 <li> 11, 12 list-style 15 list-style-type 138, 145 navigation 17, 270, 280 numrotation 138 automatique 137 numrote 135

<ol> 11, 137, 144 ordonne 137 padding 16 puces 15, 16, 136, 158 retrait 16 <ul> 11, 13, 135 list-style 15 list-style-image 16 list-style-type 138, 145 decimal 138 lower-alpha 138 lower-roman 138 none 138 upper-alpha 138 upper-roman 138 Lo-fi 191, 266 Logos interchangeables 265 <a> 268 CSS 267 hi-fi 266 hyperlien 268 lo-fi 266 Loi de Fitts 129, 131 block; 129 lower-alpha 138 lower-roman 138

M
margin 66, 219, 224, 225 Mark Boulton 290 Mark Pilgrim 77, 104, 287 media 205, 206, 209 all 205 aperu avant impression 206 aural 206 braille 205 cran dordinateur 205 embossed 205 grille de caractres chasse fixe 206

handheld 206 impression 206 imprimantes embossage en braille 205 priphriques de poche 206 prsentation 206 print 206 prise en charge 207 projection 206 retour tactile en braille 205 screen 205 speech 206 support 205 synthtiseurs vocaux 206 tlviseur 206 tout support 205 tty 206 tv 206 types de 4 Mthode 163 Meyer, Eric 282 meyerweb.com 212, 289 mezzoblue 128, 131, 265, 289 microformats 109 Microformats 109, 115 application 115 balisage 112 classes prdfinies 111 gnrateur de hCard 111 Google Maps 116 hCard 111 interoprabilit 114 microformats.org 111 puissance 113 XHTML 109 XML 109 microformats.org 111 Mike Rundle 261 Mise en page 215 absolute; 227 arrire-plan 223 barre latrale 218

Index

303
N
name 117, 118, 119, 121 entits de caractres 119 nodeName 179 nodeType 178 nodeValue 179 Nud 166, 175 appendChild 180 attribut 167 createElement 180 createTextNode 180 lment 167 firstChild 179 getElementById 175 getElementsByTagName 175 innerHTML 181 nodeName 179 nodeType 178 nodeValue 179 objet 175 texte 167 types 175 none 138 no-repeat 17 null 175 Numrotation dune liste 137, 138 decimal 138 lower-alpha 138 lower-roman 138 none 138 upper-alpha 138 upper-roman 138 getAttribute 175 hte 163 instance 163 mthode 163 natif 163 nud 175 proprit 163 setAttribute 177 Onglets 18 base dimages, effet de survol et accessibles 269 Open Quality Standards 288 OpenWeb 84, 286 Oprateur typeof 171, 173 Opquast 288 overline 125

both; 222 colonnes 215 factices 237 dimensions en pixels 226 lastique 232, 233 em 232, 233 en-tte 217 float 217, 218, 221, 222 height 226 id 217 margin 219, 224, 225 ordonnancement des lments 218, 221 pied de page 217, 228 positionnement 225, 233 right; 220 right 227 segments logiques 217 structure globale de la page 215 top 227 trois colonnes 230 Modle des botes CSS 65, 233 Box Model Hack 235 interprtation errone par IE5 sous Windows 65, 233 Leahy/Langridge Image Replacement 261 LIR 261 width 233, 234 Moll, Cameron 290 Molly.com 291 MollyE. Holzschlag 291 Mosaque 31 arrire-plan 238 en-tte de tableau 51 repeat-x 31 repeat-y 31 <th> 51

P
padding 16, 29, 49, 67 mnmotechnique 49 ordre top, right, bottom, left 49 Phark Mike Rundle 261 text-indent 262 Pilgrim, Mark 77, 104, 287 Police de texte 241 antialiasing 241 espaces dans les noms 244 font-family 243 sans serif 241 Times 242 position, absolute; 227 Pourcentage 90 Prsentation 99 bold 99 italic 99 Proprit 163 content 62

O
Objet 163 classe 163 dfini par lutilisateur 163

304

Bonnes pratiques des standards du Web

Pseudo-classe 62 Pseudo-classe active 124 after 62 before 62 focus 93, 124 hover 124 link 124 visited 124 Puces 15, 136 background 17 dsactiver 15 list-style-image 16 personnaliser 16

S
Santa Maria, Jason 290 Scalable Inman Flash Replacement 263 Flash 263 JavaScript 263 Seamus Leahy 260 Slecteur contextuel 33 descendant 146, 149, 150, 151 setAttribute 177 Shaun Inman 291 Shea, Dave 131, 232, 265, 287, 289 sIFR 263 Flash 263 JavaScript 263 Simon Willisons Weblog 291 SimpleBits 17, 20, 21, 238, 273 size 84 solid 126 Sortie de programme 101 <samp> 108 Standards web 1 accessibilit 3 Ajax 2 compatibilit 3 CSS 2 DOM 2 HTML 1, 4 HTML5 4 HTTP 2 intrt 2 RDF 2 sparer contenu et prsentation 3 spcifications 1 WCAG 1 XHTML 2, 4 XML 2, 4 XSL 2 Standblog 292 Stopdesign 289

Structure du document 25 optimisation pour les moteurs de recherche 26 Stuart Langridge 260 Stuff and Nonsense 291 styles 193 maintenance 194 utilisateurs 202, 282 Stylish 202 Subtraction 291 summary 40 Synthse vocale 96. Voir aussiLecteur dcran

R
RDF 2 Rfrence 101 Rfrentiel Opquast 288 Rinitialisation (styles) 200 rel 196 Remplacement de texte par des images 255 CSS 255 Fahrner Image Replacement 256 FIR 256 Leahy/Langridge Image Replacement 260 LIR 260 Phark 261 Scalable Inman Flash Replacement 263 sIFR 263 Retrait 16, 59 <blockquote> 59 dsactiver 16 margin-left 59 padding-left 59 right 227 Rundle, Mike 261

T
tabindex 81, 82 <input> 82 Tableau 37 accessibilit 38 border 46, 47 border-collapse 48 <caption> 39 donnes 38 donnes tabulaires 37 en-tte de colonne 38, 41, 50 espacement 49 formulaire 73 grille 46 lgende 38 long 45 mise en page 37 modles 56 padding 49 rsum 40 summary 40 <table> 38 <tbody> 45 <td> 41 <tfoot> 45 <th> 41

Index

305
title 123, 167, 175, 196 accessibilit 123 infobulle 124 lecteur dcran 105, 124 Titre 23 arrire-plan 30 en mosaque 31 background-color 30 border 29 color 29 CSS 28 effet de relief 30 font-family 29 font-size 29 <h1> 25 icnes 31 <img> 32, 33 optimisation pour les moteurs de recherche 26 ordre 27 <p> 28 padding 29 sauter 27 <span> 27 structure du document 25 Todd Fahrner 256 top 227 type 139, 186 text/css 186 typeof 171, 173 Types de mdias 4 Typographie 241 casse 249 crnage 244 interligne 242 lettrine 246 Unicode 62, 63 Unstoppable Robot Ninja 291 upper-alpha 138 upper-roman 138 UTF-8 63

<thead> 45 titre 38, 50 tutoriels 56 Taille du texte <body> 90 pourcentage 90 Tantek elik 235, 290 Box Model Hack 235 Temesis 288 rfrentiel Opquast 288 text-align 247 center 248 justify 248 left 248 right 248 text-decoration overline 125 underline 125 Texte saisir par lutilisateur 102 <kbd> 109 Texte (styles) 241 casse 249 contraste 252 first-letter 246 font-family 243 font-style 245 font-variant 250 indentation de paragraphe 251 interligne 242 justifier 247 letter-spacing 244 lettrine 246 line-height 242 <span> 246 text-align 247 text-indent 251 text-transform 249 text/html 186 text-indent 251, 262 text-transform 249 uppercase 249

V
var 174 Variable 102 <var> 108 Veerles Blog 291 visited 127 Vitamin 288 voice-family 236

W
W3C 1, 9, 285 Ajax 2 codes de langues 61 CSS 2 Document Object Model 199 DOM 2, 199 HTML 1, 4 HTML5 4 HTTP 2 la-grange.net 285 outils de validation 285 RDF 2 spcifications 1 traductions francophones 285 WAI 287 WCAG 1 Web Accessibility Initiative 287 XHTML 2, 4 XML 2, 4 XSL 2

U
underline 125

306

Bonnes pratiques des standards du Web

WAI 287 WaSP 286 WCAG 1 Web standards 1 W3C 1 World Wide Web Consortium 1 Web Accessibility Initiative 287 Webatou 292 Website Optimizer. VoirGoogle Website Optimizer Web Standards Project 286 WHATWG 4 WHATWGHTML5 4 width 84, 233, 234 World Wide Web. Voir aussiW3C

X
XHTML 2, 4, 9 <a> 117, 118 <abbr> 102, 105 <acronym> 102, 105, 106 <b> 24, 95 balisage structur 5 balisage valide 5, 9 <blockquote> 58

<body> 90, 166, 275 <br /> 10 <caption> 39 <cite> 60, 101, 102 <code> 101, 107 <dd> 78, 141 <dfn> 101 <div> 58, 76, 113, 150, 151, 154 <dl> 78, 141 DOCTYPE 166 <dt> 78, 141 <em> 95 <fieldset> 81, 87 <form> 73, 74, 75, 78 <h1> 25, 166 <head> 166, 185 <html> 166, 185 <i> 95 <img> 32, 33 <input> 73, 74, 75 intrt 4 <kbd> 102, 109 <label> 75, 76, 77 <legend> 87 <li> 11, 12, 166 <meta> 166, 186 microformats 109 <ol> 11, 137, 144

<p> 24, 28, 57, 74, 166 <q> 60 <samp> 101, 108 <script> 172 smantique 5 <span> 23, 27, 113 <strong> 68, 95 <style> 185 <table> 38 <tbody> 45 <td> 41 <tfoot> 45 <th> 41 <thead> 45 <title> 166 titres 23 types de mdias 4 <ul> 11, 13, 135, 166 <var> 102, 108 XML 4 XML 2, 4 XMLRDF 2 XMLXHTML 4 XSL 2

Z
Zeldman, Jeffrey 232, 286, 289

Le Campus

Bonnes pratiques des

standards du web
Bienvenue dans ldition franaise du livre succs de Dan Cederholm, Web Standards Solutions. Utiliser les standards du Web permet de crer des contenus pour le plus large public possible, tout en assurant leur compatibilit future. Ces standards garantissent aussi une meilleure compatibilit avec les diffrents supports daffichage, par exemple les lecteurs dcran, les tlphones mobiles et les ordinateurs de poche. HTML, XHTML et CSS sont trois exemples de technologies considres comme des standards du Web. Cet ouvrage, rsolument pratique, propose des solutions concrtes, applicables en ltat. Il vous montre les avantages que vous pouvez tirer respecter ces standards et savoir prcisment comment les mettre en uvre. Vous apprendrez crer des mises en page multicolonnes, tirer parti des techniques de remplacement dimages, utiliser au mieux les tables et les listes, et bien davantage encore. Cette approche hautement modulaire vous permet dassimiler, comprendre et exploiter rapidement lessentiel des standards du Web. Codes sources sur www.pearson.fr !
propos de l'auteur
Dan Cederholm est un experwt reconnu dans le domaine de la conception de sites web respectueux des standards. Il a travaill avec, entre autres, Google, MTV, ESPN, Fast Company, Blogger, Yahoo!, et collabore avec Happy Cog sur des projets choisis.

Table des matires


Listes Titres Les tableaux sont-ils lincarnation du Mal ? Citations Formulaires <strong>, <em> et autres lments de structuration des phrases Ancres Encore des listes Minimiser le balisage Appliquer des CSS Le Document Object Model ou DOM Styles pour limpression Mise en page avec CSS Styler du texte Remplacement de texte par des images Styler llment <body> Pour aller encore plus loin

Niveau : Dbutant / intermdiaire Catgorie : Dveloppement web Configuration : Mac / PC

Pearson Education France 47 bis, rue des Vinaigriers 75010 Paris Tl. : 01 72 74 90 00 Fax : 01 42 05 22 17 www.pearson.fr

ISBN : 978-2-7440-4155-6

customer 27921 at Fri Mar 11 19:30:05 +0100 2011 Proprit de Albiri Sigue <tag.tog@gmail.com>