Le Campus

Matrise des CSS

2e dition

Andy Budd avec Cameron Mall et Simon Collison

Matrise desCSS

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-4130-3 Copyright 2010 Pearson Education France Tous droits rservs Titre original: CSS Mastery, Advanced Web Standards Solutions, second edition Traduit par Patrick Fabre, avec la contribution de Bruno Sebarte ISBN original : 978-1-4302-2397-9 Copyright 2009 by Andy Budd, Simon Collison, and Cameron Moll All rights reserved dition originale publie par FriendsofEd/Apress (www.friendsofed.com/www.apress.com)

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.

Matrise desCSS

Andy Budd

avec Cameron Moll et Simon Collison

Table des matires

Avant-propos ................................................................................................................ propos des auteurs ............................................................................................. propos des rviseurs techniques ...........................................................................
IX XI XII

Remerciements............................................................................................................ XIII Introduction .................................................................................................................. qui ce livre est-il destin? ....................................................................................... Structure du livre ............................................................................................................. Conventions utilises ..................................................................................................... 1 Les fondations............................................................................................................. Structuration du code ..................................................................................................... Historique rapide du balisage ................................................................................. Types de document, commutation de DOCTYPE et modes des navigateurs ......................................................................................... Validation ..................................................................................................................... En rsum .......................................................................................................................... 2 Des styles qui atteignent leurcible .............................................................. Les slecteurs courants ................................................................................................ Pseudo-classes ............................................................................................................ Le slecteur universel ................................................................................................... Les slecteurs avancs ................................................................................................... Slecteur denfants et slecteur de frre adjacent.............................................. Slecteur dattribut .................................................................................................... Cascade et spcificit ................................................................................................ Hritage ........................................................................................................................ Planification, organisation et gestion des feuilles de styles ............................. Application de styles aux documents ................................................................... Guides de styles ......................................................................................................... En rsum ..........................................................................................................................
1 1 2 2 5 5 6 19 19 22 23 23 24 25 25 26 27 30 34 35 35 40 42

IV

Matrise des CSS 3 Vue densemble du modle deformatage visuel ............................... Rcapitulatif sur le modle de bote ........................................................................ Internet Explorer et le modle de bote ............................................................... Effondrement des marges ........................................................................................ Rcapitulatif concernant le positionnement .......................................................... Le modle de formatage visuel .............................................................................. Positionnement relatif ............................................................................................. Positionnement absolu.............................................................................................. Flottement .................................................................................................................... En rsum ......................................................................................................................... 4 Utilisation des effets darrireplan............................................................... Notions de base sur les images darrire-plan ..................................................... Botes bords arrondis .................................................................................................. Botes largeur fixe et bords arrondis .................................................................. Coins masqus ............................................................................................................ Ombres portes ................................................................................................................ Ombres portes simples en CSS ........................................................................... Ombres portes " la Clagnut" ............................................................................... Opacit ................................................................................................................................ Opacit CSS ............................................................................................................... Remplacement dimages ............................................................................................. Remplacement des images de Fahrner ................................................................. Phark ............................................................................................................................. Mthode IFR volutive ............................................................................................. En rsum .......................................................................................................................... 5 Mise en forme des liens ........................................................................................ Mise en forme simple des liens .................................................................................. Soulignements amusants .............................................................................................. Embellissement simple des liens ........................................................................... Soulignement de liens originaux ........................................................................... Style de liens visits .................................................................................................. Mise en forme des cibles des liens ........................................................................ Diffrenciation des types de liens.......................................................................... Signalement de documents tlchargeables et de flux .....................................
43 43 45 46 48 48 49 50 52 58 61 61 64 64 70 75 75 77 80 80 85 86 87 87 89 91 91 93 93 94 94 95 96 98

Table des matires

Cration de liens qui ressemblent des boutons .............................................. Survol simple .............................................................................................................. Survol avec images .................................................................................................. Survol style Pixy ........................................................................................................ Sprites CSS ................................................................................................................ Survol CSS3...............................................................................................................

V
99 100 101 102 103 104

Info-bulles CSS .............................................................................................................. 106 En rsum .......................................................................................................................... 108 6 Mise en forme des listes et cration de barres de navigation ... Mise en forme de base des listes................................................................................ Cration dune barre de navigation verticale ........................................................ Signaler la page courante dans la barre de navigation ...................................... Cration dune barre de navigation horizontale simple .................................... Cration dune barre de navigation graphique ..................................................... Systme de navigation lastique onglets ............................................................ Menus droulants Suckerfish ..................................................................................... Cartes-images CSS ........................................................................................................ Cartes-images la mode Flickr.............................................................................. Survol distant .................................................................................................................... Note propos des listes de dfinitions .................................................................... En rsum .......................................................................................................................... 7 Mise en forme des formulaires etdes tableaux de donnes ...... Mise en forme des tableaux de donnes ................................................................. lments spcifiques des tableaux ....................................................................... Balisage des tableaux de donnes ........................................................................ Mise en forme du tableau ....................................................................................... Ajout de style visuel ................................................................................................. Mise en forme simple de formulaires ..................................................................... lments de formulaire utiles ................................................................................ Disposition de base .................................................................................................. Autres lments ......................................................................................................... Embellissements ........................................................................................................ Mise en forme complexe de formulaire...................................................................
109 109 110 113 114 116 118 120 123 126 132 136 137 139 139 141 142 143 144 146 147 148 150 151 153

VI

Matrise des CSS

Champ de date accessible ....................................................................................... 154 Cases cocher multicolonnes................................................................................. 155 Retour de formulaire ................................................................................................ 158

En rsum .......................................................................................................................... 160 8 Mise en page ................................................................................................................ Planification de la mise en page ................................................................................ Les premires fondations.............................................................................................. Centrage dune mise en page laide des marges ............................................. Mises en page flottantes ................................................................................................ Mise en page flottante deux colonnes .............................................................. Mise en page flottante trois colonnes ............................................................... Mises en page largeur fixe, liquide et lastique ................................................ Mises en page liquides ............................................................................................. Mises en page lastiques.......................................................................................... Images liquides et lastiques ....................................................................................... Fausses colonnes ............................................................................................................ Colonnes de hauteurs gales........................................................................................ Colonnes CSS3 .............................................................................................................. Frameworks CSS et systmes CSS ........................................................................... En rsum .......................................................................................................................... 9 Bogues et correctifs ................................................................................................. La chasse aux bogues ................................................................................................... Problmes CSS courants .......................................................................................... Les fondamentaux de la chasse aux bogues ........................................................... Essayer dviter les bogues par avance! ............................................................. Isoler le problme ..................................................................................................... Crer des cas de test minimaux .............................................................................. Rsoudre le problme, pas le symptme ............................................................. Demander de laide ................................................................................................... Avoir ou ne pas avoir un "layout" ......................................................................... Quest-ce que le "layout"? ..................................................................................... Quel effet rsulte du layout? .................................................................................. Solutions de contournement ........................................................................................ Les commentaires conditionnels dInternet Explorer .....................................
161 161 164 165 167 167 170 172 173 176 178 180 183 187 188 191 193 193 194 198 200 200 201 202 202 203 203 204 206 206

Table des matires

Avertissement concernant les hacks et les filtres ............................................... Utiliser les hacks et les filtres avec raison ........................................................... Appliquer le filtre passe-bande pour Internet Explorer version Mac .......... Le hack de ltoile HTML ...................................................................................... Appliquer le hack du slecteur denfants ............................................................

VII
207 208 209 209 210 211 211 211 213 214 215 216 217 219 221 221 223 223 225 226 228 230 230 232 234 237 237 238 240 241 245 247 247 248

Bogues et correctifs courants ...................................................................................... Bogue de la double marge des lments flottants.............................................. Bogue du dcalage de texte de 3pixels ............................................................... Bogue des caractres dupliqus dInternet Explorer6 .................................... Bogue du coucou dInternet Explorer6 .............................................................. Positionnement absolu dans un conteneur relatif ............................................. Cesser de se rfrer Internet Explorer ............................................................... Prise en charge graduelle des navigateurs ............................................................. En rsum .......................................................................................................................... 10 tude de cas: Roma Italia .................................................................................. propos de cette tude de cas .................................................................................. Les fondations .................................................................................................................. Un il riv sur le HTML5...................................................................................... reset.css ........................................................................................................................ La mise en page et la grille 1080pixels.............................................................. Utilisation des grilles pour la conception web .................................................. Fonctionnalits CSS2 et CSS3 avances .............................................................. Les sites doivent-ils tre identiques dans tous les navigateurs? ................... Slecteur dattribut ................................................................................................... box-shadow, RGBa et text-overflow ...................................................................... Liaison des polices et typographie web amliore .............................................. Dfinir font-size comme en 1999 ........................................................................... Ponctuation hors justification ................................................................................. Affichage du texte sur plusieurs colonnes .......................................................... @font-face ................................................................................................................... Cufn, tape intermdiaire avant @font-face ..................................................... Interactivit avec Ajax et jQuery ............................................................................... Ajax .............................................................................................................................. jQuery ...........................................................................................................................

VIII

Matrise des CSS

Utilisation dAjax et de jQuery pour la fonctionnalit derecherche ........... 249

En rsum ......................................................................................................................... 251 11 tude de cas: ClimbtheMountains ........................................................... propos de cette tude de cas .................................................................................. Organisation et conventions de la feuille de styles ............................................. La laborieuse feuille screen.css.............................................................................. Rinitialisation .......................................................................................................... Feuilles de styles Internet Explorer utilisant descommentairesconditionnels ............................................................................ Flexibilit de la grille ..................................................................................................... Fonctionnement de la mise en page du site CTM ............................................ Contrle de la navigation avec les classes de llment body ......................... Mise en valeur de la page courante ....................................................................... Mise en forme de la citation ................................................................................... Ciblage stratgique des lments ............................................................................... Slecteurs descendants profonds .......................................................................... La pseudo-classe :first-child .................................................................................. Slecteurs de frres adjacents ................................................................................. Transparence, ombres et bords arrondis .................................................................. Notre objectif ............................................................................................................. Bandeau translucide de lgende et transparence RGBa .................................. Combinaison de classes ........................................................................................... border-radius .............................................................................................................. box-shadow ................................................................................................................. Positionner des listes et rvler leur contenu ......................................................... Arrondir les coins ...................................................................................................... Le graphique daltitude ............................................................................................ En rsum ..........................................................................................................................
253 253 255 256 257 258 258 259 260 260 263 264 264 266 268 269 269 270 272 273 274 275 277 277 282

Index .................................................................................................................................. 285

Avant-propos
Dans notre merveilleux univers de la conception web, il existe toujours trente-six mille moyens de parvenir au mme rsultat. Et ce nombre ne fait quaugmenter de jour en jour. Plutt que davoir une seule manire de rsoudre tel ou tel problme, on a le bonheur et le malheur la fois de disposer dune abondance de choix. Ce sont eux qui font le sel de ce mtier, mais ce sont eux, aussi, qui le rendent si difficile. Le livre Matrise des CSS est l pour vous aider traverser ces difficults. Andy Budd pratique les techniques de conception web et crit ou parle leur sujet depuis de nombreuses annes. Ce livre offre chacun la chance de profiter de ses techniques denseignement CSS essentielles sous un format facile suivre. Il sagit dun catalogue de solutions, dastuces et de trucs indispensables pour les professionnels du web. Jai toujours grinc des dents en lisant des livres qui affirmaient premptoirement quun seul moyen simple existait pour raliser tel ou tel objectif. Andy fait tout le contraire. Il propose plusieurs mthodes pour chaque tche, comme la mise en forme des liens, la cration doutils de navigation onglets, les solutions CSS3 qui font gagner du temps, la cration de mises en page fixes, fluides ou lastiques ou encore les astuces pour rparer ces satans bogues de navigateurs qui hantent le quotidien des dveloppeurs CSS. Arm de ces techniques populaires et lgantes, vous serez mieux prpar pour prendre des dcisions avises. Et comme si cela ne suffisait pas, Andy a mme pris les devants et sest adjoint laide de deux concepteurs de haut rang pour crer un assemblage de toutes ces pices, afin de montrer comment il tait possible de combiner ces techniques essentielles. Cela fait longtemps que jadmire le travail de Cameron et de Simon. Les deux excellentes tudes de cas, qui prsentent respectivement une maquette fluide et fiable et une solution de mise en forme flexible, sont un ajout inestimable. Plongez-vous dans cet ouvrage et commencez les fouilles dans ces trente-six mille moyens de matriser les CSS. Dan Cederholm Auteur du best-seller Web Standards Solutions

 propos des auteurs

Andy Budd est lun des fondateurs du groupe User Experience Design Consultancy, ou Clearleft (clearleft.com). Spcialiste en conception interactive et en utilisabilit, il est rgulirement invit sexprimer lors des confrences internationales comme Web Directions, An Event Apart et SXSW. Il soccupe de dConstruct (dconstruct.org), lune des confrences les plus populaires du Royaume-Uni en matire de conception web, et il est galement responsable dUX London (uxlondon.com), le premier vnement du Royaume-Uni consacr lutilisabilit, larchitecture de linformation et lexprience utilisateur. Andy fut un prcurseur des standards du Web au Royaume-Uni. Il a acquis une connaissance pousse de la spcification CSS et de la prise en charge des navigateurs. Comme membre actif de la communaut, il a particip au jury de plusieurs prix de conception internationaux et sige actuellement au comit consultatif du magazine web .net. Andy est galement larchitecte de Silverbackapp (silverbackapp.com), un outil de test dutilisabilit bas cot pour Mac. Il est un aficionado de Twitter (@andybudd) et blogue loccasion sur andybudd.com. Au comble du bonheur lorsquil plonge dans quelque atoll tropical lointain, Andy est professeur de plonge et pcheur de requins ses heures. Cameron Moll conoit des interfaces web signifiantes, harmonisant utilit et prsentation depuis la fin des annes90. Ses travaux et son expertise ont t mis profit par les magazines HOW, Print et Communication Arts, par Forrester Research, la National Public Radio (NPR) et bien dautres organisations. Il intervient lors de confrences nationales et internationales sur la conception des interfaces utilisateur. Il est aussi lauteur de Mobile Web Design (mobilewebbook.com). Cameron est le fondateur et le prsident dAuthentic Jobs Inc. (authenticjobs.com), une destination cible pour les professionnels du Web et de la cration et les entreprises dsireuses de les embaucher. Il est galement propritaire de Cameron Moll LLC, qui propose, entre autres produits, des posters de typographie en relief ( acheter sur cameronmoll.bigcartel.com). Au beau milieu de cette folle activit, il trouve encore le temps de jouer au ballon avec chacun de ses quatre garons. Vous pouvez aussi retrouver Cameron en ligne sur cameronmoll.com, twitter.com/cameronmoll, flickr.com/photos/authentic et vimeo.com/cameronmoll. Simon Collison est le cofondateur et le directeur artistique dErskine Design (erskinedesign.com) o il sintgre une quipe talentueuse de graphistes et de dveloppeurs aux ralisations exceptionnelles. Au cours des dix dernires annes, il a travaill sur de nombreux projets web pour des maisons de disques, des groupes de musique, des artistes, des socits ou pour le gouvernement toute la panoplie semble y passer. Il travaille maintenant avec une importante liste de clients qui vont des magazines rputs jusquaux explorateurs polaires.

XII

Matrise des CSS

Colly tient un blog depuis longtemps (colly.com) et rdige des articles concernant le Web sur ErskineLabs (erskinelabs.com). Il est lauteur du best-seller Beginning CSS Web Development chez Apress et le coauteur de Web Standards Creativity. Son principal bonheur? Exprimenter les CSS et le HTML ou en parler devant un auditoire. Dans la "vraie" vie, Colly adore grimper en montagne et se perdre dans la nature sauvage du Royaume-Uni ou dIslande. Il conduit une voiture vieille de trente-deux ans et possde un chat extraordinairement bte quil a appel Bearface (face dours).

propos des rviseurs techniques

Natalie Downe est une perfectionniste par nature. Elle travaille pour Clearleft Brighton, comme dveloppeur web ct client. Consultante exprimente en utilisabilit et chef de projet, ses premires amours restent le dveloppement front-end et lingnierie en utilisabilit. Elle aime que les choses soient bien faites et se risque loccasion aux arts obscurs du Python et de sa bizarre API. Tony White est un dveloppeur front-end et concepteur rsidant Memphis dans le Tennessee. Pendant la semaine, il gre linterface utilisateur des htels Hilton, o il veille lutilisabilit, milite en faveur des standards du Web et enfivre le HTML laide de jQuery. Il dirige aussi le one-man show Ask the CSS Guy (askthecssguy.com), un site gr ses heures perdues o il scrute les entrailles des techniques de conception web CSS et JavaScript.

Remerciements
Merci tous ceux qui mont aid raliser le livre, directement ou indirectement. mes amis et collgues chez Clearleft: merci de mavoir encourag et de mavoir fait part de vos remarques tout au long du processus dcriture. Merci en particulier Natalie Downe, qui a gratifi les lecteurs de son exprience et de ltendue de son savoir. Ton aide et tes conseils taient inestimables et je ne comprends toujours pas comment tu trouves le temps. Merci Chris Mills, pour mavoir guid lors du processus initial dcriture et aid matrialiser mes ides, ainsi qu tous ceux, chez Apress, qui ont travaill sans relche pour que ce livre soit publi temps: votre dvouement et votre professionnalisme ont t trs apprcis. Merci aussi tous mes collgues qui continuent partager leurs trsors de connaissances pour faire du Web un monde meilleur. Ce livre naurait pas t possible sans le travail pralable des personnes suivantes, pour ne nommer que celles-l: Cameron Adams, John Allsopp, Rachel Andrew, Nathan Barley, Holly Bergevin, Mark Boulton, Douglas Bowman, The BritPack, Dan Cederholm, Tantek elik, Joe Clark, Andy Clarke, Simon Collison, Mike Davidson, Garrett Dimon, Derek Featherstone, Nick Fink, Patrick Griffiths, Jon Hicks, Molly E. Holzschlag, Shaun Inman, Roger Johansson, Jeremy Keith, Ian Lloyd, Ethan Marcotte, Drew McLellan, Eric Meyer, Cameron Moll, Dunstan Orchard, Veerle Pieters, D. Keith Robinson, Richard Rutter, Jason Santa Maria, Dave Shea, Jeffrey Veen, Russ Weakley, Simon Willison et Jeffrey Zeldman. Merci galement tous les lecteurs de mon blog et tous ceux que jai rencontrs lors de confrences, dateliers et de formations au cours des deux dernires annes. Vos discussions et vos ides ont aid alimenter le contenu de ce livre. Enfin, merci vous de lire ce livre. Jespre quil vous permettra de franchir un nouveau cap pour vos comptences CSS. Andy Budd Pour commencer, merci davoir choisi ce livre. Jespre quil contribuera amliorer votre travail au quotidien. Je suis sans cesse inspir par le potentiel de ceux qui travaillent dans lunivers du Web et vous en faites partie. Comme Andy, je veux remercier les nombreuses personnes qui ont model et remodel le Web pour lamliorer de jour en jour. Dans quelques annes, ces gens seront autant admirs que les hommes qui furent envoys sur la Lune. Un grand merci Aaron Barker (aaronbarker.net) qui ma aid avec quelques exemples jQuery et Ajax dans mon tude de cas. Enfin, par-dessus tout, ma gratitude va ma merveilleuse pouse Suzanne et mes quatre fils, Everest, Edison, Isaac et Hudson. Sans leur amour, leur soutien et leur patience, tout ce travail naurait pu voir le jour. Cameron Moll

XIV

Matrise des CSS

Je dois remercier mon collgue et ami Gregory Wood pour ses ides et son aide avec le concept du site Climb the Mountains. Tout ce quil produit minspire. Voil le concepteur que je voudrais tre quand je serai grand Jaimerais aussi remercier tous mes collgues chez Erskine Design pour leur soutien et pour leur indulgence concernant ce travail enfivr. Un grand merci Simon Campbell, Jamie Pittock, Glen Swinfield, Phil Swan, Vicky Twycross et Angela Campbell. Par-dessus tout, jaimerais saisir cette occasion de remercier ma mre et ceux que jai perdus depuis la premire dition de ce livre, mes deux grands-pres et tout particulirement mon pre. Si je fais tout a, cest encore pour que tu sois fier, quand bien mme tu es dj parti. Simon Collison

Introduction
Les ressources CSS ne cessent de se multiplier et, pourtant, les mmes questions nen finissent pas de revenir dans les forums de discussion: Comment centrer une mise en page? Quelle est la meilleure technique pour crer des bords arrondis? Comment crer une structure trois colonnes? Si vous suivez la communaut des dveloppeurs CSS, il vous suffit gnralement de vous souvenir du site o figure une technique ou un article particulier. Mais si vous dbutez ou si vous navez pas le temps de lire tous les blogs, cette information peut tre difficile retrouver. Les utilisateurs expriments en CSS eux-mmes rencontrent des problmes avec certains aspects plus obscurs des CSS, comme le modle de positionnement ou la spcificit. Cest que la plupart dentre eux sont des autodidactes, qui picorent des astuces dans des articles ou dans le code dautres programmeurs sans toujours comprendre parfaitement les spcifications. Et comment pourrait-il en tre autrement, alors que la spcification est complexe, souvent contradictoire, et crite pour les fabricants de navigateurs plutt que pour les dveloppeurs web? Ensuite, il y a les navigateurs, avec lesquels il faut lutter. Leurs bogues et leurs incohrences sont lun des plus importants problmes pour les dveloppeurs CSS modernes. Malheureusement, bon nombre de ces bogues sont mal documents et leurs correctifs quelquefois hasardeux. Vous savez quil faut procder dune certaine manire pour que quelque chose fonctionne dans un navigateur ou un autre, mais vous avez du mal vous souvenir pour quel navigateur ni comment se produit le dysfonctionnement. Ainsi a surgi lide dun livre. Un livre qui regrouperait les techniques CSS les plus utiles, qui se concentrerait sur les problmes concrets de navigateurs et qui aiderait combler les lacunes les plus courantes en matire de CSS. Un livre qui vous aiderait apprendre plus vite et vous amnerait programmer les CSS comme un expert, en un rien de temps.

qui ce livre est-il destin?

Matrise des CSS est destin tous ceux qui possdent une connaissance rudimentaire du HTML et des CSS. Que vous veniez tout juste de tremper le pied dans lunivers de la conception CSS ou que vous ayez dvelopp des sites en CSS depuis plusieurs annes, vous trouverez de quoi vous alimenter dans ce livre. Vous en tirerez cependant le meilleur profit si vous avez utilis des CSS pendant un certain temps et que vous ne vous considriez pas encore comme un expert. Ce livre est rempli dexemples pratiques complets et dastuces pour vous aider matriser les crations CSS modernes.

Matrise des CSS

Structure du livre
Cet ouvrage dmarre en douceur, avec trois chapitres sur les concepts de base et les meilleures pratiques des CSS. Vous verrez comment structurer le code et le commenter, vous dcouvrirez tout sur le modle de positionnement des CSS et comment fonctionnent vritablement le flottement et le dgagement des lments. Vous en savez peut-tre dj pas mal sur ces sujets, mais il est probable que vous dcouvrirez certaines choses que vous avez manques ou mal comprises. Les trois premiers chapitres sont ce titre une excellente introduction aux CSS, mais aussi un bon rcapitulatif pour des connaissances dj acquises. Une fois les bases traites, les cinq chapitres suivants couvrent les techniques CSS essentielles, comme la manipulation des images, des liens et des listes, la conception de formulaires et de tableaux de donnes et la mise en page CSS. Chacun deux commence simplement puis avance progressivement vers des exemples plus compliqus. Vous verrez comment crer des botes bords arrondis, des images avec des ombres portes transparentes, des barres de navigation onglets et des boutons interactifs. Parmi dautres techniques, vous commencerez par dcouvrir la procdure classique avant de voir comment parvenir au mme effet avec des CSS3. Si vous souhaitez suivre les exemples du livre, vous pouvez tlcharger tout le code sur le site www.pearson.fr. Les bogues de navigateurs sont la croix et la bannire pour bien des dveloppeurs CSS. Tous les exemples de ce livre sattachent donc des techniques qui fonctionnent dans les diffrents navigateurs. En outre, un chapitre complet est consacr aux bogues et leur rsolution. Vous y apprendrez tout sur les techniques de chasse aux bogues et sur la manire didentifier et de rparer les bogues courants avant quils ne posent problme. Vous dcouvrirez mme les causes prcises de nombreux bogues CSS apparemment alatoires dInternet Explorer. Les deux derniers chapitres forment la pice de rsistance de louvrage. Simon Collison etCameron Moll, deux des meilleurs concepteurs CSS existants, ont combin toutes ces techniques dans deux formidables tudes de cas. Vous apprendrez non seulement comment elles fonctionnent mais galement comment les appliquer en pratique dans un projet web rel. Ce livre peut tre lu de bout en bout ou conserv proximit de votre ordinateur pour servir de rfrence sur les astuces et techniques CSS. vous de choisir.

Conventions utilises
Ce livre utilise quelques conventions quil vaut la peine de noter: HTML fait tout aussi bien rfrence au HTML quau XHTML. Sauf indication contraire, la mention CSS renvoie en fait la spcification CSS2.1. La formule "Internet Explorer 6(IE6) et ses versions antrieures sous Windows" fait rfrence aux versions Internet Explorer5.0 6.0 sous Windows. Les "navigateurs web modernes" font rfrence aux dernires versions de Firefox, Safari et Opera, ainsi qu Internet Explorer7 et au-del.

Introduction

Tous les exemples HTML de ce livre sont censs sinsrer dans la balise <body> dun document valide, les CSS tant contenues dans une feuille de styles externe. loccasion, les codes HTML et CSS peuvent tre placs dans un mme exemple, par souci de concision. Dans un vritable document, ces lments devraient cependant rejoindre leurs emplacements respectifs pour fonctionner correctement. Enfin, pour les exemples HTML qui contiennent des donnes rptes, nous avons utilis le signe trois points (...) pour signaler que le code se poursuit, au lieu dcrire toutes les lignes. Les formalits sont faites: passons laction!

Les fondations
Lespce humaine est curieuse de nature. Rien ne nous amuse plus que de trifouiller dans tout ce qui nous tombe sous la main. Jai moi-mme rcemment achet un iMac et il na pas fallu plus de quelques secondes pour que je le mette en pices et ltudie sous toutes ses coutures. Avant mme davoir lu le manuel. On ne se refait pas. Comme tout le monde, jadore bricoler, voir comment les choses fonctionnent, rver dimprobables modlisations. Ce nest quune fois que la pagaille est complte, quune panne fatale sest produite ou que je tombe sur quelque chose de parfaitement inexplicable que je finis par ouvrir la documentation. Lun des meilleurs moyens dapprendre les CSS (Cascading Style Sheets ou feuilles de styles en cascade) consiste se jeter demble leau et bricoler sans attendre. Je parie mme que cest ainsi que la plupart dentre vous ont appris programmer en glanant quelques informations dans un blog, en examinant le code source de telle page pour comprendre comment elle saffiche et en testant le tout dans vos propres sites. Il est peu probable que vous ayez commenc par lire lensemble de la spcification CSS. Peu dindividus y survivraient, du reste. Le bricolage est le meilleur moyen de commencer, mais si vous ny prtez attention, vous risquez de mal comprendre certains concepts essentiels ou daccumuler des problmes qui ressurgiront par la suite. Je sais de quoi je parle : cela mest arriv plusieurs fois. Je me propose donc de passer en revue quelques concepts lmentaires mais souvent mal compris et de vous montrer la manire de procder pour que votre code HTML et CSS reste clair et bien structur. Au cours de ce chapitre, vous dcouvrirez: comment structurer le code; limportance dune documentation facile comprendre; les conventions de nommage; quels moments utiliser des ID et des noms de classes; les microformats; les diffrentes versions du HTML et des CSS; les types de document, la commutation de DOCTYPE et les modes des navigateurs.

Structuration du code
En gnral, les gens ne se posent pas de questions sur les fondations des immeubles. Et pourtant, sans de bonnes fondations, bien robustes, la plupart des btiments ne tiendraient pas debout. Si ce livre traite avant tout des techniques CSS avances, une grande partie de

Matrise des CSS

ce que vous allez apprendre ne peut se faire (ou alors trs difficilement) sans que vous ayez un document HTML valide et bien structur. cette section, vous allez voir pourquoi le HTML clair et bien structur est essentiel pour le dveloppement de sites compatibles avec les standards. Vous verrez galement comment intgrer dautres informations vos documents et, ce faisant, comment faciliter le dveloppement.

Historique rapide du balisage

ses dbuts, le Web ntait gure plus quun amas de documents de recherche, relis les uns aux autres par du code HTML servant les mettre en forme et les structurer simplement. Cependant, quand sa popularit sest accrue, il a t utilis par les dveloppeurs des fins de prsentation. Au lieu de se servir des lments de titre pour les titres des pages, ils ont voulu recourir des combinaisons de balises de police et de style pour crer diffrentes sortes deffets visuels. Les tableaux, dabord employs pour laffichage des donnes, sont rapidement devenus des outils de mise en page tandis que les instructions blockquote ont servi insrer des espaces blancs au lieu de signaler la prsence de citations. Trs vite, le Web a perdu tout son sens et sest transform en un vritable salmigondis de balises de polices et de tableaux. Les concepteurs web ont mme forg une expression pour dsigner ce type de balisage: la "soupe balises" (voir Figure1.1).
Figure1.1
Le balisage de larticle la une dabcnews. com, le 14aot 2000, utilise des tableaux pour la mise en forme et du texte en gras et trs grand pour les titres. Le code manque de structure et est difficile comprendre.

force dtre orient sur la prsentation, le code des pages web est devenu de plus en plus difficile comprendre et grer. Les diteurs WYSIWYG (What You See Is What You Get, littralement: "Ce que vous voyez, cest ce que vous obtenez") offrirent aux auteurs une chappatoire en mettant leur disposition des outils de mise en page visuels. Mais au lieu de simplifier les choses, ces outils ont contribu les compliquer encore, en produisant leur propre tambouille de balises. Les diteurs comme FrontPage ou Dreamweaver permirent de crer des tableaux de mise en page complexes en un clic, mais en truffant le code de tableaux imbriqus et de GIF despacement (voir Figure1.2). Ces mises en page taient extrmement fragiles et menaaient de dysfonctionner au moindre mouvement. Comme le balisage tait bourr de code insens, on se retrouvait frquemment effacer des balises par inadvertance. la manire dun mur dont on retirerait la brique du bas, cest alors toute la mise en page qui seffondrait. En outre, avec un code aussi complexe, la recherche des bogues tait presque impossible. Il tait souvent plus simple de reprogrammer compltement la page que

Les fondations

de chercher la rapicer. Les choses se compliquaient encore avec les sites de grande taille: leur prsentation tant verrouille dans des pages individuelles, il fallait laborer de trs complexes routines de recherche et de remplacement pour rpercuter la plus infime modification dans lensemble du site. Jai moi-mme dtrior plusieurs sites en mon temps avec des routines de ce genre. Les modles de pages se dsynchronisaient trs facilement et un simple ajustement pouvait ncessiter dintervenir patiemment sur chacune des pages du site. Comme les tableaux nont jamais t conus pour la mise en page, il a fallu que lingnieux David Siegel invente un hack pour les faire fonctionner. Afin de les empcher de seffondrer en hauteur ou en largeur, il a imagin dutiliser une petite image GIF transparente dun pixel. En linsrant dans les cellules des tableaux, puis en la redimensionnant verticalement et horizontalement, il parvint contraindre artificiellement la hauteur et la largeur des cellules, afin de prserver les proportions de la mise en page. Ces "user de shim.gif", comme les nommait Dreamweaver, taient monnaie courante dans les anciennes maquettes tabulaires. Fort heureusement, cette pratique est maintenant rvolue et vous ne verrez plus ces petits lments de prsentation contaminer votre code. Au lieu dtre considr comme un simple langage de balisage, le HTML a acquis la rputation dun langage compliqu, droutant et trs facilement sujet aux erreurs. De nombreuses personnes craignaient de toucher au code. Cette tendance a favoris une dpendance excessive vis--vis des diteurs visuels et contribu forger une gnration de concepteurs peu aguerris aux techniques de programmation. lore du nouveau millnaire, le secteur de la conception web se trouvait dans un tat de dlabrement avanc. Il fallait faire quelque chose.
Figure1.2
Cette capture dcran du logiciel Homesite prsente une maquette complexe, ralise avec des tableaux et des GIF despacement (merci JeffL.).

Matrise des CSS

Cest dans cet tat de marasme complet que sont arrives les feuilles de styles CSS. Elles offraient aux utilisateurs la possibilit de contrler lapparence des pages avec des feuilles de styles externes et donc de sparer le contenu de la prsentation. Des changements portant sur tout le site pouvaient ainsi seffectuer un seul et unique endroit et se trouver propags dans tout le systme. Les balises de prsentation comme les balises de police furent abandonnes et la mise en page fut contrle avec des CSS et non des tableaux. Le balisage put alors retrouver sa simplicit dorigine et lon commena retrouver de lintrt au code sous-jacent. La signification des lments a pu naturellement retrouver sa place au sein des documents. Les styles par dfaut des navigateurs pouvant tre redfinis, il tait possible de baliser un lment afin dindiquer quil sagissait dun titre, sans ncessairement avoir le rendre gros, gras et trs moche. On put crer des listes sans se retrouver avec des puces et des balises de citation et tre instantanment punis par leur habituel effet de mise en forme. Les dveloppeurs commencrent alors utiliser les lments HTML pour ce quils signifiaient et non pour lapparence quils permettaient dobtenir (voir Figure1.3).
Figure1.3
Le balisage de larticle la une sur abcnews. com tel quon pouvait le voir cette anne est bien structur et facile comprendre. Sil contient encore quelques balises de prsentation, lamlioration est considrable par rapport au code de la Figure1.1.

Importance de la signification Un balisage qui a du sens, voil qui offre aux dveloppeurs plusieurs avantages importants. Les pages dites "smantiques" sont plus faciles grer que les simples pages de prsentation. Supposons ainsi que vous deviez modifier une citation dans une page. Si cette citation est correctement balise, vous pouvez aisment parcourir le code jusquau premier lment blockquote. Si la citation est un lment de paragraphe comme les autres, elle est en revanche bien plus difficile trouver. Considrons un exemple plus complexe, mais pas moins raliste: vous devez ajouter une colonne votre page daccueil. Avec les CSS, vous naurez qu dposer le contenu au bon endroit puis mettre jour les largeurs des colonnes dans le fichier CSS. Pour obtenir le mme rsultat dans une maquette tabulaire, il faut ajouter une colonne au tableau, modifier les valeurs colspan des prcdentes colonnes, altrer les largeurs de toutes les cellules et modifier les largeurs de toutes les images GIF despacement. Toute la structure de la page doit tre modifie pour sadapter ce simple changement. En plus dtre simple comprendre par les hommes, le balisage smantique peut tre compris par les programmes ou dautres machines. Les moteurs de recherche, par exemple, peuvent

Les fondations

reconnatre les titres parce quils sont entours de balises h1 et leur confrer limportance quils mritent. Les utilisateurs qui se servent de lecteurs dcran peuvent sappuyer sur les titres pour faciliter la navigation dans les pages. Ce qui nous intresse au premier chef dans ce livre, cest que le balisage smantique offre un moyen simple de cibler les lments mettre en forme. Il donne une structure au document et cre un cadre sous-jacent partir duquel les autres lments peuvent tre construits. Il permet ainsi de mettre en forme des lments sans avoir ajouter dautres identifiants et donc surcharger votre code. Le HTML inclut une grande varit dlments signifiants, comme:
h1, h2, ; ul, ol et dl; strong et em; blockquote et cite; abbr, acronym et code; eldset, legend et label; caption, thead, tbody et tfoot.

Chaque fois quun lment signifiant existe et quon peut lutiliser, il est toujours judicieux de le faire. La querelle qui oppose les CSS aux tableaux semble refleurir priodiquement sur les blogs, les listes de discussion ou les forums de dveloppeurs. Ce dbat ressurgit chaque fois quun dveloppeur habitu aux tableaux rechigne lide de devoir assimiler de nouvelles connaissances. Cette raction est assez naturelle et je conois quune mise en page en CSS puisse paratre difficile de prime abord, surtout quand tout semble bien fonctionner avec les mthodes actuelles. Les avantages des CSS ont cependant t dtaills un nombre incalculable de fois: code moins surcharg, tlchargement plus rapide, maintenance plus facile la liste entire serait longue. La plupart des dveloppeurs professionnels ont constat lintrt de sappuyer sur les standards du Web et il est rare de voir une agence, quels que soient sa taille ou son niveau de srieux, travailler avec lancienne mthode. Si vous utilisez toujours des maquettes tabulaires, vous aurez donc normment de mal travailler avec des agences. Ces vieilles habitudes se meurent heureusement et une nouvelle gnration de dveloppeurs apparat qui na jamais eu souffrir des dsagrments lis ces mthodes de travail. ID et noms de classes Les lments smantiques constituent une excellente base, mais la liste des lments disponibles nest pas exhaustive. Le HTML4 a t cr pour servir de langage de balisage de document simple plutt que comme un langage dinterface. Du coup, les lments ddis certains usages spcifiques, comme les zones de contenu ou les barres de navigation, nexistent pas. Vous pouvez crer vos propres lments en XML, mais pour un tas de raisons quil est trop long de dtailler ici, cette mthode nest pas trs commode.

10

Matrise des CSS

Le HTML5 se promet de rsoudre ces problmes en proposant aux dveloppeurs un jeu dlments plus riche. Parmi ceux-ci, des lments de structure comme header, nav, article, section et footer, ainsi que de nouvelles fonctionnalits dinterface utilisateur comme des lments de saisie de donnes et de menu. En prvision du HTML5, de nombreux dveloppeurs ont dj commenc adopter cette nomenclature dans les conventions de nom pour leurs ID et leurs noms de classes. Le mieux, en attendant, est dutiliser les lments existants et de leur donner une signification supplmentaire avec un ID ou un nom de classe. On ajoute ainsi une structure au document, qui fournit des connecteurs utiles pour les styles. En ajoutant lID nav une simple liste de liens, vous pouvez crer votre propre lment de navigation personnalis.
<ul id="nav"> <li><a href="/home/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/contact/">Contact</a></li> </ul>

LID sert identifier un lment spcifique, comme la barre de navigation dun site, et doit tre unique dans la page. Il est utile pour identifier des lments structurels fixes comme les zones de navigation ou de contenu principales. Il est aussi utile pour identifier des lments uniques un lien ou un lment de formulaire particuliers, par exemple. Sil nest possible dappliquer quun seul nom dID un lment dans une page, on peut en revanche appliquer le mme nom de classe nimporte quel nombre dlments. Cest tout lintrt des classes. Elles sont utiles pour identifier des types de contenu ou des lments similaires. Par exemple, votre page peut contenir de nombreux articles de news.
<div id="story-id-1"> <h2>Salter Cane win Best British Newcomer award</h2> <p>In a surprise turn of events, alt folk group, Salter Cane, won Best British Newcomer and the Grammys this week</p> </div> <div id="story-id-2"> <h2>Comic Sans: The Movie wins best documentary at the BAFTAs </h2> <p>The story of this beloved typeface one the best documentary category. Director Richard Rutter was reported to be speechless</p> </div>

Au lieu dattribuer un ID spar chaque article, vous pouvez associer la classe news chacun dentre eux.
<div class="news"> <h2>Salter Cane win Best British Newcomer award</h2> <p>In a surprise turn of events, alt folk group, Salter Cane, won Best British Newcomer and the Grammys this week</p> </div> <div class="news"> <h2>"Comic Sans: The Movie" wins best documentary at the BAFTAs </h2> <p>The story of this beloved typeface one the best documentary category. Director Richard Rutter was reported to be speechless</p> </div>

Les fondations

11

Nommer les lments Lorsque vous nommez les ID et les classes, il est important que les noms choisis soient aussi indpendants que possible de la prsentation. Par exemple, si vous souhaitez que vos messages de notification de formulaire saffichent en rouge, vous pouvez certes leur attribuer une classe nomme rouge. Ce choix convient tant quil ny a pas dautre lment rouge dans la page, mais si vous souhaitez que les tiquettes du formulaire soient rouges galement, vous allez devoir deviner quel lment associer cette classe et cela commencera devenir confus. Imaginez quel point la situation deviendrait droutante si vous utilisiez des lments de prsentation dans tout votre site! Les choses se compliqueraient encore si vous dcidiez de changer lapparence des notifications de formulaire pour les afficher en jaune et non en rouge. Vous devriez alors modifier tous les noms de classes ou vous contenter dutiliser une classe appele rouge pour afficher les lments en jaune Il est en fait prfrable de nommer les lments en fonction de ce quils sont plutt que de lapparence quils possdent. Le code devient ainsi plus comprhensible et ne risque jamais de se dsynchroniser avec la mise en page. Dans lexemple prcdent, au lieu dattribuer la classe rouge aux notifications, vous pouvez leur donner un nom plus descriptif, comme .avertissement ou .notication (voir Figure1.4). Laspect le plus intressant des noms descriptifs tient ce que vous pouvez les utiliser dans tout le site. Par exemple, vous pouvez aussi utiliser la classe .notication avec dautres types de messages et leur attribuer un style compltement diffrent en fonction de lendroit o ils se trouvent dans le document.
Figure1.4
Bons et mauvais noms dID.

Mauvais noms rouge colonneGauche navHaut premierPara

Bons noms erreur contenuSecondaire navPrincipale intro

Lorsque vous crivez des noms de classe et dID, soyez attentif la casse, car les navigateurs considrent que .nimportequi est une autre classe que .nimporteQui. Le meilleur moyen de grer ce problme consiste respecter systmatiquement la mme convention de nom. Pour ma part, jcris tous mes noms dID et de classes en minuscules, avec des tirets pour sparer les mots. Cest une criture plus lisible. nimporte-qui est ainsi plus lisible que nimporteQui. ID ou classes? Il est parfois difficile de savoir si un lment doit possder un ID ou un nom de classe. En rgle gnrale, les classes doivent sappliquer aux lments de nature similaires, qui peuvent apparatre plusieurs endroits dans la mme page, alors que les ID doivent sappliquer aux lments uniques. Reste ds lors savoir quels lments sont par nature similaires et lesquels sont uniques.

12

Matrise des CSS

Par exemple, imaginez que votre site contienne un systme de navigation principal dans len-tte, un systme de navigation pagin en bas de la page des rsultats de recherche et un troisime systme de navigation dans le pied de page. Allez-vous donner chacun de ces lments un ID distinct, comme main-nav, page-nav et footer-nav ou allez-vous attribuer chacun la classe nav et les mettre en forme en fonction de leur position dans le document? Auparavant, javais plutt tendance prfrer la premire mthode, qui me paraissait offrir un ciblage plus dfini. Malheureusement, elle prsente aussi des dsavantages. Que se passet-il si vous dcidez finalement dafficher le systme de navigation pagin la fois en haut et en bas des rsultats de la recherche ou que vous souhaitiez crer un systme de navigation deux niveaux dans le pied de page? Si vous utilisez beaucoup dID, vous serez rapidement court de noms et vous finirez par dvelopper des conventions de noms extrmement longues et compliques. Cest pour cette raison que je privilgie aujourdhui les noms de classes et nemploie un ID que lorsque je cible un lment trs spcifique et que je ne risque jamais de me resservir de ce nom pour autre chose autre part dans le site. Vous ne devez en fait utiliser un ID que lorsque vous avez la certitude que llment napparatra quune seule fois. Si vous envisagez demployer des lments similaires lavenir, prfrez plutt une classe. En vous en tenant des conventions de noms gnrales et en utilisant des classes, vous viterez de crer de longues chanes de slecteurs dID qui renvoient toutes des styles similaires.
#andy, #rich, #jeremy, #james-box, #cennydd, #paul, #natalie, #sophie { font-size: 1.6em; font-weight: bold; border: 1px solid #ccc; } Il suft alors de crer une classe gnrique pour lensemble. .staff { font-size: 1.6em; font-weight: bold; border: 1px solid #ccc; }

Grce leur flexibilit, les classes peuvent tre dune redoutable efficacit. En contrepartie, on peut aussi facilement en abuser. Bien souvent, les dbutants en CSS en ajoutent tout ce quils rencontrent, afin de pouvoir contrler aussi prcisment que possible leurs styles. Les premiers diteurs WYSIWYG avaient galement tendance ajouter des classes chaque fois quun style tait appliqu. De nombreux dveloppeurs ont contract cette mauvaise habitude, parce quils ont appris les CSS en observant le code gnr par les logiciels. Cest ce quon appelle une "classite aigu"; cest presque aussi mauvais que la manie de tableaux, car cela a pour effet dajouter du code dpourvu de signification au document.
<h2 class="news-head">Andy wins an Oscar for his cameo in Iron Man</h2> <p class="news-text"> Andy Budd wins the Oscar for best supporting actor in Iron Man after his surprise cameo sets Hollywood a twitter with speculation. </p> <p class="news-text"><a href="news.php" class="news-tink">More</a></p>

Dans cet exemple, on identifie chaque lment comme partie dun article de news en utilisant un nom de classe li aux news. Le but ici est de faire en sorte que les titres et le texte

Les fondations

13

possdent un style diffrent du reste de la page, mais il nest pas ncessaire dutiliser toutes ces classes supplmentaires pour cibler chaque lment individuel. Vous pouvez identifier lensemble du bloc comme un lment de news en le plaant dans une div (du code) portant le nom de classe news. Ensuite, les titres ou le texte peuvent tre cibls grce aux proprits de cascade des feuilles de styles.
<div class="news"> <h2>Andy wins an Oscar for his cameo in Iron Man </h2> <p>Andy Budd wins the Oscar for best supporting actor in Iron Man after his surprise cameo sets Hollywood a twitter with speculation.</p> <p><a href="news.php">More</a></p> </div>

Chaque fois que vous vous retrouvez rpter des mots dans les noms de classes (comme news-head et news-link ou section-head et section-foot), demandez-vous si ces lments ne peuvent pas tre dcomposs en leurs parties constituantes. Votre code serait alors mieux dcompos et donc plus flexible. En supprimant les classes superflues, vous simplifierez le code et rduirez le poids de vos pages. Je reviendrai sous peu sur les slecteurs CSS et le ciblage des styles, mais il nest presque jamais ncessaire de dpendre ce point des noms de classes. Si vous ajoutez un grand nombre de classes, cest sans doute le signe que votre document HTML est mal structur.

div et span Llment div est lun des premiers qui puisse contribuer donner une structure aux documents. De nombreuses personnes pensent tort que llment div ne possde pas de signification. La balise div marque pourtant une division et fournit un moyen de dcomposer les documents en zones bien dfinies. En plaant la zone de contenu principal dans une div et en lui attribuant la classe content, vous structurez votre document de manire smantique.
Pour limiter le plus possible le balisage, vous ne devez utiliser dlment div que lorsquil nexiste pas dj un lment distinctif. Par exemple, si vous vous servez dune liste pour votre navigation principale, il nest pas ncessaire de lenvelopper dans une div.
<div class="nav"> <ul> <li><a href="/home/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/contact/">Contact</a></li> </ul> </div>

Vous pouvez supprimer la div et appliquer votre classe directement la liste:

<ul class="nav"> <li><a href="/home/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/contact/">Contact</a></li> </ul>

14

Matrise des CSS

La "divite aigu" (lutilisation abusive de balises div) est souvent le symptme dun code mal structur et excessivement compliqu. Certains dbutants en CSS tentent, en fait, de dupliquer leur ancienne structure tabulaire avec des div. Malheureusement, cela revient remplacer un jeu de balises superflues par un autre. Au lieu de cela, les div doivent tre utilises pour regrouper des lments lis par leur signification ou leur fonction plutt que par leur prsentation ou leur disposition. Si les div peuvent tre utilises pour regrouper des lments de niveau bloc, les span servent regrouper ou identifier des lments incorpors dans les lignes:
<h2>Andy wins an Oscar for his cameo in Iron Man </h2> <p>Published on <span class="date">February 22nd, 2009</span> by <span class="author">Harry Knowles</span></p>

Le but est de conserver un code aussi pur et structur que possible; nanmoins, il est parfois impossible dviter dy ajouter quelques lments div ou span non smantiques pour obtenir laffichage souhait. Si cest le cas, ne vous inquitez pas outre mesure. La priode que nous traversons correspond encore une phase de transition et la norme CSS3 promet de nous offrir un bien meilleur contrle des documents. En attendant, il faut souvent faire quelques concessions et enfreindre la thorie. Le principal est de savoir quand faire des compromis et de les faire pour de bonnes raisons. Microformats Comme le HTML est assez pauvre en lments, le marquage de certains types dinformations, comme les personnes, les lieux ou les dates, est souvent difficile. Pour remdier cela, un groupe de dveloppeurs a dcid de crer un ensemble de conventions de noms et de systmes de balisage standardiss pour reprsenter ces donnes. Ces conventions de noms, qui sappuient sur des formats de donnes existants comme vCard et iCalendar, se sont fait connatre sous lappellation de "microformats". titre dexemple, voici mes informations de contact, balises au format hCard:
<div class="vcard"> <p><a class="url fn" href="http://andybudd.com/">Andy Budd</a> <span class="org">Clearleft Ltd</span> <a class="email" href="mailto:info@andybudd.com">info@andybudd.com</a> </p> <p class="adr"> <span class="locality">Brighton</span>, <span class="country-name">England</span> </p> </div>

Les microformats permettent de coder des donnes de manire les rendre accessibles dautres programmes et services. Certaines personnes ont crit des scripts capables dextraire des informations dvnements crites au format hCalendar et de les importer directement dans une application de calendrier (voir Figures1.5 et1.6).

Les fondations

15

Figure1.5
Le calendrier de la confrence UNIX London est balis au format hCalendar.

Figure1.6
Cela signifie que les visiteurs peuvent ajouter tout lemploi du temps leur application de calendrier en un clic.

16

Matrise des CSS

Dautres personnes ont crit des plug-ins qui permettent Firefox dextraire des informations de contact au format hCard et de les envoyer vers un tlphone portable via Bluetooth (voir Figures1.7 et1.8).
Figure1.7
Les informations de contact dans le site web Clearleft sont galement balises au format hCard.

Figure1.8
Avec Outlook (cidessus), Operator ou lancien complment Tails de Firefox, vous pouvez importer ces informations de contact directement dans votre carnet dadresses.

Il existe neuf microformats officiels cette date et quatorze formats ltat de brouillon, dont: hCalendar pour les dates, les calendriers et les vnements; hCard pour les personnes et les organisations; XFN pour les relations entre personnes; hProduct pour les descriptions de produits (brouillon); hRecipe pour les ingrdients et les recettes (brouillon); hReview pour les critiques de produits et dvnements (brouillon); hAtom pour le contenu pisodique, comme les articles de blogs (brouillon).

Les fondations

17

Beaucoup de sites web importants prennent dj en charge les microformats. Cest le cas de Google Maps, qui utilise le format hCard pour les informations dadresse dans ses rsultats de recherche. Yahoo! prend galement en charge les microformats sur un certain nombre de proprits du site de partage de photos Flickr. Yahoo! a dailleurs lch pas moins de vingtsix millions de microformats en pleine nature, en utilisant le format hListing pour le moteur de comparaisons de prix Kelkoo. Il est extrmement facile dajouter des donnes microformates un site web. Je vous recommande donc de le faire chaque fois que cest possible. Il ne sagit l que dun aperu trs superficiel des possibilits offertes par les microformats. Si vous souhaitez en apprendre plus ce sujet, vous pouvez lire larticle anglais "Microformats: Empowering Your Mark-up for Web2.0" de John Allsopp. Sinon, rendez-vous sur http://microformats.org pour consulter les spcifications officielles. Les diffrentes versions du HTML et des CSS Les CSS existent en plusieurs versions (ou niveaux). Il est donc important de savoir laquelle utiliser. La spcification CSS1, devenue une recommandation la fin de 1996, incluait des proprits trs rudimentaires comme les polices, les couleurs et les marges. La spcification CSS2, sortie en 1998, intgrait des concepts avancs tels le flottement et le positionnement, ainsi que de nouveaux slecteurs comme les slecteurs denfants, les slecteurs de frres adjacents et les slecteurs universels. Le temps scoule son propre rythme dans lunivers du W3C (World Wide Web Consortium), si bien quen dpit du fait que le travail sur la spcification CSS3 a dbut avant lan 2000 sa promulgation officielle nest pas encore lordre du jour. Pour acclrer le dveloppement et limplmentation dans les navigateurs, la spcification CSS3 a donc t dcompose en modules qui peuvent tre rendus officiels et implments indpendamment. Elle inclut de passionnants ajouts, dont un module de mise en page avanc, de toutes nouvelles proprits darrire-plan et une flope de nouveaux slecteurs. Quelques-uns de ces modules sont planifis pour la seconde moiti de 2009. Malheureusement, il sagit de stades que nous avons dj connus et il est arriv que des modules, sur le point dtre publis, soient finalement ramens ltat de "working drafts" (brouillons). Il est donc difficile de savoir combien dentre eux vont vraiment franchir ce cap. On peut esprer que certains passeront au statut de recommandation officielle dici 2011. La mauvaise nouvelle, cest que certains semblent ne pas avoir t seulement commencs, tandis que dautres nont pas t mis jour depuis plusieurs annes. un tel rythme, on a peu de raisons de croire que la spcification CSS3 parviendra tre totalement complte un jour. La bonne nouvelle, cest que, malgr les retards, beaucoup dditeurs de navigateur ont dj implment certaines des parties les plus intressantes de la spcification CSS3. Il est donc dj possible de commencer utiliser un grand nombre de ces slecteurs. En raison du long dlai prvu entre la sortie officielle de la CSS2 et celle de la CSS3, un travail a dmarr en 2002 sur la CSS2.1. Cette rvision de la CSS2 a pour but de corriger certaines erreurs et de proposer une prsentation plus prcise de limplmentation des CSS dans les navigateurs. La CSS2.1 parvient lentement mais srement maturit et correspond donc la version CSS aujourdhui recommande.

18

Matrise des CSS

Le HTML 4.01 est pass au stade de recommandation la fin de 1999. Cest la version que la plupart des personnes utilisent. En janvier 2000, le W3C a cr une version XML du HTML4.01 et la nomme XHTML1.0. La principale diffrence entre le XHTML1.0 et le HTML4.01 tient au fait que le premier respecte les conventions de programmation XML. Contrairement au HTML standard, tous les attributs XHTML doivent contenir des guillemets et tous les lments doivent tre ferms. Le code suivant, qui correspond du HTML valide, est incorrect pour le XHTML:
<h2>Peru Celebrates Guinea Pig festival <p><img src=pigonastick.jpg alt=Roast Guinea Pig> <p>Guinea pigs can be fried, roasted, or served in a casserole.

En XHTML1.0, ce code scrirait de la manire suivante:

<h2>Peru Celebrates Guinea Pig festival</h2> <p><img src="pigonastick.jpg" alt="Roast Guinea Pig" /></p> <p>Guinea pigs can be fried, roasted, or served in a casserole.</p>

Le XHTML1.1 avait pour objectif de rapprocher encore le XHTML du XML. Il existait en pratique trs peu de diffrences entre les deux langages, lexception dune, mais de taille: sil tait toujours acceptable de servir une page XHTML1.0 sous forme de document HTML, les pages XHTML1.1 taient supposes tre envoyes aux navigateurs comme sil sagissait de code XML. Du coup, si elles contenaient la moindre erreur, comme un simple caractre accentu mal encod, les navigateurs web ntaient pas censs les afficher. Ctait videmment tout sauf idal pour la plupart des propritaires de sites web, si bien que le XHTML1.1 na jamais vraiment dcoll. On dbat encore aujourdhui pour savoir sil faut ou non servir les pages XHTML1.0 comme du HTML ou sil faut sen tenir au HTML4.01. Il est clair toutefois quil ne faut pas utiliser du XHTML1.1, moins de choisir le type MIME appropri et de ne pas voir dinconvnient au fait que la page ne saffiche pas si elle contient la moindre erreur. Le HTML5 est assez nouveau. Comme sa spcification possde encore le statut de brouillon, il continue de changer frquemment. Il connat pourtant dj un vrai succs et plusieurs navigateurs importants commencent le prendre en charge. Il est n de la frustration que les dveloppeurs avaient accumule avec le dveloppement lent et archaque du XHTML2. Une poigne dentre eux a donc dcid desquisser leur propre spcification. Le succs fut tel que le HTML5 est devenu un projet officiel du W3C et que le dveloppement du XHTML2 a t suspendu. Le but du HTML5 est de produire un langage de balisage moderne qui corresponde mieux au type dinformations publies sur le Web. Il introduit donc de nouveaux lments structurels comme header, nav, article, sections et footer. Il contient galement un ensemble de nouveaux lments de formulaire qui devraient faciliter considrablement le dveloppement dapplications web.

Les fondations

19

Types de document, commutation de DOCTYPE et modes des navigateurs

Une DTD, ou dfinition de type de document, est un ensemble de rgles, lisibles par ordinateur, qui dfinissent ce qui est, ou non, autoris dans une version donne du HTML ou du XML. Les navigateurs sont censs les utiliser lorsquils analysent les pages web pour vrifier leur validit et pour les traiter. Pour savoir quelle DTD employer, et donc connatre votre version du HTML, les navigateurs analysent la dclaration DOCTYPE de la page. Il sagit dun bloc de une ou deux lignes de code, situ au dbut du document HTML et qui dcrit la DTD utilise. Dans cet exemple, la DTD est celle du XHTML1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Les dclarations DOCTYPE contiennent gnralement (mais pas toujours) une URL vers le fichier de DTD spcifi. Le HTML5, par exemple, ne requiert pas dURL. Le plus souvent, les navigateurs ne lisent pas ces fichiers et prfrent reconnatre les dclarations DOCTYPE courantes. Les DOCTYPE sont proposs en deux modes: strict et transitionnel. Transitionnels, ils sont destins aux personnes qui oprent une transition depuis danciennes versions du langage. Les versions transitionnelles du HTML4.01 et du XHTML1.0 permettent toujours dutiliser des lments dconseills, comme llment font. Les versions strictes de ces langages interdisent au contraire lutilisation des lments dconseills, afin de sparer clairement le contenu de la prsentation.

Validation
En plus de disposer dun balisage smantique, le document HTML doit tre crit avec du code valide. Si ce nest pas le cas, les navigateurs tentent dinterprter le code par euxmmes et commettent parfois des erreurs. Pire: si un document XHTML est envoy avec le type MIME appropri, les navigateurs qui comprennent le XML ne laffichent tout simplement pas quand la page est invalide. Comme les navigateurs doivent savoir quelle DTD utiliser pour traiter correctement la page, il faut une dclaration DOCTYPE pour valider la page. Pour vrifier que le HTML est valide, vous pouvez utiliser le validateur du W3C, un bookmarklet de validateur ou un plug-in comme lextension Web Developer de Firefox. De nombreux diteurs HTML disposent maintenant de validateurs intgrs et vous pouvez mme installer sur votre ordinateur une copie locale du validateur du W3C. Le validateur indique si la page est valide et, si elle ne lest pas, il en explique les raisons (voir Figure1.9).

20

Matrise des CSS

Figure1.9
La page daccueil de microsoft.com contient 323erreurs HTML et 34erreurs CSS.

La validation est importante car elle facilite le reprage des bogues dans le code. Il est donc judicieux de prendre lhabitude de la faire frquemment et assez tt. Elle nest cependant pas une fin en soi, et bien des pages, qui se trouvent tre par ailleurs trs satisfaisantes, chouent la validation cause de petites erreurs comme des signes desperluette non encods ou du contenu hrit. Si la validation est importante, il faut parfois aussi cder au bon sens pratique.
Il existe plusieurs sortes doutils de validation. Vous pouvez vous rendre ladresse http://validator. w3.org/, o vous tapez votre URL. Si vous devez faire des validations frquemment (ce qui serait en principe judicieux), il sera peut-tre fastidieux de saisir chaque fois votre URL. Pour ma part, jutilise un bookmarklet (ou favelet) de validation un petit programme JavaScript stock dans le dossier Favoris du navigateur. Quand je clique dessus, cela dclenche laction JavaScript correspondante. Dans le cas du bookmarklet de validation, la page actuellement consulte est transmise au validateur du W3C et affiche le rsultat. Vous trouverez le bookmarklet de validation et dautres bookmarklets pratiques pour le dveloppement web ladresse http://favelets.com/. Si vous utilisez Firefox, vous pouvez tlcharger et installer un grand nombre de plug-ins. Parmi ceux-ci, mon favori est lextension Web Developer. En plus de permettre de valider le code HTML et CSS, elle offre la possibilit de raliser une srie dautres tches pratiques comme la dmarcation graphique des diffrents lments HTML, la dsactivation des feuilles de styles et mme ldition des styles dans le navigateur. Elle peut tre tlcharge ladresse http://chrispederick.com/work/web-developer/. Elle est indispensable tous les dveloppeurs CSS qui utilisent Firefox. Lautre excellent outil est lextension Validator, tlchargeable ladresse http://users.skynet.be/mgueury/mozilla/. Il existe aussi une barre doutils de dveloppeur pour Internet Explorer6 et7, qui peut tre tlcharge ladresse http://tinyurl.com/7mnyh. Elle nest pas aussi riche en fonctionnalits que la barre doutils Firefox, mais tout de mme trs utile. Internet Explorer8 inclut son propre jeu doutils pour les dveloppeurs, tout comme Safari4.

Les dclarations DOCTYPE, si elles sont importantes pour la validation, sont aussi utilises par les navigateurs dautres fins.

Les fondations

21

Modes des navigateurs Quand les diteurs de navigateurs ont commenc crer des navigateurs compatibles avec les standards du Web, ils ont aussi souhait assurer une compatibilit descendante. Cest la raison pour laquelle ils ont cr deux modes de rendu: le mode Standards et le mode Quirks (littralement, "caprices"). En mode Standards, le navigateur reproduit la page conformment aux spcifications en vigueur. En mode Quirks, il laffiche en prenant plus de libert avec les spcifications mais en adaptant le rendu pour une meilleure compatibilit arrire. Le mode Quirks mule gnralement le comportement des anciens navigateurs comme Internet Explorer4 et Netscape Navigator4 afin dafficher correctement les anciens sites. Lexemple le plus vident de la diffrence entre ces modes concerne Internet Explorer et le modle de bote propritaire de Microsoft. partir de sa version 6, Internet Explorer autilis le modle de bote universel en mode Standards et sest mis reproduire son ancien modle de bote propritaire en mode Quirks. Pour assurer la compatibilit descendante avec les sites construits pour Internet Explorer5 et ses versions antrieures, dautres navigateurs, comme Opera7 et ses versions ultrieures, ont galement adopt, en mode Quirks, le modle de bote fautif dInternet Explorer. Il existe dautres diffrences de rendu plus subtiles et propres certains navigateurs. Ainsi, certains dentre eux ne requirent par exemple pas le symbole # pour exprimer les valeurs hexadcimales de couleur, prsupposent que les longueurs sans units sont calcules en pixels ou permettent de modifier les tailles des polices en spcifiant des mots-cls. Mozilla et Safari possdent un troisime mode appel Almost Standards Mode (littralement, "presque le mode Standards"). Il est identique au mode Standards, quelques diffrences subtiles prs, relatives la gestion des tableaux. Lextension Web Developer de Firefox permet de savoir dans quel mode une page saffiche. Une marque de coche verte apparat dans la barre doutils si le site saffiche en mode Standards. En mode Quirks, cest une croix rouge qui apparat. Les outils de dveloppement dInternet Explorer8 signalent aussi le mode utilis pour le rendu dans le navigateur. Commutation de DOCTYPE Le navigateur choisit la mthode de rendu utiliser en fonction de lexistence dune dclaration DOCTYPE et de la DTD utilise. Si un document XHTML contient un DOCTYPE entirement form, il est normalement reproduit en mode Standards. Pour un document HTML 4.01, un DOCTYPE contenant une DTD stricte amnera gnralement la page safficher en mode Standards. Ce sera galement le cas pour un DOCTYPE contenant une DTD transitionnelle et un URI, alors quune DTD transitionnelle sans URI la fera safficher en mode Quirks. Un DOCTYPE mal form ou absent entrane laffichage des documents HTML et XHTML en mode Quirks. Cet ajustement du mode de rendu en fonction de lexistence dun DOCTYPE est connu sous le nom de "DOCTYPE switching" (commutation de DOCTYPE) ou "DOCTYPE sniffing" (reniflement du DOCTYPE). Ces rgles, que tous les navigateurs ne respectent pas la lettre, montrent bien comment fonctionne la commutation de DOCTYPE. Pour une liste

22

Matrise des CSS

plus complte, consultez le tableau de la page http://hsivonen.iki.fi/doctype/ qui montre les modes de rendu utiliss par les diffrents navigateurs selon la dclaration DOCTYPE choisie. La commutation de DOCTYPE est un hack employ par les navigateurs pour distinguer les documents hrits des documents conformes aux standards. Mme en crivant du code CSS valide, si vous choisissez le mauvais DOCTYPE, vos pages saffichent en mode Quirks et se comportent de manire imprvisible. Il est donc important dinclure une dclaration DOCTYPE entirement forme dans chaque page de votre site et de choisir une DTD stricte lorsque vous utilisez du HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html>

De nombreux diteurs HTML ajoutent automatiquement les dclarations DOCTYPE aux documents. Si vous crez un document XHTML, certains logiciels plus anciens peuvent galement ajouter une dclaration XML avant la dclaration DOCTYPE:
<?xml version="1.0" encoding="utf-8"?>

La dclaration XML est une dclaration facultative utilise par les fichiers XML pour dfinir diffrents paramtrages comme la version du XML et le type dencodage des caractres. Malheureusement, Internet Explorer6 repasse automatiquement au mode Quirks si la dclaration DOCTYPE nest pas le premier lment dans la page. Ce problme a t rpar dans Internet Explorer7, mais moins que vous ne serviez vos pages sous forme de documents XML, mieux vaut viter dutiliser une dclaration XML.

En rsum
Vous avez vu comment les conventions de nommage et le balisage smantique pouvaient rendre le code plus facile lire et grer. Vous avez galement appris la diffrence entre les ID et les noms de classes et vu comment les utiliser. Vous avez dcouvert les diffrentes versions des langages CSS et HTML et la manire dont les navigateurs sy prennent pour grer ces diffrences. Au chapitre suivant, vous allez passer en revue certains des slecteurs CSS de base et dcouvrir tout un ensemble de nouveaux slecteurs CSS3. Vous apprendrez tout sur les concepts de spcificit et de cascade et vous verrez comment organiser et planifier les feuilles de styles pour une maintenance simplifie.

Des styles qui atteignent leurcible

Un document valide et bien structur fournit les fondations sur lesquelles les styles peuvent sappliquer. Pour pouvoir mettre en forme un lment HTML donn avec des CSS, il vous faut un moyen de le cibler. Dans les CSS, la partie de la rgle de style qui ralise cette opration est appele le slecteur. Au cours de ce chapitre, vous dcouvrirez: les slecteurs courants; les slecteurs avancs; les nouveaux slecteurs CSS3; les merveilleux concepts de spcificit et de cascade; comment planifier et grer les feuilles de styles; comment commenter le code.

Les slecteurs courants

Les slecteurs les plus courants sont les slecteurs de type et les slecteurs descendants. Les premiers sont utiliss pour cibler un type dlment particulier, comme un lment de paragraphe ou de titre. Vous devez simplement spcifier le nom de llment que vous souhaitez mettre en forme. Les slecteurs de type sont parfois aussi appels slecteurs dlment ou slecteurs simples.
p {color: black;} h1 {font-weight: bold;}

Les slecteurs descendants permettent de cibler les descendants dun lment ou dun groupe dlments donns. Ils sont indiqus par un espace entre deux autres slecteurs. Dans lexemple suivant, seuls les lments de paragraphe qui sont des descendants dun lment blockquote se voient appliquer un retrait. Tous les autres paragraphes restent ne sont pas affects.
blockquote p {padding-left: 2em;}

Ces deux types de slecteurs sont particulirement intressants pour appliquer des styles gnriques qui se retrouvent dans lensemble dun site. Pour tre plus spcifique et cibler des lments particuliers, vous pouvez utiliser des slecteurs dID et de classe, qui ciblent les lments possdant lID ou le nom de classe correspondant. Les slecteurs dID sidentifient laide dun caractre dise, ceux de classe, laide dun point. Dans lexemple suivant, la premire rgle passe en gras le texte du paragraphe dintroduction et la seconde passe la date en gris:
#intro {font-weight: bold;} .date-posted {color: #ccc;}

24

Matrise des CSS

<p id="intro">Happy Birthday Andy</p> <p class="date-posted">24/3/2009</p>

Nombreux sont les programmeurs CSS qui ont tendance sappuyer excessivement sur les slecteurs de classe et dID. Sils souhaitent mettre en forme les titres dune manire dans la zone de contenu principale et dune autre dans la zone de contenu secondaire, ils crent souvent deux classes et appliquent lune un titre et lautre lautre titre. Il est pourtant bien plus simple dutiliser une combinaison de slecteurs de type, de slecteurs descendants, de slecteurs dID ou de slecteurs de classe:
#main-content h2 {font-size: 1.8em;} #secondaryContent h2 {font-size: 1.2em;} <div id="main-content"> <h2>Articles</h2> ... </div> <div id="secondary-content"> <h2>Latest news</h2> ... </div>

Cet exemple est trs simple et facilement comprhensible, mais vous seriez surpris du nombre dlments que vous pouvez cibler laide des quatre seuls slecteurs prcdents. Si vous vous retrouvez ajouter beaucoup de classes superflues un document, cest probablement le signe quil est mal structur. Au lieu de cela, rflchissez la manire dont ces lments diffrent les uns des autres. Vous constaterez souvent que la seule vritable diffrence tient lendroit o ils apparaissent dans la page. Au lieu de leur attribuer diffrentes classes, pensez appliquer une classe ou un ID lun de leurs parents, puis ciblez-les laide dun slecteur descendant.

Pseudo-classes
Il peut arriver que vous souhaitiez appliquer un style un lment en fonction dun autre critre que celui de la structure du document (par exemple, ltat dun lien ou dun lment de formulaire). Cela est possible en utilisant un slecteur de pseudo-classe.
/* afche tous les liens non visits en bleu */ a:link {color:blue;} /* afche tous les liens visits en vert */ a:visited {color:green;} /* afche les liens en rouge quand on les survole ou les active. ltat focus est ajout pour la prise en charge du clavier */ a:hover, a:focus, a:active {color:red;} /* afche en rouge les lignes de tableau survoles */ tr:hover {background-color: red;} /* afche les lments de saisie en jaune sils sont activs */ input:focus {background-color:yellow;}

Des styles qui atteignent leurcible

25

:link et :visited sont ce quon appelle des pseudo-classes de liens. Elles ne peuvent tre appliques quaux lments dancre. :hover, :active et :focus sont des pseudo-classes

dynamiques, qui peuvent thoriquement sappliquer nimporte quel lment. La plupart des navigateurs modernes prennent en charge cette fonctionnalit. On ne stonnera pas, en revanche, quInternet Explorer6 ne prte attention aux pseudo-classes :active et :hover que lorsquelles sappliquent un lien dancre et ignore compltement :focus. Internet Explorer7 prend en charge :hover sur nimporte quel lment, mais ignore :active et :focus. Enfin, il vaut la peine de noter que les pseudo-classes peuvent tre adjointes les unes aux autres afin de crer des comportements plus complexes, par exemple pour un effet de survol diffrent sur les liens dj consults et ceux qui ne lont pas t.
/* afche tous les liens visits survols en vert olive */ a:visited:hover {color:olive;}

Le slecteur universel
Le slecteur universel est sans doute le plus efficace et le moins utilis de tous les slecteurs. Il agit la manire dun joker, puisquil dsigne tous les lments disponibles. Comme les jokers dans dautres langages, il est identifi par un astrisque. Il est souvent utilis pour appliquer des mises en forme tous les lments dune page. Par exemple, pour supprimer le remplissage et les marges par dfaut du navigateur sur tous les lments, vous pouvez utiliser la rgle suivante:
* { padding: 0; margin: 0; }

Combin avec dautres slecteurs, le slecteur universel peut servir mettre en forme tous les descendants dun lment particulier ou ignorer un niveau de descendants. Vous verrez comment procder en pratique une autre section de ce chapitre.

Les slecteurs avancs

Les CSS2.1 et CSS3 possdent un certain nombre dautres slecteurs utiles. Malheureusement, si la plupart des navigateurs modernes les prennent en charge, ce nest pas le cas des plus anciens, comme Internet Explorer6. Les CSS ont cependant t conues en tenant compte des problmes de compatibilit descendante. Si un navigateur ne comprend pas un slecteur, il ignore tout simplement la rgle. Il est ainsi possible dappliquer des embellissements stylistiques et fonctionnels dans les navigateurs rcents sans craindre les problmes qui pourraient en dcouler dans les navigateurs anciens. vitez simplement dutiliser ces slecteurs avancs pour des fonctionnalits essentielles ou des aspects trs importants de la mise en page du site.

26

Matrise des CSS

Slecteur denfants et slecteur de frre adjacent

Le premier des slecteurs avancs est le slecteur denfants. Si un slecteur descendant slectionne tous les descendants dun lment, le slecteur denfants ne cible que les descendants immdiats de llment, que lon appelle ses enfants. Dans lexemple suivant, les lments de la liste externe se voient attribuer une icne personnalise alors que ceux de la liste imbrique restent inchangs (voir Figure2.1):
#nav>li { background: url(folder.png) no-repeat left top; padding-left: 20px; } <ul id="nav"> <li><a href="/home/">Accueil</a></li> <li><a href="/services/">Services</a> <ul> <li><a href="/services/design/">Conception</a></li> <li><a href=/services/development/>Dveloppement</a></li> <li><a href="/services/consultancy/">Consulting</a></li> </ul> </li> <li><a href=/contact/>Nous contacter</a></li> </ul>

Figure2.1
Le slecteur denfants met en forme les enfants de la liste, mais pas ses petits-enfants.

Le slecteur denfants est pris en charge par Internet Explorer7 et ses versions ultrieures. Un petit bogue de la version 7 provoque cependant des problmes si des commentaires HTML sont insrs entre le parent et lenfant. Il est possible de simuler un slecteur denfants qui fonctionne avec Internet Explorer6 et les versions antrieures laide du slecteur universel. Pour cela, vous devez dabord appliquer tous les descendants le style que vous souhaitez attribuer aux enfants. Ensuite, utilisez le slecteur universel pour redfinir ces styles avec les descendants des enfants. Pour simuler le prcdent exemple de slecteur denfants, vous cririez ainsi:
#nav li { background: url(folder.png) no-repeat left top; badding-left: 20px; } #nav li * { background-image: none; padding-left: 0; }

Des styles qui atteignent leurcible

27

Parfois, il arrivera que vous souhaitiez mettre en forme un lment en raison de sa proximit avec un autre lment. Le slecteur de frre adjacent permet de cibler un lment prcd par un autre lment qui possde le mme parent. Grce lui, vous pouvez mettre en forme le premier paragraphe qui suit un titre de premier niveau, en le passant en gras, en gris ou en laffichant lgrement plus gros que les paragraphes suivants (voir Figure2.2):
h2 + p { font-size: 1.4em; font-weight: bold; color: #777; } <h2>Peru Celebrates Guinea Pig festival</h2> <p>The guinea pig festival in Peru is a one day event to celebrate these cute local animals. The festival included a fashion show where animals are dressed up in various amusing costumes.</p> <p>Guinea pigs can be fried, roasted, or served in a casserole. Around 65 million guinea pigs are eaten in Peru each year.</p>

Figure2.2
Le slecteur de frre adjacent peut tre utilis pour mettre en forme le premier paragraphe aprs un titre et viter dutiliser des classes superflues.

Comme avec le slecteur denfants, le processus choue dans Internet Explorer 7 si des commentaires sont logs entre les lments cibls.

Slecteur dattribut
Le slecteur dattribut permet de cibler un lment en fonction de lexistence ou de la valeur dun attribut. Ce mode de slection est particulirement intressant et efficace. Par exemple, lorsque vous survolez un lment dot dun attribut title, la plupart des navigateurs affichent une info-bulle. Vous pouvez, par exemple, exploiter ce mcanisme pour faire apparatre la dfinition dacronymes ou dabrviations:
<p>The term <acronym title="self-contained underwater breathing apparatus">SCUBA</acronym> is an acronym rather than an abbreviation as it is pronounced as a word.</p>

28

Matrise des CSS

Il nexiste cependant aucun moyen de savoir que ces informations supplmentaires existent si lon ne survole pas llment. Pour rsoudre ce problme, vous pouvez utiliser le slecteur dattribut afin dappliquer une mise en forme diffrente aux lments dacronyme qui possdent des titres et ceux qui nen ont pas ici, en les soulignant avec une bordure en pointill. Vous pouvez fournir dautres informations contextuelles en transformant le curseur en point dinterrogation pendant le survol de llment, afin dindiquer que celui-ci a quelque chose de particulier par rapport aux autres.
acronym[title] { border-bottom: 1px dotted #999; } acronym[title]:hover, acronym[title]:focus { cursor: help; }

En plus de mettre en forme un lment en fonction de lexistence dun attribut, vous pouvez appliquer des styles en fonction dune valeur particulire. Par exemple, les sites qui sont lis lutilisation dun attribut rel avec la valeur nofollow noffrent aucun avantage en termes de classement sur Google. La rgle suivante affiche une image ct de ces liens, par exemple pour signaler que le site cible est dconseill:
a[rel="nofollow"] { background: url(nofollow.gif) no-repeat right center; padding-right: 20px; }

Tous les navigateurs web modernes, Internet Explorer7 y compris, prennent en charge ces slecteurs. Comme Internet Explorer6 ne les reconnat pas, vous pouvez les utiliser justement pour appliquer un style Internet Explorer6 et un autre aux navigateurs mieux lotis en termes de fonctionnalits. Par exemple, Andy Clarke utilise cette technique en proposant une version en noir et blanc de son site aux utilisateurs dInternet Explorer6 (voir Figure2.3) et une version en couleur pour tous les autres navigateurs (voir Figure2.4).
#header { background: url(branding-bw.png) repeat-y left top; } [id="header"] { background: url(branding-color.png) repeat-y left top; }

Certains attributs peuvent possder plusieurs valeurs spares par des espaces. Le slecteur dattribut permet de cibler un lment en fonction de lune de ces valeurs. Par exemple, le microformat XFN permet de dfinir la relation avec un site en ajoutant des mots-cls lattribut rel du lien dancre. On peut ainsi faire savoir quun site appartient lun de ses collgues de travail en ajoutant le mot-cl co-worker aux liens de sa liste de blogs.

Des styles qui atteignent leurcible

Figure2.3
Andy Clarke propose une version en noir et blanc de son site aux utilisateurs dInternet Explorer6 en utilisant, notamment, des slecteurs dattribut.

29

Figure2.4
Les navigateurs plus rcents disposent dune version en couleur.

30

Matrise des CSS

Cette information peut ensuite tre signale grce une icne particulire affiche ct du nom du collgue.
.blogroll a[rel~="co-worker"] { background: url(co-worker.gif) no-repeat left center; } <ul class="blogroll"> <li> <a href="http://adactio.com/" rel="friend met colleague co-worker">Jeremy Keith</a> </li> <li> <a href="http://clagnut.com/" rel="friend met colleague co-worker">Richard Rutter</a> </li> <li> <a href="http://hicksdesign.com/" rel="friend met colleague">John Hicks</a> </li> <li> <a href="http:// stuffandnonsense.co.uk/" rel="friend met colleague">Andy Clarke</a> </li> </ul>

Cascade et spcificit
Avec une feuille de styles mme moyennement complique, il peut arriver que deux rgles ciblent le mme lment. Les CSS grent ces conflits par le biais dun processus appel cascade. La cascade attribue une importance chaque rgle. Les feuilles de styles auteur sont celles crites par les dveloppeurs de site et sont considres comme les plus importantes. Les utilisateurs peuvent appliquer leurs propres styles via le navigateur et ces feuilles viennent en second rang. Pour finir, les feuilles de styles par dfaut utilises par le navigateur ou lagent utilisateur sont considres comme les moins importantes, de sorte quil est toujours possible de les redfinir. Pour mieux contrler laffichage, les utilisateurs peuvent redfinir des rgles en les marquant avec !important. Ces rgles redfinissent mme celles marques comme !important par lauteur. Cette libert est offerte pour des besoins spcifiques en termes daccessibilit, comme des feuilles de styles contraste lev pour les problmes de dyslexie. La cascade respecte donc lordre de priorit suivant: les styles utilisateur marqus comme !important; les styles auteur marqus comme !important; les styles auteur; les styles utilisateur; les styles appliqus par le navigateur/lagent utilisateur.

Les rgles sont ensuite ordonnes en fonction de la spcificit du slecteur. Les rgles aux slecteurs plus spcifiques redfinissent celles dont les slecteurs sont moins spcifiques.

Des styles qui atteignent leurcible

31

Sideux rgles possdent la mme spcificit, cest celle qui est dfinie en dernier qui prend le dessus. Spcificit Par calculer le niveau de spcificit dune rgle, chaque slecteur reoit une valeur numrique. La spcificit dune rgle est ensuite value par addition des valeur de tous ses slecteurs. Malheureusement, la spcificit nest pas calcule en base10 mais avec un numro de base lev et non spcifi. Ce procd est destin garantir quun slecteur trs spcifique, comme un slecteur dID, ne soit jamais redfini par un grand nombre de slecteurs moins spcifiques, comme des slecteurs de type. Si vos slecteurs comptent moins de 10slecteurs, vous pouvez cependant vous contenter, pour simplifier, de calculer la spcificit en base10. La spcificit dun slecteur se dcompose en quatre niveaux constituants: a,b,cetd. Si le style est un style incorpor, avaut1. b vaut le nombre total de slecteurs dID. c vaut le nombre de slecteurs de classe, de pseudo-classe et dattribut. d vaut le nombre de slecteurs de type et de slecteurs de pseudo-lment.

Avec ces rgles, il est possible de calculer la spcificit de nimporte quel slecteur CSS. LeTableau2.1 prsente une srie de slecteurs avec leur spcificit correspondante. Tableau2.1: Exemples de spcificit
Slecteur Style="" #wrapper #content {} #content .datePosted {} div#content {} #content {} p.comment .dateposted {} p.comment{} div p {} p {} Spcificit 1,0,0,0 0,2,0,0 0,1,1,0 0,1,0,1 0,1,0,0 0,0,2,1 0,0,1,1 0,0,0,2 0,0,0,1 Spcificit en base 10 1000 200 110 101 100 21 11 2 1

Au premier abord, toutes ces explications concernant la spcificit et les nombres en base leve mais non spcifie peuvent sembler droutantes. Voici donc ce quil faut en retenir. Fondamentalement, une rgle crite dans un attribut de style sera toujours plus spcifique que nimporte quelle autre. Une rgle avec un ID sera plus spcifique quune rgle sans et une rgle avec un slecteur de classe le sera plus quune rgle avec de simples slecteurs de type. Enfin, si deux rgles possdent la mme spcificit, celle dfinie en dernier prend le dessus.

32

Matrise des CSS

La spcificit peut tre extrmement importante pour la correction des bogues, car vous devez savoir quelle rgle a priorit et pourquoi. Par exemple, supposons que vous ayez cr le jeu de rgles suivant. Daprs vous, de quelle couleur seront les titres?
#content div#main-content h2 { color: gray; } #content #main-content>h2 { color: blue; } body #content div[id="main-content"] h2 { color: green; } #main-content div.news-story h2 { color: orange; } #main-content [class="news-story"] h2 { color: yellow; } div#main-content div.news-story h2.rst { color: red; } <div id="content"> <div id="main-content"> <h2>Strange Times</h2> <p>Here you can read bizarre news stories from around the globe.</p> <div class="news-story"> <h2 class="rst">Bog Snorkeling Champion Announced Today</h2> <p>The 2008 Bog Snorkeling Championship was won by Conor Murphy with an impressive time of 1 minute 38 seconds.</p> </div> </div> </div>

Bizarrement, la rponse est que les deux titres seront gris. Le premier slecteur possde la plus haute spcificit parce quil est compos de deux slecteurs dID. Certains des derniers slecteurs peuvent avoir lair plus complexes, mais comme ils ne contiennent quun seul ID, ils perdent toujours face aux slecteurs plus spcifiques. Si vous rencontrez des rgles CSS qui ne semblent pas fonctionner, cest sans doute quil existe un conflit de spcificit. Essayez de rendre vos slecteurs plus spcifiques en ajoutant lID de lun de leurs parents. Si cet ajout rgle le problme, vous constaterez sans doute quil existe une rgle plus spcifique quelque part dans votre feuille de styles qui redfinit celle que vous essayiez dappliquer. Dans ce cas, nhsitez pas parcourir votre code nouveau afin de rsoudre les conflits de spcificit et que le code soit aussi lger que possible. Utiliser la spcificit dans les feuilles de styles La spcificit est trs utile pour concevoir des CSS, car elle permet de dfinir des styles gnraux pour les lments communs puis de redfinir ces styles pour les lments plus spcifiques. Par exemple, supposons que vous souhaitiez que la plus grande partie du texte

Des styles qui atteignent leurcible

33

de votre site saffiche en noir, lexception du texte dintroduction, que vous voulez gris. Vous pouvez alors procder de la manire suivante:
p {color: black;} p.intro {color: grey;}

Cette approche convient pour les petits sites mais, avec ceux de grande taille, vous rencontrerez un nombre toujours plus important dexceptions. Le texte dintroduction de vos articles de news devra safficher en bleu, le texte dintroduction de votre page daccueil saffichera sur un arrire-plan gris, etc. Chaque fois que vous crerez un style plus spcifique, vous aurez besoin de redfinir certaines des rgles gnrales. Rapidement, la quantit de code pourra devenir considrable. Tout peut aussi srieusement se compliquer parce quun lment peut rcuprer des styles diffrents emplacements. Pour viter la confusion, essayez de vous assurer que vos styles gnraux sont trs gnraux et que les styles spcifiques le sont autant que possible et nont jamais besoin dtre euxmmes redfinis. Si vous constatez que vous devez redfinir des styles gnraux plusieurs fois, mieux vaut supprimer la dclaration redfinir dans les rgles gnrales et lappliquer explicitement chaque lment qui la requiert. Ajouter une classe ou un ID la balise body Lun des moyens intressants dexploiter la spcificit consiste appliquer une classe ou un ID la balise body. Vous pouvez ensuite redfinir des styles page par page ou mme pour tout le site. Par exemple, si vous souhaitez que toutes vos nouvelles pages possdent une disposition particulire, vous pouvez ajouter un nom de classe llment body et lutiliser pour cibler vos styles:
body.news { /* faire quelque chose */ } <body class="news"> <p>My, what a lovely body you have.</p> </body>

Vous aurez parfois besoin de redfinir ces styles dans une page particulire, comme votre page darchive des news. Dans ce cas, vous pouvez ajouter un ID la balise body afin de cibler cette page.
body.news { /* faire quelque chose */ } body#archive { /* faire autre chose */ } <body id="archive" class="news"> <p>My, what a lovely body you have.</p> </body>

34

Matrise des CSS

En utilisant une classe pour le type de page et un ID pour la page spcifique, vous profitez dun contrle prcis sur lapparence et la mise en page de votre site. Cest lune de mes techniques favorites pour concevoir des sites faciles grer.

Hritage
Les gens confondent souvent lhritage et la cascade. Si, au premier abord, ces deux notions sapparentent, elles sont en ralit assez diffrentes. Lhritage est plus facile comprendre. Certaines proprits, comme la couleur ou la taille des polices, sont hrites par les descendants des lments auxquels elles sont appliques. Par exemple, si vous attribuez llment body une couleur de texte noire, le texte de tous les descendants de cet lment apparatra galement en noir. Il en va de mme pour les tailles de police. Si vous donnez llment body une taille de police de 1.4em (cadratin), tous les lments de la page doivent hriter cette taille de police. Je dis "doivent", car Internet Explorer sous Windows et Netscape ont quelques problmes avec lhritage des tailles de police dans les tableaux. Pour contourner ce problme, vous devez soit indiquer explicitement que les tableaux doivent hriter des tailles de police, soit dfinir sparment leurs tailles de police.

Figure2.5
Firebug est un plug-in pratique de Firefox qui permet danalyser diffrents lments et de voir do proviennent les styles qui leur sont appliqus.

Si vous dfinissez la taille de police de llment body, vous remarquerez que ce style nest pas rpercut sur les titres de la page. Vous pourriez en dduire que les titres nhritent pas la proprit de taille du texte mais, en ralit, cest la feuille de styles par dfaut du navigateur qui dfinit la taille des titres. Tous les styles qui sont appliqus directement un lment redfinissent un style hrit. Les styles hrits possdent en effet une spcificit nulle.

Des styles qui atteignent leurcible

35

Lhritage est trs utile car il vite dajouter le mme style chaque descendant dun lment. Si la proprit que vous essayez de dfinir est une proprit hrite, vous pouvez galement lappliquer llment parent. Aprs tout, quelle utilit y a-t-il crire ceci:
p, div, h1, h2, h3, ul, ol, dl, li {color: black;}

alors quon peut crire ceci?

body {color: black;}

De la mme manire que la cascade peut aider simplifier les CSS, lhritage bien utilis peut aider rduire le nombre et la complexit des slecteurs dans le code. Si de nombreux lments hritent diffrents styles, il peut cependant tre difficile de dterminer do proviennent les styles.

Planification, organisation et gestion des feuilles de styles

Plus les sites grossissent, se compliquent et se sophistiquent sur le plan graphique, plus les CSS deviennent difficiles grer. cette section, nous allons voir comment grer le code, notamment en regroupant les styles dans des sections logiques et en ajoutant des commentaires pour faciliter la lecture du code.

Application de styles aux documents

Vous pouvez ajouter des styles directement dans len-tte dun document en les plaant entre des balises style, mais cette mthode nest pas conseille. Si vous crez une autre page qui utilise les mmes styles, vous tes alors contraint de les dupliquer dans celle-ci. Si vous souhaitez ensuite changer un style, il faut le changer deux endroits au lieu dun. Les CSS permettent heureusement de conserver tous les styles dans une ou plusieurs feuilles de styles externes. Il existe deux moyens dattacher des feuilles de styles externes une page web: les lier ou les importer.
<link href="/css/basic.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-@import url("/css/advanced.css"); --> </style>

Limportation ne se restreint pas aux limites du document HTML, puisque vous pouvez galement importer une feuille de styles partir dune autre feuille de styles. Il est ainsi possible de lier une feuille de styles de base dans la page HTML puis dy importer les styles plus compliqus.
@import url(/css/layout.css); @import url(/css/typography.css); @import url(/css/color.css);

36

Matrise des CSS

Cette manire de dcomposer les CSS en plusieurs feuilles de styles tait une procdure courante, que je recommandais, il y a peu encore. Les rcents bancs dessai des navigateurs semblent cependant suggrer que limportation des feuilles de styles est moins rapide que leur liaison. Il existe deux autres problmes lis la vitesse dans le cas de lutilisation de plusieurs fichiers CSS. Pour commencer, le fait dutiliser plusieurs fichiers conduit envoyer plus de paquets depuis le serveur, et cest leur nombre (plutt que leur contenu) qui affecte le temps de tlchargement. En outre, les navigateurs ne peuvent tlcharger simultanment quun nombre limit de fichiers du mme domaine. Pour les anciens navigateurs, cette limite se rduisait deux pauvres fichiers, et les navigateurs modernes ont mont la barre huit fichiers. Dans un ancien navigateur, avec trois feuilles de styles, il fallait attendre que les deux premiers fichiers se tlchargent pour que la transmission du troisime commence. Voil pourquoi un unique fichier CSS bien structur peut aider amliorer considrablement les vitesses de tlchargement. Le recours un unique fichier CSS permet aussi de conserver tout le code au mme endroit. Il mest arriv de recommander de dcomposer le code pour en faciliter la maintenance. Malheureusement, ctait souvent difficile de dterminer si une dclaration tait lie la mise en page ou la typographie du site. Parfois, elle pouvait ressortir aux deux et il fallait trancher de manire arbitraire. Cela ncessitait, en outre, de conserver plusieurs feuilles de styles ouvertes et de basculer constamment des unes aux autres. Grce aux fonctionnalits de rduction des lignes de code proposes par la plupart des diteurs CSS, il est maintenant plus facile dditer un unique fichier. Il semble donc prfrable dutiliser un unique fichier CSS plutt que plusieurs petits. Tout dpend cependant du site concern; aucune rgle ne vaut uniformment pour tous les sites en la matire. Lorsque vous crirez vos propres feuilles de styles, vous aurez une ide plutt claire de la manire dont elles sont structures, des problmes que vous avez rencontrs et des raisons qui vous ont pouss faire les choses dune manire et pas dune autre. Si vous rouvrez vos feuilles de styles six mois plus tard, il est fort probable que vous aurez oubli bien des choses ce sujet. Il arrivera peut-tre aussi que vous deviez confier vos CSS un autre programmeur charg de lditer. Il est donc prfrable de commenter votre code. Les commentaires CSS sajoutent trs facilement. Ils commencent par /* et se terminent par */. Ce sont des commentaires dits "de styleC", car il sagit du type de commentaire utilis dans le langage de programmationC. Ils peuvent tre dune ligne ou multilignes et peuvent apparatre nimporte o dans le code.
/* Styles du corps de page */ body { font-size: 67.5%; /* Dnit la taille de police */ }

Quand les fichiers CSS sallongent, il peut devenir difficile de retrouver certains styles. Lun des moyens dacclrer cette tche consiste ajouter un drapeau chacun des en-ttes de commentaire. Il sagit dun mot supplmentaire qui prcde le texte den-tte et napparat pas, naturellement, dans les fichiers CSS. Une recherche portant sur ce drapeau suivi des deux premires lettres de len-tte de commentaire conduira ainsi directement la partie du

Des styles qui atteignent leurcible

37

fichier recherche. Dans lexemple suivant, la recherche "@group typ" amne la section de typographie de la feuille de styles:
/* @group typographie */

Si vous utilisez lditeur OSX CSS Edit, cette convention est utilise comme moyen simple mais efficace de naviguer dans les feuilles de styles. Structuration du code Il est judicieux de dcomposer les feuilles de styles en blocs cohrents afin den faciliter la maintenance. Chez Clearleft, nous commenons gnralement par les styles les plus gnraux, comme ceux qui sont appliqus la balise body et qui doivent tre hrits par tous les lments du site. Ensuite, viennent les redfinitions globales, puis les liens, les titres et les autres lments. Une fois les styles gnraux tablis, nous devenons un peu plus prcis et traitons les styles utilitaires. Il sagit de classes gnrales utilises dans tout le site, par exemple pour les formulaires et les messages derreur. Nous passons ensuite aux lments structurels, comme la mise en page et la navigation. mesure que nous avanons dans la feuille de styles, nous tageons progressivement les styles les uns au-dessus des autres, en gagnant chaque fois en spcificit. Quand les lments darchitecture de la page sont traits, nous passons aux composants propres chaque page. Pour finir, nous incluons toutes les redfinitions et les exceptions en bas du document, lequel prsente finalement la structure suivante: Styles gnraux Styles body Redfinitions Liens Titres Autres lments Styles utilitaires Formulaires Notifications et erreurs lments rptitifs Structure de page Titres, pieds de page et navigation Mise en page Autres blocs de page

38

Matrise des CSS

Composants de page Pages individuelles Redfinitions Jutilise un grand bloc de commentaire mis en forme pour sparer visuellement chaque section.
/* @group styles gnraux */ /* @group styles utilitaires */ /* @group structure de page */ /* @group composants de page */ /* @group rednitions */

Bien sr, tout ne vient pas se ranger dans un bloc bien dfini. Parfois, il faut se poser quelques questions. Gardez lesprit que, plus vous pourrez dcomposer et rationaliser votre code, plus il sera facile comprendre et plus vous pourrez rapidement retrouver les rgles que vous cherchez. Comme mes feuilles de styles possdent souvent une structure analogue, je gagne du temps en crant mes propres modles CSS prcomments pour tous mes projets. Vous pouvez encore gagner du temps en ajoutant quelques rgles courantes utiliser dans tous vos sites, de manire crer une sorte de fichier CSS prototype. Inutile de rinventer la roue chaque fois que vous lancez un nouveau projet. Vous trouverez un fichier CSS prototype dans le code tlcharger pour ce livre sur le site www.pearson.fr. Note soi-mme Dans le cadre des projets complexes et volumineux, il est souvent utile dannoter les fichiers CSS avec des commentaires temporaires qui facilitent le dveloppement. Il peut sagir de simples rappels des tches effectuer avant la phase de lancement ou de tableaux de rfrence pour les valeurs courantes, comme les largeurs de colonne. Si vous utilisez beaucoup de couleurs, vous risquez deffectuer de constants allers-retours entre votre application graphique et votre diteur texte pour vrifier les valeurs hexadcimales. Cest vite agaant et cest prcisment pourquoi certains dveloppeurs ont suggr de crer des variables CSS. Lide est intressante, mais elle conduirait rapprocher encore les CSS dun langage de programmation, avec le risque de dcourager les non-programmeurs. Jai prfr adopter une mthode plus simple. Je me contente dajouter une petite table de rfrence des couleurs en haut de ma feuille de styles afin de pouvoir my rfrer constamment pendant le dveloppement. Une fois que jai fini de dvelopper la page, je la supprime gnralement.

Des styles qui atteignent leurcible

/* Variables de couleur @colordef @colordef @colordef @colordef */ #434343; gris sombre #f2f6e4; vert clair #90b11f; vert fonc #369; bleu fonc

39

Pour rendre vos commentaires plus signifiants, vous pouvez utiliser des mots-cls qui distinguent les commentaires importants. Pour ma part, jutilise @todo pour indiquer que quelque chose doit tre modifi, corrig ou revu plus tard, @bugx pour signaler un problme avec le code ou un navigateur particulier et @workaround pour voquer une solution de contournement:
/* :@todo Penser supprimer cette rgle avant de publier le site */ /* @workaround: Jai russi rsoudre le problme dans IE en dnissant une petite marge ngative, mais ce nest pas esthtique */ /* @bugx: Cette rgle ne fonctionne pas sous IE5.2 Mac */

En programmation, ces mots-cls sont appels des gotchas; ils peuvent tre trs utiles au cours des phases ultrieures de dveloppement. En fait, tous ces termes font partie dun projet appel CSSDoc (http://cssdoc.net) qui vise dvelopper une syntaxe standardise pour les commentaires des feuilles de styles. Supprimer les commentaires et optimiser les feuilles de styles Les commentaires peuvent considrablement augmenter la taille des fichiers CSS. Il peut donc tre utile de les en faire disparatre. La plupart des diteurs HTML/CSS ou des diteurs de texte possdent une fonctionnalit de recherche et remplacement qui facilite cette opration. Vous pouvez sinon utiliser lun des multiples optimisateurs CSS en ligne comme celui que propose www.cssoptimiser.com. Loptimisateur supprime non seulement les commentaires, mais galement les espaces blancs, afin de vous aider retirer encore quelques octets supplmentaires de votre code. Si vous choisissez de supprimer les commentaires de vos feuilles de styles, noubliez pas den conserver une version avec commentaires pour votre environnement de production. Le meilleur moyen de grer ce processus consiste crer un script de dploiement qui supprime automatiquement les commentaires lorsque vous publiez vos modifications sur le Web. Comme il sagit dune technique avance, mieux vaut toutefois la rserver aux sites de grande envergure ou sophistiqus. Autrement, le meilleur moyen de rduire la taille des fichiers est dactiver la compression ct serveur. Si vous utilisez un serveur Apache, contactez votre hbergeur concernant linstallation de mod_gzip ou mod_deflate. Tous les navigateurs web modernes peuvent grer ces fichiers compresss avec GZIP et les dcompresser la vole. Ces modules Apache dtectent si le navigateur peut grer les fichiers de ce type et, si cest le cas, ils transmettent une version compresse. La compression ct serveur peut rduire la taille des fichiers HTML et CSS de 80% environ, ce qui libre la bande passante et acclre le tlchargement des pages. Si vous navez pas accs ces modules Apache, vous pouvez compresser vos fichiers en suivant le didacticiel (en anglais) ladresse http://tinyurl.com/8w9rp.

40

Matrise des CSS

Guides de styles
La gestion de la plupart des sites web occupe gnralement plusieurs personnes et parfois mme, pour les sites denvergure, plusieurs quipes charges de diffrents aspects du site. Les programmeurs, les gestionnaires de contenu et les autres dveloppeurs dinterface peuvent avoir besoin de comprendre le fonctionnement des lments de votre code et de votre mise en page. Il est donc judicieux de crer un guide de styles. Le guide de styles est un document, une page web ou un microsite, qui explique comment se coordonnent le code et la conception graphique dun site. Au dpart, le guide de styles doit dfinir les directives de conception gnrales comme le traitement appropri pour les titres et les autres lments typographiques, indiquer comment fonctionne la structure de grille et prciser la palette de couleurs utiliser. Les guides de styles de qualit dtaillent aussi le traitement de la rptition des lments comme les articles, les news et les notifications, afin dindiquer comment les implmenter. Les guides de styles plus dtaills peuvent mme inclure des informations concernant les standards en matire de programmation comme la version XHTML/CSS utilise, le niveau daccessibilit dsir, les dtails concernant la prise en charge des navigateurs et des bonnes pratiques de programmation gnrales (voir Figure2.6).
Figure2.6
Exemple de guide de styles.

Les guides de styles sont un excellent moyen de transmettre un projet ceux qui doivent en assurer la maintenance ou se charger de son implmentation. En consignant quelques directives simples, vous les aiderez contrler le dveloppement du site et minimiser la fragmentation des styles au fil du temps. Les guides de styles sont en outre une excellente introduction pour les nouveaux employs ou les contractuels un systme qui ne leur est pas familier et peut dabord paratre compliqu. Malheureusement, le guide de styles risque de se dsynchroniser rapidement avec le site en production et sa mise jour requiert quelques efforts. Cest la raison pour laquelle je prfre utiliser une sorte de guide de styles actif que jai appel un "portfolio de motifs" (voir Figure2.7).

Des styles qui atteignent leurcible

Figure2.7
Extrait du portfolio de motifs du site WWF International. La page effective fait environ cinq fois cette longueur et contient toutes les permutations typographiques ou structurelles autorises sur le site.

41

42

Matrise des CSS

Un portfolio de motifs est une page, ou une srie de pages, qui utilise les feuilles de styles relles du site pour afficher chaque permutation et combinaison de styles dun site, des niveaux de titre et des styles de texte jusquau contenu spcifique et aux types de mises en page. Ces pages peuvent fournir aux dveloppeurs back-end et front-end des ressources trs prcieuses, en leur donnant la possibilit de construire des combinaisons de pages qui nont pas encore t conues. En exploitant ainsi les styles rellement utiliss, ils peuvent aussi oprer des tests rgressifs, afin de vrifier que tous les changements CSS nont pas provoqu de problme gnant.

En rsum
Vous vous tes rafrachi la mmoire avec les slecteurs CSS2.1 courants et vous avez pu dcouvrir certains des puissants nouveaux slecteurs CSS3. Vous comprenez maintenant mieux le principe de spcificit et vous savez comment utiliser la cascade pour structurer vos rgles CSS et mieux cibler vos lments. Vous avez galement appris commenter et structurer vos feuilles de styles pour en faciliter la maintenance. Au chapitre suivant, vous en apprendrez plus sur le modle de bote CSS, vous verrez comment et pourquoi les marges seffondrent et dcouvrirez comment fonctionnent le flottement et le positionnement.

Vue densemble du modle deformatage visuel

Les trois concepts CSS les plus importants comprendre sont le flottement, le positionnement et le modle de bote. Ils dterminent la disposition des lments de la page et forment ainsi la base des mises en page CSS. Si vous tes habitu crer des maquettes tabulaires, ces notions pourront paratre tranges au premier abord. En fait, la plupart des dveloppeurs doivent passer un certain temps crer des sites en CSS avant de bien comprendre les tenants et les aboutissants du modle de bote, la diffrence entre le positionnement absolu et le positionnement relatif, et le fonctionnement du flottement et de la proprit clear. Le dveloppement des sites CSS sera plus facile lorsque vous aurez vraiment assimil ces concepts. Au cours de ce chapitre, vous dcouvrirez: les complexits et les particularits du modle de bote; comment et pourquoi les marges seffondrent; la diffrence entre positionnement absolu et positionnement relatif; le fonctionnement des proprits oat et clear.

Rcapitulatif sur le modle de bote

Le modle de bote est lune des pierres dangle des CSS. Il dfinit la manire dont les lments saffichent et, dans une certaine mesure, comment ils interagissent les uns avec les autres. Chaque lment dans la page est considr comme une bote rectangulaire compose du contenu de llment, dun remplissage, dune bordure et de marges (voir Figure3.1).
Figure3.1
Illustration du modle de bote.
Marge Bordure Remplissage

Zone de contenu

Le remplissage sapplique autour de la zone de contenu. Quand on ajoute un arrire-plan un lment, il est appliqu la zone forme par le contenu et le remplissage. Cest la raison pour laquelle le remplissage est souvent utilis pour crer une gouttire autour du contenu afin de donner limpression quil ne dborde pas sur les cts de larrire-plan. La bordure affiche une ligne lextrieur de la zone remplie. Diffrents styles de ligne sont proposs: continue, en pointill ou tirets. lextrieur de la bordure figure une marge. Les marges sont transparentes et ne se voient pas. Elles sont gnralement utilises pour contrler lespacement entre les lments.

44

Matrise des CSS

La CSS2.1 contient aussi la proprit outline (contour). la diffrence des bordures, les contours sont dessins par-dessus la bote de llment et naffectent ni sa taille, ni son positionnement. Ils peuvent donc tre utiles pour corriger des bogues, car ils naltrent pas la mise en page. Les contours sont pris en charge par la plupart des navigateurs modernes, dont Internet Explorer8, mais ils ne sont pas reconnus par Internet Explorer7 et ses versions antrieures.

Le remplissage, les bordures et les marges sont optionnels et valent zro par dfaut. De nombreux lments se voient cependant attribuer des marges et un remplissage par dfaut par la feuille de styles de lagent utilisateur. Vous pouvez redfinir ces styles de navigateur en ramenant les proprits margin ou padding de llment zro. Vous pouvez le faire au cas par cas ou pour tous les lments, laide du slecteur universel:
* { margin: 0; padding: 0; }

Rappelez-vous simplement que cette technique agit sans discernement et peut donc avoir des effets indsirables sur certains lments, comme option. Il est prfrable de ramener ces proprits zro de manire explicite, en utilisant une rinitialisation globale. En CSS, width et height font rfrence la largeur et la hauteur de la zone de contenu. Lajout dun remplissage, de bordures et de marges ne modifie pas la taille de la zone de contenu mais augmente la taille totale de la bote de llment. Si vous souhaitez une bote avec une marge de 10pixels et un remplissage de 5pixels de chaque ct pour atteindre 100pixels de large, vous devez fixer la largeur du contenu 70pixels (voir Figure3.2):
#myBox { margin: 10px; padding: 5px; width: 70px; }

Figure3.2
Le modle de bote correct.

100px

Marge : 10px Remplissage : 5px

Largeur : 70px

10px

5px

70px

5px 10px

Vue densemble du modle deformatage visuel

45

Le remplissage, les bordures et les marges peuvent tre appliqus sur tous les cts dun lment ou slectivement sur certains dentre eux. Les marges peuvent galement avoir des valeurs ngatives et tre utilises pour une varit de techniques.

Internet Explorer et le modle de bote

Malheureusement, les anciennes versions dInternet Explorer ainsi quInternet Explorer6 en mode Quirks utilisent leur propre modle de bote non standard. Au lieu de mesurer simplement la largeur du contenu, ces navigateurs considrent la proprit width comme la somme de la largeur du contenu, du remplissage et des bordures. Cest cohrent, puisque, en pratique, les botes possdent une taille fixe et que le remplissage sinsre lintrieur. Plus vous ajoutez de remplissage, moins il y a de place pour le contenu. Il nen reste pas moins que la spcification ne reprend pas ce raisonnement, et que le fait que ces versions dInternet Explorer nen tiennent pas compte pose de vrais problmes. Dans le prcdent exemple, la largeur totale de la bote serait ainsi de 90pixels dans Internet Explorer5.x. Ce dernier considre en effet que les 5pixels de remplissage de chaque ct font partie de la largeur de 70pixels au lieu de sy ajouter (voir Figure3.3). La proprit CSS 3 box-sizing permet de dfinir le modle de bote utiliser ; elle a cependant peu de chance dtre largement utilise sauf dans certaines circonstances bien particulires.
Figure3.3
Le modle de bote propritaire dInternet Explorer peut rendre des lments plus petits que prvu.
90px

Marge : 10px Remplissage : 5px

Largeur : 70px

10px

5px

60px

5px 10px

Par chance, il existe plusieurs moyens de rsoudre ce problme, comme vous le verrez au Chapitre9. La meilleure solution, et de loin, consiste cependant viter tout simplement le problme. Pour cela, najoutez pas de remplissage aux lments qui possdent une largeur dfinie. Tchez dajouter du remplissage ou des marges au parent ou lenfant de llment.

46

Matrise des CSS

Effondrement des marges

Leffondrement des marges est un phnomne assez simple comprendre. Il peut cependant tre trs droutant lorsque vous travaillez la structuration des mises en page. Lorsque deux marges verticales se rencontrent, elles seffondrent lune sur lautre pour nen former plus quune. La hauteur de cette marge fusionne est gale la hauteur de la plus grande des deux. Lorsque deux lments se trouvent lun sur lautre, la marge infrieure du premier lment fusionne avec la marge suprieure du second (voir Figure3.4).
Figure3.4
Exemple dlment dont la marge suprieure se fusionne avec celle de llment prcdent.
Avant Aprs

Zone de contenu

Zone de contenu

margin-bottom : 30px margin-top : 20px Zone de contenu

Les marges s'effondrent et n'en forment plus qu'une.

margin-bottom : 30px

Zone de contenu

Lorsquun lment est contenu dans un autre lment et quil nexiste pas de remplissage ou de bordure sparant les marges, les marges du haut ou du bas sont fusionnes galement (voir Figure3.5).
Figure3.5
Exemple dlment dont la marge suprieure fusionne avec la marge suprieure de son lment parent.
Avant margin-top : 30px margin-top : 20px Contenu Aprs

Les marges s'effondrent et n'en forment plus qu'une.

margin-top : 30px Contenu

Aussi trange que cela puisse paratre, les marges peuvent seffondrer sur elles-mmes. Si un lment vide possde une marge mais ni bordure ni remplissage, la marge suprieure touche la marge du bas et les deux fusionnent (voir Figure3.6).

Vue densemble du modle deformatage visuel

Figure3.6
Exemple dlment dont la marge suprieure se fusionne avec la marge infrieure.
Avant margin-top : 20px margin-bottom: 20px Aprs

47

}
}

Les marges s'effondrent et n'en forment plus qu'une.

margin-top : 20px

Si cette marge touche la marge dun autre lment, elle seffondre elle-mme nouveau (voir Figure3.7).
Figure3.7
Exemple de marge effondre dun lment vide qui fusionne avec les marges dun autre lment vide.
Avant margin-top : 20px margin-top : 20px margin-bottom : 20px Toutes les marges s'effondrent et n'en forment plus qu'une. Aprs

margin-top : 20px

Cest pour cette raison que les sries dlments de paragraphe vides ne prennent que trs peu despace, car toutes les marges seffondrent et fusionnent pour nen former plus quune. Leffondrement des marges peut drouter, mais il est en ralit parfaitement cohrent. Considrez une page classique compose de plusieurs paragraphes (voir Figure3.8). Lespace au-dessus du premier paragraphe est gal la marge suprieure. Sans leffondrement des marges, lespace entre tous les paragraphes subsquents correspondrait la somme de leurs marges adjacentes. Il serait alors le double de celui du haut de la page. Grce leffondrement des marges, les marges du haut et du bas de chaque paragraphe fusionnent et produisent un espacement gal partout.
Figure3.8
Les marges seffondrent afin que lespace reste partout le mme entre les lments.
Sans effondrement des marges Avec effondrement des marges

L'espace entre les paragraphes est le double de celui du haut.

L'espace entre les paragraphes est identique celui du haut.

Leffondrement des marges ne se produit quavec les marges verticales des botes de bloc dans le flot normal du document. Les marges entre les botes incorpores dans les lignes, flottantes ou positionnes de manire absolue, ne seffondrent jamais.

48

Matrise des CSS

Rcapitulatif concernant le positionnement

Maintenant que vous tes familiaris avec le modle de bote, considrons le formatage visuel et les modles de positionnement. Il est absolument essentiel de comprendre les nuances de ces deux modles, car ils contrlent ensemble la manire dont chacun des lments se dispose dans la page.

Le modle de formatage visuel

On fait souvent rfrence aux lments p, h1 ou div comme des lments de niveau bloc. Cela signifie quils saffichent comme des blocs de contenu ou des botes de bloc. linverse, les lments strong ou span sont des lments incorpors, car leur contenu saffiche lintrieur des lignes, sous forme de botes incorpores dans la ligne. Le type des botes peut tre modifi laide de la proprit display. Vous pouvez ainsi amener un lment incorpor, comme une ancre, se comporter comme un lment de niveau bloc, en attribuant la valeur block sa proprit display. Vous pouvez galement faire en sorte quun lment ne gnre pas de bote du tout en attribuant la valeur none sa proprit display. La bote, et donc tout son contenu, nest plus affiche et ne prend aucun espace dans le document. Il existe trois mcanismes de positionnement de base en CSS: le flux normal qui joue sur les marges et remplissage, la flottaison, avec les lments flottants, et la position, par la proprit position. moins que vous ne spcifiiez un autre rglage, les botes commencent toutes par se positionner dans le flux de base. La position de la bote dun lment dans le flux de base est dtermine par la position de cet lment dans le code HTML. Les botes de niveau bloc apparaissent lune aprs lautre verticalement. La distance verticale entre elles est calcule en fonction de leurs marges verticales. Les botes incorpores sont disposes horizontalement dans une ligne. Leur espacement horizontal peut tre ajust avec le remplissage, les bordures et les marges de gauche et de droite (voir Figure3.9). Le remplissage, les bordures et les marges verticales nont en revanche aucun effet sur la hauteur de la bote incorpore. De la mme manire, le fait de dfinir une hauteur ou une largeur explicite sur une bote incorpore na aucun effet. La bote horizontale forme par une ligne est appele bote de ligne. Elle est toujours assez grande pour toutes les botes de ligne quelle contient. Il existe un autre pige, cependant: le fait de dfinir la hauteur de ligne peut augmenter la hauteur de la bote. Voil pourquoi le seul moyen de modifier les dimensions dune bote incorpore consiste modifier la hauteur de ligne ou les bordures, le remplissage ou les marges de gauche et de droite. Les CSS2.1 permettent de dfinir la proprit display dun lment en lui attribuant la valeur inline-block. Cette dclaration intgre llment dans la ligne, comme sil sagissait dun lment incorpor, mais amne le contenu de la bote se comporter comme si la bote tait un lment de niveau bloc, ce qui permet de dfinir explicitement les largeurs, les hauteurs, les marges verticales et le remplissage. Dans lensemble, cette proprit a t mal prise en charge, ce qui explique quelle reste mconnue. Elle est maintenant prise en charge

Vue densemble du modle deformatage visuel

49

par Firefox3.0 et ses versions ultrieures. Internet Explorer8 et les dernires versions de Safari et Opera la reconnaissent aussi. Le mode inline-block a donc toutes les chances dtre souvent utilis lavenir.
Figure3.9
lments incorpors lintrieur dune bote de ligne.
Marge lment strong Remplissage

Phasellus

nonummy

condimentum

augue

Hauteur de ligne

lment incorpor anonyme

Bote de ligne

Comme les lments HTML qui peuvent tre imbriqus, les botes peuvent contenir dautres botes. La plupart sont formes partir dlments explicitement dfinis, mais il existe un cas o un lment de niveau bloc est cr mme sil na pas t explicitement dfini: lorsque vous ajoutez du texte au dbut dun lment de niveau bloc, comme une div. Mme si vous navez pas dfini le texte comme un lment de niveau bloc, il est trait comme tel:
<div> Du texte <p>Encore du texte</p> </div>

Dans ce cas, la bote est appele une bote de bloc anonyme, car elle nest associe aucun lment explicitement dfini. Un phnomne similaire se produit avec les lignes de texte lintrieur des lments de niveau bloc. Imaginez quun paragraphe contienne trois lignes de texte. Chacune forme une bote de ligne anonyme. Vous ne pouvez pas crer de bloc anonyme de style ou des botes de ligne directement, sauf en utilisant le pseudo-lment :rst-line, dont lusage est bien videmment limit. Toutefois, il est utile de comprendre que tout ce que vous voyez lcran cre une bote dune forme ou dune autre.

Positionnement relatif
Le positionnement relatif est assez simple comprendre. Un lment positionn ainsi conserve exactement son emplacement dans le flux. Vous pouvez ensuite le dplacer par rapport son point dorigine en dfinissant une position verticale ou horizontale. Si vous fixez la position du haut 20pixels, la bote apparat 20pixels au-dessous de sa position normale. Si vous fixez la position gauche 20pixels, vous crez un espace de 20pixels gauche de llment et dplacez ce dernier vers la droite (voir Figure3.10).

50

Matrise des CSS

#myBox { position: relative; left: 20px; top: 20px; }

Figure3.10
Positionnement relatif dun lment.
bote 1 left : 20px position : relative bote 2 lment conteneur top : 20px

bote 3

Avec le positionnement relatif, llment continue doccuper lespace dorigine, quil soit dcal ou non. Le dcalage peut ds lors le conduire chevaucher dautres botes.

Positionnement absolu
Le positionnement relatif est considr faire partie du modle de positionnement standard dans le flux, car la position de llment est alors relative la position normale dans le flux. la diffrence, le positionnement absolu extrait llment du flux du document. Il ny occupe donc plus despace, et les autres lments dans le flux se comportent alors comme si llment positionn de manire absolue nexistait pas (voir Figure3.11).
Figure3.11
Positionnement absolu dun lment.
left : 20px

top : 20px

bote 1

position : absolue bote 2

bote 3

anctre positionn de manire relative

Un lment positionn de manire absolue est positionn par rapport lemplacement de son anctre le plus proche. Sil nen possde pas, il est positionn par rapport au bloc conteneur initial. Selon lagent utilisateur, il peut sagit du support du document ou de llment HTML.

Vue densemble du modle deformatage visuel

51

Comme les botes positionnes de manire relative, une bote positionne de manire absolue peut tre dcale par rapport au haut, au bas, la gauche ou la droite de son bloc conteneur. Vous disposez ainsi dune grande flexibilit de positionnement, qui permet de placer llment presque nimporte o dans la page.
Le principal problme que les utilisateurs rencontrent avec le positionnement consiste se rappeler quoi correspond chaque option. Le positionnement relatif est "relatif" la position initiale de llment dans le flot du document, alors que le positionnement absolu est "relatif" au plus proche anctre positionn ou, sil nexiste pas, au bloc conteneur initial.

Comme les botes positionnes de manire absolue sortent du flux du document, elles peuvent chevaucher dautres lments dans la page. Vous pouvez en contrler lordre dempilement en paramtrant une proprit appele z-index. Plus le rang z-index est lev, plus la bote apparat haut dans la pile. Le positionnement absolu dun lment par rapport son plus proche anctre positionn offre dintressantes options pour la mise en page. Supposons ainsi que vous souhaitiez aligner un paragraphe de texte en bas droite dune grande bote. Vous pouvez donner la bote conteneur une position relative, puis positionner de manire absolue le paragraphe par rapport cette bote:
#branding { width: 70em; height: 10em; position: relative; } #branding .tel { position: absolute; right: 1em; bottom: 1em; text-align: right; } <div id="branding"> <p class="tel">Tel: 0845 838 6163</p> </div>

Le positionnement absolu dune bote par rapport un anctre au positionnement relatif fonctionne bien dans la plupart des navigateurs modernes. Internet Explorer5.5 et6 sous Windows sont cependant victimes dun bogue. Si vous tentez de positionner absolument la bote par rapport la droite ou au bas de son anctre positionn de manire relative, vous devez vous assurer que les dimensions de lanctre sont bien spcifies. Sans cela, Internet Explorer positionne, tort, la bote par rapport au support du document. Nous reviendrons sur les correctifs ce bogue au Chapitre9. La solution la plus simple consiste dfinir la largeur et la hauteur de la bote relative pour viter ce problme.

52

Matrise des CSS

Le positionnement absolu peut tre utile la structuration des pages, notamment sil sopre avec des anctres positionns de manire relative. Il est parfaitement possible de crer une structure de page en nutilisant que des positionnements absolus. Pour que cela fonctionne, il faut que ces lments aient des dimensions fixes, afin quon puisse les positionner o on le souhaite sans quils se chevauchent. Parce quils sortent du flux normal du document, les lments positionns de manire absolue nont pas deffet sur les botes dans le flux normal. Si vous agrandissez une bote positionne de manire absolue (par exemple, en augmentant la taille des polices), les botes situes autour ne se rorganisent pas pour en tenir compte. La moindre modification de taille peut ainsi dtruire les subtiles proportions de vos maquettes en provoquant le chevauchement des botes positionnes de manire absolue. Positionnement fixe Le positionnement fixe est une sous-catgorie du positionnement absolu. La seule diffrence est que, dans ce cas, le bloc conteneur de llment fixe nest autre que la fentre daffichage elle-mme. Le positionnement fixe permet ainsi de crer des lments flottants qui restent toujours au mme endroit dans la fentre. Lancien site web snook.ca (voir Figure3.12) en propose un exemple. Le formulaire pour les commentaires est positionn de manire fixe afin de rester ancr au mme endroit dans lcran quand la page dfile. Cette astuce amliore lutilisabilit du site, et vite lutilisateur de faire dfiler la page pour laisser son commentaire.

Figure3.12
Dans lancien site web snook.ca, le formulaire pour les commentaires situ dans la marge droite de lcran utilisait une position fixe pour rester au mme endroit dans la fentre daffichage

Malheureusement, Internet Explorer6 et ses versions antrieures ne prennent pas en charge le positionnement fixe. Internet Explorer7 le reconnat partiellement, mais avec quelques bogues en pratique. Pour contourner ces problmes, Jonathan Snook a ici utilis du code JavaScript pour rpliquer leffet dans Internet Explorer.

Flottement
Le dernier modle de mise en forme visuelle est le modle de flottement. Une bote flottante peut tre cale gauche ou droite, de manire que son bord externe touche le bord de sa

Vue densemble du modle deformatage visuel

53

bote conteneur ou dune autre bote flottante. Les botes flottantes ne sinsrent pas dans le flux normal du document, si bien que les botes de bloc qui sont dans le flot se comportent comme si les botes flottantes nexistaient pas. Comme le montre la Figure3.13, la bote1, qui flotte droite, sort du flux du document et se dcale droite jusqu ce que son bord droit touche le bord droit du bloc conteneur.
Aucune bote flottante bote 1 bote 2 bote 3 bote 2 bote 3 La bote 1 flotte droite bote 1

Figure3.13
Exemple dlment flottant droite.

la Figure 3.14, la bote 1, qui flotte gauche, sort du flot du document et se dcale gauche jusqu ce que son bord gauche touche le bord gauche du bloc conteneur. Comme elle nest plus dans le flot, elle ne prend aucun espace et saffiche par-dessus la bote 2 quelle masque compltement. Si vous faites flotter les trois botes gauche, la bote1 est dcale gauche jusqu toucher sa bote conteneur, et les deux autres botes sont dcales gauche jusqu toucher la bote flottante prcdente.
La bote 1 flotte gauche bote 1 La bote 2 est masque sous la bote 1. Les trois botes flottent gauche bote 1 bote 2 bote 3

bote 3

Figure3.14
Exemple dlments flottant gauche.

Si le bloc conteneur est trop troit pour que tous les lments flottants tiennent lhorizontale, le reste des lments flottants est renvoy plus bas, jusqu ce quil y ait assez de place (voir Figure3.15). Si les lments flottants possdent des hauteurs diffrentes, des lments flottants viennent buter sur dautres lments flottants en se dcalant vers le bas.

54

Matrise des CSS

Pas assez d'espace horizontal bote 1 bote 3 La bote 3 passe en dessous bote 2 Botes de diffrentes hauteurs bote 1 bote 2 bote 3 La bote 3 bute sur la bote 1

Figure3.15
Sil ny a pas assez despace sur le plan horizontal, les lments flottants se dcalent vers le bas jusqu trouver de la place.

Botes de ligne et dgagement la prcdente section, vous avez vu que le flottement dun lment le sortait du flot du document et quil ny exerait donc plus deffet sur les lments non flottants. En ralit, ce nest pas exactement vrai. Si un lment flottant est suivi par un lment dans le flot du document, sa bote se comporte comme si le flottement nexistait pas. Le contenu textuel de la bote conserve nanmoins en mmoire la prsence de llment flottant et se dcale afin de lui laisser de la place. En termes techniques, une bote de ligne adjacente un lment flottant est raccourcie afin de faire place llment flottant et dhabiller ainsi la bote flottante. En fait, les lments flottants ont t crs pour permettre au texte dhabiller les images en les bordant (voir Figure3.16).
Pas de bote flottante Image flottante gauche

Les botes de ligne se racourcissent pour faire de la place la bote flottante

Figure3.16
Les botes de ligne se raccourcissent ct des lments flottants.

Pour empcher les botes de ligne de courir le long des botes flottantes, vous devez appliquer une proprit clear llment qui contient ces botes de ligne. La proprit clear peut valoir left, right, both ou none. Elle indique le ct de la bote qui ne doit pas se trouver ct dune bote flottante. Jai toujours considr cette proprit comme une sorte de drapeau magique qui annulait automatiquement le flottement prcdent. En ralit, cest encore plus intressant. Lorsque vous dgagez un lment avec la proprit clear, le navigateur ajoute suffisamment de marge au-dessus pour dcaler sa bordure suprieure vers le bas, au-del de llment flottant (voir Figure3.17).

Vue densemble du modle deformatage visuel

Le second paragraphe est dgag Le second paragraphe est dgag

55

Marge ajoute pour dgager l'lment flottant

Figure3.17
Le dgagement de la marge suprieure dun lment cre suffisamment despace vertical pour llment flottant prcdent.

Comme vous pouvez le voir, les lments flottants sortent du flux du document et nont pas deffet sur les lments qui les entourent. Toutefois, le dgagement dun lment dgage en fait un espace vertical pour tous les lments flottants prcdents. Ce mcanisme peut tre utile pour la mise en page car il permet aux lments alentour de faire de la place aux lments flottants. Il permet galement de rsoudre le problme signal prcdemment avec le positionnement absolu, o les modifications de hauteur naffectent pas les lments alentour et peuvent rompre les quilibres de la mise en page. Considrons un peu plus prcisment cette question des lments flottants et de la proprit clear. Supposons que vous ayez une image et que vous souhaitiez la faire flotter gauche dun bloc de texte. Vous voulez que cette image et le texte soient contenus dans un autre lment avec une couleur darrire-plan et une bordure. Demble, vous tenterez sans doute de procder comme ceci:
.news { background-color: gray; border: solid 1px black; } .news img { oat: left; } .news p { oat: right; } <div class="news"> <img src="/img/news-pic.jpg" alt="my pic" /> <p>Du texte</p> </div>

Pourtant, comme les lments flottants sont sortis du flot du document, la div qui les enveloppe ne prend aucun espace. Dans ce cas, comment faire pour que lenveloppe englobe

56

Matrise des CSS

llment flottant? Vous devez appliquer une proprit clear quelque part dans cet lment (voir Figure3.18). Comme il nexiste pas dlment dgager dans cet exemple, vous pouvez ajouter un lment vide sous le dernier paragraphe et le dgager.
Le conteneur n'englobe pas les lments flottants Le conteneur englobe maintenant les lments flottants

Les lments flottants ne prennent pas de place Figure3.18

Div vide pour le dgagement

Comme les lments flottants ne prennent pas despace, ils ne sont pas englobs par les lments conteneurs. Lajout dun lment vide permet dappliquer le dgagement et force llment conteneur englober les lments flottants.
.news { background-color: gray; border: solid 1px black; } .news img { oat: left; } .news p { oat: right; } .clear { clear: both; }

<div class="news"> <img src="/img/news-pic.jpg" alt="my pic" /> <p>Du texte</p> <br class="clear" /> </div>

On obtient ainsi le rsultat souhait, mais en ajoutant du code superflu. Souvent, on trouve un lment prsent auquel appliquer la proprit clear, mais il faut parfois manger son chapeau et ajouter du code sans pertinence smantique, aux seules fins de la mise en forme.

Vue densemble du modle deformatage visuel

57

Au lieu de dgager le texte et limage qui flottent, vous pouvez choisir de faire flotter la div conteneur galement:
.news { background-color: gray; border: solid 1px black; oat: left; } .news img { oat: left; } .news p { oat: right; } <div class="news"> <img src="/img/news-pic.jpg" alt="my pic" /> <p>Du texte</p> </div>

Vous obtenez alors leffet souhait mais, du coup, cest llment suivant qui est maintenant affect par le flottement. Pour rsoudre ce problme, certains dveloppeurs choisissent de faire flotter presque tous les lments de leur maquette, puis dgagent ces lments flottants avec un lment qui a sa raison dtre smantique, comme le pied de page du site. Cette approche rduit ou limine les balises superflues, mais le flottement peut tre compliqu et certains navigateurs plus anciens ont de la peine avec les mises en page flottantes complexes. Cest la raison pour laquelle bien des concepteurs se rsignent utiliser quelques balises superflues. La proprit overow dfinit la manire dont un lment est cens se comporter si le contenu englob est trop grand pour les dimensions spcifies. Par dfaut, le contenu dborde de la bote, en chevauchant lespace adjacent. Mais lun des effets secondaires lis lapplication des valeurs hidden ou auto la proprit overow tient ce que se trouvent ainsi dgags tous les lments flottants qui y sont contenus. Cest ainsi un moyen utile de dgager un lment sans ajouter de balise superflue. Cette mthode nest pas toujours la plus approprie, car la dfinition de la proprit overow affecte son comportement. En particulier, elle peut forcer laffichage de barres de dfilement ou dtourer du contenu dans certains cas. Certaines personnes ont adopt une mthode pour dgager les lments flottants, qui consiste utiliser du contenu gnr par le code CSS ou par un script JavaScript. Le concept de base est alors le mme. Au lieu dajouter un lment qui permet deffectuer le dgagement directement dans le balisage, vous lajoutez dynamiquement la page. Dans les deux cas, vous devez indiquer o vient se placer llment dgager, ce qui se fait gnralement avec lajout dun nom de classe:
<div class="news clear"> <img src="/img/news-pic.jpg" alt="my pic" /> <p>Du texte</p> </div>

58

Matrise des CSS

Avec la mthode CSS, vous utilisez la pseudo-classe :after en combinaison avec la dclaration de contenu pour ajouter du nouveau contenu la fin du contenu existant spcifi. Dans le cas prsent, jajoute un point, car cest un caractre petit et discret. Il ne faut pas que le nouveau contenu prenne de lespace vertical ou soit affich dans la page. La proprit height doit donc prendre la valeur 0 et la proprit visibility la valeur hidden. Comme ces lments dgags rcuprent de lespace pour leur marge suprieure, il faut que la proprit display du contenu gnr possde la valeur block. Une fois cela fait, vous pouvez dgager votre contenu gnr:
.clear:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; }

Cette mthode fonctionne dans la plupart des navigateurs web, mais elle choue avec Internet Explorer6 et ses versions antrieures. Il existe plusieurs solutions de contournement, dont un grand nombre sont prsentes ladresse www.positioniseverything.net/easyclearing.html. La plus courante ncessite dutiliser le Saint Hack (voir Chapitre8) pour piger Internet Explorer 5 et 6 et leur faire appliquer une "structuration" (voir Chapitre 9) qui dgage les lments flottants.
.clear { display: inline-block; } /* Le Saint Hack ne cible quInternet Explorer sous Windows \*/ * html .clear {height: 1%;} .clear {display: block;} /* Fin du Saint Hack */

Cette mthode, parce quelle est assez complexe, ne convient pas ncessairement tout le monde. Nous ne lavons finalement incluse que par souci dexhaustivit. La mthode JavaScript sort du cadre de ce livre, mais on peut la mentionner rapidement. la diffrence de la prcdente, elle fonctionne avec tous les navigateurs principaux pourvu que JavaScript ny soit pas dsactiv. Si vous lutilisez, vous devez cependant vous assurer que le contenu ne reste pas lisible dans les navigateurs o les fonctionnalits JavaScript sont dsactives.

En rsum
Vous avez dcouvert le modle de bote et vu comment le remplissage, les marges, la largeur et la hauteur changent les dimensions dune bote. Vous avez galement dcouvert le principe deffondrement des marges et vu comment il peut influer sur vos mises en page. Vous avez dcouvert les trois modles de mise en forme CSS: le flux normal, le positionnement et le flottement. Vous avez appris la diffrence entre les botes incorpores et les botes de bloc, vous avez vu comment positionner un lment de manire absolue par rapport

Vue densemble du modle deformatage visuel

59

un anctre positionn de manire relative et comment fonctionne le dgagement avec la proprit clear. Il est temps de mettre ces connaissances en pratique. Lors des prochains chapitres, vous dcouvrirez un certain nombre de concepts CSS essentiels et vous verrez comment ils p euvent tre utiliss de manire utile et pratique. Ouvrez votre diteur de texte favori et commenons programmer!

Utilisation des effets darrireplan

Maintenant que vous tes arm sur le plan thorique, passons la pratique. Le Web est aujourdhui un mdia particulirement ax sur lexpression visuelle. La petite balise dimage (au dpart, simple moyen dajouter du contenu visuel aux sites web) a permis aux concepteurs web de transformer dennuyeux documents en vritables expriences graphiques. Les graphistes sen sont rapidement empars pour embellir la prsentation des pages. En fait, sans linvention de la balise dimage, la profession de concepteur web naurait sans doute jamais volu. Malheureusement, cette balise a trop souvent servi encombrer les pages dimages uniquement destines la prsentation. Mais les CSS permettent heureusement dafficher des images sans les intgrer dans le balisage, comme arrire-plan dun lment existant. Au travers dune srie dexemples pratiques, vous allez voir ici comment les images darrireplan peuvent tre utilises pour crer une varit de techniques intressantes et pratiques. Au cours de ce chapitre, vous en apprendrez plus sur: les botes bords arrondis largeur fixe et flexible; la technique des portes coulissantes; les images multiples darrire-plan et la proprit border-radius; les ombres portes CSS; les proprits opacity et RGBa; laffichage des PNG dans les anciennes versions dInternet Explorer; le dfilement parallaxe; le remplacement dimage.

Notions de base sur les images darrire-plan

Rien de plus simple que dappliquer une image darrire-plan. Par exemple, si vous souhaitez un bel arrire-plan mosaqu pour votre site, vous pouvez appliquer limage comme arrire-plan llment body:
body { background-image:url(/img/pattern.gif); }

Le comportement par dfaut du navigateur consiste rpter limage horizontalement et verticalement afin quelle remplisse toute la page par un effet de mosaque. Pour un contrle plus prcis, vous pouvez choisir si limage darrire-plan doit se rpter verticalement, horizontalement ou pas du tout.

62

Matrise des CSS

Les dgrads sont trs en vogue. Imaginons donc que vous souhaitiez plutt appliquer un dgrad vertical. Pour cela, crez une image de dgrad troite mais trs longue, puis appliquez-la llment body de la page en la rptant horizontalement.
body { background-image: url(/img/gradient.gif); background-repeat: repeat-x; }

Comme le dgrad possde une hauteur fixe, il sarrte brusquement si le contenu de la page est plus long que la hauteur de limage. On peut, certes, crer une image trs longue, qui se fond dans une zone de couleur unie couvrant tout le bas de limage, mais il est difficile de prdire systmatiquement la longueur des pages. Le plus simple est donc dajouter une couleur darrire-plan galement. Les images darrire-plan viennent toujours se placer par-dessus la couleur darrire-plan, si bien que lorsque limage sinterrompt, cest la couleur darrireplan qui prend le relais. Si vous choisissez une couleur darrire-plan identique celle du bas du dgrad, la transition entre limage et la couleur darrire-plan est parfaitement invisible.
body { background-image: url(/img/gradient.gif); background-repeat: repeat-x; background-color: #ccc; }

Les mosaques dimages peuvent tre utiles mais, la plupart du temps, vous souhaiterez ajouter vos images sans les rpter dans la page. Par exemple, supposons que vous vouliez faire commencer votre page web par une grande image reprsentant votre marque. Vous pourriez ajouter directement limage la page et, dans bien des cas, il sagirait de la bonne mthode, mais si limage ne contient aucune information et nest destine qu des fins de prsentation, il est prfrable de la sparer du reste du contenu. Vous pouvez le faire en crant un hook (une sorte de point dattache) pour elle dans le code HTML et en appliquant cette image avec des CSS. Dans lexemple suivant, jai ajout une div vide au balisage et je lui ai donn lID branding. Vous dfinissez ensuite les dimensions de la div pour les rendre identiques celles de limage, en lappliquant comme arrire-plan, sans rptition.
#branding { width: 700px; height: 200px; background-image:url(/img/branding.gif) background-repeat: no-repeat; }

Enfin, vous pouvez dfinir la position de limage darrire-plan. Par exemple, supposons que vous souhaitiez ajouter une puce chaque titre de votre site (voir Figure4.1). Vous pouvez alors procder de la manire suivante:
h1 { padding-left: 30px; background-image: url(/img/bullet.gif); background-repeat: no-repeat; background-position: left center; }

Utilisation des effets darrire-plan

Figure4.1
Cration dune puce laide dune image darrire-plan.

63
centre gauche

Mon Titre
padding-left : 30px

Les deux derniers mots-cls indiquent le positionnement de limage. Dans le cas prsent, limage sera positionne gauche de llment et centre verticalement. En plus des motscls, vous pouvez dfinir la position de limage darrire-plan laide dunits comme des pixels ou des pourcentages. Si vous dfinissez la position de larrire-plan en pixels ou en cadratins (em), vous positionnez le coin suprieur gauche de limage en le dcalant du nombre dunits spcifi, par rapport au coin suprieur gauche de llment. Si vous spcifiez une position verticale et horizontale de 20pixels, le coin suprieur gauche de limage apparat ainsi 20pixels du coin suprieur gauche de llment. Le positionnement de larrire-plan en pourcentage fonctionne un peu diffremment. Au lieu de positionner le coin suprieur gauche de limage, il utilise un point correspondant dans limage. Si vous dfinissez une position verticale et horizontale de 20%, vous positionnez en fait un point, situ 20% du coin suprieur gauche de limage, afin de le placer 20 % du coin suprieur gauche de llment parent (voir Figure4.2).
Positionnement de l'arrire-plan en px 20px 20px x (0,0) 20 % Positionnement de l'arrire-plan en % 20 % x (20 %, 20 %)

Figure4.2
Lorsque vous positionnez des images darrire-plan en utilisant des pixels, cest le coin suprieur gauche de limage qui est pris comme rfrence. Lorsque vous effectuez un positionnement en pourcentage, cest la position correspondante dans limage qui est prise comme rfrence.

Si vous souhaitez positionner le prcdent exemple de puces avec des pourcentages et non des mots-cls, vous pouvez fixer la position verticale 50% pour centrer limage de la puce:
h1 { padding-left: 30px;

64
}

Matrise des CSS

background-image: url(/img/bullet.gif); background-repeat: no-repeat; background-position: 0 50%;

La spcification CSS indique que vous ntes pas cens mlanger des units telles que des pixels ou des pourcentages avec des mots-cls. Cette rgle na pas beaucoup de sens et, de fait, bon nombre des navigateurs web lignorent dlibrment. Quoi quil en soit, le mlange des units et des mots-cls choue sur certains navigateurs et risque de rendre vos CSS invalides. Cette option nest donc pas judicieuse, pour le moment. Pour gagner du temps, les CSS proposent aussi une version raccourcie de la proprit background. Elle permet de dfinir toutes les proprits en une fois, sans les dtailler de manire individuelle.
h1 { background: #ccc url(/img/bullet.gif) no-repeat left center; }

Si le fonctionnement des images darrire-plan est assez simple comprendre, il nen forme pas moins la base de nombreuses techniques CSS avances.

Botes bords arrondis

Lune des principales critiques quessuient les mises en page CSS tient au fait quelles sont trs carres, structures de manire rectangulaire. Certains concepteurs, pour parer ce problme, ont alors commenc concevoir des pages en incorporant plus de formes courbes. Les rectangles bords arrondis sont rapidement devenus lune des techniques les plus recherches en CSS. Il existe plusieurs moyens de crer des botes bords arrondis. Chacun a ses avantages et ses inconvnients. Votre choix dpendra en grande partie des circonstances dans lesquelles vous souhaiterez les utiliser.

Botes largeur fixe et bords arrondis

Les botes de largeur fixe bords arrondis sont les plus faciles crer. Elles ne requirent que deux images: lune en haut de la bote et lautre en bas. Par exemple, supposons que vous souhaitiez crer une bote comme celle de la Figure4.3.
Figure4.3
Une bote simple bords arrondis.

Utilisation des effets darrire-plan

Le balisage pour la bote ressemble ceci:
<div class="box"> <h2>Titre</h2> <p>Contenu</p> </div>

65

Dans votre logiciel ddition dimage favori, vous devez crer deux images comme celles de la Figure4.4: lune pour le haut de la bote et lautre pour le bas. Le code et les images de cet exemple comme ceux de tous les autres exemples du livre peuvent tre tlchargs sur le site www.pearson.fr.
Figure4.4
Les images courbes du haut et du bas.

Ensuite, appliquez limage du haut llment titre et celle du bas la div de la bote. Ce style de bote possdant un remplissage uni, vous devez crer le corps de la bote en ajoutant une couleur darrire-plan la div de la bote:
.box { width: 418px; background: #effce7 url(/img/bottom.gif) no-repeat } .box h2 { background: url(/img/top.gif) no-repeat left top; }

left bottom;

Comme il ne faut pas que le contenu vienne buter sur les bords de la bote, vous devez aussi ajouter un remplissage aux lments dans la div:
.box { width: 418px; background: #effce7 url(/img/bottom.gif) no-repeat padding-bottom: 1px; } .box h2 { background: url(/img/top.gif) no-repeat left top; margin-top: 0; padding: 20px 20px 0 20px; } .box p { padding: 0 20px; }

left bottom;

66

Matrise des CSS

Voil qui est parfait pour une bote simple de couleur unie et sans bordures, mais comment crer un style un peu plus sophistiqu, comme celui de la Figure4.5?
Figure4.5
Exemple styl de bote bords arrondis.

La technique est alors la mme, sauf quau lieu de dfinir une couleur darrire-plan pour la bote vous devez choisir une image darrire-plan rpte. Pour que leffet fonctionne, vous allez devoir appliquer limage courbe du bas un autre lment. Dans cet exemple, jai utilis le dernier lment de paragraphe de la bote:
.box { width: 424px; background: url(/img/tile2.gif) repeat-y; } .box h2 { background: url(/img/top2.gif) no-repeat left top; padding-top: 20px; } .box .last { background: url(/img/bottom2.gif) no-repeat left bottom; padding-bottom: 20px; } .box h2, .box p { padding-left: 20px; padding-right: 20px; } <div class="box"> <h2>Titre</h2> <p class="last">Contenu</p> </div>

La Figure4.6 prsente la bote mise en forme. Aucune hauteur ne lui ayant t donne, elle stend verticalement quand la taille du texte augmente.

Utilisation des effets darrire-plan

La bote s'tire verticalement quand la taille du texte augmente

67

Figure4.6
Bote largeur fixe mise en forme. La hauteur de la bote stire pour faire de la place au texte. La bote stire verticalement quand la taille du texte augmente.

Bote flexible bords arrondis Dans les exemples prcdents, la bote stend quand la taille du texte varie, mais elle ne stend pas horizontalement, car sa largeur doit rester la mme que celle des images du haut et du bas. Si vous souhaitez crer une bote flexible, vous devez procder autrement. Au lieu de nutiliser quune seule image pour les courbes du haut et du bas, vous devez en utiliser deux qui se chevauchent (voir Figure4.7).
top-right.gif top-left.gif div.box Quand la bote s'tend, top-right.gif recouvre top-left.gif.

Figure4.7
Ce schma montre comment les images du haut stendent afin de former une bote flexible bords arrondis.

68

Matrise des CSS

Lorsque la taille de la bote augmente, une portion plus large de limage est rvle, ce qui cre lillusion que la bote stend. Cest la technique des "portes coulissantes": une image coulisse au-dessus de lautre en la masquant. Il faut plus dimages pour cette technique et il faut, en outre, ajouter deux lments non smantiques dans le code.
<div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Titre</h2> <p>Contenu</p> </div> </div> </div>

Cette mthode requiert quatre images en tout: deux qui composent larrondi du haut et deux qui composent celui du bas (voir Figure4.8). Les images du bas doivent tre aussi hautes que la hauteur maximale de la bote. Nous nommerons ces images top-left.gif, top-right.gif, bottom-left.gif et bottom-right.gif.
top-left.gif top-right.gif

bottom-left.gif Figure4.8
Les images requises pour crer la bote flexible bords arrondis. .

bottom-right.gif

Pour commencer, vous devez appliquer limage bottom-left.gif la div principale de la bote et bottom-right.gif la div externe. Ensuite, appliquez top-left.gif la div interne et top-right.gif au titre. Pour finir, ajoutez un remplissage pour espacer lgrement le contenu de la bote.
.box { width: 20em; background: #effce7 url(/img/bottom-left.gif) no-repeat left bottom; } .box-outer { background: url(/img/bottom-right.gif) no-repeat right bottom;

Utilisation des effets darrire-plan

padding-bottom: 1em; } .box-inner { background: url(/img/top-left.gif) no-repeat left top; } .box h2 { background: url(/img/top-right.gif) no-repeat right top; padding-top: 1em; } .box h2, .box p { padding-left: 1em; padding-right: 1em; }

69

Dans cet exemple, jai dfini la largeur de la bote en cadratins (em). La bote peut ainsi stendre quand lutilisateur augmente la taille du texte dans le navigateur (voir Figure4.9). Vous pouvez cependant aussi dfinir cette largeur en pourcentage, afin que la bote stende ou se contracte en fonction de la taille de la fentre du navigateur. Il sagit l dun des principes fondamentaux des mises en page lastiques et liquides, comme nous le verrons ultrieurement.

Figure4.9
Les botes flexibles bords arrondis stendent la fois horizontalement et verticalement quand le texte change de taille.

Lajout dlments non smantiques nest pas idal. Si vous ne crez quune ou deux botes, ce nest sans doute pas gnant, mais si cela devient un problme, vous pouvez envisager dinsrer ces lments supplmentaires en JavaScript. Pour plus de dtails ce sujet, consultez lexcellent article de Roger Johansson sur le site 456 Berea Street (en anglais), ladresse www.456bereastreet.com/archive/ 200505/transparent_custom_corners_and_borders.

70

Matrise des CSS

Coins masqus
La technique des coins masqus (en anglais, "mountaintop corners", par rfrence aux sommets neigeux qui se terminent par du blanc) est une technique simple mais trs efficace labore par Dan Cederholm (www.simplebits.com), lauteur du best-seller Web Standards Solutions (Friends of ED, 2004, rdition 2009). Supposons que vous souhaitiez crer une varit de botes arrondies de diffrentes couleurs. Avec les prcdentes mthodes, vous seriez contraint de crer des images diffrentes pour chacun des thmes de couleur. Vous pourriez le faire avec deux ou trois thmes de couleur, mais comment faire si vous souhaitez que vos utilisateurs aient la libert de crer leurs propres thmes? Vous seriez contraint de crer des images dynamiquement sur le serveur, ce qui deviendrait trs compliqu. Il existe heureusement un autre moyen. Au lieu de crer des images de coins colors, vous pouvez crer des masques de coins (voir Figure4.10). La zone masque correspond la couleur darrire-plan utilise tandis que la zone du coin lui-mme est transparente. Lorsque limage est place sur une bote colore, elle cre alors limpression que ses bords sont arrondis (voir Figure4.11).
Figure4.10
Avec un masque de coin, le masque blanc couvre la couleur darrire-plan pour crer un effet darrondi.

Comme ces masques de coin doivent tre des images bitmap, mieux vaut-il utiliser des courbes subtiles. Si vous tracez un arrondi trop prononc, il risque de sembler dent ou disgracieux. Le code de base est analogue celui de la prcdente mthode. Il requiert quatre lments auxquels appliquer les quatre masques de coin:
<div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Titre</h2> <p>Contenu</p> </div> </div> </div>

Le code CSS est aussi trs similaire:

.box { width: 20em;

Utilisation des effets darrire-plan

background: #effce7 url(/img/bottom-left.gif) no-repeat left bottom; } .box-outer { background: url(/img/bottom-right.gif) no-repeat right bottom; padding-bottom: 5%; } .box-inner { background: url(/img/top-left.gif) no-repeat left top; } .box h2 { background: url(/img/top-right.gif) no-repeat right top; padding-top: 5%; }

71

.box h2, .box p { padding-left: 5%; padding-right: 5%; }

Figure4.11
Bote coins masqus.

La principale diffrence, hormis le fait que vous utilisiez des images diffrentes, tient lajout dune couleur darrire-plan la div principale de la bote. Si vous souhaitez modifier la couleur de la bote, il suffit de modifier la valeur de couleur dans le fichier CSS, sans crer de nouvelle image. Cette mthode ne convient que pour des botes trs simples, mais elle est dune extrme flexibilit et peut tre utilise linfini dans diffrents projets. Images darrire-plan multiples Les prcdents exemples sont trs intressants, mais ils imposent presque tous dajouter des lments non smantiques dans le code, car il nest possible dajouter quune seule image darrire-plan par lment. Ne serait-il pas formidable quon puisse ajouter plusieurs images darrire-plan la fois? Les CSS3 le permettent. La syntaxe est, en outre, dune simplicit absolue et prend la mme forme que pour les images darrire-plan standard.

72

Matrise des CSS

Seule diffrence : au lieu de dfinir une seule image darrire-plan, vous pouvez utiliser autant dimages que vous le souhaitez. Voici le principe:
.box { background-image: url(/img/top-left.gif), url(/img/top-right.gif), url(/img/bottom-left.gif), url(/img/bottom-right.gif); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: top left, top right, bottom left, bottom right; } <div class="box"> <h2>Titre</h2> <p>Contenu<p> </div>

Commencez par dfinir toutes les images que vous souhaitez utiliser avec la proprit background-image. Ensuite, indiquez si vous voulez les rpter ou non. Puis, fixez leurs positions respectives avec la proprit background-position. Le rsultat est prsent la Figure4.12. Safari prenait en charge les images darrire-plan multiples ds sa version1.3. Firefox et Opera ont embot le pas dans leurs dernires versions. Internet Explorer ne les reconnat pas encore, mais ne vous privez pas dutiliser cette technique si vous estimez quil est acceptable que les utilisateurs dInternet Explorer voient des coins carrs la place.
Figure4.12
Une bote bords arrondis cre avec des arrire-plans multiples en CSS3.

border-radius une poque o pullulent les jeux vido haute dfinition qui redessinent des textures la vole, il ne paratrait pas totalement insens que les navigateurs soient capables de dessiner par eux-mmes des botes simples bords arrondis, sans utiliser dimages vectorielles.

Utilisation des effets darrire-plan

73

Cerve un peu fou devient aujourdhui ralit, grce la nouvelle proprit CSS3 borderradius. Tout ce que vous avez faire est de dfinir le rayon de larrondi dsir; le navigateur soccupe du reste (voir Figure4.13).
.box { border-radius: 1em; }

Figure4.13
Une bote bords arrondis cre avec la proprit CSS3 borderradius.

Cette proprit tant rcente, des dsaccords demeurent sur la manire dont elle devrait fonctionner. Jusqu ce quelle soit uniformment accepte, vous devrez donc utiliser des extensions spcifiques des navigateurs pour linvoquer. Actuellement, seuls Firefox et Safari la prennent en charge. Cest la raison pour laquelle jutilise les prfixes moz et webkit.
.box { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }

Les diteurs de navigateurs exprimentent toujours de nouvelles extensions pour les CSS. Certaines proviennent de versions CSS qui ne sont pas encore implmentes, alors que dautres ne se fraient un chemin dans les spcifications que plus tardivement. Certaines encore peuvent ne jamais atteindre la spcification officielle, comme celles utilises par Safari pour afficher des lments dinterface utilisateur sur liPhone. Pour ne pas perturber dautres agents utilisateur ou invalider votre code, vous pouvez invoquer ces extensions en ajoutant un prfixe propre lditeur dans votre slecteur, votre proprit ou votre valeur. Par exemple, Mozilla utilise le prfixe moz, alors que Safari utilise le prfixe webkit. Il existe des prfixes similaires pour Internet Explorer, Opera et tous les principaux navigateurs. Chaque navigateur possde son propre jeu de fonctionnalits spciales auquel vous pouvez accder avec ces prfixes. Vous devrez donc probablement vrifier lesquels sont disponibles sur le site de dveloppement des diteurs. Grce ce mcanisme, vous pouvez tester de nouvelles fonctionnalits CSS3 avant quelles ne fassent partie de la recommandation officielle. Cependant, utilisez ces extensions prudemment, car le format de ces fonctionnalits exprimentales peut diffrer dun navigateur lautre et peut mme changer ou disparatre dici ce que la spcification devienne une recommandation officielle.

74

Matrise des CSS

border-image Voici le dernier lment de ma liste de nouvelles astuces CSS 3 : la proprit borderimage. Cette excellente nouveaut CSS permet dindiquer une unique image comme bordure dun lment. quoi bon utiliser une seule image, direz-vous? Cest l toute la magie de cette proprit : elle permet de dcouper limage en neuf secteurs distincts, selon de simples rgles de pourcentage, en laissant le soin au navigateur dutiliser le secteur appropri pour la partie correspondante de la bordure. Cette technique de "mise lchelle en neuf dcoupes" (en anglais, nine-slice scaling) permet dviter leffet de distorsion quon obtient normalement en redimensionnant des botes bords arrondis. Pour mieux le comprendre, prenons un exemple. Vous disposez dune image de 100pixels de haut reprsentant une bote bords arrondis comme celle de la Figure4.14. Si vous tracez deux lignes 25% en partant du haut et du bas de la bote, puis deux autres 25% de la gauche et de la droite, vous aurez divis votre bote en neuf secteurs.
Figure4.14
Le fichier source pour notre image de bordure avec, pour lillustration, ses lignes de division.

La proprit border-image utilise automatiquement les images de chaque secteur pour crer larrondi ou la bordure correspondants. Limage du secteur suprieur gauche est ainsi utilise pour crer larrondi suprieur gauche et limage du secteur droit central pour crer la bordure latrale droite. Je veux que les bordures fassent 25pixels de large: cest la largeur que je dfinis donc dans les CSS. Si les images ne sont pas suffisamment grandes, elles sont automatiquement rptes, de manire crer une bote extensible (voir Figure4.15). Voici comment procder dans le code:
.box { -webkit-border-image: url(/img/corners.gif) 25% 25% 25% 25% / 25px round round; }

Safari prend en charge cette proprit depuis un certain temps, avec lextension webkit, comme le montre cet exemple. Firefox3.5 et Opera9.5 la reconnaissent maintenant aussi, ce qui ouvre considrablement son champ dapplication.

Utilisation des effets darrire-plan

Figure4.15
Une bote bords arrondis cre avec la proprit borderimage.

75

Ombres portes
Les ombres portes sont des artifices visuels populaires et attrayants. Elles donnent de la profondeur et rehaussent lapparence des pages trop plates. La plupart des utilisateurs se servent de logiciels comme Photoshop pour les ajouter directement aux images. Mais avec les CSS, il est possible dappliquer des effets simples dombre porte sans altrer les images dorigine. Plusieurs raisons peuvent pousser procder de cette manire, par exemple, pour que des utilisateurs qui ne savent pas retoucher des images puissent administrer votre site web ou quils puissent le faire depuis un lieu o ils nont pas accs Photoshop, comme un cyber caf. laide dun style dombre porte prdfini, vous pourrez tlcharger de simples images et les afficher sur le site avec une ombre porte. Lun des plus intressants avantages lis lutilisation des CSS tient ce que cette technique ne dnature pas les images. Si vous dcidez de supprimer leffet dombre porte par la suite, vous naurez que deux lignes modifier dans vos fichiers CSS au lieu de retraiter la totalit des images.

Ombres portes simples en CSS

Cette mthode trs simple a t dcrite la premire fois par Dunstan Orchard (www.1976design.com). Elle consiste appliquer une grande image dombre porte larrire-plan dune div conteneur. Lombre porte est ensuite rvle par dcalage de limage laide de marges ngatives. La premire chose faire est de crer limage de lombre porte. Cest ce que jai fait avec Photoshop. Crez un fichier Photoshop, dont les dimensions doivent atteindre la taille maximale de limage. Jai, pour ma part, cr un fichier de 800pixels sur 800pixels, par prcaution. Dverrouillez le calque darrire-plan et remplissez-le avec la couleur sur laquelle vous souhaitez projeter lombre porte. Pour cet exemple, jai conserv larrire-plan en blanc. Crez un nouveau calque et remplissez-le en blanc. Ensuite, dcalez ce calque vers le haut

76

Matrise des CSS

et la gauche denviron 4ou5pixels puis appliquez une ombre porte de la mme taille ce calque. Enregistrez limage pour le Web et appelez-la shadow.gif (voir Figure4.16).
Figure4.16
Limage shadow.gif agrandie pour rvler lombre porte de 5pixels.

Le code pour cette technique est trs simple:

<div class="img-wrapper"><img src="dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" /></div>

Pour crer leffet, vous devez commencer par appliquer limage dombre larrire-plan de la div denveloppement. Comme les div sont des lments de niveau bloc, elles stendent en largeur jusqu occuper tout lespace disponible. Dans le cas prsent, nous souhaitons que la div enveloppe limage. On pourrait, cette fin, dfinir une largeur explicite pour la div, mais lutilit de la technique sen trouverait rduite. Au lieu de cela, vous pouvez la faire flotter, afin quelle se rtrcisse pour envelopper limage dans les navigateurs modernes, lexception dInternet Explorer5.x sur Mac. Vous pouvez ventuellement masquer ces styles pour cette version de navigateur. Pour plus dinformations sur le masquage des rgles selon les diffrents navigateurs, consultez le Chapitre8, qui traite des hacks et des filtres.
.img-wrapper { background: url(/img/shadow.gif) no-repeat bottom right; clear: right; oat: left; }

Pour rvler limage de lombre et crer leffet dombre porte (voir Figure 4.17), vous devez dcaler limage en spcifiant des marges ngatives:
.img-wrapper img { margin: -5px 5px 5px -5px; }

Figure4.17
Limage avec son ombre porte.

Utilisation des effets darrire-plan

77

Vous pouvez aussi crer un bel effet de papier photo en donnant limage une bordure et un remplissage (voir Figure4.18):
.img-wrapper img { background-color: #fff; border: 1px solid #a9a9a9; padding: 4px; margin: -5px 5px 5px -5px; }

Figure4.18
Le rsultat final de notre simple technique dombre porte.

Cette technique fonctionne pour la plupart des navigateurs modernes. Il faut cependant ajouter quelques rgles simples pour quelle fonctionne avec Internet Explorer6:
.img-wrapper { background: url(/img/shadow.gif) no-repeat bottom right; clear: right; oat: left; position: relative; } .img-wrapper img { background-color: #fff; border: 1px solid #a9a9a9; padding: 4px; display: block; margin: -5px 5px 5px -5px; position: relative; }

Leffet dombre porte fonctionne maintenant aussi dans Internet Explorer6.

Ombres portes " la Clagnut"

Richard Rutter (www.clagnut.com) a propos une mthode similaire pour crer des ombres portes. Au lieu dutiliser des marges ngatives, il prfre un positionnement relatif pour dcaler limage:

78

Matrise des CSS

.img-wrapper { background: url(/img/shadow.gif) no-repeat bottom right; oat:left; line-height:0; } .img-wrapper img { background:#fff; padding:4px; border:1px solid #a9a9a9; position:relative; left:-5px; top:-5px; }

box-shadow Les prcdentes techniques sont utiles, mais elles sont tout de mme quelque peu fastidieuses. Ne serait-il pas intressant que les navigateurs puissent crer leurs propres ombres portes, sans avoir besoin de filtres Photoshop ou dimages vectorielles ? Vous laurez devin: la CSS3 le permet, avec la proprit box-shadow. Cette proprit prend quatre valeurs: les dcalages vertical et horizontal, la largeur de lombre (et donc son niveau de flou) et sa couleur. Dans lexemple suivant, jai dcal lombre de 3pixels, en lui donnant 6pixels de largeur et une couleur gris clair (voir Figure4.19).
img { box-shadow: 3px 3px 6px #666; }

Figure4.19
Une ravissante ombre porte avec leffet boxshadow.

Comme il sagit dune proprit CSS3 encore exprimentale, vous devez utiliser les extensions Safari et Firefox pour linstant. Il ne faudra cependant sans doute pas attendre bien longtemps pour quelle soit plus largement prise en charge.
img { -webkit-box-shadow: 3px 3px 6px #666; -moz-box-shadow: 3px 3px 6px #666; box-shadow: 3px 3px 6px #666; }

Cette proprit est particulirement intressante parce quelle fonctionne en conjonction avec la proprit border-radius (voir Figure4.20). Vous pouvez donc maintenant crer

Utilisation des effets darrire-plan

79

des ombres portes de manire programmatique sur les botes bords arrondis, sans mme avoir ouvrir votre logiciel ddition dimage!
Figure4.20
Une ombre porte sur une bote bords arrondis.

Nous avons copieusement utilis cet effet dans le site web UX London 2009, en proposant des ombres portes aux navigateurs modernes (voir Figure4.21) et des botes standard pour les navigateurs moins avancs (voir Figure4.22).

Figure4.21
Le site web UX London tel que laffiche Firefox. Observez les ombres portes unies cres avec des CSS3.

80

Matrise des CSS

Figure4.22
Le site web UX London affich cette fois dans Internet Explorer. Les ombres ne saffichent plus, mais la plupart des utilisateurs ne remarqueront pas ce qui manque.

Opacit
Sil est bien utilis, leffet dopacit peut donner vos mises en page une autre dimension. Il peut aussi permettre de positionner des lments les uns au-dessus des autres en livrant des indices sur ce qui se cache dessous. Au-del du simple gadget, ces petits dtails peuvent amliorer lutilisabilit du site.

Opacit CSS
Lopacit CSS est disponible depuis un certain temps dans la plupart des navigateurs modernes. On peine du coup comprendre pourquoi elle nest pas utilise plus souvent. On ne sera toutefois pas surpris dapprendre quelle nest pas prise en charge par les anciennes versions dInternet Explorer. Un petit ajout de code propre Internet Explorer suffit nanmoins corriger le problme. titre dexemple, imaginons que vous souhaitiez faire apparatre un message dalerte vos utilisateurs, en le superposant au document existant afin quils puissent voir ce qui se passe dessous (voir Figure4.23).
.alert { background-color: #000; border-radius: 2em; opacity: 0.8; lter: alpha(opacity=80); /*proprietary IE code*/ }

Utilisation des effets darrire-plan

Figure4.23
Bote dalerte bords arrondis 80% dopacit.

81

Le principal problme avec lopacit CSS tient ce que le contenu de llment auquel vous lappliquez en hrite, comme larrire-plan. Si vous examinez la Figure4.23, vous verrez ainsi que le texte dans la page saffiche travers la bote dalerte galement. Ce nest pas un problme si vous utilisez une trs forte opacit avec un texte contrast. Mais avec une opacit faible, le contenu de la bote peut commencer devenir illisible. Cest l quintervient le RGBa. RGBa RGBa est un mcanisme permettant de dfinir la couleur et lopacit en mme temps. RGB est lacronyme de Red, Green, Blue (rouge, vert, bleu), "a" signifie "alpha transparency" (transparence alpha). Pour utiliser RGBa dans lexemple prcdent, vous procderiez de la manire suivante:
.alert { background-color: rgba(0,0,0,0.8); border-radius: 2em; }

Les trois premiers chiffres reprsentent les valeurs de rouge, de vert et de bleu de la couleur. Ici, la bote dalerte est noire, aussi toutes les valeurs sont-elles gales0. Le dernier chiffre dfinit la valeur dcimale de lopacit. 0.8correspond un arrire-plan opaque 80% (ou transparent 20%) [voir Figure4.24]. La valeur1 rend la bote dalerte opaque 100%. La valeur0 la rend compltement transparente.
Figure4.24
Bote dalerte bords arrondis opaque 80% en RGBa.

82

Matrise des CSS

Transparence PNG Lun des plus grands atouts du format de fichier PNG concerne sa prise en charge de la transparence alpha. Il permet de produire des maquettes particulirement cratives (voir Figure4.25). Malheureusement, Internet Explorer6 ne prend pas en charge la transparence PNG de manire native, au contraire dInternet Explorer7et8. Il existe cependant quelques astuces pour ramener les anciennes versions dInternet Explorer dans le giron.
Figure4.25
Lancien site Revyver incluait un magnifique exemple de transparence PNG en bas de la fentre daffichage. Lorsque la page dfilait, des portions du contenu transparaissaient sous les branches de larbre et sous larc-en-ciel.

La mthode la plus connue pour forcer la prise en charge de la transparence PNG dans Internet Explorer6 consiste utiliser le filtre propritaire AlphaImageLoader. Pour cela, vous devez inclure la ligne de code suivante dans le fichier CSS:
lter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=/img/my-image.png, sizingMethod=crop);

Malheureusement, ce code invalide le fichier CSS. Il est donc prfrable de le filtrer dans une feuille de styles spare spcifique dInternet Explorer6.
.img-wrapper div { lter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=/img/shadow2.png, sizingMethod=crop); background: none; }

La premire rgle utilise un filtre propritaire pour charger le PNG et forcer la transparence alpha. Limage darrire-plan dorigine reste affiche, si bien que la seconde rgle vient simplement la masquer. Internet Explorer reconnat un autre type de code propritaire appel commentaire conditionnel, qui permet de fournir une feuille de styles particulire aux versions spcifiques dInternet Explorer. Dans le cas prsent, vous souhaitez quInternet Explorer6 seul voie la feuille de styles. Vous pouvez donc placer le code suivant en haut de la page:
<!--[if ie 6]> <link rel="stylesheet" type="text/css" href="ie6.css"/> <![endif]-->

Ne vous proccupez pas pour linstant des commentaires conditionnels. Vous en apprendrez plus ce sujet au Chapitre8.

Utilisation des effets darrire-plan

83

Le problme avec cette technique tient ce quelle force inclure cette ligne de code pour chaque image PNG transparente que vous souhaitez utiliser. Elle est donc peu commode. Lautre approche consiste utiliser une technique appele "IE PNG fix" (correctif pour les PNG sous Internet Explorer). Elle se sert dune extension CSS peu connue et propre Microsoft, nomme "comportements". En tlchargeant le fichier .htc appropri et en le faisant pointer sur votre feuille de styles spcifique dInternet Explorer6, vous pouvez activer la transparence PNG sur llment de votre choix.
img, div { behavior: url(iepngx.htc); }

Pour plus dinformations sur cette technique et pour tlcharger le fichier .htc, consultez la page www.twinhelix.com/css/iepngfix. Effet parallaxe CSS Les images darrire-plan ne servent pas qu crer des bords arrondis et des ombres portes. On peut samuser avec. Cest ce que nous avons fait chez Clearleft, lors du lancement de notre application de test dutilisabilit Silverback. Si vous accdez au site www.silverbackapp.com et redimensionnez la taille de la fentre, vous remarquerez un trange effet (voir Figure4.26). Les images darrire-plan se dplacent des vitesses diffrentes, ce qui donne une sensation de profondeur la page. Il sagit dun dfilement parallaxe. Ce mcanisme a constitu lpine dorsale de bien des jeux vido aux premires heures des ordinateurs personnels.
Figure4.26
Modifiez la taille de la fentre sur le site www. silverbackapp. com et observez ce qui se passe.

84

Matrise des CSS

Pour raliser cet effet, vous devez dabord crer plusieurs images darrire-plan. Ici, nous avons cr une image de feuillage sur un arrire-plan vert, puis deux images de feuillage plus lointaines sur un arrire-plan transparent. Les images du premier plan et du plan intermdiaire peuvent ainsi tre superposes lune lautre ainsi qu larrire-plan, sans en masquer la vue. Le principal arrire-plan est appliqu llment body. Si vous nutilisez pas dimages darrire-plan multiples en CSS3, vous devez cependant ajouter deux nouveaux lments auxquels lier ces arrire-plans. Le contenu de la page doit ensuite venir se placer devant ces lments afin dinteragir avec. Vous pourriez placer la div de premier plan devant le contenu, mais vous en bloqueriez partiellement le contenu et il deviendrait plus difficile dinteragir avec. La structure du code doit donc ressembler ceci:
<body> <div class="midground"> <div class="foreground"> <p>Votre contenu vient ici!</a> </div> </div> </body>

La premire chose faire est dajouter larrire-plan principal llment body. Il faut que cette image se rpte lhorizontale. Vous devrez donc attribuer la valeur repeat-x la proprit image-repeat. Il faut aussi que llment body prenne la couleur de larrireplan, qui se trouve tre vert clair. Enfin, il faut dcaler limage horizontalement de 20% par rapport la taille de la fentre. Cest l que la magie fait son effet. Lorsque la fentre se redimensionne, limage darrire-plan change de position et elle semble se dplacer dans lcran.
body { background-image: url(/img/bg-rear.jpg); background-repeat: repeat-x; background-color:#d3ff99; background-position: 20% 0; }

Vous devez maintenant en faire de mme avec les images de plan intermdiaire et de premier plan, en choisissant des pourcentages plus levs pour quelles se dplacent plus rapidement et suscitent ainsi un effet de profondeur. Nous avons dcid de fixer la position du plan intermdiaire 40% et celle du premier plan, chichement, 150% (voir Figure4.27). Vous pouvez jouer sur ces valeurs pour gnrer leffet qui vous convient.
body { background-image: url(/img/bg-rear.jpg); background-repeat: repeat-x; background-color:#d3ff99; background-position: 20% 0; } .midground { background-image: url(/img/bg-mid.png); background-repeat: repeat-x; background-color: transparent;

Utilisation des effets darrire-plan

background-position: 40% 0; } .foreground { background-image: url(/img/bg-front.png); background-repeat: repeat-x; background-color: transparent; background-position: 150% 0; }

85

Figure4.27
Quand la taille de la fentre change, les feuilles larrireplan se dplacent diffrentes vitesses et crent un effet de profondeur.

Remplacement dimages
Le texte HTML, cest super. Les moteurs de recherche peuvent le lire, vous pouvez le copier et le coller, il sagrandit quand vous augmentez la taille du texte du navigateur. Il est donc judicieux de lutiliser la place des images chaque fois que cest possible. Malheureusement, les concepteurs web ne disposent que dun ensemble trs limit de polices pour travailler. En outre, sil est possible de contrler la typographie dans une certaine mesure laide des CSS, plusieurs contraintes sont indpassables avec du texte pur. Il arrive ainsi parfois, pour respecter la charte graphique dune marque, quil faille utiliser des images de texte la place. Au lieu dincorporer ces images directement dans la page, les auteurs CSS ont dvelopp une technique de remplacement des images. Elle consiste ajouter le texte au document

86

Matrise des CSS

normalement, puis utiliser des CSS pour le masquer et afficher une image darrire-plan la place. Les moteurs de recherche peuvent ainsi trouver le texte HTML, qui reste disponible quand vous dsactivez les CSS. Lide a sembl gniale pendant un temps, jusqu ce que des failles apparaissent. Certaines des mthodes les plus populaires sont inaccessibles aux lecteurs dcran et la plupart ne fonctionnent pas lorsque les images sont dsactives et les CSS actives. Du coup, un grand nombre dauteurs ont cess dutiliser les mthodes de remplacement des images et sont repasss au texte pur. Si jinvite viter le remplacement des images quand cest possible, je continue de croire quil existe des cas o il est judicieux, comme lorsque vous devez utiliser une police particulire pour respecter des directives graphiques lies la charte dune entreprise ou dune marque. Pour cela, vous devez connatre les diffrentes techniques disponibles et comprendre leurs limites respectives.

Remplacement des images de Fahrner

Cr par Todd Fahrner, le FIR (Fahrner Image Replacement ou remplacement des images de Fahrner) est une technique originale de remplacement des images qui est, sans doute aussi, la plus populaire. Je la prsente ici pour des raisons historiques et parce quil sagit dune des mthodes les plus faciles comprendre. Elle possde cependant de srieux inconvnients en matire daccessibilit, comme nous le verrons dans un instant, et doit donc tre vite. Le principe de base est trs simple. Vous enveloppez le texte remplacer dans une balise span:
<h2> <span>Hello World</span> </h2>

Ensuite, vous appliquez limage de remplacement comme image darrire-plan llment de titre:
h2 { background:url(hello_world.gif) no-repeat; width: 150px; height: 35px; }

Vous masquez enfin le contenu de llment span en attribuant la valeur none sa proprit display:
span { display: none; }

Cette mthode fonctionne comme un charme, mais cest cette dernire rgle qui pose problme. La plupart des lecteurs dcran populaires ignorent les lments dont la proprit display vaut none ou la proprit visibility vaut hidden. Ils ignorent du coup compltement le texte, ce qui pose un considrable problme daccessibilit. Cette technique destine amliorer laccessibilit du site a donc un effet exactement inverse. Il vaut mieux ds lors lviter.

Utilisation des effets darrire-plan

87

Phark
Mike Rundle (www.phark.net) a, pour sa part, invent une technique de remplacement dimages, adapte aux lecteurs dcran et qui possde, en outre, lavantage dviter la div supplmentaire non smantique:
<h2> Hello World </h2>

Au lieu dutiliser la proprit display pour masquer le texte, Phark applique un retrait ngatif trs lev au texte du titre:
h2 { text-indent: -5000px; background:url(/img/hello_world.gif) no-repeat; width: 150px; height:35px; }

Cette mthode fonctionne bien et rsout le problme des lecteurs dcran. Mais comme la mthode FIR, elle ne fonctionne pas quand les images sont dsactives et les CSS actives. Il sagit l dun cas limite, qui ne sapplique certainement quaux personnes dotes de connexions bas dbit ou qui utilisent leur tlphone portable comme moyen de connexion Internet. On peut arguer que les visiteurs du site ont la possibilit dactiver les images et que ce sont eux qui dcident de ne pas le faire. Considrez, cependant, que certaines personnes ne verront pas le texte remplac et quil est prfrable dviter cette mthode pour les informations cruciales ou la navigation.

Mthode IFR volutive

Lun des principaux problmes que le remplacement des images tente de rsoudre est celui du manque de polices disponibles sur la plupart des ordinateurs. Au lieu de remplacer le texte par des images de texte, Mike Davidson et Shaun Inman ont adopt une autre technique, plus inventive. Flash permettant dincorporer des polices dans un fichier SWF, ils ont donc dcid de remplacer le texte par un fichier Flash. La substitution sopre en JavaScript: le document est parcouru et tout le texte dun lment particulier ou possdant un nom de classe particulier est rcupr. Le code JavaScript le remplace ensuite par un petit fichier Flash. La partie vritablement ingnieuse vient aprs. Au lieu de crer un fichier Flash distinct pour chaque portion de texte, cette technique place le texte remplac dans un unique fichier dupliqu. Tout ce que vous avez faire pour dclencher le remplacement consiste ajouter une classe. La combinaison du Flash et du JavaScript se charge du reste. Lautre avantage tient ce que le texte dans le fichier Flash peut tre slectionn, ce qui signifie quil peut tre facilement copi et coll.

88

Matrise des CSS

Shaun Inman a inaugur cette mthode trs lgre de remplacement par des images Flash et la nomme IFR (Inman Flash Replacement). Pour plus de dtails son sujet, et notamment pour en tlcharger le code source, consultez la page www.shauninman.com/plete/2004/04/ ifr-revisited-and-revised. Mike Davidson sest ensuite appuy dessus pour crer la mthode sIFR (Scalable Inman Flash Replacement ou mthode IFR volutive), qui tend lIFR en autorisant, par exemple, le redimensionnement du texte ou le remplacement des textes multilignes. Elle est maintenant gre et dveloppe par Mark Wubben et inclut de nouvelles fonctionnalits intressantes. Pour utiliser la mthode sIFR dans votre site, vous devez dabord en tlcharger la dernire version ladresse http://novemberborn.net/sifr3. sIFR sinstalle trs facilement, mais nous conseillons de commencer par lire la documentation. La premire chose faire est douvrir le fichier Flash, dincorporer la police utiliser et dexporter lanimation. Vous devez ensuite appliquer les styles dimpression et dcran inclus ou crer les vtres, puis ajouter le fichier JavaScript sifr.js chaque page dans laquelle vous souhaitez que sIFR fonctionne. Ce fichier est parfaitement configurable et permet de spcifier les lments remplacer, la couleur du texte, le remplissage, la casse et une varit dautres paramtres de style. Le remplissage et la hauteur de ligne affectent cependant la taille du texte, ce qui ne simplifie pas les choses. Une fois que vous avez termin, placez tous les fichiers sur votre serveur et observez vos vieilles polices dprimantes remplaces par le contenu Flash dynamique! Le principal problme avec ces techniques tient au temps de tlchargement. Les pages doivent entirement se charger avant que le code JavaScript ne puisse procder au remplacement du texte. Bien souvent, on observe du coup un lger clignotement avant que le texte nait t remplac par lquivalent Flash (voir Figure4.28).
Figure4.28
Vous remarquerez que les titres du site www. fortymedia.com ne saffichent quune fois que la page est charge. Cest lindice que la mthode sIFR est utilise dans ce site.

Si ce clignotement na pas de grande consquence, il se remarque pourtant et peut donner limpression que la page se charge lentement. Certaines pages, aussi, semblent lentes lorsque de nombreux remplacements sont oprs. En outre, les utilisateurs peuvent apercevoir subrepticement du contenu non mis en forme, ce qui peut faire craindre un bogue ou engendrer une certaine confusion. Mieux vaut donc limiter cette technique aux seuls titres. La mthode sIFR est excellente pour intgrer une typographie riche et parfaite pour les sites relativement petits qui utilisent une typographie uniforme. Elle est, en revanche, moins commode pour les grands sites o figurent de nombreux titres de diffrentes tailles, de diffrents

Utilisation des effets darrire-plan

89

styles et de diffrentes couleurs. Elle devient aussi complique lorsque certains titres couvrent plusieurs lignes ou possdent des couleurs darrire-plan. Je conseille donc de lviter pour les grands projets et de ne lutiliser que pour des sites personnels.

En rsum
Vous avez dcouvert de quelle manire les images darrire-plan pouvaient tre appliques des lments pour produire une varit deffets comme des botes bords arrondis et des ombres portes CSS. Vous avez galement vu comment les nouvelles proprits CSS3 telles que border-radius et box-shadow rendent ces effets inutiles. Vous avez dcouvert lopacit et vu comment forcer la prise en charge de la transparence PNG dans Internet Explorer. Vous vous tes enfin familiaris avec quelques mthodes de remplacement des images. Au chapitre suivant, vous verrez comment les images darrire-plan et les liens peuvent tre combins pour crer dintressants effets interactifs.

Mise en forme des liens

Le modeste lien dancre est ni plus ni moins que la pierre angulaire du Web. Il sagit du mcanisme qui permet aux pages web de se connecter les unes aux autres et aux personnes dexplorer et de parcourir des sites. La mise en forme par dfaut des liens est assez peu flamboyante, mais avec une pince de CSS, il est possible de raliser dincroyables transformations. Au cours de ce chapitre, vous apprendrez : ordonner les slecteurs de liens daprs la cascade; crer des soulignements styls; mettre en forme des liens externes avec des slecteurs dattribut; amener des liens se comporter comme des boutons; crer des styles de liens visits; crer des info-bulles CSS.

Mise en forme simple des liens

Le moyen le plus simple de mettre en forme un lien consiste utiliser le slecteur de type dancre. Par exemple, la rgle suivante passe toutes les ancres en rouge:
a {color: red;}

Les ancres peuvent cependant agir en guise de rfrences internes en plus de liens externes, si bien quil nest pas toujours idal dutiliser un slecteur de type. Considrez lexemple suivant. La premire ancre contient un identificateur de fragment. Lorsque lutilisateur clique dessus, il saute directement la seconde ancre nomme:
<p><a href="#contenuPrincipal">Sauter au contenu principal</a></p> ... <h1><a name="contenuPrincipal">Bienvenue</a></h1>

Dans ce cas, alors quil serait prfrable que seul le lien soit en rouge, le titre va le devenir aussi. Pour viter cela, les CSS possdent deux slecteurs spciaux appels slecteurs de pseudo-classe de lien: :link, utilis pour cibler les liens qui nont pas t visits et :visited, pour cibler les liens visits. Dans cet exemple, tous les liens non visits passent en bleu et tous les liens visits en vert:
a:link {color: blue;} a:visited {color: green;} /* Passe les liens non visits en bleu */ /* Passe les liens visits en vert */

Deux autres slecteurs peuvent tre utiliss pour la mise en forme des liens: les slecteurs de pseudo-classe dynamique :hover et :active. Le premier, :hover, est utilis pour cibler

92

Matrise des CSS

les lments pendant leur survol, et le second, :active, cible les lments quand ils sont activs. Dans le cas des liens, lactivation intervient lorsque lutilisateur clique dessus. Dans cet exemple, les liens passent en rouge lorsque lutilisateur les survole ou clique dessus:
a:hover, a:active { color: red;}

Pour vous assurer que vos pages sont accessibles du mieux possible, vous avez tout intrt ajouter une pseudo-classe :focus vos liens lorsque vous dfinissez vos tats de survol. Elle permet aux liens de rcuprer les mmes styles et, cela, quon y accde avec la touche Tab ou quon les survole avec le curseur.
a:hover, a:focus { color: red;}

Dautres lments peuvent aussi utiliser les slecteurs de pseudo-classe :hover, :active ou :focus. Par exemple, vous pourriez ajouter une pseudo-classe :hover aux lignes de tableau, une pseudo-classe :active aux boutons denvoi ou une pseudo-classe :focus aux champs de saisie afin de signaler diffrentes formes dinteractivit. Sachez que, malheureusement, la diffrence des navigateurs modernes, Internet Explorer7 et ses versions antrieures ne prennent en charge les slecteurs de pseudo-classe que sur les liens.
/* passe les lignes de tableau en jaune lors du survol */ tr:hover { background: yellow; } /* afche les boutons denvoi en jaune quand on clique dessus dans certains navigateurs */ input[type="submit"]:active { background:yellow; } /* passe les champs de saisie en jaune lorsquils sont slectionns */ input:focus { background:yellow; }

La plupart des dveloppeurs utilisent ces slecteurs dabord pour dsactiver le soulignement des liens, puis pour le ractiver en cas de survol ou de clic. Il suffit pour cela dattribuer la valeur none la proprit text-decoration des liens visits et non visits, puis la valeur underline celle des liens actifs ou survols:
a:link, a:visited {text-decoration: none;} a:hover, a:focus, a:active {text-decoration: underline;}

Lordre des slecteurs est trs important dans cet exemple. Sil est invers, les styles de survol et de lien actif ne fonctionnent pas.
a:hover, a:focus, a:active {text-decoration: underline;} a:link, a:visited {text-decoration: none;}

Tout vient du systme de cascade. Au Chapitre1, vous avez appris que lorsque deux rgles possdent la mme spcificit, cest la dernire tre dfinie qui prend le dessus. Dans le cas prsent, les deux rgles possdent la mme spcificit. Les styles :link et :visited

Mise en forme des liens

93

viennent donc redfinir les styles :hover et :active. Pour viter cela, il est judicieux dappliquer les styles de liens dans lordre suivant:
a:link, a:visited, a:hover, a:focus, a:active

En anglais, une petite formule a t retenue pour se remmorer cet ordre: "Lord Vader Hates Furry Animals" (Darth Vader naime pas les btes poil). Si vous naimez pas langlais, creusez-vous la tte et trouvez une formule pour L-V-H-F-A!

Soulignements amusants
Du point de vue de lutilisabilit et de laccessibilit, il est important que vos liens puissent se signaler par dautres moyens que leur seule couleur. Trop de malvoyants ont du mal faire la distinction entre les couleurs de faible contraste, notamment sur le texte de petite taille. Par exemple, ceux qui ne distinguent pas les couleurs ne peuvent pas diffrencier certaines combinaisons de couleurs dont les niveaux de luminosit ou de saturation sont trop proches. Cest pour cette raison que les liens sont souligns par dfaut.

Embellissement simple des liens

Les concepteurs naiment gnralement pas les liens souligns, qui alourdissent la page et lencombrent. Si vous dcidez de supprimer les soulignements, vous pouvez passer les liens en gras. La page a lair moins charge, mais les liens sont clairement visibles:
a:link, a:visited { text-decoration: none; font-weight: bold; }

Vous pouvez ensuite rappliquer les soulignements en cas de survol ou de slection des liens, afin de renforcer leur caractre interactif:
a:hover, a:focus, a:active { text-decoration: underline; font-weight: bold; }

Il est aussi possible de crer un soulignement discret avec des bordures. Dans cet exemple, le soulignement par dfaut est remplac par une ligne en pointill moins imposante. Lorsque lutilisateur survole le lien ou clique dessus, la ligne devient continue afin dindiquer visuellement que quelque chose vient de se passer:
a:link, a:visited { text-decoration: none; border-bottom: 1px dotted #000; } a:hover, a:focus, a:active { border-bottom-style: solid; }

94

Matrise des CSS

Soulignement de liens originaux

Vous pouvez crer de trs intressants effets en utilisant des images pour crer les soulignements de liens. Par exemple, jai cr une image de soulignement trs simple constitue de lignes diagonales (voir Figure5.1).
Figure5.1
Image de soulignement simple.

Vous pouvez ensuite appliquer cette image aux liens laide du code suivant:
a:link, a:visited { color:#666; text-decoration: none; background: url(/img/underline1.gif) repeat-x left bottom; }

Le rsultat mis en forme est prsent la Figure5.2.

Figure5.2
Soulignement de lien personnalis.

Vous ntes pas limit aux styles de liens ou de liens visits. Dans lexemple suivant, jai cr une image GIF anime pour les tats de survol et de slection que japplique avec ce code CSS:
a:hover, a:focus, a:active { background-image: url(/img/underline1-hover.gif); }

Lorsque vous survolez le lien ou que vous cliquez dessus, les lignes diagonales semblent dfiler de gauche droite, ce qui cre un intressant effet de tournoiement. Tous les navigateurs ne prennent pas en charge les animations dimage, mais ceux qui ne le font pas affichent gnralement la premire image de lanimation, si bien que leffet rtrograde lgamment sous la forme dun style plus simple dans les anciens navigateurs. Utilisez les animations avec prudence, car elles peuvent gnrer des problmes daccessibilit pour certains. En cas de doute, vrifiez toujours les directives pour laccessibilit aux contenus web (WCAG1.0) ladresse www.w3.org/TR/WAI-WEBCONTENT.

Style de liens visits

Les concepteurs et les dveloppeurs oublient souvent le style des liens visits auxquels ils finissent par donner le mme aspect quaux liens non visits. Le choix dun style de lien visit diffrent peut cependant faciliter lorientation des utilisateurs en signalant les pages ou les sites dj visits afin dviter des marches arrire inutiles. Vous pouvez en crer un, trs simple, en ajoutant une case cocher chaque lien visit:

Mise en forme des liens

a:visited { padding-right: 20px; background: url(/img/check.gif) no-repeat right middle; }

95

Mise en forme des cibles des liens

En plus de crer des liens vers des documents spcifiques, vous pouvez aussi en crer avec un identificateur de fragment qui renvoie vers une partie prcise dune page. Pour cela, vous devez ajouter un caractre dise suivi par lID de llment vers lequel le lien doit pointer, la fin de lattribut href. Cest trs utile si vous souhaitez pointer vers un commentaire en particulier dans un fil de commentaires assez long. Par exemple, supposons que vous souhaitiez faire un lien vers le troisime commentaire de cette page:
<a href="http://example.com/story.htm#comment3"> A great comment by Simon </a>

Lorsque vous cliquez sur ce lien, vous tes conduit au document appropri et la page dfile directement jusqu llment comment3. Malheureusement, si la page est assez dense, cest souvent difficile de savoir quel lment a t cibl par le lien. Pour rsoudre ce problme, la spcification CSS3 permet de mettre en forme llment cible laide de la pseudo-classe :target. Dans lexemple suivant, je signale llment cible en lui donnant un arrire-plan jaune (voir Figure5.3).
.comment:target { background-color: yellow; }

Figure5.3
Le troisime commentaire est signal avec un arrireplan jaune lorsquun lien pointe vers lui, grce au slecteur :target.

96

Matrise des CSS

Si vous souhaitez faire mieux encore, vous pouvez choisir dattribuer llment une image darrire-plan anime qui sestompe en passant du jaune au blanc, afin de simuler la technique de fondu jaune popularise par les sites comme 37Signals.
.comment:target { background-image: url(img/fade.gif); }

Le slecteur de cible est pris en charge par toutes les versions rcentes de Safari et de Firefox, mais il nest pas reconnu par Internet Explorer ce jour.

Diffrenciation des types de liens

Dans de nombreux sites, il est difficile de dire si un lien pointe vers une autre page ou vers un autre site. Combien de fois vous est-il arriv de cliquer sur un lien en pensant atterrir sur une autre page du site pour vous retrouver soudain transport dans un autre univers? Pour rsoudre ce problme, de nombreux sites ouvrent les liens externes dans une nouvelle fentre. Cette solution nest cependant pas idale, car elle dpossde lutilisateur du contrle de la navigation et peut accumuler les fentres les unes sur les autres. Elle peut aussi poser des problmes aux utilisateurs de lecteurs dcran si la nouvelle fentre nest pas annonce. Les nouvelles fentres interrompent aussi la continuit de la navigation avec le bouton de page prcdente, car il est impossible de revenir en arrire vers le prcdent cran. Lune des solutions possibles consiste signaler les liens externes dune manire ou dune autre et laisser le choix lutilisateur de quitter le site ou non, douvrir le lien dans une nouvelle fentre ou, comme il est plus habituel de le faire de nos jours, dans un nouvel onglet. Vous pouvez ajouter une petite icne ct de tous les liens externes. Certains sites, comme www.wikipedia.com, le font dj et une convention qui illustre les liens externes avec licne dune bote surmonte dune flche semble merger (voir Figure5.4).
Figure5.4
Icne de lien externe.

Le moyen le plus simple dinclure une icne de lien externe dans les pages consiste ajouter une classe tous les liens externes et appliquer licne comme image darrire-plan. Dans lexemple suivant, jai cr un espace pour licne en donnant au lien un lger remplissage droit, puis en appliquant licne comme image darrire-plan en haut droite du lien (voir Figure5.5).
.external { background: url(/img/externalLink.gif) no-repeat right top; padding-right: 10px; }

Mise en forme des liens

Figure5.5
Mise en forme des liens externes.

97

Cette mthode fonctionne, mais elle nest pas particulirement intelligente ni lgante, car vous devez ajouter manuellement cette classe chaque lien externe. Ne serait-il pas intressant que les CSS puissent dterminer votre place ce qui est ou nest pas un lien externe? En fait, cest parfaitement possible, grce aux slecteurs dattribut. Comme vous lavez appris au Chapitre1, les slecteurs dattribut permettent de cibler un lment en fonction de lexistence ou de la valeur dun attribut. La spcification CSS3 tend cette capacit la mise en correspondance de sous-chanes. Avec ces slecteurs, on peut cibler un lment en tablissant la correspondance entre un fragment de texte choisi et une partie de la valeur dun attribut. La CSS3 nest pas encore une spcification officielle, aussi lutilisation de ces slecteurs avancs peut-elle invalider votre code. Cependant, la majorit des navigateurs compatibles avec les standards les prennent en charge. Cette technique fonctionne en ciblant dabord tous les liens qui commencent par le texte http: avec le slecteur dattribut [att^=val]:
a[href^="http:"] { background: url(/img/externalLink.gif) no-repeat right top; padding-right: 10px; }

Ce code doit mettre en valeur tous les liens externes. Il slectionne cependant aussi tous les liens internes qui utilisent des URL absolues et non relatives. Pour viter cela, vous devez redfinir tous les liens vers votre site ainsi: supprimez licne de lien externe, retrouvez les liens qui pointent vers votre nom de domaine, supprimez licne de lien externe et redfinissez le remplissage droit (voir Figure5.6).
a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"] { background-image: none; padding-right: 0; }

Figure5.6
Cette page affiche les liens externes diffremment des liens internes.

98

Matrise des CSS

La plupart des navigateurs modernes prennent en charge cette technique, mais les plus anciens, comme Internet Explorer6 et ses versions antrieures, lignorent tout simplement. Si vous le souhaitez, vous pouvez tendre cette mthode en distinguant aussi les liens de messagerie. Dans lexemple suivant, jajoute une petite icne de-mail tous les liens mailto:
a[href^="mailto:"] { background: url(img/email.png) no-repeat right top; padding-right: 10px; }

Vous pouvez mme signaler les protocoles non standard comme le protocole de messagerie instantane AOL (AIM), avec une petite icne de personnage AIM (voir Figure5.7):
a[href^="aim:"] { background: url(img/im.png) no-repeat right top; padding-right: 10px; } <a href="aim:goim?screenname=andybudd">instant message</a>

Figure5.7
Styles de liens de-mail et de messagerie instantane.

Signalement de documents tlchargeables et de flux

Quelle frustration que de cliquer sur un lien pour accder une autre page et de dcouvrir que le site lance le tlchargement dun PDF ou dun document Word! Par chance, les CSS peuvent aider distinguer ces types de liens galement. Le slecteur dattribut [att$=val] peut cibler les attributs qui se terminent par une valeur particulire, comme .pdf ou .doc:
a[href$=".pdf"] { background: url(img/pdfLink.gif) no-repeat right top; padding-right: 10px; } a[href$=".doc"] { background: url(img/wordLink.gif) no-repeat right top; padding-right: 10px; }

Comme pour les prcdents exemples, vous pouvez donc signaler les liens vers les documents Word ou PDF avec leur propre icne, afin de prvenir les utilisateurs quils cliquent sur un document tlchargeable au lieu dun lien vers une autre page. De nombreux sites proposent des flux RSS avec des liens que les utilisateurs doivent copier dans leurs lecteurs de flux. Malheureusement, ceux qui cliquent par inadvertance sur les liens de ce type se trouvent conduits vers une page de donnes apparemment insense. Pour viter cette surprise, vous pouvez signaler les flux RSS laide dune mthode similaire, en affichant votre propre icne RSS:

Mise en forme des liens

a[href$=".rss"], a[href$=".rdf"] { background: url(img/feedLink.gif) no-repeat right top; padding-right: 10px; }

99

Toutes ces techniques peuvent contribuer amliorer le confort dusage de votre site. En signalant les liens externes ou les documents tlchargeables, vous indiquez aux utilisateurs quoi ils doivent sattendre en cliquant sur un lien. Vous leur vitez donc dtre frustrs et davoir revenir sur leurs pas. Internet Explorer6 et ses versions antrieures ne prennent malheureusement pas en charge le slecteur dattribut. Vous pouvez cependant crer un effet semblable en ajoutant une classe chaque lment grce du JavaScript et au DOM. Lexcellente fonction getElementBySelector de Simon Willison en est lun des meilleurs exemples. Pour plus dinformations ce sujet, consultez la page (en anglais) http://simonwillison.net/2003/Mar/25/getElementsBySelector/. jQuery permet aussi de raliser une opration trs similaire.

Cration de liens qui ressemblent des boutons

Les ancres sont des lments incorpors. Cela signifie quelles ne sactivent que lorsque vous cliquez sur le contenu du lien. Pourtant, il peut arriver que vous souhaitiez crer des mcanismes plus proches des boutons, avec des zones ractives plus larges. Pour cela, vous devez attribuer la valeur block la proprit display et modifier la largeur, la hauteur et les autres proprits de llment pour crer le style et la zone ractive dsirs.
a { display: block; width: 6.6em; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid #66a300; background-color: #8cca12; color: #fff; }

Le lien rsultant est prsent la Figure5.8.

Figure5.8
Lien mis en forme la manire dun bouton.

prsent, le lien saffiche comme un lment de niveau bloc dans lequel vous pouvez cliquer nimporte o pour activer le lien. Si vous examinez le code CSS, vous verrez que la largeur a t explicitement dfinie en cadratins (em). Par nature, les lments de niveau bloc stendent sur toute la largeur disponible. Si la largeur de leur lment parent dpasse celle requise pour le lien, il faut attribuer la largeur dsire au lien. Il le faudrait si vous souhaitiez utiliser un lien de ce type dans

100

Matrise des CSS

la zone de contenu principal de votre page, mais si vos liens se trouvent dans une colonne latrale, vous pouvez sans doute vous contenter de dfinir la largeur de la colonne sans vous proccuper de la largeur des liens. Vous vous demandez peut-tre pourquoi jutilise line-height pour contrler la hauteur du bouton au lieu de la proprit height. Il sagit, en fait, dune astuce pour centrer verticalement le texte dans le bouton. Si vous dfinissez la proprit height, vous aurez certainement besoin dutiliser un remplissage pour "pousser" le texte vers le bas et simuler un centrage vertical. Le texte est en revanche toujours centr verticalement dans une bote incorpore, si bien quen modulant line-height, on sassure quil figure toujours au milieu de la bote. Il y a un inconvnient, toutefois. Si le texte du bouton stend sur deux lignes, il devient deux fois plus haut quon ne le souhaite. Le seul moyen dviter cela est de redimensionner les boutons et le texte de manire que ce dernier ne soit pas renvoy la ligne ou, tout le moins, ne le fasse pas tant que le texte conserve une longueur raisonnable. Si vous choisissez cette technique, assurez-vous de ne lutiliser que sur des lments de liens simples et non sur des lments qui enclenchent des mises jour du serveur. Sans cela, vous risqueriez de produire quelques effets indsirables. Lorsque lacclrateur de Google a t lanc, certains utilisateurs ont constat que le contenu dans leurs applications web et de leurs applications de gestion de contenu disparaissait mystrieusement. Parfois, le contenu entier dun site pouvait se volatiliser pendant la nuit. Les auteurs de ces outils avaient en fait utilis des liens dancre au lieu dlments de formulaire pour leurs boutons de suppression. Lacclrateur Google suivait ces liens afin de les mettre en cache et supprimait involontairement le contenu! Les robots des moteurs de recherche peuvent avoir le mme effet, en supprimant de manire rcursive de vastes pans de donnes. Voil pourquoi vous ne devez jamais utiliser de liens pour oprer des changements sur le serveur. Ou pour le dire en termes techniques, les liens ne doivent tre utiliss que pour des requtes GET et jamais pour des requtes POST.

Survol simple
lpoque, quand on vivait la dure, il fallait programmer de grandes et complexes fonctions JavaScript pour crer des effets de survol. La pseudo-classe :hover permet maintenant de spargner ces efforts. On peut ainsi tendre lexemple prcdent afin dinclure un effet de survol simple en dfinissant la couleur darrire-plan et la couleur du texte du lien survol (voir Figure5.9):
a:hover, a:focus { background-color: #f7a300; border-color: #ff7400; }

Figure5.9
Style de survol signalant une zone ractive.

Mise en forme des liens

101

Survol avec images

Le changement des couleurs darrire-plan fonctionne bien pour les boutons simples, mais, pour des boutons plus sophistiqus, vous chercherez sans doute utiliser des images darrire-plan. Dans lexemple suivant, jai cr trois images de bouton : une pour ltat par dfaut, une autre pour ltat de survol et le focus et une dernire pour ltat actif (voir Figure5.10).
Figure5.10
Les images pour ltat par dfaut, le survol et ltat actif du bouton.

Le code de cet exemple ressemble celui de lexemple prcdent. La principale diffrence tient lutilisation des images darrire-plan au lieu des bordures et des couleurs darrire-plan.
a:link, a:visited { display: block; width: 203px; height: 72px; text-indent: -1000em; background: url(/img/button.png) left top no-repeat; } a:hover, a:focus { } a:active { background-image: url(/img/button-active.png); } background-image: url(/img/button-over.png);

Cet exemple utilise des boutons de largeur et de hauteur fixes. Jai donc dfini des dimensions explicites en pixels dans le code CSS. Pour obtenir le traitement prcis que je souhaitais pour le texte, jai inclus le texte du bouton sur limage puis sorti le texte dancre de lcran laide un retrait ngatif trs grand. Rien nempche cependant de crer des images de bouton de grand format ou dutiliser une combinaison de couleurs darrire-plan et dimages pour crer un bouton fluide ou lastique.

102

Matrise des CSS

Survol style Pixy

Le principal inconvnient avec la mthode des images multiples tient au lger dlai quelle gnre quand les navigateurs chargent limage de survol la premire fois. Ce dlai peut provoquer un effet de clignotement indsirable et donner limpression que les boutons ragissent mal. On peut prcharger les images de survol en les appliquant comme arrire-plan llment parent. Mais il existe un autre moyen. Au lieu de permuter plusieurs images darrire-plan, utilisez une seule image et dcalez sa position darrire-plan. Le recours une unique image a lavantage de rduire le nombre de requtes serveur en plus de permettre de conserver tous les tats de bouton au mme endroit. Cette mthode est appele "mthode Pixy", du surnom de son crateur, Petr Stancek (pour plus dinformations ce sujet, consultez son site web: http://wellstyled.com/css-nopreload-rollovers.html). Commencez par crer une image de bouton combin (voir Figure5.11). Dans le cas prsent, je limite le bouton un tat relev, un tat de survol et un tat actif. Vous pouvez cependant aussi inclure un tat visit si vous le souhaitez.
Figure5.11
Les trois tats de bouton sous forme dimage unique.

Le code est presque identique lexemple prcdent, mais cette fois, vous alignez limage darrire-plan de faon que ltat normal se trouve au centre, puis vous dcalez larrire-plan vers la droite ou vers la gauche pour les tats de survol et actif.
a:link, a:visited { display: block; width: 203px; height: 72px; text-indent: -1000em; background: url(/img/buttons.png) -203px 0 no-repeat; } a:hover, a:focus { background-position: right top; } a:active { background-position: left top; }

Internet Explorer sentte malheureusement faire un nouvel aller-retour vers le serveur pour requrir une nouvelle image alors que vous ne faites que modifier lalignement de la mme image. Cette action provoque un lger clignotement, qui peut tre agaant. Pour lviter, appliquez ltat de survol, non pas au lien lui-mme, mais son lment parent, par exemple au paragraphe qui le contient:
p { background: url(/img/ buttons.png) no-repeat right top; }

Mise en forme des liens

103

Limage disparat aussi un instant pendant son chargement, mais cette fois, cest la mme image qui apparat en dessous, ce qui permet de masquer leffet de clignotement. Lautre astuce pour supprimer le clignotement consiste inclure la ligne de code suivante dans le fichier CSS spcifique dInternet Explorer, qui active la mise en cache de larrire-plan.
html { lter: expression(document.execCommand("BackgroundImageCache", false, true)); }

Sprites CSS
Les requtes multiples au serveur peuvent avoir un effet dsastreux sur les performances des sites. La mthode Pixy vise donc rduire le nombre de requtes en incluant tous les tats du bouton dans une unique image. Mais pourquoi sarrter en si bon chemin? Vous pouvez rduire le nombre dappels au serveur deux ou trois. Cest exactement ce que font les sprites CSS une unique image contenant une multitude dicnes, de boutons et dautres images. De nombreux sites web importants utilisent cette technique, dont la page daccueil de Yahoo!, ou bien encore notre site Clearleft, pour sa barre de navigation (voir Figure5.12).
#nav li a { display: block; text-indent: -9999px; height: 119px; width: 100px; background-image: url(/img/nav.png); background-repeat: no-repeat; } #nav li.home a, #nav li.home a:link, #nav li.home a:visited { background-position: 0 0; } #nav li.home a:hover, #nav li.home a:focus, #nav li.home a:active { background-position: 0 -119px; } #nav li.who-we-are a, #nav li.who-we-are a:link, #nav li.who-we-are a:visited { background-position: -100px 0; } #nav li.who-we-are a:hover, #nav li.who-we-are a:focus, #nav li.who-we-are a:active { background-position: -100px -119px; }

104

Matrise des CSS

Figure5.12
Le fichier de sprites CSS utilis sur le site Clearleft.

Cette technique permet de rduire le nombre de requtes transmises par le navigateur web au serveur et dacclrer considrablement les temps de tlchargement. En outre, avec les sprites, les boutons, les icnes et les diverses images sont conservs dans un mme emplacement, afin de faciliter la gestion. On y gagne donc sur tous les plans.

Survol CSS3
La spcification CSS3 inclut un certain nombre de proprits comme text-shadow, boxshadow et border-radius pour crer des boutons sophistiqus sans utiliser la moindre image. Pour crer ce genre de bouton, commencez par le code de notre premier exemple:
a { display: block; width: 6.6em; height: 1.4em; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid #66a300; background-color: #8cca12; color: #fff; }

Ensuite, ajoutez des bords arrondis et une ombre porte. Vous pouvez aussi attribuer au texte du bouton une lgre ombre porte (voir Figure5.13).
a { display: block; width: 6.6em; height: 1.4em; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid #66a300; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background-color: #8cca12; color: #fff; text-shadow: 2px 2px 2px #66a300;

Mise en forme des liens

-moz-box-shadow: 2px 2px 2px #ccc; -webkit-box-shadow: 2px 2px 2px #ccc; box-shadow: 2px 2px 2px #ccc; }

105

Figure5.13
Un bouton bords arrondis ralis entirement en CSS.

Pour recrer le dgrad, Safari4 bta prend en charge une valeur propritaire appele webkit-gradient. En temps normal, je ne conseille jamais dutiliser du code propritaire, mais ce cas est rvlateur de la direction que pourraient emprunter les CSS lavenir. Cette valeur propritaire prend un certain nombre darguments, dont le type de dgrad (linaire ou radial), son orientation (ici, du haut gauche vers le bas droite), une couleur de dpart, une couleur finale et dventuelles tapes intermdiaires. videmment, si vous ne souhaitez pas utiliser ce code propritaire, vous pouvez raliser votre propre image de dgrad la place.
a { display: block; width: 6.6em; height: 1.4em; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid #66a300; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background-image: -webkit-gradient(linear, left top, left bottom, from(#abe142), to(#67a400)); background-color: #8cca12; color: #fff; text-shadow: 2px 2px 2px #66a300; -moz-box-shadow: 2px 2px 2px #ccc; -webkit-box-shadow: 2px 2px 2px #ccc; box-shadow: 2px 2px 2px #ccc; }

Pour finir, Safari inclut une autre proprit propritaire, appele box-reect, qui permet de crer des reflets dobjets. Elle contient plusieurs arguments, dont la position et la distance du reflet ainsi quune image de masque. Dtail intressant, vous pouvez utiliser la valeur webkit-gradient pour gnrer ce masque de manire automatique. Ici, je positionne le reflet 2pixels en dessous du bouton et jutilise un masque de fondu vers le blanc (voir Figure5.14).
a { display: block; width: 6.6em;

106

Matrise des CSS

height: 1.4em; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid #66a300; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background-image: -webkit-gradient(linear, left top, left bottom, from(#abe142), to(#67a400)); background-color: #8cca12; color: #fff; text-shadow: 2px 2px 2px #66a300; -moz-box-shadow: 2px 2px 2px #ccc; -webkit-box-shadow: 2px 2px 2px #ccc; box-shadow: 2px 2px 2px #ccc; -webkit-box-reect: below 2px -webkit-gradient (linear, left top, left bottom, from(transparent), color-stop(0.52, transparent), to(white)); }

Figure5.14
Ce bouton bords arrondis a t ralis avec lextension CSS de Safari.

Un dbat sest engag pour savoir si ces types deffets devaient ou non tre raliss en CSS. Il nest donc pas certain que ces proprits finissent par trouver place dans la spcification officielle. Comme ces techniques sont en outre mal prises en charge par les navigateurs, il nest pas judicieux de les utiliser dans un environnement de production. Cela ne doit cependant pas vous empcher de vous amuser dans vos sites personnels si vous comprenez bien quil sagit de code CSS invalide qui pourra tre supprim ou modifi dans les prochaines versions du navigateur.

Info-bulles CSS
Les info-bulles sont ces petits encarts de texte jaunes qui saffichent dans certains navigateurs lorsque vous survolez des lments qui possdent une balise de titre. Plusieurs dveloppeurs ont cr leurs propres info-bulles en combinant du JavaScript et des CSS. Il est cependant possible de crer des info-bulles entirement en CSS laide des techniques de positionnement. Pour bien fonctionner, cette technique requiert un navigateur moderne compatible avec les standards, comme Firefox. Elle nest pas inclure dans larsenal des outils quotidiens, mais elle montre combien les CSS avances sont efficaces et fait imaginer ce qui sera possible quand la prise en charge samliorera. Comme avec tous les exemples de ce livre, vous devez commencer par du code HTML bien structur et smantiquement cohrent:
<p> <a href="http://www.andybudd.com/" class="tooltip">

Mise en forme des liens

107

Andy Budd<span> (ce site web est gnial) </span></a> est un dveloppeur web rsidant Brighton en Angleterre. </p>

Jai attribu au lien la classe tooltip afin de le diffrencier des autres liens. lintrieur, jai ajout le texte que je souhaitais afficher comme texte du lien, suivi du texte de linfobulle entour dune balise span. Jai mis le texte dinfo-bulle entre parenthses afin que la phrase conserve son sens mme si les styles sont dsactivs. La premire chose faire est de dfinir la proprit position de lancre en lui attribuant la valeur relative. Vous pouvez ainsi positionner le contenu de la balise span de manire absolue, relativement la position de son ancre parente. Le texte de linfo-bulle ne doit pas safficher au dpart. Vous devez donc attribuer la valeur none sa proprit display:
a.tooltip { position: relative; } a.tooltip span { display: none; }

Le contenu de la balise span doit safficher quand lutilisateur survole lancre. Pour cela, vous devez attribuer la valeur block la proprit display de la balise span, mais uniquement lorsque lutilisateur survole le lien. Pour le moment, si vous testez le code et survolez le lien, vous verrez le texte de la balise span ct du lien. Pour positionner le contenu de la balise span en dessous et droite de lancre, vous devez attribuer la valeur absolute sa proprit position et la positionner 1cadratin (em) du haut de lancre et 2cadratins de la gauche.
a.tooltip:hover span { display: block; position: absolute; top: 1em; left: 2em; }

Rappelez-vous quun lment positionn de manire absolue lest en fonction de son anctre positionn le plus proche ou, en son absence, de llment racine. Dans cet exemple, nous avons positionn lancre, si bien que la balise span lest en fonction de celle-ci. Cest le principe fondamental de cette technique. Il ne reste plus qu ajouter une mise en forme pour faire ressembler la balise span une vritable info-bulle. Vous pouvez dfinir un remplissage, une bordure et une couleur darrire-plan:
a.tooltip:hover span, a.tooltip:focus span { display:block; position:absolute; top:1em;

108

Matrise des CSS

left:2em; padding: 0.2em 0.6em; border:1px solid #996633; background-color:#FFFF66; color:#000; }

Dans Firefox, le rsultat doit ressembler celui de la Figure5.15.

Figure5.15
Une info-bulle entirement ralise en CSS.

En rsum
Vous avez appris mettre en forme des liens de plusieurs manires et vous savez maintenant le faire en fonction du site ou du fichier vers lequel ils pointent, transformer des liens en boutons et crer des effets de survol en utilisant des couleurs ou des images. Vous pouvez mme crer des effets avancs comme des info-bulles entirement en CSS. Au chapitre suivant, vous allez apprendre manipuler des listes. Grce aux acquis de ce chapitre, vous crerez des listes de navigation, des cartes-images et des survols distants entirement en CSS. Amusez-vous!

Mise en forme des listes et cration de barres de navigation

Lhomme a par nature tendance organiser le monde qui lentoure. Les scientifiques crent des listes danimaux, de plantes et dlments chimiques. Les magazines crent des listes prsentant les meilleurs films, les dernires tendances de la mode et les clbrits les plus mal habilles. Les gens font des listes de courses, des listes de choses faire et crivent des listes au Pre Nol. Tout le monde adore faire des listes. Les listes permettent de regrouper des lments apparents et, ce faisant, de leur donner une signification et une structure. La plupart des pages web en contiennent, quil sagisse de listes des derniers articles, de listes de liens vers des pages web favorites ou de listes de liens vers dautres parties du site. Le fait didentifier ces lments sous forme de liste et de les marquer de la sorte peut aider structurer les documents HTML et donc fournir des ancrages utiles pour appliquer les styles. Au cours de ce chapitre, vous apprendrez : mettre en forme des listes avec des CSS; utiliser des images darrire-plan en guise de puces; crer des barres de navigation verticale et horizontale; crer des systmes de navigation lastiques onglets; crer des menus droulants entirement en CSS; crer des cartes-images CSS; crer des survols distants; utiliser des listes de dfinitions.

Mise en forme de base des listes

La mise en forme de base des listes est trs simple. Supposons que vous commenciez par cette simple liste de tches faire:
<ul> <li>Lire les e-mails</li> <li>crire un chapitre</li> <li>Faire les courses</li> <li>Faire manger</li> <li>Regarder Lost</li> </ul>

Pour ajouter une puce personnalise, vous pouvez utiliser la proprit list-style-image. Vous naurez cependant pas grand contrle sur la position de la puce. Prfrez plutt dsactiver les puces des listes et ajouter les vtres sous la forme dimages darrire-plan.

110

Matrise des CSS

Vouspourrez ensuite utiliser les proprits de positionnement de limage darrire-plan pour contrler prcisment lalignement des puces. Les versions plus anciennes dInternet Explorer et dOpera contrlent le retrait des listes avec la marge gauche, alors que la plupart des navigateurs modernes, dont Firefox et Safari, utilisent le remplissage gauche. cet gard, la premire chose faire est de supprimer ce retrait en ramenant zro la marge et le remplissage de la liste. Pour supprimer la puce par dfaut, choisissez none (aucun) pour le type de style de la liste:
ul { margin: 0; padding: 0; list-style-type: none; }

Rien de plus simple que dajouter une puce personnalise. Le remplissage du ct gauche de llment de liste cre lespace ncessaire pour la puce, laquelle est ensuite applique sous forme dimage darrire-plan llment de liste. Si celui-ci doit couvrir plusieurs lignes, il faudra peut-tre positionner la puce vers le haut ou prs du haut de llment de liste. Si vous savez, au contraire, que le contenu des lments de la liste ne stendra pas sur plus dune ligne, vous pouvez centrer verticalement la puce en dfinissant la position verticale avec la valeur middle ou 50%:
li { background: url(/img/bullet.gif) no-repeat 0 50%; padding-left: 30px; }

La liste rsultante est prsente la Figure6.1.

Figure6.1
Une liste simple mise en forme avec des puces personnalises.

Cration dune barre de navigation verticale

En combinant lexemple prcdent avec les techniques de mise en forme apprises au Chapitre5, vous pouvez crer des barres de navigation verticales sophistiques avec des survols CSS, comme celle prsente la Figure6.2.
Figure6.2
Barre de navigation verticale mise en forme.

Comme toujours, vous devez commencer par un balisage smantique de qualit:

Mise en forme des listes et cration de barres de navigation

<ul class="nav"> <li><a href="home.htm">Accueil</a></li> <li><a href="about.htm">A propos</a></li> <li><a href="services.htm">Nos services</a></li> <li><a href=work.htm>Notre travail</a></li> <li><a href="news.htm">Actualits</a></li> <li><a href="contact.htm">Contact</a></li> </ul>

111

La premire chose faire est de supprimer les puces par dfaut et de ramener zro la marge et le remplissage:
ul.nav { margin: 0; padding: 0; list-style-type: none; }

Vous pouvez ensuite commencer disposer la mise en forme graphique. Ici, nous donnons au menu de navigation un arrire-plan vert clair et une bordure vert sombre. Nous dfinissons aussi la largeur de la liste de navigation en cadratins (em).
ul.nav { margin: 0; padding: 0; list-style-type: none; width: 8em; background-color: #8BD400; border: 1px solid #486B02; }

Au lieu dappliquer la mise en forme aux lments de la liste, on lapplique aux liens dancre lintrieur, grce quoi on obtient une meilleure compatibilit entre les navigateurs. Pour crer une zone ractive analogue un bouton, vous devez attribuer la valeur block la proprit display des ancres. Les liens dancre stirent alors de manire couvrir tout lespace disponible, qui correspond ici la largeur de la liste. Vous pouvez dfinir la largeur des ancres explicitement, mais jai constat que le code tait plus facile grer quand on dfinissait la largeur de la liste parente. Les deux dernires rgles sont simplement des ajouts de mise en forme correspondant la couleur du texte du lien et la dsactivation des soulignements.
ul.nav a { display: block; color: #2B3F00; text-decoration: none; }

Pour crer leffet de biseau sur les lments de menu, vous devez attribuer la bordure suprieure une couleur plus claire que la couleur darrire-plan et la bordure infrieure une couleur plus sombre. ce stade, vous pouvez aussi insrer une image darrire-plan utiliser comme icne.

112

Matrise des CSS

ul.nav a { display: block; color: #2B3F00; text-decoration: none; border-top: 1px solid #E4FFD3; border-bottom: 1px solid #486B02; background: url(/img/arrow.gif) no-repeat 5% 50%; padding: 0.3em 1em; }

Idalement, jaurais dfini le positionnement de la flche 10 pixels du bord gauche de lancre. La spcification CSS nautorise cependant pas le mlange des units. Jai donc utilis un pourcentage la place. En vrit, la plupart des navigateurs acceptent les units multiples, et il me semble que cest un des rares points o la spcification a tort.

Avec toutes les bordures empiles les unes sur les autres, vous remarquerez que la bordure infrieure sur le dernier lien double la bordure infrieure de la liste. Dans le cas prsent, je men tiens au plus simple et je supprime la bordure infrieure de la liste. Si ce nest pas possible, on peut ajouter une classe sur le premier ou le dernier lment de la liste pour supprimer directement la bordure. lavenir, vous pourrez aussi utiliser la pseudo-classe :last-child, mais sa prise en charge par les navigateurs est cette heure encore limite.
ul.nav .last a { border-bottom: 0; }

La liste ressemble maintenant une barre de navigation verticale de fire apparence. Pour complter leffet, il ne reste qu appliquer les tats :hover, :focus et :selected. Pour cela, changez les couleurs de texte et darrire-plan. Vous pouvez aussi changer celles des bordures afin de crer un effet denfoncement du bouton. Ces styles sont appliqus aux liens dancre lorsque lutilisateur les survole. Ils sont galement appliqus toutes les ancres dont llment de liste parent reoit la classe selected.
ul.nav a:hover, ul.nav a:focus, ul.nav .selected a { color: #E4FFD3; background-color: #6DA203; }

Cette technique devrait maintenant fonctionner dans tous les principaux navigateurs lexception dInternet Explorer6 et de ses versions antrieures pour Windows. Internet Explorer6 ajoute inexplicablement un espace supplmentaire au-dessus et en dessous des lments de liste. Pour corriger ce bogue, vous devez dfinir la proprit display des lments de liste en lui attribuant la valeur inline:
ul.nav li { display: inline: /* :KLUDGE: Supprime lespace incongru dans IE/Win */ }

Et voil: vous avez maintenant une barre de navigation verticale mise en forme, complte, avec ses effets de survol.

Mise en forme des listes et cration de barres de navigation

113

Signaler la page courante dans la barre de navigation

Dans le prcdent exemple de barre de navigation verticale, jai utilis une classe pour signaler la page courante. Pour les petits sites, o la navigation est incorpore dans la page, vous pouvez ajouter simplement la classe dans chaque page. Pour les grands sites, il y a toutes les chances que la navigation se construise de manire dynamique, auquel cas la classe peut tre ajoute larrire-plan. Pour les sites de taille moyenne, o la navigation principale ne change pas, il est cependant courant dinclure la navigation sous forme de fichier externe. Dans ces cas, ne serait-il pas intressant de pouvoir signaler la page sur laquelle on se trouve sans avoir ajouter dynamiquement une classe au menu? Cest prcisment ce que permettent les CSS. Cette technique fonctionne par lajout dun ID ou dun nom de classe llment body de chaque page, qui indique dans quelle page ou quelle section se trouve lutilisateur. Ensuite, vous pouvez ajouter un ID ou un nom de classe correspondant chaque lment de la liste de navigation. La combinaison unique de lID de la balise body et de la classe ou de lID de la liste peut tre utilise pour marquer la page ou la section courante dans la barre de navigation du site. Considrez lexemple de code HTML suivant. La page courante est la page daccueil, comme lindique lID home de la balise body. Chaque lment de liste dans la navigation principale se voit attribuer un nom de classe construit partir du nom de la page laquelle est li llment de la liste.
<body id="home"> <ul class="nav"> <li class="home"><a href="home.htm">Accueil</a></li> <li class="about"><a href="about.htm">A propos</a></li> <li class="services"><a href="services.htm">Nos services</a></li> <li class="products"><a href="work.htm">Notre travail</a></li> <li class="news"><a href="news.htm">Actualits</a></li> <li class="contact"><a href="contact.htm">Contact</a></li> </ul> </body>

Pour signaler la page courante, vous pouvez alors simplement cibler la combinaison suivante dID et de noms de classes:
#home .nav .home a, #about .nav .about a , #news .nav .news a, #products .nav .products a, #services .nav .services a { background-position: right bottom; color: #fff; cursor: default; }

Lorsque lutilisateur se trouve sur la page daccueil, llment de navigation possdant la classe home affiche ltat slectionn, alors que dans la page "news", cest llment de

114

Matrise des CSS

navigation qui possde la classe news qui affiche ltat slectionn. Pour complter leffet, jai chang le style de curseur pour afficher le curseur de flche par dfaut. Si on survole le lien slectionn, le curseur ne change pas dtat: on nest donc pas tent de cliquer sur le lien vers la page o lon se trouve dj.

Cration dune barre de navigation horizontale simple

Imaginez que vous ayez une page de rsultats de recherche et que vous souhaitiez crer une liste de navigation pagine simple comme celle de la Figure6.3. Pour cela, vous devez commencer par crer une liste numrote de vos options de navigation.
<ol class="pagination"> <li><a href="search.htm?page=1" rel="prev">Prc</a></li> <li><a href="search.htm?page=1">1</a></li> <li class="selected">2</li> <li><a href="search.htm?page=3">3</a></li> <li><a href="search.htm?page=4">4</a></li> <li><a href="search.htm?page=5">5</a></li> <li><a href="search.htm?page=3" rel="next">Suiv</a></li> </ol>

Figure6.3
La barre de navigation horizontale des rsultats de recherche.

Vous remarquerez que jai utilis lattribut rel pour signaler les pages prcdente et suivante du jeu de rsultats. Cest un excellent moyen, qui va se rvler pratique par la suite, lorsque nous souhaiterons donner une autre apparence ces liens en particulier. Comme avec les autres exemples de liste du chapitre, vous devez commencer par supprimer les styles de marge, de remplissage et de liste par dfaut du navigateur. Bien des dveloppeurs et jen fais partie prfrent utiliser une rinitialisation globale au dbut de leur feuille de styles. Si vous le faites, sautez cette premire tape.
ol.pagination { margin: 0; padding: 0; list-style-type: none; }

Pour que les lments de la liste salignent horizontalement et non verticalement, attribuez la valeur inline leur proprit display. Pour la mise en forme des listes horizontales plus complexes, vous aurez cependant un meilleur contrle si vous faites flotter les lments puis si vous utilisez des marges pour les espacer les uns des autres.
ol.pagination li { oat: left; margin-right: 0.6em; }

Mise en forme des listes et cration de barres de navigation

115

Les lments de la liste saffichent maintenant tous horizontalement et vous pouvez commencer leur appliquer un traitement graphique. Dans cet exemple, nous souhaitons que tous les numros de page apparaissent dans un carr avec un arrire-plan gris. Lorsque lutilisateur survole ces liens, larrire-plan doit passer en bleu et le texte du lien devenir blanc.
ol.pagination a, ol.pagination li.selected { display: block; padding: 0.2em 0.5em; border: 1px solid #ccc; text-decoration: none; } ol.pagination a:hover, ol.pagination a:focus, ol.pagination li.selected { background-color: blue; color: white; }

Voil qui est parfait pour les numros de page, mais nous voulons donner une mise en forme lgrement diffrente aux liens Prcdent et Suivant. Pour cela, nous allons cibler leur attribut rel avec des slecteurs dattributs. Pour commencer, je ne souhaite pas que ces liens aient un effet de bordure. Je le dsactive donc.
ol.pagination a[rel="prev"], ol.pagination a[rel="next"] { border: none; }

Je voudrais aussi ajouter une flche de prsentation au dbut et la fin de la liste. On peut les intgrer directement dans le code HTML, mais il est aussi possible de les injecter avec des CSS, afin de pouvoir les modifier ou les supprimer par la suite. Pour utiliser des CSS, servez-vous des pseudo-slecteurs :before et :after en combinaison avec la proprit content.
ol.pagination a[rel="prev"]:before { content: "\00AB"; padding-right: 0.5em; } ol.pagination a[rel="next"]:after { content: "\00BB"; padding-left: 0.5em; }

La premire dclaration cible le lien dancre au dbut de la liste et ajoute, avant lui, une double flche vers la gauche avec le code de caractre "00AB". La seconde dclaration cible le dernier lien dancre et ajoute une double flche droite la fin. Et voil le rsultat: une barre de navigation pagine horizontale simple mais flexible.

116

Matrise des CSS

Cration dune barre de navigation graphique

Les barres de navigation simples sont excellentes pour le contenu pagin, mais vous souhaiterez sans doute crer des menus plus labors sur le plan graphique pour votre navigation principale. Dans cet exemple, vous allez voir comment crer une barre de navigation graphique comme celle de la Figure6.4.
Figure6.4
Barre de navigation horizontale.

Comme dans le prcdent exemple, vous devez commencer par une liste puces simple:
<ul class="nav"> <li><a href="home.htm">Accueil</a></li> <li><a href="about.htm">A propos</a></li> <li><a href="news.htm">Actualits</a></li> <li><a href="products.htm">Produits</a></li> <li><a href="services.htm">Services</a></li> <li><a href="clients.htm">Clients</a></li> <li><a href=case-studies.htm>Etudes de cas</a></li> </ul>

Ensuite, vous devez rduire zro le remplissage et les marges, ainsi que supprimer les puces par dfaut. Pour cet exemple, il faut que la barre de navigation horizontale fasse 72cadratins de large et possde un arrire-plan dgrad orange.
ul. nav { margin: 0; padding: 0; list-style: none; width: 72em; background: #FAA819 url(img/mainNavBg.gif) repeat-x; }

Pour le moment, la liste saffiche verticalement. Pour lafficher horizontalement, faites flotter gauche les lments de liste.
ul. nav li { oat: left; }

Rappelez-vous que, lorsquun lment flotte, il ne prend plus despace dans le flot du document. Du coup, la liste parente na plus de contenu; elle seffondre et larrire-plan de la liste disparat. Comme vous lavez appris au Chapitre3, il existe plusieurs moyens damener les lments parents contenir les enfants flottants. Lun deux consiste ajouter un lment de dgagement. Malheureusement, cela ncessite dajouter une balise inutile la page, ce quil vaut mieux viter. Lune des autres mthodes consiste faire flotter llment parent galement et le dgager plus bas, par exemple en utilisant le pied de page du site. La troisime mthode, que jadopte habituellement, passe par lutilisation doverow:hidden:
ul.nav { margin: 0; padding: 0;

Mise en forme des listes et cration de barres de navigation

list-style: none; width: 72em; overow: hidden; background: #FAA819 url(img/mainNavBg.gif) repeat-x; }

117

Comme avec le prcdent exemple de navigation, chacun des liens dans cette barre de navigation horizontale est cr de manire se comporter comme un bouton, car la valeur block a t attribue sa proprit display. Pour que chaque bouton ait une taille fixe, vous pouvez fixer explicitement sa hauteur et sa largeur, mais ce choix peut poser des problmes en termes de facilit de maintenance. Laissez plutt la largeur de chacun deux se caler sur la taille du texte dancre. Au lieu de dfinir une largeur explicite, japplique donc 3cadratins de remplissage aux cts gauche et droit de chaque lien dancre. Comme dans lexemple prcdent, on a centr le texte du lien verticalement en utilisant le paramtre de hauteur de ligne. Les soulignements de lien sont ensuite dsactivs, et la couleur du lien passe en blanc:
ul.nav a { display: block; padding: 0 3em; line-height: 2.1em; text-decoration: none; color: #fff; }

Je souhaite crer des sparateurs entre les liens dans la barre de navigation. Il est possible de dfinir des bordures horizontales sur llment de liste ou les ancres mais, par souci de simplicit, je prfre appliquer une image darrire-plan aux liens dancre.
ul.nav a { display: block; padding: 0 2em; line-height: 2.1em; background: url(img/divider.gif) repeat-y left top; text-decoration: none; color: #fff; }

Le premier lien dans la barre de navigation possde du coup un sparateur indsirable. On peut sen dbarrasser en ajoutant une classe au premier lment de la liste et en supprimant limage darrire-plan:
ul. nav .rst a { background-image: none; }

Si vous ne vous proccupez pas spcifiquement de prendre en charge Internet Explorer6, vous pouvez aussi renoncer la classe additionnelle et utiliser la pseudo-classe :rstchild la place.
ul.nav li:rst-child a { background: none; }

118

Matrise des CSS

Pour finir, ltat de survol de cet exemple correspond un simple changement de la couleur du lien:
ul.nav a:hover, ul.nav a:focus { color: #333; }

Et voil le travail: une barre de navigation horizontale entirement mise en forme et bien prise en charge par les diffrents navigateurs.

Systme de navigation lastique onglets

Au Chapitre 4, vous avez dcouvert la technique des portes coulissantes popularise par Douglas Bowman et vu de quelle manire elle pouvait tre utilise pour crer des botes flexibles bords arrondis. Elle peut galement ltre pour crer un systme de navigation extensible onglets. Ces derniers sont crs partir dune grande image et dune image de ct. Lorsque le texte dans les onglets stend, une partie plus importante de la grande image est rvle. La petite image reste cale gauche, afin de couvrir le ct angle droit de limage plus grande et de complter leffet (voir Figure6.5).
Figure6.5
Exemple de la technique des "portes coulissantes".
tab-left.gif tab-right.gif li Quand llment de liste stend, tab-left.fig recouvre tab-right.gif

La Figure 6.6 prsente les deux images utilises pour crer les onglets. Elles sont trs grandes. On peut ainsi augmenter largement le pourcentage de la taille de la police sans que les onglets se dnaturent.
Figure6.6
Les deux images qui composent les onglets.

tab-left.aif

tab-right.aif

Le code de cet exemple est exactement le mme que celui du prcdent exemple de barre de navigation horizontale:

Mise en forme des listes et cration de barres de navigation

<ul class="nav"> <li><a href="home.htm">Accueil</a></li> <li><a href="about.htm">A propos</a></li> <li><a href="news.htm">Actualits</a></li> <li><a href="products.htm">Produits</a></li> <li><a href="services.htm">Services</a></li> <li><a href="clients.htm">Clients</a></li> <li><a href=case-studies.htm>Etudes de cas</a></li> </ul>

119

Comme pour les exemples prcdents, les marges et le remplissage sont ramens zro, les puces des listes sont supprimes et une largeur est dfinie pour la barre de navigation. La valeur hidden est attribue la proprit overow de la liste de navigation afin douvrir un dgagement pour tous les lments flottants qui y sont inclus.
ul.nav { margin: 0; padding: 0; list-style: none; width: 72em; overow: hidden; }

Ici aussi, les lments de la liste sont rendus flottants gauche afin quils saffichent horizontalement et non verticalement. Cette fois, la plus grande des deux images qui composent longlet est cependant applique sous forme dimage darrire-plan llment de liste. Comme elle forme la partie droite de longlet, elle est positionne droite.
ul.nav li { oat: left; background: url(img/tab-right.gif) no-repeat right top; }

Laffichage des ancres est aussi dfini comme de niveau bloc (display: block) afin que lutilisateur puisse cliquer nimporte o dans la zone. La largeur de chaque onglet est nouveau contrle par la largeur du contenu. La valeur de hauteur de ligne contrle galement la hauteur. Pour complter leffet des onglets, la partie gauche de longlet est applique sous forme darrire-plan lancre et aligne gauche. Lorsque longlet change de taille, cette image reste aligne gauche, par-dessus limage plus grande et en couvrant son bord gauche angle droit. Enfin, pour sassurer que cette technique fonctionne sous Internet Explorer5.2 sur Mac, les ancres sont rendues flottantes galement.
ul.nav li a { display: block; padding: 0 2em; line-height: 2.5em; background: url(img/tab-left.gif) no-repeat left top; text-decoration: none; color: #fff; oat: left; }

120

Matrise des CSS

Pour crer leffet de survol, on change simplement la couleur du lien:
ul.nav a:hover, ul.nav a:focus { color: #333; }

Le systme de navigation rsultant est prsent la Figure6.7.

Figure6.7
Le systme de navigation portes coulissantes sa taille normale.

Si vous augmentez la taille du texte dans votre navigateur, les onglets se redimensionnent parfaitement (voir Figure6.8).
Figure6.8
Le systme de navigation portes coulissantes, lorsque le texte est agrandi plusieurs fois.

Cette mthode offre un moyen simple et ais de crer des barres de navigation onglets attrayantes et accessibles.

Menus droulants Suckerfish

Malgr les problmes quils posent en termes dutilisabilit, les menus droulants continuent dtre un lment dinterface populaire sur Internet. Les solutions JavaScript abondent, mais nombre dentre elles gnrent de fait des difficults daccessibilit, notamment parce quelles ne fonctionnent pas dans les navigateurs o le JavaScript est dsactiv. Voil pourquoi plusieurs pionniers ont explor la voie des menus droulants en CSS uniquement. Patrick Griffiths, lun deux, a mis au point une technique de menus droulants appele Suckerfish (http://www.alistapart.com/articles/dropdowns/). Cette technique est incroyablement simple: il suffit dimbriquer la sous-navigation sur une liste puces, de la positionner hors cran, puis de la repositionner lorsque llment parent de liste est survol. Le rsultat final est prsent la Figure6.9.
Figure6.9
Un menu droulant Suckerfish entirement ralis en CSS.

Commenons par crer la liste de navigation multiniveau.

Mise en forme des listes et cration de barres de navigation

<ul class="nav"> <li><a href="/home/">Accueil</a></li> <li><a href="/products/">Produits</a> <ul> <li><a href="/products/silverback/">Silverback</a></li> <li><a href="/products/fontdeck/">Font Deck</a></li> </ul> </li> <li><a href="/services/">Services</a> <ul> <li><a href="/services/design/">Conception</a></li> <li><a href="/services/development/">Dveloppement</a></li> <li><a href="/services/consultancy/">Consulting</a></li> </ul> </li> <li><a href=/contact/>Contact</a></li> </ul>

121

Comme pour tous les exemples de navigation de ce chapitre, il faut dabord ramener zro les marges et le remplissage et supprimer les puces par dfaut. Il faut ensuite donner une largeur aux lments de liste et les faire flotter gauche. Pour la mise en forme, je souhaite donner aux listes de navigation une bordure et une couleur darrire-plan. Toutefois, comme les lments de liste incorpors sont tous flottants, ils ne prennent pas despace et les listes seffondrent sur elles-mmes. Pour contourner ce problme, jai dcid de rendre les listes flottantes galement.
ul.nav, ul.nav ul { margin: 0; padding: 0; list-style-type: none; oat: left; border: 1px solid #486B02; background-color: #8BD400; } ul.nav li { oat: left; width: 8em; background-color: #8BD400; }

Pour tre sr que les lments dans les menus droulants sempilent verticalement, il faut dfinir la largeur de la liste en lui attribuant la mme valeur que la largeur des lments de liste incorpors. Le menu droulant commence maintenant prendre forme. Pour masquer les menus droulants jusqu ce quils soient activs, il faut les positionner de manire absolue (position: absolute) puis les masquer en les sortant gauche de lcran.
ul.nav li ul { width: 8em; position: absolute; left: -999em; }

122

Matrise des CSS

Le tour de magie se produit maintenant. En ajoutant une pseudo-classe hover llment de liste parent, on peut faire rapparatre la liste en changeant sa position pour la ramener son emplacement de dpart.
.nav li:hover ul { left: auto; }

Les styles suivants obligent les liens de navigation se comporter comme des lments de niveau bloc et changent lapparence de la liste en leur attribuant des couleurs darrire-plan et des bordures biseautes.
ul.nav a { display: block; color: #2B3F00; text-decoration: none; padding: 0.3em 1em; border-right: 1px solid #486B02; border-left: 1px solid #E4FFD3; } ul.nav li li a { border-top: 1px solid #E4FFD3; border-bottom: 1px solid #486B02; border-left: 0; border-right: 0; } /*suppression des bordures indsirables sur les derniers lments de liste*/ ul.nav li:last-child a { border-right: 0; border-bottom: 0; } ul a:hover, ul a:focus { color: #E4FFD3; background-color: #6DA203; }

Et le tour est jou: vous venez de crer une barre de navigation menus droulants simple, entirement en CSS. Cette technique fonctionne dans la plupart des navigateurs web modernes, mais pas dans les anciennes versions dInternet Explorer, qui ne reconnaissent pas la pseudo-classe :hover pour les lments qui ne sont pas des ancres. Pour contourner ce problme, vous pouvez utiliser quelques lignes de JavaScript ou un fichier de comportement .htc qui active cette fonctionnalit.
Le code JavaScript pour le correctif des menus droulants sous Internet Explorer nest pas du ressort de ce livre, mais vous trouverez plus de dtails ce sujet la page (en anglais) http://htmldog.com/ articles/suckerfish/dropdowns/.

Mise en forme des listes et cration de barres de navigation

123

Cartes-images CSS
Les cartes-images permettent aux dveloppeurs web de spcifier des zones ractives dans une image. Ultra-populaires il y a quelques annes, elles sont beaucoup moins courantes aujourdhui. Cest en partie d la popularit de Flash et la tendance qui a conduit privilgier la simplicit dun code moins orient sur la prsentation. Si les cartes-images sont toujours parfaitement valides en HTML, elles ont en effet le dfaut de mlanger prsentation et contenu. Il est cependant possible den crer avec une combinaison de listes, dancres et de styles CSS avancs. Dans cet exemple, nous allons utiliser une photographie de quelques membres de lquipe Clearleft posant la manire dun groupe de rock indpendant devant un mur graffit situ prs des locaux (voir Figure6.10). Lorsque lutilisateur survole chaque personne, une bote rectangulaire doit apparatre. Sil clique dessus, il est conduit vers le site web de la personne concerne.
Figure6.10
Rich, Sophie, Cath, James et Paul posent devant le mur graffit lextrieur du bureau.

La premire chose faire est dajouter limage la page, dans une div nomme:
<div class="imagemap"> <img src="img/nerdcore.jpg" width="333" height="500" alt="Some of the Clearleft team" /> </div>

124

Matrise des CSS

Ensuite, ajoutez une liste de liens vers le site web de chaque personne aprs limage. Chaque lment de liste doit se voir attribuer une classe pour identifier la personne correspondante. Vous pouvez donner chaque lien un attribut de titre (title) contenant le nom de la personne. Dans la plupart des navigateurs, le nom de la personne apparat dans une info-bulle quand lutilisateur survole le lien.
<div id="imagemap"> <img src="img/nerdcore.jpg" width="333" height="500" alt="Some of the Clearleft team" /> <ul> <li class="rich"> <a href="http://www.clagnut.com/" title="Richard Rutter">Richard Rutter</a> </li> <li class="sophie"> <a href="http://www.wellieswithwings.org/" title="Sophie Barrett">Sophie Barrett</a> </li> <li class="cath"> <a href="http://www.electricelephant.com/" title="Cathy Jones">Cathy Jones</a> </li> <li class="james"> <a href="http://www.jeckecko.net/blog/" title="James Box">James Box</a> </li> <li class="paul"> <a href="http://twitter.com/nicepaul" title="Paul Annett">Paul Annett</a> </li> </ul> </div>

Fixez la largeur et la hauteur de la div en les faisant correspondre aux dimensions de limage. Ensuite, attribuez-lui un positionnement relatif (position: relative). Cette dernire tape est la cl de cette technique, car elle permet aux liens enclos dtre positionns de manire absolue, par rapport aux bords de la div et donc de limage.
.imagemap { width: 333px; height: 500px; position: relative; /* La cl de cette technique */ }

Il ne faut pas que les puces saffichent. Faites-les donc disparatre en attribuant la valeur none la proprit list-style. Pour bien faire, ramenez aussi zro les marges et le remplissage de la liste:
.imagemap ul { margin: 0; padding: 0; list-style: none; }

La prochaine tape vise mettre en forme les liens. En positionnant les liens dancre de manire absolue, on les dplace vers le coin suprieur gauche de la div conteneur. Ils peuvent ensuite tre positionns de manire individuelle au-dessus de chaque personne, afin de former les zones ractives. Vous devez cependant dabord dfinir leurs largeurs et leurs

Mise en forme des listes et cration de barres de navigation

125

hauteurs pour crer les zones ractives dsires. Le texte du lien est toujours affich; il est donc ncessaire de le masquer en le sortant de lcran grce un grand retrait ngatif:
.imagemap a { position: absolute; display: block; width: 50px; height: 60px; text-indent: -1000em; }

Les liens individuels peuvent maintenant tre positionns au-dessus des personnes correspondantes:
.imagemap .rich a { top: 50px; left: 80px; } .imagemap .sophie a { top: 90px; left: 200px; } .imagemap .cath a { top: 140px; left: 55px; } .imagemap .james a { top: 140px; left: 145px; } .imagemap .paul a { top: 165px; left: 245px; }

Enfin, pour crer leffet de survol, on applique une bordure aux liens en cas de survol:
.imagemap a:hover, imagemap a:focus { border: 1px solid #fff; }

La base de la technique est termine. Si vous survolez les images, vous obtenez maintenant le rsultat prsent la Figure6.11. Tout cela suppose nanmoins que vous possdiez un navigateur bien en jambes, comme Safari ou Firefox. Si vous utilisez Internet Explorer, il ne se passe rien! Internet Explorer naime pas afficher les liens dont le contenu est masqu hors cran, mme si vous dfinissez explicitement des largeurs et des hauteurs. Mais il existe une solution.

126

Matrise des CSS

Figure6.11
La carte-image CSS pendant le survol.

Si vous donnez un arrire-plan aux liens dancre, vous parviendrez tromper Internet Explorer afin quil se comporte correctement. Le problme est que nous ne souhaitons pas donner darrire-plan aux liens, puisquils sont censs tre masqus! Vous pourriez tenter de dfinir un arrire-plan transparent, mais cela ne parat pas fonctionner. Pourquoi donc ne pas utiliser une image PNG ou GIF transparente?
.imagemap a { position: absolute; display: block; background-image: url(/img/shim.gif); width: 60px; height: 80px; text-indent: -1000em; }

Bizarrement, il ny a mme pas besoin de pointer sur une vritable image! Vous pouvez vous contenter de spcifier une URL inexistante et tromper ainsi Internet Explorer. Enfin, quand mme, crer un lien vers une URL qui nexiste pas, cest mal, mme si cest pour corriger les dfauts dun navigateur bogu! Jutilise donc pour ma part une vritable image.

Cartes-images la mode Flickr

Si vous avez dj utilis le service de partage de photos Flickr, vous avez sans doute vu une technique similaire qui est utilise pour lannotation des images (voir Figure6.12). Lorsque vous survolez une image annote, une bote double bordure apparat sur la zone qui contient chaque note. Lorsque vous survolez lune de ces botes, elle passe en surbrillance et affiche la note. Moyennant quelques ajustements, il est possible de produire un rsultat analogue avec la prcdente technique.

Mise en forme des listes et cration de barres de navigation

Figure6.12
Notes sur les images Flickr.

127

Pour crer la bote double bordure, vous devez placer deux balises span supplmentaires lintrieur de chaque lien dancre et en ajouter une la note aussi. Une fois que ces balises span ont t ajoutes, la liste complte doit ressembler ceci:
<ul> <li class="rich"> <a href="http://www.clagnut.com/"> <span class="outer"> <span class="inner"> <span class="note">Richard Rutter</span> </span> </span> </a> </li> ... </ul>

Le code CSS est au dpart identique celui de lexemple prcdent: vous donnez la div conteneur les dimensions de limage et spcifiez un positionnement relatif. Le remplissage et les marges de la liste sont ramens zro et les puces supprimes:
.imagemap { width: 333px; height: 500px;

128
}

Matrise des CSS

position: relative;

.imagemap ul { margin: 0; padding: 0; list-style: none; }

Comme auparavant, les liens dancre incorpors sont positionns de manire absolue. Cette fois, vous allez cependant dfinir les dimensions sur les balises span internes et laisser les balises span et les liens dancre externes prendre forme autour delles. Pour ma part, jai attribu une bordure fonce la balise span externe et une bordure claire la balise span interne, afin de marquer leurs positions dans limage. Enfin, comme je ne souhaite pas masquer le texte lintrieur des liens dancre, mais lafficher sous forme dinfo-bulle, je lui donne une mise en forme simple.
.imagemap a { position: absolute; display: block; background-image: url(/img/shim.gif); color: #000; text-decoration: none; border: 1px solid transparent; } .imagemap a .outer { display: block; border: 1px solid #000; } .imagemap a .inner { display: block; width: 50px; height: 60px; border: 1px solid #fff; }

Comme auparavant, vous devrez positionner les ancres au-dessus de chaque personne:
.imagemap .rich a { top: 50px; left: 80px; } .imagemap .sophie a { top: 90px; left: 200px; } .imagemap .cath a { top: 140px; left: 55px; } .imagemap .james a {

Mise en forme des listes et cration de barres de navigation

top: 140px; left: 145px; }

129

.imagemap .paul a { top: 165px; left: 245px; }

Vous pouvez ensuite appliquer leffet de survol au lien dancre. Pour cela, changez la couleur de bordure de lancre, dabord transparente, en la rendant jaune, pour les tats hover et focus:
.imagemap a:hover, .imagemap a:focus { border-color: #d4d82d; }

Pour afficher la note lorsque lutilisateur survole la zone ractive, vous devez dabord positionner le contenu de la balise span de note sous la zone ractive. Pour cela, dfinissez un positionnement absolu pour cette balise et donnez-lui une position ngative en bas (bottom). Pour soigner les notes, dfinissez une largeur, un remplissage et une couleur darrire-plan, puis centrez le texte:
.imagemap a .note { position: absolute; bottom: -3em; width: 7em; padding: 0.2em 0.5em; background-color:#ffc; text-align: center; }

La Figure6.13 prsente le rsultat dans un navigateur.

Figure6.13
Les survols la Flickr commencent prendre forme.

130

Matrise des CSS

Comme vous pouvez le voir, leffet commence prendre forme. Les notes ont bonne apparence, mais il serait prfrable quelles soient centres horizontalement sous la zone ractive, au lieu dtre ferres gauche. Vous pouvez le faire en positionnant le bord gauche de la balise span de note au milieu de la zone ractive. Ensuite, dplacez cette balise vers la gauche, mi-largeur de la note, en utilisant des marges ngatives. La zone ractive de cet exemple fait 50 pixels de large. Jai donc dfini la position left avec une valeur de 25pixels. Les notes font 8cadratins de large, remplissage inclus. Avec une marge ngative de 4cadratins, on parvient ainsi les centrer horizontalement sous la zone ractive.
.imagemap a .note { position: absolute; bottom: -3em; width: 7em; padding: 0.2em 0.5em; background-color:#ffc; text-align: center; left: 25px; margin-left: -4em; }

Maintenant que les notes sont centres, il est temps de les rendre interactives. Elles doivent tre masques par dfaut et ne safficher que lors du survol de la zone ractive. Pour cela, on pourrait attribuer la valeur none la proprit display puis la ramener block lors du survol de lancre, mais cela empcherait les lecteurs dcran daccder au contenu de la note. Je prfre donc masquer le texte en le dplaant gauche hors de lcran et en le repositionnant lors du survol:
.imagemap a .note { position: absolute; bottom: -3em; width: 7em; padding: 0.2em 0.5em; background-color:#ffc; text-align: center; left: -1000em; margin-left: -5em; } .imagemap a:hover .note, .imagemap a:focus .note { left: 25px; }

Nous y sommes presque. Un dernier ajustement. Au lieu dafficher tout le temps les bordures doubles de la zone ractive, on pourrait ne les faire apparatre que lors du survol de limage. Il serait alors possible dobserver limage normalement, sans les marques des zones ractives. Lorsque le curseur survolerait limage, les zones ractives apparatraient, afin de signaler lutilisateur que dautres informations peuvent tre dcouvertes. Vous pouvez raliser cela en rendant les bordures sur les span externe et interne transparentes par dfaut, puis en leur attribuant une couleur pour le survol:
.imagemap a .outer { display: block;

Mise en forme des listes et cration de barres de navigation

border: 1px solid transparent; } .imagemap a .inner { display: block; width: 50px; height: 60px; border: 1px solid transparent; } .imagemap:hover a .outer, .imagemap:focus a .outer { border-color: #000; } .imagemap:hover a .inner, .imagemap:focus a .inner { border-color: #fff; }

131

Malheureusement, comme vous le savez dj, Internet Explorer6 ne prend en charge que le survol des liens. Pour rsoudre ce problme, il est aussi judicieux dafficher les bordures lorsque lutilisateur survole directement les zones ractives:
.imagemap:hover a .outer, .imagemap:focus a .outer, .imagemap a:hover .outer, .imagemap a:focus .outer { border: 1px solid #000; }

.imagemap:hover a .inner, .imagemap:focus a .inner, .imagemap a:hover .inner, .imagemap a:focus .inner { border: 1px solid #fff; }

Et voil le travail: une carte-image CSS avance la mode Flickr (voir Figure6.14).
Figure6.14
La version termine de notre carte-image la mode Flickr.

132

Matrise des CSS

Survol distant
Le survol distant est un vnement de survol qui dclenche une modification daffichage dans un autre endroit de la page. Il sopre en imbriquant un lment, ou plusieurs, lintrieur dun lien dancre. Les lments imbriqus peuvent ensuite tre positionns un un de manire absolue. Mme sils saffichent diffrents endroits, ils sont tous contenus dans la mme ancre parente et ragissent donc au mme vnement de survol. Le survol dun lment peut ainsi affecter le style dun autre lment. Pour cet exemple, nous allons reprendre la technique de la carte-image CSS simple en plaant une liste de liens ct de limage. Lorsque lutilisateur survolera ces liens, il dclenchera laffichage des zones ractives de limage. Lorsquil survolera les zones ractives de limage, il dclenchera laffichage des liens texte. Le code HTML de cet exemple est analogue celui de lexemple de carte-image CSS simple. Vous aurez cependant besoin de deux balises span supplmentaires: lune entourant le texte du lien et lautre, vide, qui doit agir comme zone ractive. Vous pourrez ainsi positionner les liens texte ct de limage et les zones ractives au-dessus de chacune des personnes.
<div class="remote"> <img src="img/nerdcore.jpg" width="333" height="500" alt="Rich, Sophie, Cath, James and Paul" /> <ul> <li class="rich"> <a href="http://www.clagnut.com/" title="Richard Rutter"> <span class="hotspot"></span> <span class="link">&raquo; Richard Rutter</span> </a> </li> <li class="sophie"> <a href="http://www.wellieswithwings.org/" title="Sophie Barrett"> <span class="hotspot"></span> <span class="link">&raquo; Sophie Barrett</span> </a> </li>

<li class="cath"> <a href="http://www.electricelephant.com/" title="Cathy Jones"> <span class="hotspot"></span> <span class="link">&raquo; Cathy Jones</span> </a> </li> <li class="james"> <a href="http://www.jeckecko.net/blog/" title="James Box"> <span class="hotspot"></span> <span class="link">&raquo; James Box</span> </a> </li>

Mise en forme des listes et cration de barres de navigation

133

<li class="paul"> <a href="http://twitter.com/nicepaul" title="Paul Annett"> <span class="hotspot"></span> <span class="link">&raquo; Paul Annett</span> </a> </li> </ul> </div>

La mise en forme de base de la liste est la mme que dans lexemple de la carte-image:
.remote { width: 333px; height: 500px; position: relative; }

.remote ul { margin: 0; padding: 0; list-style: none; }

La premire chose faire est de dfinir un positionnement absolu pour les zones ractives et de spcifier leurs dimensions. Dans cet exemple, trois des zones ractives font la mme taille, les deux dernires tant lgrement plus grandes. Jai donc dfini les tailles par dfaut dabord, avant de les redfinir en cas de besoin. Comme pour la technique prcdente, toutes les ancres se trouvent alors positionnes au niveau du coin suprieur gauche de limage. Vous pouvez ensuite positionner chaque zone ractive sur la personne approprie de limage, avec les proprits de positionnement top et left.
.remote a .hotspot { width: 50px; height: 60px; position: absolute; } .remote .rich a .hotspot { top: 50px; left: 80px; } .remote .sophie a .hotspot { top: 90px; left: 200px; } .remote .cath a .hotspot { top: 140px; left: 55px; width: 60px;

134
}

Matrise des CSS

height: 80px;

.remote .james a .hotspot { top: 140px; left: 145px; } .remote .paul a .hotspot { top: 165px; left: 245px; width: 60px; height: 80px; }

Les balises span qui contiennent le texte des liens sont aussi positionnes de manire absolue et ont une largeur de 15cadratins. Elles sont positionnes par rapport la liste conteneur galement, ici droite de limage, laide dune position droite ngative. Pour finir, les liens reoivent un style de curseur pour sassurer que licne approprie saffiche dans Internet Explorer.
.remote a .link { position: absolute; display: block; width: 10em; right: -11em; cursor: pointer; } .remote .rich a .link { top: 0; } .remote .sophie a .link { top: 1.2em; } .remote .cath a .link { top: 2.4em; } .remote .james a .link { top: 3.6em; } .remote .paul a .link { top: 4.8em; }

Les zones ractives doivent maintenant se trouver au bon endroit, de mme que les liens texte. Pour crer leffet de survol sur la zone ractive lorsque lutilisateur passe sur la zone ractive elle-mme ou le texte, vous devez appliquer une bordure la balise span de la zone ractivelors du survol de lancre parente:

Mise en forme des listes et cration de barres de navigation

.remote a:hover .hotspot, .remote a:focus .hotspot { border: 1px solid #fff; }

135

De la mme manire, pour changer la couleur du texte lorsque lutilisateur survole le texte ou la zone ractive, vous devez changer le style de la balise span lorsque lancre parente est survole ou active:
.remote a:hover .link , .remote a:focus .link { color: #0066FF; }

Si vous testez cet exemple, vous verrez quil fonctionne parfaitement dans Safari et Firefox (voir Figure6.15). Lorsque vous survolez le nom dune personne, le texte du lien change de couleur, et une bote apparat au-dessus de la personne dans limage. Le mme vnement se produit quand vous survolez la personne dans limage.
Figure6.15
Dmonstration du survol distant. Lorsque lutilisateur survole le texte du lien ct de limage, un contour apparat sur la personne correspondante dans limage.

La mise en forme de cet exemple est assez simple, mais rien ne vous limite pourtant, hormis votre imagination. Nous avons dailleurs utilis une version lgrement modifie de cette technique dans la section "Qui sommes-nous?" du site Clearleft (http://clearleft.com/is/) [voir Figure6.16].

136
Figure6.16

Matrise des CSS

Lorsque vous survolez les photos de lquipe Clearleft, le nom de la personne passe en surbrillance sur la liste droite.

Note propos des listes de dfinitions

Au cours de ce chapitre, vous avez vu comment les listes puces (et par extension, les listes numrotes) pouvaient tre utilises pour crer diffrents effets. Il existe cependant un troisime type de liste, souvent nglig, mais qui connat un rcent regain dintrt: la liste de dfinitions. Elle est constitue de deux composants-cls: un terme de dfinition <dt> et une ou plusieurs descriptions de dfinition <dd>.
<dl> <dt>Apple</dt> <dd>Red, yellow or green fruit</dd> <dd>Computer company</dd> <dt>Bananna</dt> <dd>Curved yellow fruit</dd> </dl>

Comme son nom le suggre, son principal but est de crer des balises de dfinitions. La spcification HTML reste toutefois vague et suggre que ce type de liste pourrait tre utilis pour dautres applications, comme des proprits de produits ou des conversations. Voil qui rend le concept de dfinition plutt flou, mais cest relativement logique dans le contexte historique du HTML qui est avant tout un langage simple de formatage du texte. Des pionniers du Web ont profit du fait que les listes de dfinitions pouvaient tre utilises pour regrouper structurellement une srie dlments lis et ont commenc les utiliser pour crer toutes sortes de choses, des catalogues de produits aux galeries dimages en passant

Mise en forme des listes et cration de barres de navigation

137

par des formulaires ou mme des mises en page compltes. Si ces techniques sont souvent trs astucieuses, elles ont cependant le tort de tirer un peu trop sur la corde du concept de dfinition, au point den rompre le sens proprement naturel. Lun des arguments en leur faveur tient ce quaucun autre lment HTML ne permet ce type dassociation. Ce nest pas exactement vrai, car le but de llment div est justement de regrouper un document en sections logiques. Plus inquitant, cest exactement le mme type dargument que lon utilise quand on veut justifier le recours aux tableaux pour la mise en page. Cest le signe que les listes de dfinitions commencent tre utilises de manire inapproprie. Pour plus dinformations sur les listes de dfinitions, consultez lexcellent article (en anglais) de Mark Norman Francis sur le site 24 Ways (http://24ways.org/2007/ my-other-christmas-present-is-a-definition-list).

En rsum
Vous avez dcouvert quel point les listes pouvaient tre flexibles. Vous avez vu comment crer des barres de navigation verticales et horizontales, et notamment des systmes onglets accessibles. Pour finir, vous avez appris utiliser le positionnement pour crer des menus droulants, des cartes-images et des survols distants entirement en CSS. Au chapitre suivant, vous apprendrez crer des structures de formulaire et des tableaux de donnes accessibles et les mettre en forme en CSS.

Mise en forme des formulaires etdes tableaux de donnes

lheure du tout interactif, les formulaires sont devenus un composant incontournable des applications web modernes. Ils permettent aux utilisateurs dinteragir avec les systmes, de poster des commentaires ou deffectuer des rservations complexes auprs dagences de voyages. Ils peuvent tre trs simples, nincluant quun champ dadresse e-mail et un champ de message, ou formidablement complexes, stendant sur plusieurs pages. La mise en forme des formulaires sest traditionnellement effectue laide de tableaux, mais, ici, vous allez dcouvrir quelle peut se faire, y compris pour les formulaires complexes, laide de CSS. Les tableaux retrouvent peu peu leur fonction premire, qui tait dafficher des donnes tabulaires et non de structurer des maquettes de pages. Les applications web doivent capturer les donnes des utilisateurs, mais elles doivent aussi de plus en plus souvent les afficher dans des formats utilisables et faciles comprendre. Les formulaires et les tableaux de donnes ont t relativement ngligs au profit dun travail plus approfondi sur la conception des sites web. Cependant, une bonne approche de la gestion et linteraction de linformation peut faire pencher la balance sur la russite ou non dun site web. Au cours de ce chapitre, vous apprendrez : crer des tableaux de donnes attrayants et accessibles; crer des mises en page simples et complexes de formulaires; mettre en forme diffrents types dlments de formulaire; fournir des retours dinformation accessibles pour vos formulaires.

Mise en forme des tableaux de donnes

Beaucoup de dveloppeurs ont pris conscience des inconvnients des maquettes tabulaires et vitent maintenant ds quils le peuvent de les utiliser pour leurs mises en page. Un petit groupe dindividus a pouss le vice jusqu tenter de se dbarrasser compltement des tableaux, en crant tout en CSS, mme les calendriers. Cela part sans doute dune bonne intention, mais il faut admettre que les calendriers proposent par nature un contenu tabulaire. Il ne sagit ni plus ni moins que de lignes de semaines et de colonnes de jours. Cest prcisment pourquoi les tableaux ont parfaitement leur place sur le Web.

140

Matrise des CSS

Mme relativement simples, les tableaux de donnes peuvent tre difficiles lire quand ils contiennent plus de quelques lignes et colonnes. Sans sparation entre les cellules de donnes, les informations se fondent les unes dans les autres et produisent un assemblage confus et surcharg (voir Figure7.1).
Figure7.1
Les tableaux de donnes compacts peuvent tre trs droutants au premier coup dil.

linverse, les tableaux exagrment ars peuvent tre aussi difficiles lire, car les colonnes et les cellules perdent alors leur structuration visuelle. Cest particulirement dlicat lorsque vous essayez de suivre des lignes dinformations dans les tableaux o lespacement des colonnes est trs important, comme celui de la Figure7.2. Si vous ny prtez attention, vous risquez de tomber dans la mauvaise ligne en passant dune colonne lautre. On le remarque particulirement au milieu du tableau, l o lon est le plus loign des bords haut et bas qui offrent un ancrage visuel.

Figure7.2
Les tableaux trs espacs peuvent aussi tre difficiles comprendre instantanment.

En passant quelques minutes concevoir vos tableaux de donnes, vous pouvez considrablement amliorer leur comprhension et la vitesse laquelle les informations seront rcupres. Par exemple, les dates la Figure7.3 sont espaces confortablement avec un lger remplissage vertical et horizontal. Elles ont aussi t mises en valeur avec un subtil effet de biseau, suggrant lutilisateur quil peut cliquer dessus. Les principaux titres de colonne ont t distingus des donnes laide de couleurs darrire-plan lgrement diffrentes, dune bordure infrieure et dun traitement typographique particulier. Au final, on obtient un widget de calendrier facile utiliser.

Mise en forme des formulaires etdes tableaux de donnes

Figure7.3
Le tableau de donnes mis en forme.

141

lments spcifiques des tableaux

Si les tableaux de donnes peuvent tre difficiles lire pour les utilisateurs qui possdent une bonne vue, imaginez combien la tche est complique et frustrante pour ceux qui se servent de lecteurs dcran. Heureusement, la spcification HTML inclut un certain nombre dlments et dattributs destins amliorer laccessibilit des tableaux de donnes pour ces priphriques. Actuellement, tous ces lments ne sont pas pris en charge par les lecteurs dcran, mais il est bon de les utiliser chaque fois que cest possible. Rsum et lgende Le premier de ces lments est la lgende de tableau, qui, au fond, fait office de titre. Bien que cet lment ne soit pas requis, lutiliser si loccasion le permet est toujours judicieux. Ici, je men sers pour indiquer aux utilisateurs le mois quils observent. Lautre ajout intressant est le rsum de tableau. Lattribut summary peut tre appliqu la balise table. Il est utilis pour dcrire le contenu du tableau. la manire de lattribut alt des images, il doit rsumer les donnes. Un rsum bien crit peut par lui-mme pargner la lecture du contenu du tableau.
<table class="cal" summary="Un calendrier slecteur de date"> <caption> <a href="cal.php?month=dec08" rel="prev">&lt;</a> Janvier 2008 <a href="cal.php?month=feb09" rel="next">&gt;</a> </caption> </table>

thead, tbody et tfoot thead, tfoot et tbody permettent de dcomposer les tableaux en sections logiques. Par exemple, vous pouvez placer tous les titres de colonne dans llment thead, qui permet dappliquer une mise en forme particulire cette zone. Si vous choisissez dutiliser un lment thead ou tfoot, vous devez avoir au moins un lment tbody. Vous ne pouvez employer quun seul lment thead et tfoot par tableau, mais vous pouvez avoir plusieurs lments tbody pour faciliter la dcomposition des tableaux complexes en portions plus faciles grer.

142

Matrise des CSS

Les titres de ligne et de colonne doivent tre marqus avec les balises th plutt que td, sauf pour les lments qui correspondent la fois un titre et des donnes, auquel cas, il convient de conserver td. Les titres de tableau peuvent tre associs un attribut scope avec la valeur row ou col pour indiquer sil sagit de titres de ligne ou de colonne. Ils peuvent galement avoir la valeur rowgroup ou colgroup sils sont lis plusieurs lignes ou colonnes.
<thead> <tr> <th scope="col">Dim</th> <th scope="col">Lun</th> <th scope="col">Mar</th> <th scope="col">Mer</th> <th scope="col">Jeu</th> <th scope="col">Ven</th> <th scope="col">Sam</th> </tr> </thead>

col et colgroup Llment tr permet aux dveloppeurs dappliquer des styles des lignes entires, mais il est bien plus difficile dappliquer un style une colonne entire. Pour rsoudre ce problme, le W3C a introduit les lments colgroup et col. Un colgroup est utilis pour dfinir et regrouper une ou plusieurs colonnes utilisant llment col. Malheureusement, peu de navigateurs prennent en charge leur mise en forme.
<colgroup> <col id="sun" /> <col id=mon /> <col id="tue" /> <col id="wed" /> <col id="thur" /> <col id="fri" /> <col id="sat" /> </colgroup>

Balisage des tableaux de donnes

En combinant tous ces lments et attributs HTML, vous pouvez crer le quadrillage simple du tableau de calendrier prsent la Figure7.3.
<table class="cal" summary="Un calendrier slecteur de date"> <caption> <a href="#" rel="prev">&lt;</a> Janvier 2008 <a href="#" rel="next">&gt;</a> </caption> <colgroup> <col id="sun" /> <col id=mon /> <col id="tue" /> <col id="wed" /> <col id="thur" /> <col id="fri" />

Mise en forme des formulaires etdes tableaux de donnes

<col id="sat" /> </colgroup> <thead> <tr> <th scope="col">Dim</th> <th scope="col">Lun</th> <th scope="col">Mar</th> <th scope="col">Mer</th> <th scope="col">Jeu</th> <th scope="col">Ven</th> <th scope="col">Sam</th> </tr> </thead> <tbody> <tr> <td class="null">30</td> < td class="null">31</td> <td><a href="#">1</a></td> <td><a href="#">2</a></td> <td><a href="#">3</a></td> <td><a href="#">4</a></td> <td><a href="#">5</a></td> </tr> <tr> <td><a href="#">6</a></td> <td><a href="#">7</a></td> <td class="selected"><a href="#">8</a></td> <td><a href="#">9</a></td> <td><a href="#">10</a></td> <td><a href="#">11</a></td> <td><a href="#">12</a></td> </tr> ... </tbody> </table>

143

Mise en forme du tableau

La spcification CSS possde deux modles de bordure de tableau : separate et collapsed. Dans le modle separate, les bordures sont places autour des cellules individuelles. Dans le modle collapsed, les cellules partagent leurs bordures. La plupart des navigateurs utilisent par dfaut le modle separate, mais le modle collapsed est gnralement plus utile. Lune des premires choses faire est donc dattribuer la valeur collapse la proprit border-collapse du tableau. Pour les besoins de la dmonstration, je vais cependant conserver ici les doubles bordures afin de crer un effet biseaut. Je commence donc par attribuer la valeur separate la proprit border-collapse. Ensuite, par souci esthtique, je centre tout le texte dans le tableau et supprime le remplissage et les marges par dfaut.

144

Matrise des CSS

table.cal { border-collapse: separate; border-spacing: 0; text-align: center; color: #333; } .cal th, .cal td { margin: 0; padding: 0; }

La spcification CSS inclut une proprit border-spacing qui permet de contrler lespacement entre les cellules. Malheureusement, Internet Explorer7 et ses versions antrieures ne la comprennent pas. Vous devez donc vous rabattre sur lancien attribut cellspacing qui a au moins le mrite dtre fiable. Cet attribut est strictement parler un attribut de prsentation. Il sagit cependant encore de HTML valide, et cest le seul moyen de contrler lespacement des cellules dans Internet Explorer6 et7.
<table cellspacing="0" class="cal" summary="Un calendrier slecteur de date">

Ajout de style visuel

Le travail de fond est ralis. Il est maintenant temps dajouter le style visuel. Pour faire en sorte que la lgende de tableau ressemble un peu plus un titre standard, vous pouvez augmenter la taille de la police et la passer en gras. Vous pouvez galement donner la lgende un peu despace en appliquant un remplissage vertical.
.cal caption { font-size:1.25em; padding-top: 0.692em; padding-bottom: 0.692em; background-color: #d4dde6; }

Pour positionner les liens Prcdent et Suivant des deux cts du mois courant, donnez-leur une marge horizontale et faites-les respectivement flotter gauche et droite. Vous pouvez ensuite leur attribuer une zone ractive plus importante en appliquant un remplissage. Pour mettre en forme ces liens, jai choisi le slecteur dattribut afin de cibler leurs attributs rel. Pour une prise en charge par les anciens navigateurs, vous pouvez cependant ajouter une classe chaque lien. Une fois que vous avez positionn ces liens, mettez-les en forme votre ide. Dans cet exemple, je me contente de changer leur couleur darrire-plan lorsque lutilisateur les survole.
.cal caption [rel="prev"] { oat: left; margin-left: 0.2em; } .cal caption [rel="next"] {

Mise en forme des formulaires etdes tableaux de donnes

oat: right; margin-right: 0.2em; } .cal caption a:link, .cal caption a:visited { text-decoration: none; color: #333; padding: 0 0.2em; } .cal caption a:hover, .cal caption a:active, .cal caption a:focus { background-color: #6d8ab7; }

145

Pour distinguer la ligne initiale de titres de tableau, je lui attribue un arrire-plan un peu plus clair que le reste du tableau, avec un soulignement subtil. Je rduis aussi lgrement la taille du texte par rapport au reste du tableau.
.cal thead th { background-color: #d4dde6; border-bottom: 1px solid #a9bacb; font-size:0.875em; }

Par dfaut, je souhaite que le texte dans le corps du tableau soit gris, afin dindiquer quil ne peut pas tre slectionn. Vous remarquerez que jai galement appliqu au texte une ombre subtile.
.cal tbody { color: #a4a4a4; text-shadow: 1px 1px 1px white; background-color: #d0d9e2; }

Pour donner aux cellules du tableau un effet biseaut, vous devez dfinir des couleurs diffrentes de chaque ct (des couleurs plus claires en haut et gauche et des couleurs plus sombres en bas et droite). Vous devez ensuite mettre en forme les liens dancre. Ici, je les passe en mode bloc (display: block) et japplique un remplissage pour crer une zone ractive analogue un bouton. Je passe galement en gras les polices et choisis un arrireplan lgrement plus fonc.
.cal tbody td { border-top: 1px solid #e0e0e1; border-right: 1px solid #9f9fa1; border-bottom: 1px solid #acacad; border-left: 1px solid #dfdfe0; } .cal tbody a { display: block;

146

Matrise des CSS

text-decoration: none; color: #333; background-color: #c0c8d2; font-weight: bold; padding: 0.385em 0.692em 0.308em 0.692em; }

Pour finir, dfinissez un tat de survol pour les liens dancre. Les dates prcdemment slectionnes hriteront aussi de ce style par linclusion dune classe slectionne. Ici, je passe les liens en blanc sur fond bleu et je leur attribue une ombre de texte subtile.
.cal tbody a:hover, .cal tbody a:focus, .cal tbody a:active, .cal tbody .selected a:link, .cal tbody .selected a:visited, .cal tbody .selected a:hover, .cal tbody .selected a:focus, .cal tbody .selected a:active { background-color: #6d8ab7; color: white; text-shadow: 1px 1px 2px #22456b; }

Vous remarquerez que les dates conservent leur apparence biseaute lors du survol. Si vous souhaitez donner limpression que la case de la date senfonce, changez la couleur des bordures de cellule de manire assombrir les bordures suprieure et gauche et claircir les bordures infrieure et droite. Notez bien que, comme ce style utilise un pseudo-slecteur hover sur un lment qui nest pas une ancre, il ne saffiche pas dans Internet Explorer6. Pour quil sy affiche, ajoutez des bordures aux liens la place.
.cal tbody td:hover, .cal tbody td.selected { border-top: 1px solid #2a3647; border-right: 1px solid #465977; border-bottom: 1px solid #576e92; border-left: 1px solid #466080; }

Et voil le travail: vous avez maintenant un superbe slecteur de date analogue celui de la Figure7.3.

Mise en forme simple de formulaires

Les formulaires courts et assez simples sont plus faciles remplir lorsque les tiquettes apparaissent au-dessus des lments de formulaire associs. Les utilisateurs peuvent alors descendre progressivement, en lisant chaque tiquette et en compltant llment de formulaire qui la suit. Cette mthode fonctionne bien avec les formulaires courts qui collectent des informations relativement simples et prvisibles, comme des informations de contact (voir Figure7.4).

Mise en forme des formulaires etdes tableaux de donnes

Figure7.4
Mise en forme simple de formulaire.

147

lments de formulaire utiles

Le HTML propose un certain nombre dlments utiles qui aident structurer les formulaires et leur confrent un sens. Le premier est llment eldset (ensemble de champs). Ilest utilis pour regrouper des blocs lis dinformations. la Figure7.4, deux ensembles de champs sont utiliss : lun pour les informations de contact et lautre pour les commentaires. La plupart des agents utilisateurs les encadrent dune fine bordure, qui peut tre dsactive si on attribue la valeur none la proprit border. Un lment legend peut tre utilis pour identifier le rle de chaque ensemble de champs. Les lgendes agissent la manire dun titre. Elles sont gnralement centres en haut de lensemble et lgrement en retrait vers la droite. Malheureusement, elles sont particulirement difficiles mettre en forme cause du manque de cohsion entre les navigateurs pour ce qui concerne leur positionnement. Certains navigateurs, comme Firefox et Safari, utilisent un remplissage pour crer un lger retrait. Dautres, comme Opera et Internet Explorer, ont de grands retraits par dfaut qui ne peuvent se contrler laide du remplissage, des marges ou mme du positionnement. Si vous utilisez des lgendes, vous devrez donc accepter certaines variations entre navigateurs. tiquettes de formulaire Llment label est extrmement important parce quil contribue structurer les formulaires et amliorer leur utilisabilit et leur accessibilit. Il permet dajouter une tiquette descriptive chaque lment de formulaire et, dans de nombreux navigateurs, dactiver llment de formulaire associ quand on clique dessus. Le vritable intrt des tiquettes tient ce quelles rendent les formulaires plus accessibles pour les utilisateurs quips de priphriques dassistance. Quand un formulaire les utilise, les lecteurs dcran associent correctement chaque lment de formulaire son tiquette. Sans cela, ces priphriques

148

Matrise des CSS

doivent "deviner" quel texte se rapporte tel ou tel lment et, parfois, se trompent. Leurs utilisateurs peuvent aussi afficher une liste de toutes les tiquettes du formulaire afin de lcouter dun trait comme dautres balayeraient le formulaire des yeux. Les tiquettes sassocient trs facilement aux contrles de formulaire. Il existe deux mthodes possibles: soit implicite, dans laquelle llment de formulaire est imbriqu dans llment label:
<label>E-mail<input name="email" type="text"/><label>

soit explicite, dans laquelle on donne lattribut for de llment label la valeur de lid de llment de formulaire associ:
<label for="email">E-mail<label> <input name="email" id="email" type="text"/>

Vous remarquerez que cet lment input, comme tous les contrles de formulaire de ce chapitre, contient la fois un attribut id et un attribut name. Le premier est requis pour crer lassociation entre le champ de formulaire et ltiquette, tandis que le second lest pour retransmettre au serveur les donnes du formulaire. Ces deux lments ne doivent pas ncessairement tre identiques, mme si je prfre, pour ma part, quils le soient chaque fois que cest possible, par souci de cohrence. Les tiquettes associes aux contrles de formulaire qui utilisent lattribut for nont pas besoin de jouxter le contrle dans le code source. Elles peuvent se trouver dans un emplacement compltement diffrent du document. Dun point de vue structurel, il nest cependant pas judicieux de sparer les tiquettes des contrles. Mieux vaut lviter si possible.

Disposition de base
Avec ces trois lments structurels, vous pouvez commencer disposer votre formulaire en marquant le contenu du premier ensemble de champs. La Figure7.5 prsente le formulaire sans mise en forme.
<eldset> <legend>Vos coordonnes</legend> <div> <label for="author">Nom:</label> <input name="author" id="author" type="text" /> </div> <div> <label for="email">Adresse e-mail:</label> <input name="email" id="email" type="text" /> </div> <div> <label for="url">Adresse Internet:</label> <input name="url" id="url" type="text" /> </div> </eldset>

Mise en forme des formulaires etdes tableaux de donnes

Figure7.5
Le formulaire sans mise en forme.

149

Pour commencer, vous allez dfinir les styles gnraux pour lensemble de champs et les lments de lgende. Le contenu peut tre ar avec un lger remplissage, tandis que les ensembles de champs doivent tre spars verticalement laide de marges. Pour marquer ceux-ci, vous pouvez leur attribuer un lger arrire-plan avec une bordure dun pixel lgrement plus sombre. Tchez cependant de ne pas trop assombrir larrire-plan, car une mise en forme trs marque rendrait le formulaire difficile comprendre. Le fait de passer les lgendes en gras peut aussi contribuer dcomposer les informations pour les rendre plus digestes.
eldset { margin: 1em 0; padding: 1em; border : 1px solid #ccc; background: #f8f8f8; } legend { font-weight: bold; }

Les tiquettes peuvent tre facilement positionnes verticalement au-dessus des lments de formulaire. Par dfaut, ltiquette est un lment incorpor. Si vous attribuez la valeur block sa proprit display, elle gnre cependant sa propre bote de bloc, ce qui force les lments input passer la ligne suivante. La largeur des champs de saisie varie dun navigateur lautre. Par souci duniformit, il est donc prfrable den dfinir explicitement la largeur. Dans cet exemple, jutilise des cadratins pour crer une disposition plus simple radapter.
label { display: block; cursor: pointer; } input { width: 20em; }

Il est judicieux de changer le style du curseur de ltiquette en un pointeur, car on signale ainsi quil est possible dinteragir avec.

150

Matrise des CSS

Autres lments
Cette structuration fonctionne aussi bien pour les autres lments de formulaire, comme les zones de texte:
<eldset> <legend>Commentaires</legend> <div> <label for="text">Message: </label> <textarea name="text" id="text"> </textarea> </div> </eldset>

Les dimensions des zones de texte varient galement dun navigateur lautre. Il est donc judicieux de leur donner aussi une largeur et une hauteur explicites. Ici, jai attribu une largeur de 100%, afin quelle soit dfinie par son lment parent. Cette manire de dfinir les largeurs rend les mises en page plus flexibles et plus indpendantes.
textarea { width: 100%; height: 10em; }

Les boutons radio et les cases cocher doivent tre grs autrement que les zones de texte et les champs de saisie. Leur lgende est place gnralement leur droite. Lorsquils sont empils, tous les lments sont aligns gauche, ce qui cre un bon repre visuel vertical et les rend plus faciles slectionner (voir Figure7.6).
Figure7.6
Disposition des boutons radio.

Auparavant dans cet exemple, nous avons dfini la largeur des zones de texte en appliquant une largeur llment input. Cependant, celui-ci peut correspondre toutes sortes de composants de formulaire, comme les cases cocher, les boutons radio et les boutons denvoi, ainsi que les champs de saisie, plus courants. En lui donnant une largeur de 20cadratins, on donne cette largeur tous ces lments de formulaire. Lune des solutions possibles consiste utiliser le slecteur dattribut pour cibler les diffrents types dlments de formulaire. Au lieu de fixer la largeur des lments input 20cadratins, vous pouvez ainsi cibler spcifiquement les lments input de type text:
input[type="text"] { width: 20em; }

Malheureusement, le slecteur dattribut nest pris en charge que par les navigateurs plus rcents et ne fonctionne pas sous Internet Explorer6 et ses versions antrieures. En attendant que la situation change, le meilleur moyen de distinguer les diffrents lments input consiste leur attribuer une classe.

Mise en forme des formulaires etdes tableaux de donnes

Par exemple, vous pouvez donner aux boutons radio le nom de classe radio:
<eldset> <legend>Se souvenir de moi</legend> <div> <label for="remember-yes"><input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />Oui</label> </div>

151

<div> <label for="remember-no"><input id="remember-no" class="radio" name="remember" type="radio" value="no" checked="checked" />Non</label> </div> </eldset>

Vous pouvez ensuite redfinir la largeur des lments input prcdemment dfinie en fixant celle des boutons radio auto. De mme pour les cases cocher et les boutons denvoi:
input.radio, input.checkbox, input.submit { width: auto; }

Vous aurez remarqu cette occasion de quelle manire jai envelopp les lments de formulaire avec les tiquettes. Vous vous rappelez que jai prcdemment configur toutes les tiquettes dans ce formulaire de manire quelles se comportent comme des lments deniveau bloc, en forant leurs contrles de formulaire associ safficher dans une ligne spare. Il nest videmment pas souhaitable den faire de mme avec les tiquettes des boutons radio. En enveloppant les contrles de formulaire avec les tiquettes, jvite ce problme. La dernire chose faire est dajouter une petite marge droite aux boutons radio, afin de crer un espacement entre les tiquettes.
#remember-me .radio { margin-right: 1em; }

Embellissements
La disposition de base est maintenant termine, mais vous pouvez oprer quelques intressants ajouts pour les navigateurs plus avancs. Par exemple, vous pouvez aider les utilisateurs mieux reprer le champ de formulaire quils remplissent en modifiant la couleur darrire-plan de llment lorsquil devient actif:
Input[type="text"]:focus, textarea:focus { background: #ffc; }

Vous pouvez aussi harmoniser lapparence des lments de champ texte et de zone de texte en leur donnant des bordures personnalises. Cest particulirement utile pour Firefox, qui

152

Matrise des CSS

affiche les bordures du bas et de droite en blanc pour ces lments, ce qui les fait disparatre sur fond blanc (voir Figure7.7).
Figure7.7
Les bordures du bas et de droite des champs de saisie et des zones de texte sont affiches en blanc dans Firefox, ce qui les fait disparatre sur fond blanc.

Ici, nous utilisons un slecteur dattribut pour cibler les champs de saisie, car ce style est tout particulirement destin Firefox, qui comprend ce slecteur.
input[type="text"], textarea { border-top: 2px solid #999; border-left: 2px solid #999; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }

Nous navons utilis aucun champ de mot de passe. Toutefois, si nous devions crer un style de formulaire gnrique pour le site entier, nous aurions d aussi inclure [type="password"] dans les deux prcdents exemples. Champs obligatoires De nombreux formulaires contiennent des champs obligatoires. Vous pouvez les signaler en plaant un texte mis en forme ou un astrisque ct. Comme ces informations signalent le statut obligatoire du champ, llment le plus appropri pour ces informations est llment em ou llment strong:
<div> <label for="author">Nom:<em class="required">(obligatoire)</em>/label> <input name="author" id="author" type="text" /> </div>

Vous pouvez aussi appliquer la mise en forme de votre choix ces informations. Dans cet exemple, jai rduit la taille de police et pass le texte en rouge:
.required {

Mise en forme des formulaires etdes tableaux de donnes

font-size: 0.75em; color:#760000; }

153

Et voil le travail: une mise en forme de formulaire simple et attrayante entirement ralise en CSS.

Mise en forme complexe de formulaire

Parcourir en un clin dil les formulaires plus longs et plus compliqus est difficile, et lespace vertical commence devenir un problme. Pour amliorer leur apprhension immdiate et rduire la quantit despace vertical utilis, il est judicieux de positionner les tiquettes et les lments de formulaire horizontalement au lieu de les empiler. Il est en fait trs simple de crer un formulaire comme celui de la Figure7.8, qui utilise exactement le mme code que celui du prcdent exemple.
Figure7.8
Alignement horizontal du formulaire.

La seule diffrence entre cet exemple et le prcdent tient ce que, au lieu de dfinir les tiquettes comme un lment de niveau bloc, il suffit de les faire flotter gauche. Vous devez en outre fixer leur largeur afin que tous les lments salignent harmonieusement:
label { oat: left; width: 10em; cursor: pointer; }

Si les tiquettes de formulaire doivent stendre sur plusieurs lignes, vous avez intrt dgager les div conteneurs galement. Vous les empcherez ainsi dinterfrer avec la prochaine srie dtiquettes et de rompre cette harmonie si bien prpare:

154

Matrise des CSS

form div { clear: left; }

Les formulaires sont rarement aussi simples que celui de la Figure7.8. Bien souvent, vous devrez crer des exceptions vos rgles de mise en forme de base afin de grer les composants multiples sur une mme ligne ou les colonnes de cases cocher et de boutons radio (voir Figure7.9). Les deux sections suivantes expliquent comment traiter ces types dexceptions.
Figure7.9
Une mise en forme de formulaire plus complexe.

Champ de date accessible

Comme vous venez de le voir, les tiquettes jouent un rle important dans laccessibilit des formulaires. Il arrivera pourtant parfois que vous ne souhaitiez pas afficher dtiquette pour chaque lment. La Figure7.9 prsente ainsi un groupe dlments de formulaire qui sert collecter des informations de date. Ici, il serait excessif dafficher chaque tiquette, car la date de naissance se trouverait dcompose en trois entits spares au lieu dtre apprhende comme une entit unique. Quand on ne veut pas afficher les tiquettes, il peut malgr tout tre utile de les faire figurer dans le code source et de les rendre ainsi disponibles pour les lecteurs dcran.
<div> <label for="dateOfBirth">Date de naissance:</label> <input name="dateOfBirth" id="dateOfBirth" type="text" /> <label id="monthOfBirthLabel" for="monthOfBirth">Mois de naissance:</label> <select name="monthOfBirth" id="monthOfBirth"> <option value=1>Janvier</option> <option value=2>Fvrier</option> <option value=3>Mars</option> </select> <label id="yearOfBirthLabel" for="yearOfBirth">Anne de naissance:</label> <input name="yearOfBirth" id="yearOfBirth" type="text" /> </div>

Pour crer cette disposition, vous devez dabord masquer les tiquettes "Mois de naissance" (monthOfBirth) et "Anne de naissance" (yearOfBirth). Si vous leur attribuiez la valeur none leur proprit display, vous les empcheriez de safficher, mais vous empcheriez aussi les lecteurs dcran dy accder. Au lieu de cela, vous pouvez les positionner hors cran avec un retrait de texte ngatif important. Dans le style de formulaire gnrique que

Mise en forme des formulaires etdes tableaux de donnes

155

nous avons cr prcdemment, on dfinissait la largeur des tiquettes. Pour empcher ces dernires daffecter la mise en forme, il faut aussi ramener zro leur largeur:
#monthOfBirthLabel, #yearOfBirthLabel { text-indent: -1000em; width: 0; }

Les diffrents contrles de formulaire peuvent tre redimensionns individuellement et recevoir des marges pour contrler leur espacement horizontal:
input#dateOfBirth { width: 3em; margin-right: 0.5em; }

select#monthOfBirth { width: 10em; margin-right: 0.5em; } input#yearOfBirth { width: 5em; }

Cases cocher multicolonnes

Crer une disposition deux colonnes pour les groupes importants de cases cocher ou de boutons radio est un petit peu plus compliqu. Les tiquettes ne fonctionnent que pour les lments individuels et non pour les groupes dlments. Idalement, il faudrait envelopper lensemble du groupe dans un ensemble de champs et utiliser la lgende comme tiquette du groupe. Malheureusement, cette solution nest pas pratique pour linstant, car les navigateurs ne grent pas uniformment le positionnement des lgendes. En attendant que cela soit le cas, le mieux est dutiliser un lment de titre la place. Pour crer leffet de colonne, les cases cocher sont divises en deux ensembles et chacun deux est envelopp dans une div laquelle est attribue la classe col. Ces lments sont ensuite regroups, envelopps dans un ensemble de champs avec un ID descriptif:
<eldset id="favoriteColor"> <h2>Favorite Color:</h2> <div class="col"> <div> <label><input class="checkbox" id="red" name="red" type="checkbox" value="red" />rouge</label> ... </div> </div> <div class="col">

156

Matrise des CSS

<div> <label><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />orange</label> </div> ... </div> </eldset>

Comme nous avons dj cr un style densemble de champs gnrique, la premire chose faire est de redfinir ces styles, de ramener zro le remplissage et les marges, de supprimer les bordures et de dfinir une couleur darrire-plan transparente:
eldset#favoriteColor { margin: 0; padding: 0; border: none; background: transparent; }

Le titre doit agir la manire dune tiquette. Il doit donc flotter gauche et avoir une largeur de 10cadratins comme les autres tiquettes. Il doit aussi ressembler une tiquette. Lestyle de police doit tre normal et la taille de police rduite.
#favoriteColor h2 { width: 10em; oat: left; font-size: 1em; font-weight: normal; }

La disposition en deux colonnes peut ensuite tre cre en donnant une largeur aux div et en les faisant flotter gauche. Toutefois, comme toutes les div dans ce formulaire ont t dgages gauche, il faut redfinir cette dclaration en utilisant clear:none.
#favoriteColor .col { width: 8em; oat: left; clear: none; }

Toutes les tiquettes dans ce formulaire flottent gauche et sont dfinies avec une largeur de 10cadratins. Les tiquettes pour les cases cocher nont cependant pas besoin dtre flottantes. Cette dclaration peut ainsi tre redfinie ici.
#favoriteColor label { oat: none; }

Nous venons de raliser une mise en forme de formulaire relativement complexe. Le style de formulaire simple se charge de la mise en forme gnrale et les exceptions sont gres de manire individuelle par redfinition des styles.

Mise en forme des formulaires etdes tableaux de donnes

157

Boutons denvoi Les formulaires sont un excellent moyen de rendre un site interactif et de renvoyer des donnes au serveur. Pour les actionner, vous aurez besoin dun contrle de bouton. Normalement, les utilisateurs se servent dun lment input dont lattribut type possde la valeur submit. Les boutons denvoi sont le moyen le plus courant de transmettre des donnes au serveur, mais ils ne sont pas sans poser de problme, notamment parce quils ne peuvent tre cibls avec un simple slecteur dlment. Ils peuvent tre cibls avec un slecteur dattribut, mais celui-ci nest pas pris en charge par les anciennes versions dInternet Explorer. La seule possibilit qui reste est donc de les cibler directement avec un slecteur dID ou de classe. Au lieu dutiliser un lment input, pourquoi ne pas utiliser llment button? Llment button sest rcemment acquis une certaine popularit, mais il reste toujours relativement mconnu et sous-utilis. Cest un tort, car il offre une grande flexibilit. Pour commencer, vous pouvez utiliser des balises button pour englober une image et la trans former ainsi en contrle (voir Figure7.10).
<div> <button type="submit"> <img src="/img/button.png" alt="Book Now" /> </button> </div>

Figure7.10
Un lment button qui utilise une image de bouton.

Les boutons ont une mise en forme par dfaut. Commencez par la dsactiver.
button { border: none; background: none; cursor: pointer; }

De nombreux systmes dexploitation, comme OSX, empchent les auteurs de modifier le style de leurs lments input de type submit, afin de prserver lhomognit daffichage de lensemble du systme. Mais llment button ne souffre pas de ces restrictions. On peut ainsi crer des styles de bouton avancs entirement en CSS. Par exemple, supposons que vous commenciez par ce simple bouton denvoi:
<p> <button type="submit">Book Now"</button> </p>

Vous pouvez commencer par lui donner des dimensions explicites et une bordure colore. Vous pouvez ensuite arrondir les bords avec la proprit border-radius et appliquer une lgante ombre de texte. Pour finir, vous pouvez appliquer un arrire-plan dgrad, soit

158

Matrise des CSS

avec une image, soit avec les dgrads WebKit. Le rsultat de cet exemple est prsent la Figure7.11.
button.two { width: 200px; height: 50px; border: 1px solid #989898; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background: url(/img/button-bg.png) #c5e063 bottom left repeat-x; -moz-box-shadow: 2px 2px 2px #ccc; -webkit-box-shadow: 2px 2px 2px #ccc; box-shadow: 2px 2px 2px #ccc; color: #fff; font-size: 26px; font-weight: bold; text-shadow: 1px 1px 1px #666; }

Figure7.11
Un lment de bouton entirement ralis en CSS.

La principale limite concernant les lments button tient la manire dont Internet Explorer6 et, dans une moindre mesure, Internet Explorer7 grent leur envoi. Au lieu denvoyer le contenu de lattribut value comme le font les autres navigateurs, ils envoient le contenu de llment. En outre, si la page contient plusieurs boutons, Internet Explorer6 transmet le contenu de tous les boutons au lieu de se limiter celui sur lequel lutilisateur a cliqu. Si vous souhaitez utiliser plusieurs boutons par page, assurez-vous donc quils ont tous la mme fonction, car il nest pas possible de savoir lequel a t activ dans les anciennes v ersions dInternet Explorer.

Retour de formulaire
Les formulaires requirent gnralement un message informatif qui signale les champs qui ont t omis ou mal remplis. Bien souvent, on affiche un message derreur ct du champ appropri (voir Figure7.12).
Figure7.12
Exemple de retour de formulaire.

Pour raliser cet effet, vous pouvez envelopper le texte de retour dans une balise em et la placer aprs le champ de saisie dans le code source. Pour que tout saligne correctement,

Mise en forme des formulaires etdes tableaux de donnes

159

il faut cependant que la balise em et le champ de saisie qui la prcde soient flottants. Cela a un effet sur le comportement du paragraphe enclos, qui son tour a un effet sur la mise en forme globale. En outre, bien des lecteurs dcran ignorent le texte entre les lments de formulaire, moins quil ne soit englob dans une tiquette. Pour viter ces problmes, la meilleure solution consiste inclure le texte du message derreur dans ltiquette de formulaire, puis le positionner laide des CSS:
<div> <label for="email">Adresse e-mail: <em class="feedback">Adresse e-mail incorrecte. Essayez nouveau. </label> <input name="email" id="email" type="text" /> </div>

</em>

Pour positionner llment em du message informatif, vous devez attribuer la valeur relative la proprit position de tous les paragraphes dans le formulaire, afin de fournir un nouveau contexte de positionnement. Vous pouvez ensuite positionner le message de manire absolue, afin quil apparaisse la droite du champ de saisie. Comme les tiquettes font 10cadratins de large et que les champs de saisie en font20, la position gauche de llment de message informatif peut tre fixe 30cadratins.
form div { position: relative; } form .feedback { position: absolute; left: 30em; right:0; top: 0.5em; }

Malheureusement, Internet Explorer 6 et ses versions antrieures ne dfinissent pas correctement la largeur du message (classe feedback) en la rendant aussi petite que possible. Pour rsoudre ce problme, vous devez dfinir une largeur explicite pour ce navigateur. Lune des solutions consiste utiliser des commentaires conditionnels, comme indiqu au Chapitre8:
form .feedback{ width: 10em; }

Vous pouvez ensuite appliquer la mise en forme de votre choix pour vos messages. Ici, jai pass le texte en rouge et en gras, avec une image davertissement gauche du message:
form div { position: relative; } .feedback { position: absolute; left: 30em;

160

Matrise des CSS

right :0; top: 0.5em; font-weight: bold; color: #760000; padding-left: 18px; background: url(/img/error.png) no-repeat left top; }

Vous pouvez aussi utiliser cette technique pour des messages de russite ou des conseils sur la manire de remplir des portions particulires du formulaire.

En rsum
Vous avez vu comment diffrentes mises en page de formulaire pouvaient convenir diffrentes situations. Vous savez maintenant mettre en forme des formulaires complexes en CSS, sans utiliser le moindre tableau. Vous avez vu comment utiliser des tableaux (pour afficher des donnes et non pour structurer la mise en page) et avez constat que cette mise en page pouvait ne pas tre si complique. Au chapitre suivant, vous exploiterez tout ce que vous avez appris jusque-l pour crer des mises en page CSS.

Mise en page
Lun des principaux intrts des CSS tient ce quelles permettent de contrler la mise en page sans utiliser de balise de prsentation dans le code HTML. Les mises en page CSS ont cependant la rputation dtre difficiles, notamment pour les dbutants. Cette rputation est due, en partie, au manque duniformit dans le traitement des navigateurs, mais surtout la prolifration des diffrentes techniques de mise en page disponibles sur le Web. Chaque auteur CSS semble avoir adopt sa manire de faire pour les mises en page multicolonnes et les nouveaux dveloppeurs CSS reprennent bien souvent des techniques sans vraiment comprendre ce quils font. Cette situation a empir avec larrive des frameworks CSS, qui visent faciliter la mise en page CSS en crant un couplage troit entre le balisage et la prsentation le dfaut mme qui nous avait pourtant pousss abandonner les mises en page tableaux. Cette faon de traiter les CSS comme une bote noire peut avoir son efficacit sil sagit dobtenir des rsultats rapides, mais elle empche, en fin de compte, le dveloppeur de comprendre le langage et dappliquer des modifications. Toutes ces techniques de mise en page CSS sappuient sur trois concepts lmentaires: le positionnement, le flottement et la manipulation des marges. Ces techniques ne diffrent pas tant que cela et, si vous saisissez les concepts essentiels, vous crerez assez facilement vos propres mises en page. En fait, la mise en page est bien souvent la partie la plus simple des CSS. Ce sont toutes les oprations dajustement qui prennent du temps. Au cours de ce chapitre, vous apprendrez : centrer horizontalement une mise en page dans le navigateur; crer des mises en page deux ou trois colonnes flottantes; crer des mises en page largeur fixe, liquides et lastiques; crer des colonnes de hauteurs gales; comparer les frameworks CSS et les systmes CSS.

Planification de la mise en page

Au moment de transformer les maquettes graphiques en pages entirement fonctionnelles, il peut tre trs tentant de se jeter directement leau et de commencer placer des balises dans une page ou dcouper des images. On se retrouve cependant vite coinc. Il est prfrable, en ralit, de prendre quelques instants pour se charger de la planification afin dviter bien des soucis par la suite. Cest le dicton des couturires: "On peut mesurer deux fois, mais on ne coupe quune seule fois." La premire tape pour crer un systme CSS volutif et facile grer consiste examiner les maquettes graphiques afin dy rechercher des motifs qui se rptent. Il peut sagir

162

Matrise des CSS

de motifs dans la structure de la page ou de la manire dont certains lments se rptent dans lensemble du site. La reprsentation visuelle ne doit pas encore particulirement vous proccuper ce stade. Intressez-vous plutt la structure et la signification. Pour ma part, jimprime gnralement chaque maquette de page et je repre les motifs puis jannote chaque page (voir Figure8.1). Jai aussi vu certaines personnes annoter directement leurs fichiers Photoshop ou leurs structures en blocs.
Figure8.1
Guides pour le balisage.

Commencez par dcomposer vos pages en leurs principales zones structurelles, comme la zone conteneur, len-tte, la zone de contenu et le pied de page. Ces zones restent gnralement uniformes dans lensemble du site et ne changent que rarement. Il sagit en quelque sorte des murs externes de votre btiment. Ensuite, portez votre attention sur la zone de contenu elle-mme et commencez construire la structure de grille. Combien de zones de contenu diffrentes y a-t-il et en quoi diffrent-elles? Les zones de contenu sont-elles si diffrentes ou peuvent-elles tre traites de la mme manire du point de vue de la mise en page? La plupart des mises en page ne contiennent que deux zones de contenu uniques: concentrez-vous donc plutt sur les points communs que sur les diffrences visuelles. Vous pouvez considrer ces zones de contenu comme les murs porteurs lintrieur de votre btiment. Pour finir, examinez les diffrentes structures de mise en page qui apparaissent dans les diffrentes zones de contenu. Devez-vous prsenter certains types dinformations dans deux, trois ou quatre colonnes? la diffrence des prcdentes, ces structures de mise en page tendent tre trs flexibles et changent de page en page. Vous pouvez les considrer comme les murs de cloisonnement. Combins avec ltape prcdente, ils aident former le plan des salles dun tage de limmeuble. ce stade, vous pouvez vous saisir du crayon et des marqueurs et commencer matrialiser plus prcisment la structure et les dimensions (voir Figure8.2).

Mise en page
Figure8.2
Calcul des dimensions sur du papier carreaux.

163

Une fois la structure en place, vous pouvez tourner votre attention vers les diffrents types de contenu. Sagit-il dun article de news, dun document ou dun communiqu de presse? Donnez chaque bloc un nom descriptif et voyez quels rapports les uns entretiennent avec les autres. Il se pourrait que seules des diffrences minimes distinguent les articles de news des communiqus de presse, auquel cas, il serait judicieux de les combiner comme un seul type de contenu. Voyez comment chaque bloc de contenu est structur et vrifiez si des motifs se remarquent entre les diffrents types. Par exemple, vous remarquerez que les articles et les brves dactualit utilisent tous deux un titre bien marqu et un pied de page. Identifiez-les comme tels. Peu importe que les titres et les pieds de page possdent une apparence diffrente: vous pourrez parfaitement les mettre en forme diffremment selon le contexte. Il en va de mme pour les messages derreur, les champs de recherche et les lments de menu. Essayez de vous en tenir des noms de classes aussi gnriques que possible et mettez-les en forme en fonction du contexte. Une fois que les motifs et les conventions de noms sont tris, vous pouvez commencer dfinir les lments que vous utiliserez. Par exemple, une liste de liens peut tre une liste puces, alors quun article correspondra une div avec un lment h2, un paragraphe et un lment dancre. Il est bien plus facile de prvoir cela, avec quelques collaborateurs, que de le faire la vole. Jai aussi remarqu quil tait utile de noter les codes de couleur, les dimensions et tous les autres renseignements ncessaires en cours de production. Vous pouvez cette fois encore placer ces annotations sur une impression papier de vos mises en page (voir Figure8.3).

164

Matrise des CSS

Figure8.3
Les caractristiques de dtail sont dfinies pour les diffrents types de contenu.

Les premires fondations

Supposons que nous souhaitions crer un modle de blog classique trois colonnes, comme celui de la Figure8.4.
Figure8.4
Mise en page classique trois colonnes.

Mise en page

165

Si on analyse la structure de page, il apparat clairement quil faudra un lment conteneur pour centrer la mise en page, ainsi quun en-tte, une zone de contenu et un pied de page. Lecode HTML ressemblera donc ceci:
<body> <div class="wrapper"> <div class="header> <!-- Le contenu de votre en-tte vient ici --> </div> <div class="content> <!-- Le contenu de votre page vient ici --> </div> <div class="footer"> <!-- Le contenu de votre pied de page vient ici --> </div> </div> </body>

Comme trois zones au moins sont encloses dans le conteneur (wrapper), commenons par appliquer les styles celui-ci.

Centrage dune mise en page laide des marges

Les longues lignes de texte peuvent tre difficiles lire et dplaisantes lil. Les moniteurs modernes ne cessant de sagrandir, la question de la lisibilit lcran devient de plus en plus importante. Lun des moyens par lesquels les concepteurs ont tent de rsoudre ce problme consiste centrer la mise en page. Au lieu de couvrir toute la largeur de lcran, les mises en page centres nen occupent quune partie, ce qui cre des lignes plus courtes et plus faciles lire. Supposons que vous utilisiez une mise en page classique o vous souhaitez centrer la div conteneur horizontalement lcran:
<body> <div class="wrapper"> </div> </body>

Pour cela, vous devez simplement dfinir sa largeur et attribuer la valeur auto ses marges horizontales:
.wrapper { width: 920px; margin: 0 auto; }

166

Matrise des CSS

Dans cet exemple, jai dcid de fixer la largeur de la div conteneur en pixels, afin quelle tienne parfaitement dans un cran de 1024768pixels. Vous pouvez cependant tout aussi aisment dfinir la largeur sous la forme dun pourcentage de llment body ou par rapport la taille du texte en utilisant des cadratins (em). Cette technique fonctionne sur tous les navigateurs modernes. Internet Explorer5.x et Internet Explorer6 en mode Quirks ninterprtent pas la dclaration margin:auto. Par chance, Internet Explorer interprte text-align: center trangement, en centrant tous les lments et pas seulement le texte. Vous pouvez donc exploiter cette bizarrerie en centrant tout dans la balise body, et notamment la div conteneur, puis en ralignant le contenu du conteneur gauche:
body { text-align: center; } .wrapper { width: 920px; margin: 0 auto; text-align: left; }

Cette manire dutiliser la proprit text-align est un hack (un bidouillage en CSS), mais elle est relativement inoffensive car elle na pas dimpact ngatif sur le site. Le conteneur apparat maintenant centr dans les versions plus anciennes dInternet Explorer comme dans les navigateurs modernes compatibles avec les standards (voir Figure8.5).
Figure8.5
Centrage dune mise en page avec margin:auto.

Mise en page

167

Mises en page flottantes

Il existe plusieurs moyens de crer des mises en page CSS, notamment avec un positionnement absolu et des marges ngatives. La mthode des mises en page flottantes est cependant la plus simple et la plus fiable. Elle consiste dfinir la largeur des lments positionner, puis les faire flotter gauche ou droite. Comme les lments flottants ne prennent pas despace dans le flux du document, ils ne semblent pas exercer dinfluence sur les botes de bloc alentour. Pour rsoudre ce problme, vous devez dgager les lments flottants diffrents emplacements de la mise en page. Au lieu de faire continuellement flotter les lments et de les dgager, on peut aussi tout faire flotter puis dgager un ou deux lments des emplacements stratgiques du document, comme au niveau du pied de page. Sinon, il est possible dutiliser la proprit overow pour dgager le contenu dlments particuliers. Cest ma mthode de choix et cest donc celle que jadopterai dans le reste des exemples.

Mise en page flottante deux colonnes

Pour crer une mise en page deux colonnes dans la zone de contenu, vous devez dabord crer la structure HTML de base.
<div class="content"> <div class="primary"> <!-- Le contenu principal vient ici --> </div> <div class="secondary> <!-- La navigation et le contenu secondaire viennent ici --> </div> </div>

La zone de contenu secondaire pour cette mise en page (qui inclut le systme de navigation du site) doit apparatre gauche de la page, le contenu principal tant pour sa part plac droite. Toutefois, jai choisi de placer la zone de contenu principal au-dessus de la zone de contenu secondaire dans lordre du code source, pour des raisons lies lutilisabilit et laccessibilit. Tout dabord, le contenu principal est la partie la plus importante de la page et doit donc venir en premier dans le document. Ensuite, tant que ce nest pas ncessaire, il est inutile de forcer les utilisateurs de lecteurs dcran parcourir tous les liens de navigation et le contenu moins important, comme les suggestions de sites, avant quils naient atteint le contenu principal. Normalement, lorsque les utilisateurs crent des mises en page flottantes, ils font flotter les deux colonnes gauche et, entre elles, ils crent une gouttire laide des proprits de marge et de remplissage. Avec cette mthode, les colonnes sont troitement lies dans lespace disponible, sans intervalle qui les spare. Ce ne serait pas vraiment un problme si les navigateurs savaient se tenir, mais les bogues de quelques-uns dentre eux peuvent dnaturer

168

Matrise des CSS

les mises en page cousues au pixel prs et contraindre les colonnes sempiler les unes sur les autres au lieu de se serrer cte cte. Ce phnomne peut surgir dans Internet Explorer, qui respecte la taille du contenu des lments plus que celle des lments eux-mmes. Dans les navigateurs conformes aux standards, si le contenu dun lment devient trop grand, il stend tout simplement hors de la bote. Sous Internet Explorer, dans un tel cas, cest llment tout entier qui stend. Cet effet indsirable peut tre provoqu par les plus infimes dtails, comme une portion de texte en italique. Quand ce problme survient dans une mise en page cisele au millimtre, il ne reste plus despace pour que les lments restent cte cte et lun dentre eux finit par disparatre en dessous. Dautres bogues dInternet Explorer, comme celui du dcalage de texte de 3pixels et celui de la double marge des lments flottants (voir le Chapitre9), ainsi que diffrentes erreurs darrondi des navigateurs peuvent provoquer leffondrement des mises en page flottantes. Pour empcher vos mises en page de se dfaire, vous devez viter de les engoncer lintrieur de leurs lments conteneurs. Au lieu dutiliser des marges et des remplissages horizontaux pour crer des gouttires, crez une gouttire virtuelle en faisant flotter un lment gauche et un autre droite (voir Figure8.6). Si la taille dun lment augmentait accidentellement de quelques pixels, il grignoterait un bout de la gouttire virtuelle au lieu de manquer despace et de glisser sous llment prcdent.
Figure8.6
Une mise en page deux colonnes avec des lments flottants.

#wrapper #subNav #content

float: left

float: right

clear: both Gouttire virtuelle

#footer

Le code CSS pour cette mise en page est trs simple. Vous devez fixer la largeur dsire de chaque colonne puis faire flotter le contenu secondaire gauche et le contenu principal droite. Vous devez aussi ajouter un lger remplissage au contenu principal afin dempcher que le texte enclos vienne toucher le bord droit de llment. Vous remarquerez que jai aussi ajout display:inline tous les lments flottants. Il sagit dune mesure dfensive contre le bogue de la double marge des lments flottants dInternet Explorer (nous reviendrons sur ce point au chapitre suivant).

Mise en page
.content .primary { width: 650px; padding-right: 20px; oat: right; display: inline; } .content .secondary { width: 230px; oat: left; display: inline; }

169

Comme la largeur totale disponible est de 920pixels, on obtient une gouttire virtuelle de 20pixels de large entre les lments flottants. Ainsi, la mise en page ne seffondrera pas si le contenu dborde de manire accidentelle. Comme ces lments sont flottants, ils ne prennent plus despace dans le flot du document et le pied de page remonte tout en haut. Pour viter cela, vous devez dgager les lments flottants en appliquant la mthode overow leur lment parent soit, ici, la div content.
.content { overow: hidden; }

Et voil le travail: une mise en page CSS simple deux colonnes (voir Figure8.7).
Figure8.7
Mise en page flottante deux colonnes.

170

Matrise des CSS

Vous remarquerez quau lieu de crer deux lments spars appels primary-content et secondary-content, jai simplement utilis les termes primary et secondary. Je me suis ensuite servi du fait que les deux lments sont imbriqus dans llment content pour crer lassociation. Cette mthode a plusieurs avantages. Dune part, vous navez pas crer des noms de classes pour chacun des lments que vous souhaitez mettre en forme. Au lieu de cela, vous pouvez tirer parti de la cascade. Dautre part, et cest un argument bien plus important, vous pouvez utiliser les mmes classes primary et secondary plusieurs fois, en crant un systme de nommage flexible. Par exemple, supposons que vous souhaitiez crer une mise en page trois colonnes au lieu de deux.

Mise en page flottante trois colonnes

Le code HTML requis pour crer une mise en page trois colonnes est trs proche de celui utilis pour la mise en page deux colonnes. La seule diffrence tient lajout de deux nouvelles div lintrieur de la div de contenu principale: lune pour le contenu principal et lautre pour le contenu secondaire. Les noms de classes flexibles primary et secondary peuvent ainsi tre utiliss nouveau.
<div class="content"> <div class="primary"> <div class="primary"> <-- Votre contenu principal vient ici --> </div> <div class="secondary"> <-- Votre contenu secondaire vient ici --> </div> </div> <div class="secondary> <!-- La navigation et le contenu secondaire viennent ici --> </div> </div>

Avec le mme code CSS que pour la technique deux colonnes, vous pouvez faire flotter le contenu secondaire gauche et le contenu principal droite. Ensuite, lintrieur de la div de contenu principal, vous pouvez faire flotter la div principale gauche et la div secondaire droite (voir Figure8.8). Cette opration divise en fait la zone de contenu principal en deux sous-zones, ce qui cre une mise en page trois colonnes.

Mise en page
Figure8.8
Nous crons la mise en page trois colonnes en divisant la colonne de contenu en deux colonnes.

171
#mainNav #content #mainContent #secondaryContent

float: left

float: right

#footer Gouttire virtuelle

Comme auparavant, le code CSS est trs simple. Vous devez simplement fixer les largeurs dsires puis faire flotter la div principale gauche et la div secondaire droite, en crant un interstice de 20pixels au milieu:
.content .primary .primary { width: 400px; oat: left; display: inline; } .content .primary .secondary { width: 230px; oat: right; display: inline; }

Vous remarquerez que le remplissage ct droit que nous avons attribu la div principale dans le premier exemple est maintenant appliqu la nouvelle div principale dans le second exemple. Nous devons donc supprimer le remplissage du style plus gnral et lappliquer directement au style spcifique.
.content .primary { width: 670px; /* largeur augmente et remplissage supprim */ oat: right; display: inline; } .content .secondary { width: 230px; oat: left;

172
}

Matrise des CSS

display: inline;

.content .primary .primary { width: 400px; oat: left; display: inline; } .content .primary .secondary { width: 230px; padding-right: 20px; /* le remplissage est appliqu ici la place */ oat: right; display: inline; }

Voil qui produit une lgante et robuste mise en page trois colonnes (voir Figure8.9).
Figure8.9
Mise en page trois colonnes ralise laide dlments flottants.

Mises en page largeur fixe, liquide et lastique

Jusquici, tous les exemples utilisaient des largeurs dfinies en pixels. Ce type de mise en page, dit largeur fixe, est trs courant, car il offre au dveloppeur un contrle complet sur la mise en page et le positionnement. Si vous fixez la largeur de la maquette 960pixels de large, elle fera toujours 960pixels de large. Si vous souhaitez ensuite placer un logo en haut de la page, vous savez quil devra faire 960pixels pour y tenir. Le fait de connatre la largeur exacte de chaque lment permet de les disposer prcisment et de savoir o chaque partie

Mise en page

173

vient se placer. La mthode de la largeur fixe est en consquence la plus simple utiliser et la plus couramment employe. Les mises en page largeur fixe ont cependant leurs inconvnients. Comme elles sont fixes, elles conservent la mme taille, quelle que soit la taille de la fentre du navigateur. Elles utilisent donc mal lespace disponible. Sur les crans haute rsolution, les mises en page cres pour les crans 1024760pixels peuvent sembler menues, comme perdues au milieu de lcran. linverse, une mise en page cre pour une rsolution de 1024760pixels contraindra lutilisateur faire dfiler lcran horizontalement avec les rsolutions dcran plus petites. Alors que la varit des tailles dcran ne cesse daugmenter, ces types de mises en page ont le dfaut de mal sadapter la nature flexible du Web. Ils constituent cet gard un compromis quelque peu maladroit. Leur autre problme concerne les longueurs des lignes et la lisibilit du texte. Si elles fonctionnent bien avec la taille de texte par dfaut des navigateurs, il suffit en revanche daugmenter cette taille de quelques points pour que les colonnes latrales se mettent manquer despace et que les longueurs de ligne soient insuffisantes pour une lecture confortable. Pour contourner ces problmes, vous pouvez choisir une mise en page liquide ou lastique plutt quune structure largeur fixe.

Mises en page liquides

Dans les mises en page liquides, les dimensions sont dfinies laide de pourcentages et non de pixels. Ces mises en page peuvent ainsi se redimensionner en fonction de la fentre du navigateur. Plus cette dernire sagrandit, plus les colonnes slargissent. Inversement, plus la fentre se rtrcit, plus les colonnes se rduisent en largeur. Les mises en page liquides exploitent efficacement lespace et, si le travail est bien adapt, les mieux conues ne se remarquent mme pas. Cependant, elles ont aussi leurs problmes. Lorsque la largeur de la fentre du navigateur est troite, les longueurs de lignes peuvent tre trs faibles et le texte difficile lire, notamment avec les mises en page multicolonnes. Il peut alors tre intressant de spcifier une largeur minimale (min-width) en pixels ou en cadratins pour empcher la mise en page de devenir trop troite. Mais si la valeur de min-width est trop grande, la mise en page hrite alors des mmes dfauts que celles largeur fixe. linverse, si la mise en page stend sur la largeur entire de la fentre du navigateur, les lignes peuvent devenir trop longues et difficiles lire. Il existe plusieurs solutions pour viter ce problme. Tout dabord, au lieu de couvrir la totalit de la largeur, vous pouvez amener le conteneur nen couvrir quun certain pourcentage (par exemple, 85%). Vous pouvez envisager de dfinir le remplissage et les marges internes sous forme de pourcentage galement. Le remplissage et les marges augmenteront ainsi proportionnellement la taille de la fentre, en empchant les colonnes de slargir trop rapidement. Enfin, vous pouvez dfinir une largeur maximale pour le conteneur afin dviter que le contenu ne devienne excessivement large sur les moniteurs de grande taille.

174

Matrise des CSS

Ces techniques peuvent tre utilises pour transformer la prcdente mise en page largeur fixe sur trois colonnes en une mise en page fluide trois colonnes. Commenons par dfinir la largeur du conteneur sous la forme dun pourcentage de la largeur totale de la fentre. La plupart des utilisateurs choisissent une taille arbitraire calcule en fonction de lapparence qui leur convient lcran, et cest bien ainsi. Mais si vous souhaitez tre plus prcis, examinez vos statistiques de navigateur pour calculer la taille de fentre la plus courante et choisissez un pourcentage de conteneur qui correspond ce que la largeur fixe donnerait cette taille. Liquid Fold (http://liquidfold.net/) est un excellent outil pour cela. Par exemple, si votre graphiste a utilis une largeur de 960pixels et que la fentre de navigateur de la majorit de vos utilisateurs est dfinie 1 250 pixels, le pourcentage utiliser est (960/1250)100=76,8%. Ensuite, fixez la largeur des zones de contenu principale et secondaire sous la forme dun pourcentage de la largeur du conteneur. Dans lexemple prcdent, la largeur de la div de contenu principal tait de 670pixels. Comme la largeur totale tait de 920pixels, cela correspond 72,82%. De la mme manire, la largeur de la div de contenu secondaire correspond 25% prcisment. Ce qui laisse 2,18% de gouttire virtuelle entre la navigation et le conteneur pour intgrer les erreurs darrondi et les irrgularits susceptibles de se produire:
.wrapper { width: 76.8%; margin: 0 auto; text-align: left; } .content .primary { width: 72.82%; oat: right; display: inline; } .content .secondary { width: 25%; oat: left; display: inline; }

Vous devez ensuite dfinir les largeurs des colonnes lintrieur de la zone de contenu principale. L, les choses se compliquent un peu, car les largeurs des div de contenu dpendent de la largeur de llment de contenu principal et non du conteneur global. Cette fois, la largeur de la div principale est de 400pixels, ce qui correspond 59,7% de llment parent. De la mme manire, la largeur de la div secondaire correspond 34,33% de llment parent. Pour finir, il faut encore une gouttire de 20pixels, ce qui correspond 2,63% de llment parent.
.content .primary .primary { width: 59.7%; oat: left; display: inline; }

.content .primary .secondary {

Mise en page
width: 34.33%; padding-right: 2.63%; oat: right; display: inline; }

175

Ces paramtres produisent une mise en page liquide optimale pour une fentre de 1250pixels, mais aussi confortable pour la lecture avec des rsolutions dcran plus hautes ou plus restreintes (voir Figure8.10).
Figure8.10
Mise en page liquide trois colonnes 800600, 1024768 et 1250900pixels.

Comme cette mise en page sadapte trs agrablement, il nest pas ncessaire dajouter une proprit max-width. Pour sassurer que les lignes de texte conservent une longueur qui les rende lisibles, il est cependant toujours judicieux dajouter un rglage max-width dfini en cadratins (em). La mise en page est un peu trique avec les fentres de petite taille: jajoute donc aussi un rglage min-width en cadratins.
.wrapper { width: 76.8%; margin: 0 auto; text-align: left; max-width: 125em; min-width: 62em; }

Et voil le travail: une mise en page agrable, flexible et liquide.

176

Matrise des CSS

Mises en page lastiques

Si les mises en page liquides sont utiles pour tirer le meilleur parti de lespace disponible dans la page, il peut nanmoins arriver que les longueurs de lignes soient excessives sur les moniteurs haute rsolution. linverse, les lignes peuvent devenir trop courtes et fragmentes dans les fentres troites ou lorsque la taille du texte est augmente de quelques points. Si cela pose un problme, la solution peut se trouver dans une mise en page lastique. Les mises en page lastiques dfinissent la largeur des lments par rapport la taille de la police au lieu de la largeur du navigateur. Avec des largeurs en cadratins, vous avez la garantie que, lorsque la taille de police augmente, toute la mise en page sajuste en fonction. Les longueurs de lignes conservent ainsi une taille lisible, un ajustement particulirement utile pour les personnes vision rduite. Comme toutes les techniques de mise en page, celles-ci ont leurs inconvnients. Elles ont quelques dfauts en commun avec les mises en page largeur fixe, dont celui de ne pas exploiter pleinement lespace disponible. En outre, elles peuvent devenir beaucoup plus larges que la fentre du navigateur comme lensemble de la mise en page sagrandit quand la taille du texte augmente ce qui contraint faire apparatre les barres de dfilement horizontales. Pour viter cela, on peut ajouter une proprit max-width fixe 100% de la div conteneur. max-width nest pas pris en charge par Internet Explorer6 et ses versions antrieures, mais il lest par les nouvelles versions. Si vous souhaitez rendre max-width oprant dans Internet Explorer6, vous pouvez utiliser du JavaScript galement. Les mises en page lastiques sont plus simples crer que les mises en page liquides car tous les lments HTML restent au mme endroit les uns par rapport aux autres, se contentant de changer de taille. Transformer une mise en page largeur fixe en mise en page lastique est assez simple. Lastuce consiste dfinir la taille de police de base de manire quun cadratin (1em) corresponde approximativement 10pixels. Dans la plupart des navigateurs, la taille de police par dfaut est de 16pixels. 10pixels correspondent 62,5% de 16pixels. Il suffit alors de dfinir une taille de police pour llment body fixe 62,5%:
body { font-size: 62.5%; text-align: center; }

Comme 1cadratin vaut maintenant 10pixels la taille de police par dfaut, la mise en page largeur fixe peut assez facilement tre convertie en mise en page lastique. Dans les prcdentes ditions de ce livre, jai recommand de dfinir toutes les largeurs en cadratins. Ma collgue et relectrice Natalie Downe a cependant suggr de conserver les largeurs internes sous forme de pourcentages et de ne dfinir que la largeur du conteneur en cadratins. De cette manire, les largeurs internes se redimensionnent toujours en fonction de la taille de police. Il est ainsi possible de modifier la taille globale de la mise en page sans avoir changer la largeur de chaque lment individuel. Ce systme est donc plus flexible et plus simple grer.
.wrapper { width: 92em; max-width: 95%;

Mise en page
margin: 0 auto; text-align: left; } .content .primary { width: 72.82%; oat: right; display: inline; } .content .secondary { width: 25%; oat: left; display: inline; }

177

.content .primary .primary { width: 59.7%; oat: left; display: inline; } .content .primary .secondary { width: 34.33%; padding-right: 2em; oat: right; display: inline; }

Avec ce code, on obtient une mise en page identique la mise en page largeur fixe dans le cas dune taille de police standard (voir Figure8.11), mais qui se rajuste lgamment lorsque la taille du texte est augmente (voir Figure8.12).
Figure8.11
La mise en page lastique la taille de texte par dfaut.

178

Matrise des CSS

Figure8.12
La mise en page lastique une fois la taille du texte augmente de plusieurs crans.

Alors que presque tous les navigateurs modernes proposent des outils de zoom, on peut se demander si les mises en page lastiques avaient encore le moindre intrt. Oui, tant que tous les navigateurs ne proposeront pas cette fonctionnalit, il sera intressant de dvelopper des mises en page lastiques pour les navigateurs plus anciens.

Images liquides et lastiques

Dans une mise en page liquide ou lastique, vous constaterez peut-tre que les images largeur fixe ont un effet dvastateur sur la structure des pages. Lorsque la largeur de la mise en page est rduite, les images se dplacent en fonction et peuvent interfrer les unes avec les autres. Certaines crent des largeurs minimales naturelles, qui empchent des lments de diminuer de taille. Dautres sortent de leurs lments conteneurs et chamboulent des mises en page pourtant ajustes au millimtre. Laugmentation de la largeur de la mise en page peut avoir des consquences dramatiques en crant des interstices indsirables et en dsquilibrant les proportions. Pas de panique: il existe quelques moyens dviter ces problmes. Pour les images qui doivent couvrir une grande zone, comme celles que lon trouve dans les en-ttes des sites ou les logos, envisagez dutiliser une image darrire-plan plutt quun lment img. Ainsi, lorsque llment est mis lchelle, cest une partie plus ou moins importante de limage darrire-plan qui se rvle:
#branding { height: 171px; background: url(/img/branding.png) no-repeat left top; } <div id="branding"></div>

Mise en page

179

Si limage doit se trouver dans la page sous forme dlment img, essayez de fixer la largeur de llment conteneur 100% et attribuez la valeur hidden la proprit overow. Limage sera dtoure du ct droit de manire tenir lintrieur de llment branding, mais elle se mettra lchelle en mme temps que la mise en page:
#branding { width: 100%; overow: hidden; } <div id="branding"> <img src="/img/branding.png" width="1600" height="171" /> </div>

Pour les images normales de contenu, vous voudrez sans doute quelles se redimensionnent verticalement et horizontalement, afin dviter tout dtourage. Vous pouvez le faire en ajoutant un lment img la page sans en spcifier les dimensions. Ensuite, dfinissez la largeur en pourcentage de limage et ajoutez un paramtre max-width de la mme taille que limage pour viter la pixellisation. Par exemple, supposons que vous souhaitiez crer un style darticles dactualits avec une colonne dimage troite gauche et une colonne de texte plus large droite. Limage doit faire approximativement le quart de la largeur de la bote conteneur, le texte prenant le reste de la place. Vous pouvez le faire en fixant la largeur de limage 25% et en dfinissant une valeur max-width gale la taille de limage, soit ici 200pixels de large:
.news img { width: 25%; max-width: 200px; oat: left; display: inline; padding: 2%; } .news p { width: 68%; oat: right; display: inline; padding: 2% 2% 2% 0; }

Lorsque llment news stend ou se contracte, limage et les paragraphes stendent ou se contractent galement, en conservant leur quilibre visuel (voir Figure8.13). Dans les navigateurs compatibles avec les standards, limage ne dpasse cependant jamais sa taille actuelle.

180

Matrise des CSS

Figure8.13
En donnant aux images une largeur en pourcentage, vous leur offrez la possibilit de se redimensionner galement en fonction du contexte.

Fausses colonnes
Vous aurez peut-tre remarqu que les zones de navigation et de contenu secondaire dans toutes ces mises en page prsentent un arrire-plan gris clair. Idalement, larrire-plan devrait stendre sur toute la hauteur de la mise en page, afin de crer un effet de colonne. Pourtant, comme les zones de navigation et de contenu secondaire ne courent pas sur toute la hauteur, leurs arrire-plans sarrtent avant datteindre le bas. Pour crer leffet de colonne, vous pouvez fabriquer de fausses colonnes en appliquant une image darrire-plan rpte un lment qui stend sur toute la hauteur de la mise en page, comme la div conteneur. Dan Cederholm a forg lexpression anglaise de "faux column" (colonne factice) pour dcrire cette technique. Avec la mise en page en deux colonnes largeur fixe, appliquez tout simplement llment conteneur une image darrire-plan rpte verticalement et de mme largeur que la zone de navigation (voir Figure8.14):
#wrapper { background: #fff url(/img/nav-bg-xed.gif) repeat-y left top; }

Mise en page
Figure8.14
Colonne factice largeur fixe.

181

Pour la mise en page en trois colonnes largeur fixe, vous pouvez utiliser une mthode similaire. Cette fois, limage darrire-plan rpte doit cependant couvrir toute la largeur du conteneur et inclure les deux colonnes (voir Figure8.15). En appliquant cette image comme dans lexemple prcdent, vous crez un lgant effet de colonne factice (voir Figure8.16).
Figure8.15
Image darrireplan utilise pour crer leffet des trois colonnes factices.

Figure8.16
Effet des trois colonnes factices.

Il est assez facile de crer des colonnes factices pour les mises en page largeur fixe, car vous connaissez ncessairement la taille des colonnes et leurs positions. Pour les mises en page fluides, laffaire se complique quelque peu. Les colonnes changent de forme et de position

182

Matrise des CSS

lorsque la fentre du navigateur est redimensionne. Lastuce consiste alors utiliser des pourcentages pour positionner limage darrire-plan. Si vous dfinissez une position darrire-plan laide de pixels, le coin suprieur gauche de limage est positionn par rapport au coin suprieur gauche de llment et dcal du nombre de pixels spcifi. Avec le positionnement en pourcentage, cest le point correspondant dans limage qui est positionn. Ainsi, si vous dfinissez une position verticale et horizontale de 20%, vous positionnez en fait un point qui se trouve 20% du coin suprieur gauche de limage et vous le calez 20% du coin suprieur gauche de llment parent (voir Figure8.17).
Positionnement de larrire-plan en pixels 20px 20px x (0,0) 20 % Positionnement de larrire-plan en pourcentage 20 % x (20 %, 20 %)

Figure8.17
Lorsque le positionnement est spcifi en pourcentage, cest la position correspondante de limage qui est utilise.

Le positionnement des images en pourcentage peut tre trs utile, car il permet de crer des images darrire-plan avec les mmes proportions horizontales que la mise en page, puis de les positionner l o vous souhaitez que les colonnes apparaissent. Pour crer une colonne factice pour la zone de contenu secondaire, commencez par crer une image darrire-plan trs large. Dans cet exemple, jai cr une image de 4000pixels de large et 5pixels de haut. Ensuite, vous devez crer une zone sur limage darrire- plan qui agira comme une fausse colonne. La zone de contenu secondaire a t fixe 25% de la largeur du conteneur. Vous devez donc crer une zone correspondante sur limage darrireplan, qui atteint 25% de sa largeur. Pour une image darrire-plan de 4000pixels de large, cela reprsente une colonne de 1000pixels de large. Exportez cette image au format GIF, en vous assurant que la zone non couverte par la colonne factice est transparente. Le bord droit de la colonne factice se trouve maintenant 25% du ct gauche de limage. Le bord droit de la zone de contenu secondaire est 25 % du bord gauche de llment conteneur. Cela signifie que, si vous appliquez limage comme arrire-plan llment conteneur et fixez la position horizontale 25%, le bord droit de la colonne factice saligne parfaitement avec le bord droit de llment de navigation.

Mise en page
.wrapper { background: #fff url(/img/secondary-faux-column.gif) repeat-y 25% 0; }

183

Vous pouvez crer larrire-plan pour la zone de contenu principale laide dune mthode similaire. Le bord gauche de cette colonne factice doit commencer 72,82 % du bord gauche de limage pour se caler sur la position de llment de contenu principal par rapport au conteneur. Comme llment conteneur possde dj une image darrire-plan, vous devez ajouter un second lment conteneur lintrieur du premier. Vous pouvez ensuite appliquer la seconde image darrire-plan de colonne factice ce nouvel lment conteneur.
.inner-wrapper { background: url(/img/primary-faux-column.gif) repeat-y 72.82% 0; }

Si vous avez bien calcul les proportions, vous devriez ainsi obtenir une magnifique mise en page liquide trois colonnes qui stire sur toute la hauteur du conteneur (voir Figure8.18).

Figure8.18
Mise en page trois colonnes factices.

Colonnes de hauteurs gales

En plus des colonnes que vous crerez pour la mise en page principale, vous pouvez crer des colonnes de hauteurs gales dautres endroits (voir Figure8.19). Si le rsultat est facile obtenir avec des tableaux, il est plus difficile raliser en CSS.

184

Matrise des CSS

Figure8.19
Trois colonnes de hauteurs gales.

Commenons par le code HTML.

<div class="wrapper"> <div class="box"> <h1>Andy Budd</h1> <p>...</p> <div class="bottom"></div> </div> <div class="box"> <h1>Richard Rutter</h1> <p>...</p> <div class="bottom"></div> </div>

<div class="box"> <h1>Jeremy Keith</h1> <p>...</p> <div class="bottom"></div> </div> </div>

Pour cet exemple, vous aurez besoin de trois div une pour chacune des trois colonnes. lintrieur de chaque div, il faut un titre, du texte et une div vide utiliser comme ancrage pour les bords arrondis du bas. Les trois div sont ensuite encloses dans une div conteneur (wrapper) que vous allez utiliser pour fixer la hauteur. Nous pouvons maintenant commencer mettre en forme les botes.
.wrapper { width: 100%; } .box {

Mise en page
width: 250px; margin-left: 20px; oat: left; display: inline; padding: 20px; background: #89ac10 }

185

url(/img/top.gif) no-repeat left top;

Comme vous pouvez le voir la Figure8.20, on obtient ainsi trois colonnes de hauteurs ingales.

Figure8.20
Les trois colonnes avant lapplication de la technique principale.

Lastuce de cette technique est de donner chaque bote une grande quantit de remplissage infrieur puis supprimer cette hauteur en excs laide dune valeur gale de marge ngative. Chaque colonne se trouve ainsi force de dborder llment conteneur (voir Figure8.21). Si vous attribuez ensuite la valeur hidden la proprit overow du conteneur, les colonnes sont tronques au niveau de leur plus grande longueur. Dans cet exemple, je donne chaque lment un remplissage infrieur de 520pixels et une marge infrieure de 500pixels. Les 20pixels de diffrence forment le remplissage visible en bas de chaque bote.
.wrapper { width: 100%; overow: hidden; } .box { width: 250px; padding-left: 20px;

186

Matrise des CSS

padding-right: 20px; padding-top: 20px; padding-bottom: 520px; margin-bottom: 500px; margin-left: 20px; oat: left; display: inline; background: url(/img/top.gif) #89ac10 top left no-repeat; }

Figure8.21
La bordure rouge dlimite la div conteneur, afin que vous puissiez voir de quelle manire les trois colonnes dbordent de cet lment.

Pour positionner le bas des colonnes au bon endroit, vous devez les aligner avec le bas de llment conteneur. Pour cela, vous devez dabord dfinir le contexte de positionnement en attribuant au conteneur un positionnement relatif (position: relative). Vous pouvez ensuite attribuer un positionnement absolu aux div vides et la valeur 0 leur proprit bottom. Il ne reste plus qu donner aux lments la largeur et la hauteur adquates puis appliquer limage du bas sous forme darrire-plan.
.wrapper { width: 100%; overow: hidden; position: relative; } .box { width: 250px; padding-left: 20px; padding-right: 20px;

Mise en page
padding-top: 20px; padding-bottom: 520px; margin-bottom: 500px; margin-left: 20px; oat: left; display: inline; padding: 20px; background: url(/img/top.gif) #89ac10 top left no-repeat; } .bottom { position: absolute; bottom: 0; height: 20px; width: 290px; background: url(/img/bottom.gif) #89ac10 bottom left no-repeat; margin-left: -20px; }

187

Rsultat: une mise en page trois colonnes qui conserve la hauteur de sa colonne la plus longue, comme le montre la Figure8.19. Pas mal, non?

Colonnes CSS3
La spcification CSS3 permet aussi de crer des colonnes de texte de hauteurs gales (voir Figure8.22), grce aux proprits column-count, column-width et column-gap.
Figure8.22
Ces colonnes de texte ont t cres avec les proprits de colonne de la spcification CSS3.

Commencez par le balisage suivant:

<h1>Socrate</h1> <div class="col"> <p>Aprs avoir philosoph un moment...</p> </div>

188

Matrise des CSS

En appliquant ces rgles, vous allez crer une mise en page trois colonnes, chacune large de 14cadratins et carte des autres dun intervalle de 2cadratins. Lintrt des colonnes CSS tient leur gestion lorsque lespace disponible est moindre que la largeur des colonnes dfinies. Au lieu que les colonnes soient chasses la ligne comme cela se produit avec les lments flottants, leur nombre se rduit. Si vous navez pas assez despace pour trois colonnes, vous revenez deux colonnes.
.col { -moz-column-count: 3; -moz-column-width: 14em; -moz-column-gap: 2em; -moz-column-rule: 1px solid #ccc; -webkit-column-count: 3; -webkit-column-width: 14em; -webkit-column-gap: 2em; -webkit-column-rule: 1px solid #ccc; column-count: 3; column-width: 14em; column-gap: 2em; column-rule: 1px solid #ccc; }

Comme vous pouvez probablement le voir dans ce code, les colonnes CSS ne sont pas encore largement prises en charge. Vous devez donc flanquer le code standard dextensions spcifiques des navigateurs.

Frameworks CSS et systmes CSS

Dans lunivers de la programmation, les frameworks, comme Rails ou Django, reprennent les patterns de programmation courants du dveloppement web, comme lajout denregistrements une base de donnes, et en proposent une abstraction par le biais dun jeu simple de composants rutilisables. Cette abstraction permet aux dveloppeurs de construire des applications relativement sophistiques sans devoir recrer ces fonctions de toutes pices. la diffrence des bibliothques de fonctions autonomes, les frameworks ont tendance tre extrmement intgrs. cet gard, ils sont si abstraits quil est possible, encore que ce ne soit pas souhaitable, de crer des applications entires sans mme comprendre le langage parent. Au cours des deux dernires annes sont lentement apparus ce quon a appel des frameworks CSS. Censs rduire la corve de programmation des CSS et aider les utilisateurs crer des mises en page courantes sans diter le code sous-jacent, ils encouragent en fait les dveloppeurs utiliser un certain nombre de procds de balisage et de conventions denoms en laissant la mise en page se grer larrire-plan. Les trois frameworks les plus connus sont YUI Grids, Blueprint et 960 (voir Figure8.23), mais il en existe quelques autres. Ces frameworks offrent plusieurs avantages en termes de productivit, dont les rinitialisations de styles globaux, la gestion typographique de niveau site et le traitement uniformis des formulaires autant daspects dont vous aurez besoin pour la majorit de vos projets.

Mise en page

189

Figure8.23
Les sites web YUI, Blueprint et 960.

Malheureusement, ils changent galement votre manire de programmer le code HTML et brouillent la sparation entre prsentation et signification. Par exemple, le balisage utilis dans le framework Blueprint est par nature un balisage de prsentation, qui sexprime en termes de colonnes et dtendue de colonnes:

190

Matrise des CSS

<div class="column span-24"> <!-- en-tte --> </div> <div class="column span-4"> <!-- barre latrale gauche --> </div> <div class="column span-16"> <!-- contenu principal --> </div> <div class="column span-4 last"> <!-- barre latrale droite --> </div>

Quand les dveloppeurs emploient des frameworks pour contrler la mise en page, ils se trouvent contraints dutiliser un style de balisage ax sur la prsentation qui ressemble aux anciennes maquettes tableaux. On pourrait mme avancer que les tableaux valent mieux que les frameworks CSS, car ils utilisent le mme balisage ax sur la prsentation mais sans les CSS en plus charger. Les frameworks forcent en outre le dveloppeur connatre non seulement le langage sous-jacent mais aussi celui du framework. Le plus souvent, cela narrive mme pas et le dveloppeur se retrouve avec une connaissance superficielle des deux. Les frameworks ont comme autre dsavantage dimposer une structure quadrille particulire vos mises en page. Cest parfait lorsque celles-ci concordent avec les largeurs et les marges dfinies par le framework. Mais tout comme il nest pas acceptable que votre framework de programmation vienne imposer un fonctionnement type votre site web, il est inacceptable que votre framework CSS en rglemente la prsentation. Lorsque vous adoptez un framework spcifique, vous risquez de lutiliser pour chaque projet et de vous retrouver dans une ornire. "Quand on na quun marteau, tout ressemble un clou!" Ces problmes sclairent quand on comprend do viennent les frameworks. Au lieu dtre conus de toutes pices comme un systme de mise en forme flexible pour toutes sortes de conceptions, ils ont t crs pour la plupart sur des sites comme Yahoo! ou le Laurence Kansas Journal. Ces sites possdaient dj des structures quadrilles et des guides de styles bien dfinis. Les dveloppeurs savaient donc que chaque nouvelle page obirait aux mmes principes. Au fil du temps, ils ont trouv dautres usages pour ces systmes et en ont propos des abstractions, puis les ont mis disposition du public. Mais ladaptation de ces frameworks leurs sites dorigine reste vidente pour qui les utilise aujourdhui. Comment, ds lors, tirer parti des avantages en termes de productivit quoffrent les frameworks CSS, sans ptir de leurs inconvnients? Cest tout lintrt des systmes CSS. Un systme CSS est une sorte de bote outils rutilisable de styles et de principes de balisage qui peut tre utilise pour dvelopper des frameworks propres tel ou tel site. Cette bote outils peut inclure vos redfinitions globales, vos styles typographiques et vos traitements des formulaires, ainsi que des patterns de code HTML pour les composants HTML courants comme les formulaires dinscription, les tableaux de calendrier et les listes de navigation. Vous pouvez ensuite utiliser les techniques apprises dans ce livre pour dvelopper pour vos clients un systme qui agit la manire dun framework personnalis, avec toutes les options de mises en forme dont vous pourriez avoir besoin. Ce processus requiert au dpart un petit effort supplmentaire de votre part, mais il offre tous les avantages dun framework CSS sans ses inconvnients.

Mise en page

191

En rsum
Vous avez appris crer des mises en page simples deux et trois colonnes en largeur fixe laide dlments flottants. Vous avez ensuite vu comment convertir ces mises en page en mises en page liquides et lastiques. Vous avez dcouvert certains des problmes lis ces types de structurations et vu quelles solutions taient possibles en fixant des largeurs maximales en cadratins ou en pixels. Vous avez galement vu comment crer des effets de colonne en pleine longueur avec les mises en page largeur fixe ou flexible, en utilisant des images darrire-plan rptes verticalement. Ce chapitre a aussi fourni loccasion daborder les techniques utilises pour crer des mises en page CSS. Les techniques sont cependant innombrables et suffiraient remplir un livre elles seules. Enfin, vous avez dcouvert certains des dangers inhrents aux frameworks CSS et compris combien il tait prfrable de dvelopper votre propre systme CSS. Lun des principaux cueils auxquels les dveloppeurs se trouvent confronts avec les mises en page CSS tient au manque duniformit dans le traitement des diffrents navigateurs. Pour rsoudre les problmes lis aux variations daffichage des navigateurs, vous devez bien connatre les diffrents bogues et savoir les rsoudre. Au chapitre suivant, vous allez dcouvrir certains des bogues les plus connus et vous familiariser avec les bases du dbogage CSS.

Bogues et correctifs
Compar bien des langages de programmation, le langage des CSS est assez facile apprendre. Sa syntaxe est simple et, parce quil est par nature ax sur la prsentation, il nexige pas de se familiariser avec une logique complexe. Tout se complique en fait lorsquil sagit de tester le code dans diffrents navigateurs. Les bogues des navigateurs et leur manque duniformit dans laffichage sont les principales embches qui jalonnent le chemin des dveloppeurs CSS. Telle mise en page peut avoir fire allure sur un navigateur et, sans raison apparente, se retrouver sens dessus dessous dans un autre. La rputation quont les CSS dtre difficiles ne provient pas du langage lui-mme, mais des contorsions requises pour que les sites fonctionnent dans les anciens navigateurs. Il nest pas facile de trouver des informations sur les bogues, mal documents et parfois mme mal compris. Les hacks sont souvent utiliss par les dveloppeurs comme des formules magiques incomprhensibles, mais qui miraculeusement, une fois appliques au code, remettent tout en ordre. Ils font effectivement partie des outils dont il faut doter son arsenal, mais ils ne doivent tre appliqus quavec parcimonie et gnralement en dernier recours. Il est en ralit bien plus important de savoir pister, isoler et identifier les bogues. Ce nest quune fois que lon a prcisment reconnu un bogue quil faut chercher des moyens de le rsoudre. Au cours de ce chapitre, vous en apprendrez plus sur: la manire de pister les bogues CSS; la mystrieuse proprit hasLayout; les hacks et les filtres; les bogues de navigateur les plus courants et leurs correctifs; la prise en charge chelonne des navigateurs.

La chasse aux bogues

Tous les navigateurs sont bogus et certains plus que dautres. Lorsquun dveloppeur CSS rencontre un problme avec son code, il est mme immdiatement tent den conclure que le problme vient du navigateur et de chercher un hack ou une solution de rechange. Les bogues de navigateur ne sont pourtant pas si courants quon aime le penser. Les problmes CSS les plus courants proviennent non pas des bogues des navigateurs mais dune comprhension incomplte de la spcification CSS. Pour viter ces problmes, il est prfrable daborder les bogues CSS en prsupposant dabord quon a soi-mme commis une erreur. Ce nest quune fois que vous tes sr que vous navez pas fait derreur que vous devez considrer que le problme rsulte dun bogue de navigateur.

194

Matrise des CSS

Problmes CSS courants

Certains des problmes CSS les plus simples sont causs par des erreurs typographiques et syntaxiques dans le code, par exemple si vous oubliez de terminer les dclarations par un point-virgule ou si vous tapez font-face au lieu de font-family. Lun des moyens simples dviter ces problmes se trouve dans le choix dun diteur CSS comme SKEdit ou CSS Edit, qui inclut une mise en forme de la syntaxe et des fonctionnalits de saisie semiautomatique du code. Ces fonctionnalits vitent les erreurs de base mais ne remplacent pas une vritable validation. En analysant votre code avec un service comme le validateur CSS du W3C (http://jigsaw.w3.org/css-validator/), vous pourrez reprer toutes les erreurs grammaticales, connatre les lignes concernes par les erreurs et obtenir une brve description de chaque erreur (voir Figure9.1).

Figure9.1
Le site web Microsoft analys par le validateur CSS du W3C.

Lextension Web Developer de Firefox (https://addons.mozilla.org/en-US/firefox/ addon/60) inclut des raccourcis vers la version en ligne des validateurs HTML et CSS. Firefox possde lui-mme un validateur HTML populaire (http://users.skynet.be/mgueury/ mozilla/). Lorsque vous validerez votre code HTML et CSS, vous tomberez peut-tre sur une page pleine derreurs. Ne vous inquitez pas. La plupart dentre elles sont, en fait, le rsultat dune ou deux erreurs effectives. Si vous rparez la premire erreur mentionne et revalidez votre code, un grand nombre des erreurs suivantes disparatront. Procdez ainsi quelques reprises et votre code devrait rapidement se retrouver sans erreurs.

Bogues et correctifs

195

Rappelez-vous que le validateur nest quun outil automatis et quil nest pas infaillible. Un nombre sans cesse plus important de bogues ont t signals dans le navigateur; si vous pensez que votre code est correct alors que le validateur est dun autre avis, vrifiez la dernire spcification CSS. Par exemple, lheure o ces lignes sont crites, le validateur CSS affiche toujours des erreurs pour les extensions spcifiques des diteurs comme moz-border-radius, alors quelles sont effectivement autorises dans la spcification CSS. En cas de doute, validez votre code en utilisant le profil CSS3 et vrifiez la spcification. Problmes lis la spcificit et lordre de tri En plus des erreurs syntaxiques, lun des problmes les plus courants concerne la spcificit et lordre de tri. Les problmes de spcificit se manifestent gnralement lorsque vous appliquez une rgle un lment et que vous constatez quelle reste sans effet. Vous appliquez dautres rgles, qui fonctionnent, mais certaines ne semblent pas fonctionner. Dans ce cas, le problme provient gnralement du fait que vous avez dj dfini des rgles pour cet lment autre part dans votre document, avec un slecteur plus spcifique. Dans lexemple suivant, les dveloppeurs ont pass en blanc la couleur darrire-plan de tous les paragraphes dans la zone de contenu (content). Ils souhaitent cependant que le paragraphe dintroduction soit orange et ont donc appliqu cette rgle directement au paragraphe:
.content p { background-color: white; } .intro { background-color: orange; }

Si vous testez ce code dans un navigateur, vous verrez que le paragraphe dintroduction est toujours blanc. Cest que le slecteur qui cible tous les paragraphes dans la zone de contenu est plus spcifique que celui qui cible le paragraphe dintroduction. Pour parvenir au rsultat dsir, vous devez inverser ces proprits. Ici, le meilleur moyen dy parvenir est dajouter la classe de llment de contenu au dbut du slecteur de paragraphe:
.content p { background-color: white; } .content .intro { background-color: orange; }

vitez dajouter des slecteurs spcifiques sans rflchir, car vous risqueriez de provoquer des problmes de spcificit dans dautres parties du code. Au lieu de cela, il est souvent prfrable de supprimer les slecteurs superflus, de les rendre aussi gnriques que possible et de najouter de slecteur spcifique que lorsque vous souhaitez un contrle plus fin. Comme indiqu au Chapitre1, lextension Firebug pour Firefox (https://addons.mozilla. org/en-US/firefox/addon/1843) est un outil trs prcieux pour le dbogage des CSS.

196

Matrise des CSS

Lunede ses fonctionnalits permet dinspecter un lment afin de voir quels styles CSS sont redfinis. Elle procde en barrant tous les styles redfinis dautres endroits dans la feuille de styles (voir Figure9.2).
Figure9.2
Les styles sont barrs lorsquils sont redfinis dans dautres parties de la feuille de styles.

Problmes lis leffondrement des marges Leffondrement des marges (voir le Chapitre 3) est une autre fonctionnalit CSS qui, lorsquelle est mal comprise, conduit les dveloppeurs sarracher les cheveux. Considrez lexemple simple dun paragraphe imbriqu dans un lment div:
<div id="box"> <p>Ce paragraphe possde une marge de 20px.</p> </div>

La div box se voit attribuer une marge de 10pixels et le paragraphe une marge de 20pixels:
#box { margin: 10px; background-color:#d5d5d5; } p { margin: 20px; background-color:#6699FF; }

On sattendrait normalement ce que le style rsultant ressemble la Figure9.3, avec une marge de 20pixels entre le paragraphe et la div et une marge de 10pixels autour de la div.

Bogues et correctifs
Figure9.3
Voici le rsultat auquel on sattendrait avec le style prcdent.

197

Pourtant, le style donne le rsultat prsent la Figure9.4.

Figure9.4
Voici le rsultat que lon obtient.

Deux choses se passent ici. Tout dabord, les marges de 20pixels du haut et du bas du paragraphe seffondrent avec la marge de 10pixels de la div, ce qui forme une marge verticale de 20pixels. Ensuite, au lieu dtre encloses par la div, les marges semblent dpasser du haut et du bas de la div. Cest leffet du calcul des hauteurs ralis pour les lments possdant des enfants de niveau bloc. Si un lment ne possde pas de bordure verticale ou de remplissage vertical, sa hauteur est calcule comme la distance entre les bords suprieur et infrieur de ses enfants contenus. Du coup, les marges suprieure et infrieure des enfants contenus semblent dpasser de llment conteneur. Il existe un correctif simple. En ajoutant une bordure verticale ou un remplissage vertical, les marges ne seffondrent plus et la hauteur de llment est calcule comme la distance entre les bords des marges suprieure et infrieure de ses enfants contenus. Pour que lexemple prcdent produise le rsultat de la Figure9.3, vous devez simplement ajouter un remplissage ou une bordure autour de la div:
#box { margin: 10px; padding: 1px; background-color:#d5d5d5; } p { margin: 20px; background-color:#6699FF; }

La plupart des problmes lis leffondrement des marges peuvent tre rsolus en ajoutant un lger remplissage ou une bordure fine de la mme couleur que larrire-plan de llment concern. La vue topographique de la barre doutils Web Developer est un excellent outil pour voir comment les lments interagissent les uns avec les autres. Lorsque vous activez cette option, chaque lment reoit une couleur darrire-plan qui dpend de sa position dans le document. Il est alors facile de voir comment les lments sont positionns les uns par rapport aux autres dans le document (voir Figure9.5).

198

Matrise des CSS

Figure9.5
Vue topographique du site des extensions Firefox.

La vue Layout de Firebug (voir Figure9.6) est un autre outil utile, qui indique les diffrentes dimensions de llment inspect.
Figure9.6
La vue Layout de len-tte du site des extensions Mozilla.

Les fondamentaux de la chasse aux bogues

La premire tape pour pister un bogue consiste valider les codes HTML et CSS et vrifier la prsence ou pas derreurs typographiques ou syntaxiques. Certaines erreurs d affichage sont provoques par des navigateurs qui affichent les pages en mode Quirks.

Bogues et correctifs

199

Ilest donc judicieux de vrifier que vous utilisez le DOCTYPE adquat pour votre langage de balisage afin que vos pages saffichent en mode Standards (voir le Chapitre1). La barre doutils Web Developer indique le mode dans lequel la page saffiche. Si cest en mode Quirks, la coche en haut droite de la barre doutils est grise. En mode Standards, elle est verte. Cliquez dessus pour obtenir plus dinformations concernant la page, ainsi que pour dfinir explicitement le mode de rendu (voir Figure9.7).

Figure9.7
La barre doutils Web Developer de Firefox indique si votre page saffiche en mode Standards ou en mode Quirks.

De nombreux dveloppeurs Windows avaient pour habitude de dvelopper leurs pages en utilisant principalement Internet Explorer. Chaque fois quils opraient un changement, ils vrifiaient le rsultat dans Internet Explorer pour voir si tout fonctionnait. Une fois que les pages taient presque prtes, ils testaient le rsultat dans une srie de navigateurs et tentaient de rsoudre les incohrences. Cette procdure est malheureusement trs dangereuse et peut poser de nombreux problmes long terme. Internet Explorer6 est un navigateur bogu, de notorit publique, avec plusieurs dfaillances CSS importantes. En lutilisant comme navigateur de dveloppement, certains dveloppeurs ont par erreur interprt ce comportement comme sil correspondait la norme et se sont demand pourquoi les navigateurs modernes dnaturaient leurs mises en page soigneusement

200

Matrise des CSS

labores. En fait, les pages se trouvaient dnatures dans Internet Explorer et saffichaient conformment la spcification dans les navigateurs plus compatibles avec les standards. La mthode la plus sre consiste utiliser comme navigateur principal de dveloppement un navigateur plus conforme aux standards, comme Firefox ou Safari. Si votre mise en page fonctionne alors, elle a toutes les chances de fonctionner dans lensemble des navigateurs conformes aux standards, ce qui garantit que vous procdez correctement. Vous pouvez ensuite tester vos pages dans les navigateurs moins compatibles et trouver des solutions pour tous les problmes daffichage rencontrs. Ne remettez pas le test des navigateurs la dernire phase du projet. Au lieu de cela, adoptez une mthodologie de test continuelle, en vrifiant vos pages dans tous les principaux navigateurs mesure que vous travaillez. Vous viterez ainsi toute mauvaise surprise la fin du projet, au moment o vous pensez en avoir fini.

Essayer dviter les bogues par avance!

Ce conseil peut sembler vident, mais lun des meilleurs moyens de se dbarrasser des bogues consiste les viter lavance! De nombreux bogues daffichage sont provoqus par du code HTML ou CSS inutilement compliqu. Il est donc judicieux dutiliser le code le plus simple possible pour obtenir le rsultat dsir. vitez les techniques excessivement astucieuses en leur prfrant des mthodes prouves et tchez de rduire autant que possible le nombre des hacks utiliss. Il existe une multitude de moyens pour raliser les mmes effets, aussi envisagez dabord dutiliser une autre mthode plutt que de passer des heures dboguer ou crer des hacks. Ce nest quune fois que vous avez la certitude quil ny a pas moyen dy chapper que vous devez prendre cette peine.

Isoler le problme
Une fois que vous tes sr que vous avez un bogue, vous devez isoler le problme. En procdant ainsi et en identifiant les symptmes, vous pourrez avec un peu de chance dterminer ce qui cause le problme et le rsoudre. Lun des moyens de le faire consiste appliquer des bordures ou des contours aux lments concerns et voir comment ils interagissent les uns avec les autres.
.promo1 { oat: left; margin-left: 5px; border: 1px solid red; } .promo2 { oat: left; border: 1px solid green; }

Jai personnellement tendance ajouter des bordures directement au code, mais vous pouvez utiliser loption de contour dans la barre doutils Web Developer de Firefox ou lun des

Bogues et correctifs

201

nombreux bookmarklets pour afficher le contour des diffrents lments. Parfois, le simple fait dajouter des bordures rsout le problme, notamment avec les problmes deffondrement des marges. Essayez de changer quelques proprits pour voir si elles affectent le bogue et, si cest le cas, de quelle manire. Il peut tre utile de tenter daggraver le bogue. Par exemple, si dans Internet Explorer linterstice entre deux botes est plus grand que prvu, augmentez la marge pour voir ce qui se passe. Si lespace entre les botes dans Internet Explorer a doubl, vous tes probablement victime de son bogue de la double marge des lments flottants.
.promo1 { oat: left; margin-left: 40px; border: 1px solid red; } .promo2 { oat: left; border: 1px solid green; }

Essayez quelques correctifs courants. Par exemple, de nombreux bogues dInternet Explorer se rsolvent lorsquon attribue une valeur ngative la proprit position, ou la valeur inline la proprit display (sur les lments flottants) ou en dfinissant explicitement une dimension, comme la largeur. Vous en apprendrez plus sur ces correctifs courants et leur fonctionnement au chapitre suivant. Un grand nombre des problmes CSS peuvent tre dtects et rsolus rapidement, moyennant peu deffort. Si le problme persiste, vous devez envisager de crer un cas de test minimal.

Crer des cas de test minimaux

Un cas de test minimal correspond simplement la plus petite portion de code HTML et CSS requise pour rpliquer le bogue. En crant un cas de test minimal, vous mettez lcart une partie des variables et simplifiez le problme autant que possible. Commencez par dupliquer les fichiers prsentant des problmes. Supprimez le code HTML superflu jusqu ce quil ne reste plus que lessentiel. Ensuite, commentez vos feuilles de styles afin de retrouver celle qui provoque le problme. Accdez ces feuilles de styles et commencez supprimer ou commenter des blocs de code. Si le bogue sarrte soudain, vous savez que la dernire portion de code commente le provoque. Poursuivez ainsi jusqu ce quil ne reste que le code responsable des problmes. partir de ce point, vous pouvez commencer enquter plus en dtail sur le bogue. Supprimez ou commentez les dclarations et voyez ce qui se passe. Comment le bogue sen trouvet-il modifi? Changez les valeurs de proprit et voyez si le problme disparat. Ajoutez des correctifs courants pour voir sils ont un effet. ditez le code HTML pour voir si cela produit

202

Matrise des CSS

un effet. Utilisez diffrentes combinaisons dlments HTML. Certains navigateurs possdent dtranges bogues despaces blancs; essayez donc de supprimer les espaces blancs de votre code HTML. La liste des zones dexploration possibles est presque infinie.

Rsoudre le problme, pas le symptme

Une fois que vous avez repr la racine du problme, vous tes en bien meilleure position pour appliquer la bonne solution. Comme il existe une multitude de manires dhabiller un site CSS, la solution la plus simple est dviter compltement le problme. Si les marges sont lorigine de votre problme, pensez utiliser un remplissage la place. Si cest une combinaison dlments HTML, essayez de changer cette combinaison. Beaucoup de bogues CSS possdent des noms trs descriptifs, ce qui facilite la recherche de solutions sur Internet. Si vous avez remarqu quInternet Explorer double les marges sur tous les lments flottants, cherchez "Internet Explorer bogue marges doubles lments flottants" et vous serez immanquablement conduit une solution. Si vous constatez quil nest pas possible dviter le bogue, vous devrez peut-tre traiter les symptmes. Cela ncessite gnralement de filtrer la rgle dans une feuille de styles spare et dappliquer un correctif pour le navigateur concern.

Demander de laide
Si vous avez cr un cas de test minimal, test les solutions courantes, recherch des correctifs possibles et que vous ne trouviez toujours pas de solution, demandez de laide. Ilexiste des communauts consacres aux CSS, dont CSS-Discuss (www.css-discuss.org/), le Web Standards Group (http://webstandardsgroup.org/) et Stackoverflow (http://stackoverflow.com). Ces communauts regorgent de dveloppeurs CSS aguerris. Il est donc fort probable quune personne ait dj rencontr votre bogue et sache comment le rsoudre. Si vous tombez sur un nouveau bogue ou un bogue particulirement tonnant, il est possible que des utilisateurs soient intrigus et proposent des suggestions ou mme vous aident directement laborer un correctif. Ce quil faut retenir en demandant de laide, cest que la plupart des dveloppeurs web sont extrmement occups. Si vous navez pas valid votre code ou si vous avez simplement post un lien vers votre site complet en comptant quils parcourent des centaines de lignes de HTML/CSS, ne vous attendez pas recevoir des tas de messages daide. Le meilleur moyen de demander de laide une liste de diffusion ou un forum consiste utiliser un titre qui dcrit prcisment le problme, crire un rsum succinct du problme et coller le cas de test minimal ou, sil fait plus de quelques lignes de code, proposer un lien vers le cas de test sur votre site. Les captures dcran annotes sont aussi utiles, car il nest pas toujours vident de comprendre quel est le problme partir dune description crite, notamment si elle naffecte que certaines versions de navigateur.

Bogues et correctifs

203

Avoir ou ne pas avoir un "layout"

Tous les navigateurs ont des bogues et Internet Explorer6 semble tre le champion en la matire. Lune des raisons pour lesquelles il se comporte diffremment tient ce que son moteur de rendu sappuie sur un concept interne appel "layout". Comme le layout (quon pourrait peu prs traduire par "agencement") est un concept propre au fonctionnement interne du moteur de rendu, il nest gnralement pas ncessaire de sen proccuper. Pourtant, les problmes de layout sont la source de nombreux bogues daffichage dInternet Explorer. Par la force des choses, il est donc utile de comprendre ce concept et de voir comment il affecte les CSS.

Quest-ce que le "layout"?

Internet Explorer sous Windows sappuie sur le concept de layout pour contrler la taille et le positionnement des lments. Les lments qui sont dits "avoir un layout" sont chargs de se redimensionner et de positionner eux-mmes et leurs enfants. Si un lment "na pas de layout", sa taille et sa position sont contrles par son anctre le plus proche qui possde un layout. Le concept de layout est un hack utilis par le moteur de rendu dInternet Explorer pour rduire sa charge de traitement. Idalement, tous les lments devraient contrler leur taille et leur positionnement, mais cela pose de multiples et importants problmes de performances. Du coup, lquipe de dveloppement du logiciel a dcid de nappliquer la gestion de lagencement des lments qu ceux qui en avaient effectivement besoin, considrant quil serait ainsi possible damliorer considrablement les performances. Les lments auxquels un layout est associ par dfaut sont les suivants: body html (en mode Standards) table tr et td img hr input, select, textarea et button iframe, embed, object et applet marquee Le concept de layout est spcifique dInternet Explorer sous Windows. Il ne sagit pas dune proprit CSS. Il ne peut pas tre explicitement dfini en CSS, mme si certaines proprits CSS attribuent automatiquement un layout aux lments. Il est possible de voir si un lment possde un layout en utilisant la fonction JavaScript hasLayout. Elle renvoie true

204

Matrise des CSS

si llment en possde un et false sinon. hasLayout est une proprit en lecture seule. Savaleur ne peut tre modifie avec du code JavaScript. Le fait de dfinir les proprits CSS suivantes attribue automatiquement un layout llment concern: oat: left ou right; display: inline-block; width: nimporte quelle valeur; height: nimporte quelle valeur; zoom: nimporte quelle valeur (proprit Microsoft considre comme invalide); writing-mode: tb-rl (proprit Microsoft considre comme invalide). Depuis Internet Explorer7, les proprits suivantes attribuent aussi un layout: overow: hidden, scroll ou auto; min-width: nimporte quelle valeur; max-width: nimporte quelle valeur sauf none.

Quel effet rsulte du layout?

Le layout est la cause de nombreux bogues daffichage dInternet Explorer. Par exemple, si un paragraphe de texte se trouve ct dun lment flottant, le texte est suppos courir le long de llment et lhabiller. Toutefois, dans Internet Explorer6 et ses versions antrieures, si le paragraphe possde un layout (par exemple, parce que vous avez dfini sa hauteur), il est contraint une forme rectangulaire, ce qui empche le texte de lhabiller en lenveloppant (voir Figure9.8).
Le texte habille les lments flottants... ... sauf dans Internet Explorer 6 et ses versions antrieures.

Figure9.8
Le texte est cens courir le long des lments flottants adjacents. Pourtant, dans Internet Explorer sous Windows, si llment texte possde un layout, cela ne se produit pas.

Bogues et correctifs

205

Les diffrences de rendu entre navigateurs peuvent poser toutes sortes de problmes avec les mises en page flottantes. Pire, bien des utilisateurs qui utilisent Internet Explorer comme navigateur principal prsupposent par erreur quil sagit du comportement normal et ne comprennent pas pourquoi les autres navigateurs traitent les lments flottants diffremment. En outre, le fait de donner un lment un layout semble dgager tous les lments flottants adjacents, comme si lon choisissait overow:hidden. Il existe aussi un problme avec la manire dont les lments avec layout se redimensionnent eux-mmes. Selon la spcification CSS, le contenu dun lment qui devient plus grand que cet lment est cens en dborder. Pourtant, dans Internet Explorer6 et ses versions antrieures, les lments avec layout sagrandissent pour englober leur contenu (voir Figure9.9).
Le contenu dborde de la bote... ... mais pas dans Internet Explorer 6 et ses versions antrieures.

Pellentesque at leo nec

width:100px

Pellentesque at leo nec

La bote s'allonge, tort

Figure9.9
Les lments dots dun layout sagrandissent tort pour inclure leur contenu.

Cette erreur de rendu signifie que la proprit width avec Internet Explorer sous Windows agit en ralit plutt la manire de min-width. Ce comportement est aussi lorigine de nombreuses dfaillances des mises en page flottantes. Lorsque le contenu dune bote flottante force tort la largeur de la bote stendre, la bote devient trop grande pour lespace disponible et disparat en dessous des autres lments flottants. Parmi les autres problmes lis au layout, on peut citer: les lments avec layout qui ne se rduisent pas en taille pour sadapter leur contenu; les lments flottants qui sont automatiquement dgags par les lments avec layout; les lments positionnement relatif qui nobtiennent pas de layout; les marges qui ne seffondrent pas entre les lments avec layout; la zone ractive des liens de niveau bloc sans layout qui ne couvre que le texte des liens; les images darrire-plan sur les lments de liste qui apparaissent et disparaissent par intermittence pendant le dfilement.

206

Matrise des CSS

Vous remarquerez que de nombreux correctifs pour Internet Explorer prsents plus loin imposent de dfinir des proprits qui forcent llment possder un layout. En fait, si vous rencontrez un bogue avec Internet Explorer, lune des premires choses faire est de tenter dappliquer les rgles qui forcent llment possder un layout afin de voir si le problme peut ainsi se rsoudre. Si vous souhaitez en apprendre plus sur la proprit interne hasLayout dInternet Explorer, je vous recommande de lire "On Having Layout" (en anglais) ladresse http://www.satzansatz.de/cssd/onhavinglayout.html. Par chance, lquipe Internet Explorer a rsolu la plupart des problmes lis au layout dans la version 7 du navigateur. Malheureusement, elle a procd pour cela en reprant les bogues daffichage courants et en crant des exceptions dans le code pour les grer au lieu de rsoudre les causes sous-jacentes. Il peut donc encore exister quelques bogues daffichage obscurs qui nont pas t dcouverts. Internet Explorer8, en revanche, utilise un tout nouveau moteur de rendu, volontairement dbarrass de la proprit hasLayout et donc exempt de ces problmes.

Solutions de contournement
Dans le meilleur des mondes, les CSS correctement programmes devraient fonctionner dans tous les navigateurs qui les prennent en charge. Malheureusement, comme tous les lments logiciels compliqus, les navigateurs ont leurs propres jeux de bogues et dincohrences. Au dpart, la prise en charge des CSS tait assez peu rpandue, si bien que les dveloppeurs devaient sefforcer dtre cratifs. En utilisant des bogues de traitement et des CSS non implmentes, ils ont pu trouver des solutions de contournement en appliquant slectivement leurs rgles aux diffrents navigateurs. Les hacks et les filtres sont ainsi devenus des armes incontournables dans leur arsenal. Les navigateurs modernes proposent heureusement une meilleure prise en charge que leurs prdcesseurs, si bien quil nest plus ncessaire de se soucier des hacks comme avant. Tant que les anciens navigateurs nauront pas disparu pour de bon, il peut cependant encore tre ncessaire de grer du code lancienne. Il est donc judicieux de se familiariser avec certains des hacks et des filtres les plus connus, ne serait-ce que pour les viter dans le code. Avant cela, commenons cependant par une rapide prsentation des commentaires conditionnels.

Les commentaires conditionnels dInternet Explorer

Les commentaires conditionnels sont une extension propritaire de Microsoft pour les commentaires HTML et ne sont donc pas standard eux-mmes. Comme leur nom le suggre, ils permettent dafficher des blocs de code en fonction dune condition, comme une version de navigateur. Sils ne sont pas standard, ils apparaissent dans tous les navigateurs anciens comme des commentaires standard et sont donc tout fait inoffensifs. Cest la raison pour laquelle ils sont considrs comme le meilleur moyen de grer les bogues propres Internet Explorer. Ils sont apparus pour la premire fois dans Internet Explorer5 sous Windows et sont pris en charge par toutes les versions subsquentes du navigateur Windows.

Bogues et correctifs

207

Pour fournir une feuille de styles donne toutes les versions dInternet Explorer5 et audel, vous pouvez placer le code suivant dans len-tte de votre document HTML:
<!-- [if IE] <link rel="stylesheet" type="text/css" href="/css/ie.css" /> -->

Avec ce code, Internet Explorer 5 et ses versions ultrieures sous Windows reoivent la feuille de styles ie.css, tandis que les autres navigateurs ne voient que du texte comment. Cest intressant, mais ce nest pas particulirement utile, car il est rare de trouver un bogue commun toutes les versions dInternet Explorer. Au lieu de cela, vous chercherez le plus souvent cibler une version ou une gamme de versions spcifiques. Avec les commentaires conditionnels, il est possible de cibler un navigateur particulier comme Internet Explorer6, comme ceci:
<!-- [if IE 6] <link rel="stylesheet" type="text/css" href="/css/ie6.css" /> -->

Vous pouvez aussi cibler des sries de navigateurs comme IE5 et IE5.5:
<!-- [if lt IE 6] <link rel="stylesheet" type="text/css" href="/css/ie5x.css" /> -->

Si les commentaires conditionnels permettent de proposer des feuilles de styles aux navigateurs Internet Explorer, ils peuvent aussi les leur masquer. La syntaxe suivante masque les styles plus avancs toutes les versions dInternet Explorer:
<!--[if !IE]>--> <link rel="stylesheet" type="text/css" href="/css/advanced.css" /> <!--<![endif]-->

Le code suivant masque les styles Internet Explorer5.x:

<!--[if gte IE 6]><!--> <link rel="stylesheet" type="text/css" href="/css/modern.css" /> <!--<![endif]-->

Les commentaires conditionnels fonctionnent trs bien et sont relativement simples mmoriser. Leur principal dsavantage tient ce quils doivent rsider dans le code HTML et non dans les CSS. Si une nouvelle version dInternet Explorer est lance, vous pourrez tre contraint de mettre jour les commentaires conditionnels dans chaque page du site. Pour autant que vous noubliiez pas de le faire, vous ne devriez cependant pas avoir de souci.

Avertissement concernant les hacks et les filtres

En tant que langage, les CSS ont t conues pour rester compatibles avec lvolution des versions. Si un navigateur ne comprend pas un slecteur particulier, il ignore lensemble

208

Matrise des CSS

de la rgle. De la mme manire, sil ne comprend pas une proprit ou une valeur particulires, il ignore lensemble de la dclaration. Cest grce ce fonctionnement que lajout de nouveaux slecteurs, de nouvelles proprits et de nouvelles valeurs peut rester sans danger pour les navigateurs plus anciens. Vous pouvez vous appuyer sur ce principe de fonctionnement pour fournir des rgles et des dclarations aux navigateurs plus avancs tout en sachant que les anciens navigateurs se contenteront de les ignorer. Lorsquune nouvelle version dun navigateur est lance et prend en charge les rgles CSS que vous utilisiez comme filtre, tout doit fonctionner comme prvu. Si vous utilisez les CSS plus avances pour rsoudre un problme dans les navigateurs plus anciens, vous pouvez esprer que ce problme aura t rpar dans les versions plus rcentes. Avec ce systme, le recours aux CSS non prises en charge comme mcanisme de filtre se prsente donc comme une option relativement scurise. On est forc dajouter "relativement", car il existe toujours une possibilit que le navigateur prenne en charge le nouveau code CSS mais continue de produire le bogue quon croyait ainsi rsolu. Le recours aux filtres qui se fondent sur des bogues dinterprtation est un peu plus dangereux, parce que vous vous appuyez alors sur un bogue et non sur une fonctionnalit. Comme pour la prcdente mthode, si le bogue dinterprtation est rpar mais que celui que vous essayez de corriger ne lest pas, vous aurez un problme. Mais il y a pire, car certains bogues dinterprtation peuvent surgir dans des versions plus rcentes de navigateurs. Ainsi, supposons quune nouvelle version de Firefox inclue un bogue dinterprtation particulier. Si celui-ci est utilis comme filtre pour livrer Internet Explorer dautres valeurs de largeur prendre en compte pour son modle de bote propritaire, Firefox hritera soudain des mmes largeurs et pourra commencer mal afficher de nombreux sites. Il faut aussi se souvenir que ces types de hacks et de filtres invalident souvent le code. En rgle gnrale, il est donc plus sr dutiliser des filtres qui sappuient sur des proprits CSS non prises en charge que sur celles qui utilisent des bogues de navigateurs. Mieux encore: tchez de les viter toutes.

Utiliser les hacks et les filtres avec raison

Malheureusement, les dveloppeurs, notamment ceux qui dcouvraient les CSS, se sont excessivement appuys sur les hacks et les filtres. Quand quelque chose ne fonctionnait pas dans un navigateur particulier, ils ont souvent eu le rflexe dutiliser immdiatement un hack, comme un coup de baguette magique. Certains simaginent mme pouvoir mesurer leur niveau dexpertise au nombre de hacks et de filtres obscurs quils connaissent. Si vous avez bien travaill et que vous ralisiez que la seule option qui vous reste est demployer un hack ou un filtre, vous devez le faire de manire raisonnable et contrle. Si vos fichiers CSS sont petits et simples et que vous deviez employer un ou deux hacks, il ny a probablement pas de risque les placer dans vos fichiers CSS principaux, en les accompagnant de commentaires appropris. Cependant, les hacks sont assez souvent compliqus et peuvent rendre le code difficile lire. Si vos fichiers CSS sont longs et compliqus ou si vous devez utiliser beaucoup de hacks, il peut tre prfrable de les sparer dans leurs propres feuilles de styles. Le fait de sparer les hacks non seulement rend le code plus facile lire mais signifie galement que si un hack commence poser des problmes dans un

Bogues et correctifs

209

prochain navigateur, vous saurez exactement o il se trouve. De la mme manire, si vous dcidez de ne plus vous proccuper de la prise en charge dun navigateur particulier, vous pourrez trs facilement supprimer les hacks associs en supprimant le fichier correspondant.

Appliquer le filtre passe-bande pour Internet Explorer version Mac

Tantek elik a cr une srie de filtres (http://tantek.com/CSS/Examples/) qui sappuient sur des erreurs dinterprtation des navigateurs et permettent de fournir des feuilles de styles des navigateurs slectionns en utilisant la rgle @import. Les filtres ont dabord t le moyen de choix de filtrer les diffrentes versions dInternet Explorer, jusqu ce que les commentaires conditionnels se banalisent. Ils peuvent cependant encore tre pratiques, par exemple si vous souhaitez explicitement cibler IE5.2 sur Mac. Vous pouvez le faire en utilisant le filtre passe-bande IE5 pour Mac de Tantek, qui exploite un bogue dchappement dans les commentaires CSS:
/*\*//*/ @import "ie5mac.css"; /**/

IE5 pour Mac opre un chappement incorrect du second astrisque, ce qui le conduit appliquer la rgle @import. Il interprte ce code peu prs ainsi:
/* blah */ @import "ie5mac.css"; /**/

Tous les autres navigateurs ignorent comme il se doit llment dchappement, car il est entour dans un commentaire et la rgle @import est donc elle-mme considre comme un commentaire. Tous les autres navigateurs interprtent donc la rgle de la manire suivante:
/* blah *//* blah */

Comme avec les autres filtres passe-bande, il nest pas ncessaire de comprendre le fonctionnement de ce filtre pour lutiliser. Lintrt de ces filtres est quils ciblent spcifiquement des bogues dans les anciens navigateurs. Vous devriez donc pouvoir les utiliser en toute tranquillit, partant du principe quils ne risquent pas de provoquer de problme dans les navigateurs plus rcents.

Le hack de ltoile HTML

Le filtre de "ltoile HTML" est lun des filtres CSS en ligne les plus connus et les plus utiles. Il est extrmement ais mmoriser et cible le navigateur Internet Explorer6 et ses versions antrieures. Comme vous le savez, llment HTML est suppos tre le premier

210

Matrise des CSS

lment (ou llment racine) des pages web. Pourtant, les anciennes versions dInternet Explorer possdent un lment racine anonyme qui enveloppe llment HTML lui-mme. Avec le slecteur universel, vous pouvez cibler un lment HTML enclos dans un autre lment. Comme cette cible nexiste que dans Internet Explorer 6 et ses versions antrieures, elle vous permet dappliquer des rgles propres ces navigateurs:
* html { width: 1px; }

Ce bogue a t corrig dans Internet Explorer7, si bien quil sagit dun moyen assez scuris de cibler les anciennes versions. Ce hack est utilis dans le mcanisme du hack du modle de bote simplifi modifi (MSBMH ou modified simplified box model hack), un outil devenu populaire pour grer le modle de bote propritaire dInternet Explorer dans les anciens navigateurs.
#content { width: 80px; padding: 10px; } * html #content { width: 100px; w\idth: 80px; }

Je ne conseille pas dutiliser cette technique maintenant, mais il est bon de la connatre car vous risquez de la rencontrer si vous travaillez avec du code hrit.

Appliquer le hack du slecteur denfants

Au lieu de cibler explicitement les anciennes versions dInternet Explorer, supposons que vous souhaitiez crer une rgle que ces navigateurs ignoreront. Vous pouvez le faire en utilisant le hack du slecteur denfants, encore que cette technique ne soit pas exactement un hack, puisquelle utilise simplement un slecteur que les anciennes versions dInternet Explorer ne comprennent pas alors que les navigateurs modernes la prennent en charge. Lexemple suivant utilise le hack du slecteur denfants pour masquer une image PNG darrireplan transparente aux navigateurs Internet Explorer5 et6 sous Windows:
html>body { background-image: url(bg.png); }

Cette rgle ne sera pas aperue par les versions anciennes dInternet Explorer. En revanche, Internet Explorer7 prend en charge le slecteur denfants et la transparence PNG; il pourra donc interprter ce code correctement.

Bogues et correctifs

211

Bogues et correctifs courants

Lune des comptences les plus intressantes dont puisse se doter un dveloppeur CSS est la capacit reprer les bogues courants des navigateurs. En connaissant les diffrents lments qui concourent provoquer ces bogues, vous pouvez les reprer et les corriger avant mme quils ne crent des problmes.

Bogue de la double marge des lments flottants

Le bogue de la double marge des lments flottants dInternet Explorer 6 et de ses versions antrieures est lun des plus courants et des plus simples reprer. Il amne Windows doubler les marges de tous les lments flottants (voir Figure9.10).
Internet Explorer 6 et ses versions antrieures sous Windows doublent les marges des lments flottants Zone de contenu Le bogue se corrige avec display:inline

Zone de contenu

40px Figure9.10

float: left; margin-left: 20px;

20px

float: left; display: inline; margin-left: 20px;

Dmonstration du bogue dInternet Explorer doublant les marges des lments flottants sous Windows. .

Ce bogue se corrige facilement quand on attribue la valeur inline la proprit display de llment. Comme llment flotte, ce rglage naffecte pas ses caractres daffichage, mais il empche miraculeusement Internet Explorer6 et ses versions antrieures de doubler les marges. Ce bogue est si simple reprer et corriger que chaque fois que vous crez un lment flottant avec des marges horizontales, vous devriez attribuer la valeur inline sa proprit display, par prcaution.

Bogue du dcalage de texte de 3pixels

Le bogue du dcalage de texte de 3pixels dInternet Explorer5 et6 sous Windows est aussi trs courant. Il se manifeste lorsque du texte est adjacent un lment flottant. Par exemple, supposons quun lment flotte gauche et que vous ne souhaitiez pas que le texte du paragraphe d ct lenveloppe en le collant. Vous appliquez alors logiquement une marge gauche au paragraphe, de la mme largeur que limage:

212

Matrise des CSS

.myFloat { oat: left; width: 200px; } p { margin-left: 200px; }

Lorsque vous procdez ainsi, un mystrieux interstice de 3pixels apparat entre le texte et llment flottant. Ds le point o llment flottant sarrte, linterstice de 3pixels disparat (voir Figure9.11).
Figure9.11
Dmonstration du bogue du dcalage de texte de 3pixels dInternet Explorer5 et 6.

Lorem ipsum dolor sit

float: left;

amet, consectetuer adipiscing elit. Sed sit amet

Bote de ligne

Mystrieux interstice de 3 pixels adjacent l'lment flottant

Le correctif ce bogue se dploie en deux phases. Tout dabord, llment contenant le texte doit recevoir une hauteur arbitraire. Il est ainsi contraint de possder un layout, ce qui supprime apparemment le dcalage du texte. Comme Internet Explorer6 et ses versions antrieures sous Windows traitent la hauteur comme une valeur min-height, le fait de dfinir une hauteur de petite taille na aucun effet sur les dimensions effectives de llment dans ce navigateur. En revanche, cela apparat avec les autres navigateurs, si bien que vous devez masquer cette rgle tous les navigateurs sauf Internet Explorer6 et ses versions antrieures sous Windows. Le meilleur moyen de le faire est de dplacer ces styles dans un fichier CSS spar en utilisant des commentaires conditionnels.
p { height: 1%; }

Malheureusement, cette technique pose un autre problme. Comme vous lavez vu prcdemment, les lments avec un layout sont contraints de possder une forme rectangulaire et apparaissent ct des lments flottants et non au-dessous. Lajout de 200 pixels de remplissage cre en fait un interstice de 200pixels entre llment flottant et le paragraphe dans Internet Explorer5 et 6 sous Windows. Pour viter cela, vous devez rinitialiser zro les marges:
p { height: 1%; margin-left: 0; }

Bogues et correctifs

213

Le dcalage de texte est rpar, mais un autre interstice de 3pixels est maintenant apparu, cette fois sur limage flottante. Pour le supprimer, vous devez dfinir une marge ngative de 3pixels sur llment flottant:
p { height: 1%; margin-left: 0; } .myFloat { margin-right: -3px; }

Pour tous les lments flottants qui ne sont pas des images, le problme est rsolu ce stade. Si llment est une image, il reste une dernire tape franchir. Internet Explorer5.x sous Windows ajoute un interstice de 3pixels gauche et droite de limage, alors quInternet Explorer6 laisse les marges de limage inchanges. Si vous devez assurer la prise en charge dInternet Explorer5.x, vous devez donc inclure une feuille de styles spare pour ces versions de navigateurs:
p { height: 1%; margin-left: 0; } img.myFloat { margin: 0 -3px; } and another for IE 6: p { height: 1%; margin-left: 0; } img.myFloat { margin: 0; }

Bogue des caractres dupliqus dInternet Explorer6

Le bogue des caractres dupliqus dInternet Explorer6 est une autre curiosit ajouter notre muse. Dans certaines conditions, les quelques derniers caractres de la dernire srie dlments flottants sont dupliqus sous llment flottant (voir Figure9.12). Ce bogue se manifeste lorsque plusieurs commentaires se trouvent entre la premire et la dernire srie dlments flottants. Les deux premiers commentaires nont pas deffet, mais chaque commentaire subsquent provoque la duplication de deux caractres. Avec trois commentaires, on obtient donc deux caractres dupliqus. Avec quatre commentaires, on en obtient quatre et avec cinq, on en obtient six.

214

Matrise des CSS

Figure9.12
Le bogue des caractres dupliqus dInternet Explorer6.

Vestibulum sit Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rutrum faucibus nulla. amet velit. Pellentesque Cras eget leo et dui sollicitudin mattis. adipiscing lectus Vestibulum ante lectus, malesuada in, eget tortor. condimentum eu, elementum sed, metus. Pellentesque justo. Aenean sed risus. Fusce Curabitur sed eget turpis id mauris elementum rutrum. Ut felis iaculis dolor tristique. In ut justo in enim laoreet or
Les derniers caractres sont dupliqus

<div id="content"> <!-- mainContent --> <div id="mainContent"> ... </div><!-- end mainContent --> <!-- secondaryContent --> <div id="secondaryContent"> ... </div>

Bizarrement, ce bogue semble li au bogue de dcalage de texte de 3pixels que nous avons prsent prcdemment. Pour le corriger, vous pouvez supprimer les 3 pixels du dernier lment flottant en dfinissant une marge ngative ou agrandir le conteneur de 3pixels en largeur. Ces deux mthodes risquent cependant de poser des problmes dans Internet Explorer 7, qui ne provoque pas ce bogue. Voil pourquoi le moyen le plus simple de lviter consiste supprimer les commentaires de votre code HTML.

Bogue du coucou dInternet Explorer6

Dans le rayon des grandes bizarreries, on trouve encore le bogue du coucou dInternet Explorer6, ainsi baptis parce que, dans certains cas, le texte semble disparatre et ne rapparat que lorsque la page est ractualise. Il se produit lorsquun lment flottant est suivi par des lments non flottants puis un lment qui spcifie un dgagement, tous contenus dans un lment parent possdant une couleur ou une image darrire-plan. Si llment qui spcifie un dgagement touche llment flottant, les lments non flottants entre les deux disparaissent sous la couleur ou limage darrire-plan de llment parent et ne rapparaissent quaprs actualisation de la page (voir Figure9.13).

Bogues et correctifs
Le contenu suit un lment flottant et prcde un lment dgag.

215
Le contenu disparat dans Internet Explorer 6 mais rapparat une fois la page actualise.

lment flottant

lment flottant

lment dgag Couleur / image d'arrire-plan dfinie #container

lment dgag Aucune largeur ou hauteur dfinie #container

Figure9.13
Dmonstration du bogue dInternet Explorer doublant les marges des lments flottants sous Windows.

Il existe heureusement plusieurs moyens de combattre ce bogue. Le plus simple est probablement de supprimer la couleur ou limage darrire-plan de llment parent. Mais ce nest pas toujours trs pratique. On peut aussi viter llment dgag de toucher llment flottant. Le bogue ne semble pas se manifester si on applique des dimensions prcises llment conteneur. Il ne se manifeste plus non plus si le conteneur possde une hauteur de ligne dfinie. Enfin, le problme disparat galement quand la proprit position de llment flottant et du conteneur a la valeur relative.

Positionnement absolu dans un conteneur relatif

Le dernier bogue de navigateur important dont nous allons traiter concerne le positionnement absolu dlments dans un conteneur positionn de manire relative. Vous avez appris au cours des prcdents chapitres combien il pouvait tre utile dimbriquer un lment positionn de manire absolue dans un conteneur relatif. Malheureusement, Internet Explorer6 et ses versions antrieures produisent un certain nombre de bogues avec cette technique. Ces bogues proviennent du fait quavec Internet Explorer pour Windows, les lments positionns de manire relative ne rcuprent pas la proprit interne hasLayout. Du coup, ils ne crent pas de nouveau contexte de positionnement et tous les lments positionns le sont relativement la fentre du navigateur (voir Figure9.14). Pour corriger le comportement dInternet Explorer 6 et de ses versions antrieures sous Windows, vous devez forcer lattribution dun layout au conteneur positionn de manire relative. Lun des moyens dy parvenir est de lui attribuer une largeur et une hauteur explicites. Malheureusement, vous aurez souvent recours cette technique prcisment quand

216

Matrise des CSS

vous ne connaissez pas la largeur et la hauteur du conteneur ou lorsque vous souhaitez que ces proprits restent flexibles. Au lieu de cela, vous pouvez utiliser des commentaires conditionnels pour filtrer Internet Explorer5 et6 et donner au conteneur un layout en appliquant une dimension arbitraire. Comme les lments dans Internet Explorer6 et ses versions antrieures stendent tort pour englober leur contenu, la hauteur effective ne sen trouvera pas affecte.
.container { height: 1%; }

top: 0; left: 0; lments positionns de manire absolue bottom: 0; left: 0;

top: 0; right: 0;

top: 0; right: 0;

bottom: 0; right: 0; lments positionns de manire relative

bottom: 0; Internet Explorer 5.x positionne tort left: 0; les botes par rapport la fentre d'affichage.

bottom: 0; right: 0;

Fentre d'affichage Figure9.14

IE 5.x place mal les lments positionns de manire absolue lorsque leur conteneur est positionn de manire relative.

Cesser de se rfrer Internet Explorer

Internet Explorer nest pas le seul navigateur bogu. Vous vous demandez donc peut-tre pourquoi jai concentr mon attention sur ses bogues. Ce nest pas de lallergie Microsoft. Il sagit dun choix raisonn. Tout dabord, Internet Explorer conserve une part de march importante, si bien que ses bogues sont assez rapidement reprs et documents, mais son rythme de dveloppement est cependant plus lent que celui des autres navigateurs. Alors que Firefox et Safari proposent de nouvelles versions tous les quelques mois, il faut parfois attendre plusieurs annes pour voir apparatre une nouvelle version dInternet Explorer. Ses bogues ont donc une dure de vie bien plus tendue. La vitesse laquelle les bogues sont reprs et rpars dans Firefox et Safari est assez impressionnante, mais il y a bien quelques problmes. Au lieu davoir grer deux ou trois

Bogues et correctifs

217

versions dun navigateur, vous pouvez avoir affaire dix ou vingt modles distincts. Vous ne saurez jamais si vos utilisateurs possdent la dernire version, ce qui complique normment les tests. la diffrence, Internet Explorer na pas propos de rvision majeure pendant prs de cinq ans. Les bogues ont donc eu bien plus de temps pour remonter la surface et trouver un correctif. Internet Explorer8 est, par chance, un navigateur beaucoup plus conforme aux standards que les prcdentes versions. Un grand nombre des bogues connus ont t corrigs et la prise en charge des CSS2.1 avances sest accrue. Comme avec tous les navigateurs, on verra apparatre de nouveaux bogues et Internet Explorer8 est loin dtre parfait, mais plus les utilisateurs pourront se convaincre quils ont intrt passer aux navigateurs modernes comme Internet Explorer 8 et Firefox, plus on pourra rapidement ranger au placard les anciens modles comme Internet Explorer6.

Prise en charge graduelle des navigateurs

On ne peut clore un chapitre sur les bogues sans mentionner la question de la prise en charge des navigateurs. Chaque fois quune nouvelle version dInternet Explorer est lance, elle provoque de vifs dbats concernant la date laquelle on pourra sans risque cesser de prendre en charge les prcdentes versions. Aprs tout, si Microsoft nassure officiellement plus le support dInternet Explorer 6, pourquoi sen proccuper ? Malheureusement, il nexiste pas de solution simple et vidente au problme de la prise en charge des navigateurs. Tout dpend des caractristiques de votre site. Si vous hbergez un site pour les dveloppeurs web, vos utilisateurs surferont en majorit avec Firefox ou Safari sur Mac, auquel cas la part des utilisateurs dInternet Explorer6 peut tre si rduite quil ne vaut pas la peine de sen soucier. En revanche, mme quelques pour cent sur un site qui accueille un million de visiteurs par mois, cela peut signifier plusieurs milliers dinternautes mcontents. Pour les sites commerciaux ou les sites dabonns, le nombre des utilisateurs dInternet Explorer6 peut tre bien plus important. Dans certains cas, il peut mme dpasser celui des utilisateurs de la version7. Certains services informatiques dans les bureaux empchent en effet les employs de changer de version de navigateur, tandis que les utilisateurs domestiques ne font parfois la mise niveau que le jour o ils changent dordinateur. Au lieu denvisager dabandonner compltement la prise en charge dun navigateur, il peut donc tre prfrable de dfinir des chelons et de dcider ce que signifient les diffrentes prises en charge pour chaque site. Cest tout lenjeu de la prise en charge graduelle des navigateurs. Les grandes organisations comme Yahoo! et la BBC ont bien conscience que tous les navigateurs ne sont pas gaux et que sassurer que leurs sites possdent exactement la mme apparence dans tous les navigateurs augmenterait radicalement les cots de maintenance et entraverait de nombreuses possibilits dinnovation. Pour viter davoir calibrer la conception des sites sur le plus petit dnominateur commun en termes de navigateur, ces organisations ont commenc adopter des chartes de prise en charge graduelle (voir Figures9.15 et 9.16).

218

Matrise des CSS

Figure9.15
La charte de prise en charge graduelle de Yahoo! pour les navigateurs de niveauA.

Figure9.16
La table de prise en charge graduelle des navigateurs pour le site de la BBC.

Plutt que de considrer la prise en charge des navigateurs comme une option binaire permutant entre deux tats que sont la prise en charge et labsence totale de prise en charge, ces chartes proposent une varit de niveaux de prise en charge, des caractristiques daffichage compltes pour les navigateurs modernes jusquau contenu brut pour les plus anciennes versions. Si chaque organisation aborde diffremment ce problme, les tapes restent sensiblement les mmes. Pour commencer, vous devez identifier les navigateurs avec lesquels vous souhaitez obtenir un rendu uniforme dans lensemble de votre site et effectuer des tests sur tous ceux-l. Il sagira gnralement des plus populaires utiliss par vos visiteurs. Sy rangeront donc sans doute les dernires versions de Firefox, Safari et Opera, ainsi quInternet Explorer7 et8. Avec ces navigateurs, le but est que le site possde la mme apparence, mme si, pour des raisons pratiques, on peut accepter quelques innocents pixels de diffrence ici ou l. Ensuite, vous devez identifier un ensemble de navigateurs vieillissants mais importants. Ce groupe peut inclure les versions plus anciennes de Firefox et de Safari ainsi quInternet Explorer6. Vous effectuerez les tests sur un chantillon alatoire de ces navigateurs et tenterez de rsoudre tous les problmes que vous trouverez. Vous devrez cependant accepter que laffichage ne soit pas parfait et quil puisse diffrer dun navigateur lautre, pour autant que le contenu reste parfaitement accessible. Pour finir, vous devez identifier un ensemble de navigateurs plus rares ou relativement prims que vous ne souhaitez pas officiellement prendre en charge. Ce groupe peut inclure les navigateurs Internet Explorer4, Netscape Navigator4 ou Opera7. Avec ces navigateurs, il faut toujours que le contenu et les fonctionnalits restent disponibles, mais inutile de se soucier de la prsentation. Vous pouvez donc accepter des variations importantes du rendu. Il serait mme prfrable, pour ces navigateurs, de supprimer tous les styles.

Bogues et correctifs

219

La technique de la prise en charge graduelle est un moyen plus souple de grer lensemble des navigateurs et des agents utilisateur. Les tableaux de la BBC sont un bon point de dpart, mais puisque chaque site est unique, je recommande vivement de crer vos propres tableaux pour chacun de vos projets.

En rsum
Vous avez dcouvert quelques importantes techniques pour pister et radiquer les bogues CSS. Vous avez pu vous familiariser avec la proprit interne hasLayout dInternet Explorer sous Windows et dcouvrir sa part de responsabilit dans de nombreux bogues. Vous avez galement dcouvert certains des bogues de navigateurs les plus courants et appris les corriger. Pour finir, vous avez vu comment grer une myriade de navigateurs diffrents laide de chartes de prise en charge graduelle. prsent, vous allez voir, dans deux tudes de cas cres par deux des meilleurs concepteurs etdveloppeurs CSS de notre temps, comment toutes ces informations peuvent tre combines.

10

tude de cas: Roma Italia

Annot et corn, mon exemplaire de la premire dition de ce livre trne toujours firement sur mon tagre. Je lai souvent consult au cours des trois annes qui ont suivi sa publication. Bien des choses ont chang dans ce domaine, depuis le temps, notamment avec la sortie dInternet Explorer7 (et plus tard, dInternet Explorer8), qui ouvre le champ de nouvelles fonctionnalits CSS2 et CSS3 maintenant prises en charge par les navigateurs les plus importants. Nous aborderons quelques exemples de ces fonctionnalits dans la prsente tude de cas. Beaucoup de choses sont aussi restes inchanges. Le balisage est identique lui-mme. Les standards sont toujours des standards. Et il est plus que jamais important de disposer dindividus talentueux comme vous ltes pour produire des sites attrayants et passionnants en HTML, CSS et JavaScript. Il est probable que vous, lecteur, soyez plus savant et expriment que vous ne ltiez la premire publication de ce livre. Jespre donc que ltude de cas que jai labore vous donnera plus de sensations encore que la prcdente. Dans cet exemple, vous en apprendrez plus sur: la mise en page et la grille 1080pixels; les fonctionnalits CSS2 et CSS3 avances; la liaison des polices et la typographie web amliore; linteractivit avec Ajax et jQuery. Pour observer ltude de cas en ligne : roma.cssmastery.com. Les fichiers sources sont galement disponibles sur le site www.pearson.fr.

propos de cette tude de cas

Roma Italia est un site web fictif cr spcialement pour cette tude de cas (la Figure10.1 prsente la page daccueil). Les techniques CSS qui y sont employes sont en revanche tout sauf artificielles. Chaque technique a t soigneusement slectionne dans le but de proposer un choix robuste de mthodes CSS avances, dont un grand nombre peuvent tre appliques dans des environnements de production. Dautres techniques exprimentales, qui ne sont pas encore uniformment prises en charge dans les navigateurs courants, sont proposes afin dillustrer les possibilits du futur. Le site de cette tude de cas, qui se prsente comme un guide pour la ville de Rome, est constitu de deux pages: la page daccueil et la page de vido. Certains liens dans la page daccueil conduisent de vritables ressources tandis que dautres sont des liens morts uniquement utiliss pour la dmonstration. Toutes les photographies, les vidos et le contenu

222

Matrise des CSS

du site Roma Italia proviennent dun sjour que jai effectu Rome avec ma femme. tous points de vue, ce site fictif pourrait tre rel si les liens renvoyaient rellement quelque part. Je tiens tout particulirement remercier Aaron Barker (aaronbarker.net) qui ma aid avec quelques-uns des exemples jQuery et Ajax dans cette tude de cas, ainsi que ma femme, Suzanne, pour quelques-unes des photos qui ornent le site.

Figure10.1
La page daccueil du site Roma Italia.

tude de cas: Roma Italia

223

Les fondations
Lors de la prparation du code HTML, ma principale proccupation est de rendre ce code aussi signifiant et lger que possible. Par signifiant, jentends que les noms des lments HTML et des slecteurs choisis reprsentent le contenu de telle manire quen supprimant tous les styles, on pourrait comprendre la hirarchie et la structure du contenu. Ils sont loin les temps o les GIF despacement et les lments br rpts truffaient nos lignes de code! Ces bizarreries ont t remplaces par des lments qui reprsentent de manire logique ou smantique le contenu: une liste numrote des lments les plus vendus (ol); le titre principal de la page (h1); une citation dun client satisfait (blockquote et cite). Cette approche ncessite de chasser de son esprit les informations relatives la prsentation, conformment la philosophie dcrite trs compltement par Andy Clarke dans son remarquable livre Transcender CS, Sublimez le design web! (Eyrolles). Je me souviens encore de mes premires expriences en CSS alors que je programmais une application web grande chelle. Jtais trs fier davoir cr une srie de noms de classes de prsentation qui permettaient de marquer le contenu avec une lgante clart, comme ceci:
<p class="arial red 10">

Quelle dconvenue, lorsque je me suis rendu compte quil fallait revoir la prsentation de lapplication et que les dizaines de modles utiliss devaient inclure peu prs tout sauf des polices Arial rouges de 10pixels! Par "lger", je veux dire que le balisage doit tre aussi concis que possible (lments, attributs et valeurs pour le HTML, slecteurs, proprits et valeurs pour les CSS). Par exemple,
background-color: #c27e28; background-image: url(../img/feature-orange.jpg); background-repeat: no-repeat;

peut tre remplac par:

background: #c27e28 url(../img/feature-orange.jpg) no-repeat;

Vous rencontrerez de nombreux exemples de balisage signifiant et lger dans cette tude de cas. Jen dcrirai une partie, mais vous dcouvrirez la plupart vous-mme.

Un il riv sur le HTML5

Pour le balisage signifiant et lger, jai choisi de men tenir au HTML4.01 Strict au niveau du DOCTYPE, en le prfrant au XHTML1.0 Strict et au HTML5. Je vais rapidement expliquer pourquoi.

224

Matrise des CSS

XHTML 1.0 Strict. Il sagit du langage que de nombreux professionnels, dont je fais partie, ont utilis au cours de ces dernires annes. Dave Shea propose cependant une argumentation convaincante qui pousse abandonner le XHTML en prvision du HTML5: "Il y a six ans, bon nombre dentre nous ont considr que le XHTML serait lavenir du Web et que nous entrions dsormais dans lre du XML. Entre-temps, il est cependant apparu avec vidence, pour moi comme pour dautres, que le XHTML2 ne menait vritablement nulle part, en tout cas pas vers les horizons heureux auxquels nous rvions. Je nai pas le courage de mimposer les contorsions requises pour faire fonctionner encore mes sites avec un DOCTYPE HTML5, ce qui me laisse avec la version la plus rcemment implmente du langage En attendant de pouvoir me convaincre que lheure du HTML5 est venue, le 4.01 devrait trs bien me convenir pour les quatre ou cinq ans venir" ("Switched", http:// mezzoblue.com/archives/2009/04/20/switched/). HTML 5. En un mot, le HTML5 est la prochaine version majeure du HTML. La bonne nouvelle, cest que les lments div et span sans signification seront remplacs par des lments plus descriptifs comme nav, header et video. Au lieu de ce balisage:
<div class="header"> <h1>Page Title</h1> </div>

ou de celui-ci:
<object><param/><embed src="http://vimeo.com/3956190"></embed></object>

on utilisera donc ceci:

<header> <h1>Page Title</h1> </header>

et ceci:
<video src="http://vimeo.com/3956190">

La mauvaise nouvelle, cest qu lheure o ces lignes sont crites, le HTML5 nest pas correctement pris en charge par les principaux navigateurs (et notamment par Internet Explorer). On estime quil faudra de quelques mois quelques annes pour quil le soit et devienne donc une option viable pour la cration des sites web. Lautre mthode possible consiste conserver un il en direction du HTML 5 en rdigeant le code HTML avec les DOCTYPE actuels, mais en adoptant la smantique et les noms de classes propres au HTML5. Jon Tan dcrit parfaitement cela dans son article (en anglais) "Preparing for HTML5 with Semantic Class Names" (http://jontangerine.com/ log/2008/03/preparing-for-html5-with-semantic-class-names). Par exemple, avec llment nav, le balisage HTML5 donnerait ceci:
<nav> <ul> <li><a href="">lment de menu 1</a></li>

tude de cas: Roma Italia

... </ul> </nav>

225

Alors que notre balisage smantique de style HTML5 utilisant le HTML4 ou le XHTML1 donnerait:
<div class="nav"> <ul> <li><a href=> lment de menu 1</a></li> ... </ul> </div>

Linconvnient ici tient au fait que vous pouvez vous retrouver avec une grande quantit de div supplmentaires. Si votre but est de crer un code structur et lger, la meilleure manire consiste pour le moment procder ainsi:
<ul class="nav"> <li><a href=> lment de menu 1</a></li> ... </ul>

Quelle est donc mon opinion sur le HTML5? Nous nous y adapterons trs bien lorsque son heure viendra. Cette reconversion ne ncessitera pas une norme gymnastique mentale. En attendant, je me contenterai donc de programmer comme nous le faisions jusque-l. Pour plus dinformations sur le HTML5, consultez les sites web suivants: http://cameronmoll.com/archives/2009/01/12_resources_for_html5/ : douze ressources pour dmarrer avec le HTML5. http://smashingmagazine.com/2009/08/04/designing-a-html-5-layout-fromscratch/: pour programmer une mise en page HTML5 de toutes pices. http://fr.wikipedia.org/wiki/HTML_5: un article Wikipdia sur le HTML5. http://adactio.com/journal/1540: lavnement du HTML5. http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html : o Google mise gros sur le HTML5.

reset.css
Lorsque jai commenc programmer des sites en CSS, il y a quelques annes, il tait courant de dclarer quelques styles "globaux" en haut de la feuille de styles matre: body, a img, h1, h2, h3, etc. Ce qui tait alors destin redfinir les styles par dfaut des navigateurs a finalement volu jusqu devenir la feuille de styles "reset" standard, gnralement appele reset.css. Comme lindique lquipe Yahoo!, la feuille de styles reset "supprime et neutralise lensemble htroclite des mises en forme par dfaut des lments HTML, afin de crer un

226

Matrise des CSS

terrain de jeu neutre et uniforme pour tous les navigateurs de niveauA" (http://developer. yahoo.com/yui/reset/). Personnellement, je prfre le fichier CSS reset dEric Meyer, qui est utilis dans cette tude de cas. Vous pouvez tlcharger cette feuille de styles ladresse suivante: http://meyerweb.com/eric/tools/css/reset/. Jutilise une seule feuille de styles (master.css) pour importer toutes les feuilles de styles utilises dans mes sites. Je dclare en premier la feuille de styles reset, afin que toutes les suivantes puissent redfinir les styles rinitialiss comme il se doit:
@import url("reset.css"); @import url("screen.css"); @import ...

Tous les styles pour laffichage sur cran sont lists dans screen.css. Dans le site dtude de cas, trois feuilles de styles supplmentaires sont utilises: autocomplete.css contient des styles pour la fonctionnalit de recherche en direct. datepicker.css contient des styles pour le calendrier slecteur de date. ie.css, qui est rfrence laide de commentaires conditionnels (voir la section suivante), contient des styles propres Internet Explorer. Nous aurions facilement pu insrer les styles des fichiers autocomplete.css et datepicker. css dans screen.css, mais afin de mieux vous guider dans cette tude de cas, je prfre les sparer.

La mise en page et la grille 1080pixels

En 2006, jai post un message concernant un dilemme relatif la largeur optimale des moniteurs dots dune rsolution de 1024768pixels ou plus (voir http://www.cameronmoll.com/archives/001220.html). Cest vers cette poque quun certain nombre dentre nous, alors que nous avions lhabitude de dvelopper des sites optimiss pour un affichage en 800600pixels depuis un certain temps, ont commenc explorer des options pour les rsolutions 1024pixels. Dans cet article, jai propos une largeur idale de 960pixels pour le passage au-del des 800600. Elle tenait compte du chrome des navigateurs ainsi que du fait que bien des utilisateurs ne naviguent pas en mode plein cran. Plus important encore, elle partait du constat que 960 est un nombre assez magique: il est divisible par 2, 3, 4, 5, 6, 8, 10, 12, 15 et 16. Imaginez donc toutes les possibilits de quadrillages (nous reviendrons sur ce sujet dans un instant)! Suite la publication de cet article, la largeur de 960pixels est quasiment devenue le standard de facto pour les mises en page largeur fixe sur le Web. Des plug-ins Photoshop, des extensions de navigateur et de systmes dexploitation ladoptent mme par dfaut. Il existe aussi un framework CSS complet tabli sur une grille 960, appel 960.gs (http://960.gs/). Plus de trois ans plus tard, une nouvelle question se pose: est-il temps daller au-del des 960pixels? Je ne suis pas certain de la rponse, mais cette tude de cas est loccasion rve dexplorer lune des voies possibles qui souvrent devant nous.

tude de cas: Roma Italia

227

Avant que ne fusent les critiques des aficionados des largeurs fixes, permettez-moi de vous dire que je suis un grand fan des conceptions fluides contraintes avec min-width et maxwidth, comme en tmoignent mes "Extensible CSS series" (http://cameronmoll.com/ archives/2008/02/the_highly_extensible_css_interface_the_series/) et ltude de cas de la premire dition de ce livre (http://tuscany.cssmastery.com/). Les mises en page fluides permettent de raliser des choses fascinantes, comme lexcellente mthode de mise en page en fonction de la rsolution de Cameron Adams (http://themaninblue.com/writing/perspective/2006/01/19/) et la technique des images fluides dEthan Marcotte (http://unstoppablerobotninja.com/entry/fluid-images/). Je pense nanmoins quil y aura toujours des raisons dutiliser des largeurs fixes et pour tre honnte, bien des gards, les mises en page largeur fixe sont plus commodes que les fluides. Si lon part du principe que nous nous accordons sur le fait quil est temps dengager le dbat concernant le dpassement de la limite des 960pixels, quelle pourrait donc tre la largeur idale? Voici quelques options: 1020 est divisible par 2, 3, 4, 5, 6, 10, 12, 15 mais pas par 8 ou par 16. Ce nest pas beaucoup plus large que 960. 1 040 est divisible par 2, 4, 5, 8, 10, 16 mais pas par 3, 12 ou 15. Cette largeur est cependant raisonnable et se situe mi-chemin entre la limite infrieure de 960 et les configurations les plus hautes des utilisateurs qui naviguent en plein cran (beaucoup ne le font pas, comme je lai dj indiqu). 1080 est divisible par 2, 3, 4, 5, 6, 8, 10, 12, 15 mais trangement, pas par 16. Cette largeur nous pousse vers lextrmit haute du spectre, et la mesure des longueurs de lignes peut devenir un problme si on ne la gre pas correctement. Il vaut la peine de noter que les divisions entires ne constituent pas lunique possibilit pour les divisions de la grille, ni forcment le cas idal. On peut ainsi envisager des divisions proportionnelles, par exemple en utilisant le nombre dor (http://fr.wikipedia.org/ wiki/Nombre_dor). Mais, comme le signale Jason Santa Maria, les divisions proportionnelles peuvent ne pas tre commodes sur le Web car elles demandent de pouvoir observer simultanment les divisions horizontales et verticales, alors que la dernire nest souvent pas visible entirement quand on consulte les pages (voir http://jasonsantamaria.com/ articles/whats-golden/). Si nous dpassons les 960pixels, je ne suis donc pas certain que nous aurons cette fois un grand gagnant comme ce fut le cas la dernire fois. Aucune des largeurs indiques prcdemment ne semble aussi flexible que celle de 960pixels, tout le moins du point de vue mathmatique. Pour cette tude de cas, jai cependant choisi une largeur de 1080pixels. Elle offre de nombreuses options pour la grille et elle est suffisamment plus large que 960pixels pour valoir la peine dtre teste.

228

Matrise des CSS

Utilisation des grilles pour la conception web

Les grilles sont utilises en conception graphique depuis des dcennies, mais ce nest quau cours des dernires annes quelles ont vritablement reu les faveurs des concepteurs web et, enfin, pour de bonnes raisons. Wikipdia propose une description succincte de la grille et de ses mrites: "Une grille topographique est une structure deux dimensions constitue dune srie daxes verticaux et horizontaux entrecroiss utilise pour structurer du contenu. La grille est utilise comme une armature sur laquelle le concepteur peut organiser le texte et les images de manire rationnelle et intuitive" (http://en.wikipedia.org/wiki/ Grid_(page_layout)). Les grilles sont composes dlments tels que des colonnes, des lignes, des marges, des gouttires (lespace entre les colonnes ou entre les lignes), de lignes de flux (les divisions horizontales) et dautres composants. Sur un support comme le papier, la largeur et la hauteur de chacun de ces composants sont lies la taille finale du document; les dimensions peuvent aisment tre calcules par le graphiste. Dans le cas de la conception web, les dimensions de largeur sont plus simples calculer que les dimensions de hauteur, les pages tant par nature amenes dfiler. Larmature du site Roma Italia se focalise donc sur les divisions verticales. La Figure10.2 prsente la grille du site.

Figure10.2
La grille 12divisions utilise pour concevoir le site.

Vous pouvez activer et dsactiver cette grille en commentant et dcommentant les balises suivantes:
<div id="grid"><img src="img/grid.png" alt="" width="1090" height="1380"></div>

Vous pouvez le faire encore plus facilement avec une extension de navigateur comme Firebug pour Firefox (http://getfirebug.com/) qui permet de modifier temporairement le balisage du document dans le navigateur. Lorsque Firebug est ouvert, double-cliquez sur la balise body pour rvler le commentaire et diter le code HTML directement cet endroit dans Firebug.

tude de cas: Roma Italia

Figure10.3
Chaque colonne fait 80pixels de large avec une gouttire de 10pixels droite.

229

Comme vous pouvez le voir, la grille est divise en 12colonnes, chacune faisant 80pixels de large avec une gouttire de 10pixels sa droite (voir Figure10.3), ce qui produit une mise en page de 1080pixels de large. Un dcalage de 10pixels (une gouttire supplmentaire) est ajout la marge de gauche pour quilibrer la grille. Ce dcalage ainsi que la gouttire le long de la dernire colonne sont cependant invisibles pour linternaute. On pourrait avancer que la grille fait en ralit 1070pixels une fois ces composants invisibles supprims ou, qu linverse, elle fait 1090pixels lorsquils sont rendus visibles. Quoi quil en soit, notre grille sarticule autour dune mesure globale de 1080pixels. Pour lessentiel, le texte et les images salignent sur les colonnes et les gouttires. Cest videmment tout lintrt dutiliser une grille. Vous remarquerez que je nai pas parfaitement align tous les lments. Il est important de noter ici quune grille ne doit pas systmatiquement dicter le positionnement exact des lments. Elle le facilite, mais elle doit laisser au concepteur la libert de faire les meilleurs choix. Dans Making and Breaking the Grid (Rockport Publishers, 2005), Timothy Samara dcrit ce principe mieux que moi: "Il est important de comprendre que la grille, bien quelle offre un guide prcis, ne doit jamais subordonner les lments quelle contient. Son rle est de fournir une unit gnrale, sans inhiber la vitalit de la composition. Dans la plupart des cas, la varit de solutions de mise en page que propose la grille est inpuisable, mais mme ainsi, il est judicieux denfreindre son schmatisme loccasion. Le graphiste ne doit pas tre contraint par sa grille, mais sappuyer sur elle pour en tester les limites. Une grille bien tablie cre dinfinies possibilits dexploration." Ce nest pas dans une page unique que se manifeste le mieux lintrt des grilles, mais dans la composition densemble. Dans une brochure imprime, la grille sert ainsi unifier lemplacement des lments au fil des pages. Si Roma Italia tait un vrai site, toutes ses pages (et pas seulement les deux que vous voyez) sappuieraient sur la mme grille afin doffrir une continuit visuelle lutilisateur et des options infinies de mise en page au concepteur. Je nai ici fait quaborder rapidement le sujet des grilles. Vous trouverez de nombreuses ressources sur le site The Grid System (http://www.thegridsystem.org/) et dans larticle "Designing with Grid-Based Approach" (en anglais) du site du magazine Smashing (http:// www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/).

230

Matrise des CSS

Fonctionnalits CSS2 et CSS3 avances

Ce nest qu la sortie dInternet Explorer7 en octobre 2006 que les instructions prsentes cette section sont devenues la fois rationnelles et techniquement ralisables. Internet Explorer7 offrait enfin accs aux nombreuses fonctionnalits excitantes des spcifications CSS2 et CSS3 que prenaient dj en charge Firefox, Safari et quelques autres navigateurs. Parmi les plus importantes, on peut citer min-width et max-width, le slecteur dattribut, le slecteur de frre adjacent, le slecteur denfants et la transparence alpha dans les images PNG. Ces fonctionnalits bien prises en charge combines avec dautres fonctionnalits un peu moins bien prises en charge permettaient de raliser des choses vritablement fascinantes. La barre de navigation Apple recre par John Allsopp en CSS uniquement et sans image en tait un exemple (voir http://westciv.com/style_master/blog/apples-navigation-barusing-only-css). Cette section propose quelques autres exemples, tout aussi intressants. Les fonctionnalits CSS 2 et CSS 3 avances suivantes sont utilises dans le site Roma Italia: slecteur adjacent; slecteur dattribut; box-shadow; opacity; RGBa; content; multicolonnage; text-overow; arrire-plans multiples; @font-face; min-/max-width, min-/max-height; transparence alpha dans les images PNG. Dans cette tude de cas, je traiterai des fonctionnalits suivantes: les slecteurs dattributs, box-shadow, RGBa, text-overow, les colonnes multiples, les arrire-plans multiples et @ font-face. Pour les fonctionnalits qui ne sont pas abordes, je me suis efforc dinsrer des commentaires dans le code afin de vous aider les dcouvrir par vous-mme. Vous pourrez aussi disposer de lantische CSS suivante, pour la consulter lcran ou limprimer: http://cameronmoll.com/articles/widget/cheatsheet.pdf.

Les sites doivent-ils tre identiques dans tous les navigateurs?

Cest la question que pose, en entier et dans son nom de domaine, le site http://dowebsitesneedtolookexactlythesameineverybrowser.com Tapez son nom dans la barre dadresse et voyez la rponse. Ce site trs simple, dvelopp par Dan Cederholm, a circul sur le Web

tude de cas: Roma Italia

231

en 2008 comme une propagande virtuelle discrditant le mythe selon lequel tous les sites web devaient possder exactement la mme apparence dans tous les navigateurs. Ctait une invitation lance la communaut du dveloppement web pour quelle adopte une mthode plus progressive du balisage au lieu de se contraindre luniformit absolue. En un mot, le site de Dan dnonait ce rflexe de mpris affich par les dveloppeurs lencontre des variations visuelles. Dans le site Roma Italia, la diffrence visuelle la plus frappante concerne la fonctionnalit des arrire-plans multiples. Elle permet dutiliser plusieurs images darrire-plan pour un seul lment, alors quactuellement seule une image est autorise par lment. Les aficionados des bords arrondis sen frottent les mains. lheure actuelle, Safari est le seul navigateur important prendre en charge les arrireplans multiples (cest intressant de noter quil le faisait dj ds sa version 1.3, soit en 2005!). Cela signifie que dans les navigateurs comme Firefox et Internet Explorer, le site possdera une apparence lgrement diffrente. Cest non seulement intentionnel pour les besoins de cette tude de cas, mais cela dmontre aussi quil est parfaitement lgitime de proposer un affichage distinct dans les diffrents navigateurs sans que cela ait un effet ngatif sur lexprience gnrale de lutilisateur. Les arrire-plans multiples, que les professionnels du Web clbreront comme une aubaine ds quils seront bien pris en charge, sont faciles crer en CSS. Vous devez simplement sparer chaque image et ses valeurs par une virgule:
background: url(image1.png) no-repeat top left, url(image2.png) no-repeat top right, url(image3.png) no-repeat bottom left;

Les proprits et les valeurs peuvent aussi tre dfinies sparment:

background-color: #000; background-image: url(image1.png), url(image2.png), url(image3.png); background-repeat: no-repeat; background-position: top left, top right, bottom left;

Les arrire-plans multiples sont utiliss dans notre site dexemple plusieurs endroits (voir Figure10.4). Notez les diffrences entre Safari, Firefox et Internet Explorer. Deux images darrire-plan sont utilises dans llment body pour donner au site sa texture darrire-plan: la grande image brun fonc et la bande brun clair avec un dgrad lger, respectivement nommes bg-dark.jpg et bg-light.jpg. Le code CSS ressemble ceci:
body { background: url(../img/bg-dark.jpg) repeat-x top center, url(../img/bg-light.jpg) repeat-x 239px left; background-color: #f1efe8; }

232

Matrise des CSS

Figure10.4
Les diffrences dans les images darrire-plan entre Safari ( gauche) et Firefox et Internet Explorer ( droite).
Les arrire-plans multiples affichs par Safari

Comme Firefox et Internet Explorer ne prennent pas encore en charge les arrire-plans multiples, si nous conservons le code CSS en ltat, aucune image ne saffiche. On obtient alors un arrire-plan compltement vide, ce qui nest pas souhaitable. Pour pouvoir afficher au moins limage sombre, nous insrons donc la proprit duplique suivante au-dessus de la premire:
background: #f1efe8 url(../img/bg-dark.jpg) repeat-x;

Firefox lit cette proprit et ignore lautre. Nous rptons la mme proprit dans ie.css car Internet Explorer naime pas trop ce petit hack que nous venons de fomenter. Le CSS final dans screen.css est le suivant:
body { background: #f1efe8 url(../img/bg-dark.jpg) repeat-x; background: url(../img/bg-dark.jpg) repeat-x top center, url(../img/bg-light.jpg) repeat-x 239px left; background-color: #f1efe8; }

Soyons clairs: ce nest pas le moyen le plus efficace daboutir au rsultat prsent. Pour commencer, nous aurions pu prendre une unique image combinant les deux graphismes, ce qui aurait tout simplement vit davoir utiliser des images darrire-plan multiples. Ensuite, nous ajoutons du code supplmentaire pour forcer Firefox et Internet Explorer afficher au moins une image. Mais le but de ces inefficacits est uniquement dliminer les incohrences visuelles insignifiantes dun navigateur lautre et de prsenter les arrireplans multiples. Pour le bien de la collectivit des professionnels du Web, esprons que nous sommes plus prs du but quil ny parat.

Slecteur dattribut
Le slecteur dattribut vite davoir ajouter une classe ou un ID un lment en permettant de faire rfrence nimporte quel attribut, ou valeur dattribut, contenu dans llment. Il peut tre utilis sur presque tous les lments qui possdent des attributs. Par exemple, img[alt] cible un attribut tandis que img[src="small.gif"] cible une valeur dattribut. En outre, des valeurs dattribut similaires peuvent tre cibles laide de chanes syntaxiques comme img[src^="sm"], qui vise toutes les valeurs qui commencent par le prfixe

tude de cas: Roma Italia

233

"sm" (par exemple, "small"). Pour dautres exemples, consultez larticle (en anglais) "CSS3: Attribute selectors" (http://www.css3.info/preview/attribute-selectors/). Les slecteurs dattributs sont pratiques dans certains cas, mais ils le sont particulirement avec les formulaires. Si des lments sont mis en forme avec un connecteur gnrique comme input { }, tous les lments input dans le formulaire le seront galement. Cela signifie que si vous souhaitez cibler des champs de texte uniquement ou le bouton denvoi uniquement, vous allez devoir ajouter des classes et des ID superflus. Le slecteur dattribut est donc un moyen propre de cibler des lments particuliers.
Figure10.5
Ce champ de recherche utilise deux lments input, chacun cibl par un slecteur dattribut.

Le champ de recherche en haut du site sert dexemple de slecteur dattribut (voir Figure10.5). Voici le code HTML:
<form action="#" method="get" accept-charset="utf-8"> <eldset> <legend></legend> <label for="search-input">Search</label> <input type=text id=search input name=search value= title=Search> <input type=image name= src=img/search-go.gif> </eldset> </form>

Ici, nous voulons mettre en forme le champ de texte avec plusieurs proprits et faire flotter search-go.gif gauche. Les deux lments input que nous allons cibler avec un slecteur dattribut sont affichs en gras. Vous remarquerez quils ne portent aucun attribut de classe ou dID. Nous pouvons en effet les cibler en utilisant lattribut type, comme ceci:
#header form input[type="text"] {

display: block; ... background: url(../img/search-bg.gif) no-repeat; } #header form input[type=image] { oat: left; }

Tous les lments input qui contiennent lattribut type="image" sont rendus flottants gauche et tous les lments input contenant lattribut type="text" sont mis en forme comme nous lavons indiqu. Cette mme syntaxe est en outre utilise dans jquery.plugins. js pour ajouter une fonctionnalit jQuery et Ajax:
$(#header form input[type="text"]).searchField();

Nous reviendrons sur jQuery et Ajax ultrieurement.

234

Matrise des CSS

box-shadow, RGBa et text-overflow

Au centre du site Roma Italia, vers le bas de la page, figure un petit widget intitul Voices Around the World. Si ce widget tait rel, il afficherait dans la carte, les mises jour sur Twitter (tweets) de tous les utilisateurs qui incluent le hashtag #romaitalia dans leur tweet, en fonction de leur emplacement gographique et de manire alatoire. Les visiteurs du site pourraient cliquer sur ces citations alatoires pour accder la page du tweet complet, sur le nom dutilisateur de lauteur et les tweets dautres fans de Roma Italia un moyen den apprendre plus sur Rome en temps rel laide de mises jour Twitter. Les tweets affichs dans ltude de cas sont fictifs, mais vous pouvez suivre @roma_italia, un vritable compte Twitter que jai configur pour cette tude de cas.
Figure10.6
Les marqueurs cartographiques apparaissent et disparaissent et affichent du texte supplmentaire quand lutilisateur les survole.

Les marqueurs qui apparaissent et disparaissent toutes les quelques secondes ont un code assez complexe (voir Figure10.6) et nous utiliserons leur balisage pour illustrer le fonctionnement des proprits CSS3 box-shadow, RGBa et text-overow. Chaque marqueur est compos de trois parties: le texte du tweet, un arrire-plan blanc avec une ombre porte et une image de cercle pour le marqueur cartographique. Le marqueur est envelopp dans un lment de liste (li), lui-mme abrit sur une liste puces (ul) contenant limage darrire-plan de la carte du monde:
<ul> <li class="l1" id="map2" style="top: 61px; left: 53px;"><a href="#"> <em>Absolutely divine. Dont skip the Il Vittoriano. Its size alone is impressive. Theres a stunning view from the top.</em></a></li> <li>...</li> </ul>

Nous appliquons un style la liste ul avec les proprits suivantes:

#voices ul { position: relative; width: 310px; height: 178px; background: url(../img/bg-map.gif) no-repeat; }

Vous remarquerez que nous avons dfini un positionnement relatif. Il permet de positionner de manire absolue chaque lment de liste par rapport llment ul. Sans cela, llment de liste serait positionn de manire relative un autre lment parent selon toute vraisemblance, llment body (voir le Chapitre 3 pour un rappel sur le positionnement absolu).

tude de cas: Roma Italia

Chaque marqueur cartographique est mis en forme en fonction:
#voices ul li.l1 { position: absolute; padding-top: 16px; background: url(../img/mapmarker-dot.png) no-repeat 2px top; }

235

Le cercle du marqueur cartographique est incorpor sous forme dimage darrire-plan, et la classe l1 indique lemplacement numro un (le point droite), alors que l2 indique lemplacement numro deux (le point gauche). Les proprits demplacement qui positionnent chaque marqueur ne sont pas indiques. Nous positionnons en effet chaque marqueur de manire dynamique lorsquil apparat, en utilisant un style incorpor. Pour ce marqueur particulier, il sagit de style="top: 61px; left: 53px;". Soit 61pixels du haut de llment ul et 53pixels de sa gauche. Larrire-plan blanc sur lequel rside le texte du tweet est lgrement transparent et possde une ombre porte sur les bords gauche, droit et infrieur. Ces deux styles sont produits en utilisant respectivement RGBa et box-shadow:
#voices ul li.l1 a { display: block; padding-left: 11px; font: 11px/14px Georgia, serif; color: #32312a; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); background-color: rgba(255, 255, 255, 0.78); }

Les proprits box-shadow et RGBa sont traites dans ltude de cas de Simon au Chapitre11, aussi rfrez-vous ce chapitre pour des explications sur ces deux fonctionnalits. Notez toutefois que lopacit RGBa diffre dune autre fonctionnalit CSS3 appele opacity. Elle peut tre applique une proprit particulire, comme larrire-plan, et ne concerne quelle. opacity, en revanche, affecte tout dans llment quelle modifie, comme ceci:
#voices ul li.l1 a { opacity: 0.35 ... }

Les valeurs pour opacity sont analogues celles pour RGBa et stendent de0 (entirement transparent) 1 (entirement opaque). Jinsiste cependant sur le fait que ce rglage modifie tout llment. Si nous lavions utilis ici, cest non seulement larrire-plan blanc qui serait opaque 35%, mais le texte du tweet galement. Lorsque lutilisateur survole un marqueur cartographique, son affichage change (voir Figure10.7).

236

Matrise des CSS

Figure10.7
Le texte complet saffiche en cas de survol.

Cest le moment o intervient text-overow. Jaurais aim toucher un dollar chaque fois que cette fonctionnalit ma t utile dans ma carrire jcrirais alors ces lignes de la terrasse dun bungalow aux Bahamas. La bonne nouvelle, cest quaujourdhui cette proprit est assez bien prise en charge par les principaux navigateurs. Internet Explorer le fait mme mieux que Firefox, de mme que Safari. text-overow tronque le bloc de texte quand il est trop grand pour tenir dans son lment conteneur. La valeur ellipsis ajoute trois petits points () au texte tronqu. Ici, text-overow est utilis pour chaque marqueur cartographique, afin de limiter le texte une ligne:
#voices ul li.l1 a em { white-space: nowrap; width: 135px; overow: hidden; text-overow: ellipsis; -o-text-overow: ellipsis; -moz-text-overow: ellipsis; -webkit-text-overow: ellipsis; }

Comme cette fonctionnalit nest pas officiellement prise en charge par les diffrents navigateurs (mme si tous les principaux navigateurs le font de fait), nous avons ajout les prfixes o (Opera), moz (Mozilla) et webkit (WebKit). Pour leffet de survol, nous avons ajout la pseudo-classe :hover llment, chang la hauteur 72pixels et attribu la valeur visible la proprit overow.
#voices ul li.l1 a em:hover { white-space: normal; overow: visible; text-overow: inherit; -o-text-overow: inherit; cursor: hand; cursor: pointer; background: #fff none; height: 72px; padding-left: 11px; padding-bottom: 5px; margin-left: -9px; }

Voil qui complte leffet: chapeau bas CSS3.info pour leurs exemples de text-overow, qui ont inspir la cration de cet effet. Vous pouvez dcouvrir dautres fonctionnalits CSS3 sur leur site web ladresse http://www.css3.info/.

tude de cas: Roma Italia

237

Liaison des polices et typographie web amliore

Il serait ais de remplir les pages de ce livre de techniques de typographie pour le Web. Dans le cadre de cette tude de cas, nous nous contenterons des suivantes: lunit px pour font-size; la ponctuation hors justification; laffichage du texte sur plusieurs colonnes; la liaison et lincorporation des polices.

Dfinir font-size comme en 1999

Pendant des annes, px a t le standard implicite pour dfinir la taille du texte avec fontsize. Il donnait aux graphistes qui transfraient leurs maquettes de Photoshop (ou dun autre logiciel) vers le HTML une unit absolue et uniforme pour le texte. mesure que les dveloppeurs ont pris conscience des problmes daccessibilit, la taille de texte relative (em ou %) est cependant progressivement devenue lunit de choix. Elle permettait aux utilisateurs souffrant dun handicap visuel, et vrai dire, nimporte qui, de modifier la taille de texte du navigateur de manire permanente grce aux rglages du navigateur ou la vole, en utilisant les commandes clavier Ctrl++ et Ctrl+ (Windows) ou Cmd++ et Cmd+. Conformment ces pratiques, et jusqu rcemment encore, tous les principaux navigateurs redimensionnaient le texte en conservant le formatage des autres lments ainsi que la mise en page. Il sagissait dune mise lchelle du texte ou dun zoom texte. Cette adaptation requrait quon cre un balisage autorisant le redimensionnement relatif de nimporte quel lment contenant du texte. Par exemple, si une div contenait du texte par-dessus une image darrire-plan, il fallait soit rpter limage quand la div devenait plus grande avec le redimensionnement du texte, soit crer limage plus grande afin de prvoir cet agrandissement. Jai trait de ce sujet en dtail dans une srie darticles (en anglais) intitule "The Highly Extensible CSS Interface" (voir http://cameronmoll.com/archives/2008/02/ the_highly_extensible_css_interface_the_series/). Les dernires versions des principaux navigateurs (Safari, Firefox, Google Chrome, Opera et, non, vous ne rvez pas, Internet Explorer) proposent maintenant par dfaut un zoom de page plutt quune mise lchelle du texte avec les commandes Ctrl++/ et Cmd++/. Le zoom de page est un agrandissement qui affecte la totalit de la page (mise en page, formatage et taille de texte) lunisson. Les lments conservent leur taille et leur forme, ce qui rduit considrablement la ncessit dun redimensionnement du texte. Cest en effet le navigateur qui se charge du redimensionnement relatif. Que signifie donc tout cela ? Que lunit px peut nouveau tre considre comme une valeur viable pour font-size. En outre, au niveau du texte, la diffrence entre les units absolues et les units relatives peut tre ngligeable pour les utilisateurs. Pour vous et moi,

238

Matrise des CSS

cette diffrence est en revanche tout fait considrable. On peut ainsi spargner tout un travail pour calculer les units relatives dans un document CSS; car tout est plus commode avec les units absolues: 14 px, cest 14px nimporte o dans le document, quels que soient les lments parents, dont la valeur de font-size peut tre diffrente. Cette tude de cas est cense tre raliste, certes, mais elle est avant tout exprimentale. Je moffre la libert de me demander parfois "et si?" et "pourquoi ne pas tenter?" Vos projets peuvent tre plus restrictifs, aussi efforcez-vous de prendre la bonne dcision en fonction de votre public cible, comme toutes les dcisions des professionnels du Web. Cest la constante absolue pour les programmeurs de sites, linvariant qui rsiste tous les bouleversements passs, prsents et futurs de cette industrie. Autrement dit, si le choix des units relatives convient votre projet, il est exclu que quiconque puisse affirmer le contraire pas mme moi. Pour plus dinformations sur le dbat au sujet de lunit px pour font-size, consultez ces articles (en anglais): http://www.wilsonminer.com/posts/2007/mar/16/problem-pixels/: le problme avec les pixels. http://www.456bereastreet.com/archive/200703/ie_7_does_not_resize_text_sized_ in_pixels/: Internet Explorer7 ne redimensionne pas le texte spcifi en pixels. http://mezzoblue.com/archives/2008/10/07/zoom/: Mezzoblue Zoom. http://orderedlist.com/articles/hello-old-friend: Hello Old Friend.

Ponctuation hors justification

La ponctuation hors justification, quand on la dcouvre, est le signe vident quun typographe expriment uvre larrire-plan. Cette fonctionnalit est disponible dans la plupart des applications de conception dAdobe, mais elle nest pas disponible sous forme de proprit CSS. Du moins, pas encore. Une proprit appele hanging-punctuation est bien propose dans la spcification CSS 3 (voir http://www.w3.org/TR/css3text/#hanging-punctuation), mais, ma connaissance, aucun navigateur ne la prend encore en charge. La ponctuation hors justification aligne les marques de ponctuation en dehors du bloc de texte afin de ne pas interrompre lenchanement visuel du texte. La Figure10.8 en prsente un exemple avec des guillemets. Cette technique est utilise trois endroits dans la page daccueil: la premire ligne de texte sous le titre Roma Moleskine (voir Figure10.9), le texte du tweet dans les marqueurs de la carte Voices Around the World et pour la citation orange par Bde le Vnrable. La dernire est une image, aussi commenons par elle. La mme technique est utilise pour la seconde.

tude de cas: Roma Italia

Figure10.8
Cet exemple montre comment la ponctuation hors justification (en bas) diffre de la ponctuation aligne avec le bord du texte (en haut). Cette dernire est utilise par dfaut dans la plupart des logiciels de conception graphique, ainsi que pour le texte dans les navigateurs.

239

Figure10.9
Exemple de ponctuation hors justification dans le site Roma Italia.

Le code HTML est trs simple:

<div id="featurette1"> ... <p> &ldquo;The ultimate traveler&rsquo;s journal.&rdquo; City maps, removable sheets, and a 96-page tabbed archive.</p> ... </div>

Les entits HTML &ldquo;, &rsquo; et &rdquo; correspondent des guillemets courbes. Ils ne sont pas ncessaires pour la ponctuation hors justification, mais il sagit dune autre marque subtile de typographie de qualit. Ces entits chargent un peu le code source pour lil qui ny est pas exerc, mais la ponctuation ajuste reproduite par le navigateur (et que lil entran sait reprer) le compense largement. Cest dans le code CSS que la magie se produit:
#featurette1 p { text-indent: -.3em; }

Et voil. Dans vos projets, ajustez cette valeur en fonction de la taille et de la famille de police.

240

Matrise des CSS

Affichage du texte sur plusieurs colonnes

Avec une mise en page aussi large que celle-ci, il devient important de conserver une "mesure" (longueur de ligne) correcte pour la lisibilit du texte. La largeur du bloc de texte se mesure par son nombre de caractres (dont les espaces) par ligne. Il existe un nombre infini dtudes et dopinions concernant le nombre optimal de caractres par ligne, quon fait varier de 4595, notamment en fonction du support. Cette section ne traite pas vritablement de la longueur de ligne optimale, mais plutt de la manire de conserver une longueur raisonnable. Comme cette mise en page atteint 1080pixels de large, elle est loccasion toute trouve de tester la fonctionnalit de texte multicolonne que propose la spcification CSS3, actuellement prise en charge par les navigateurs WebKit et Mozilla. Les autres navigateurs affichent le texte dans une seule colonne dont la largeur gale celle de toutes les colonnes combines. Robert Bringhurst, dans son livre exceptionnel truff de conseils typographiques The Elements of Typographic Style (Hartley and Marks, 2004), suggre dutiliser une longueur de ligne comprise entre 40 et 50caractres pour le texte sur plusieurs colonnes. Par commodit, jai suivi cette recommandation pour ma mise en page. La Figure10.10 prsente un fragment de video.html.

Figure10.10
Mise en page multicolonne dans la page Video.

Vous remarquerez que le texte est dispos en deux colonnes. Le code HTML est tout ce quil y a de plus classique:
<div id="main-video"> <h3> Highlights from a recent vacation to Rome, Italy. Shot with a...</h3> <p>I&rsquo;m no video virtuoso. I only dabble with video as time...</p> ... </div>

tude de cas: Roma Italia

Le code CSS, linverse, est loin dtre standard:
#main-video { oat: left; margin: 40px 10px 70px; width: 520px; -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; }

241

Ici encore, nous nous trouvons contraints dutiliser les prfixes moz (Mozilla) et webkit (WebKit). Vous remarquerez que deux proprits entrent en jeu: column-count et column-gap. Elles sont assez simples comprendre et utiliser; vous navez qu dfinir une valeur pour le nombre de colonnes souhait et slectionner une valeur pour linterstice qui les spare. Le bloc de texte entier est ensuite automatiquement rparti dans le nombre de colonnes spcifi. Une troisime proprit, column-rule, permet dajouter une bordure entre les colonnes (par exemple, column-rule: 1px solid #000;). La question se pose, certes, du bien-fond du texte multicolonne sur le Web et des problmes lis la ncessit de faire dfiler la page tantt vers le haut, tantt vers le bas, mais je ne doute pas quentre les mains dun typographe expriment laffichage sur plusieurs colonnes permettra dtendre les options typographiques dont nous disposons sur le Web.

@font-face
Ce sujet ne saurait tre mieux prsent quen reprenant les termes de Jeffrey Veen, fondateur de Typekit (http://typekit.com/): "La recommandation du W3C pour les polices Web CSS [@font-face] va bientt fter son septime anniversaire. Pourquoi, aprs tant dannes, la typographie web na-t-elle pas plus progress ? Pourquoi les concepteurs nont-ils pas adopt les polices lies et tlchargeables dans leurs maquettes ?" (http://blog.typekit.com/2009/06/02/ fonts-JavaScript-and-how-designers-design/). Excellentes questions, Jeffrey. Il y a fort parier que dici ce que ce livre atteigne les tagres des librairies et se fraie finalement un chemin jusqu vos mains, le produit Typekit de Jeffrey aura en grande partie rpondu cette question, justement. Typekit tente de rsoudre les problmes dimplmentation et de scurit (traits plus loin dans cette section) avec @ font-face en hbergeant de manire centralise des polices qui ont dj t approuves par les diteurs de polices pour la liaison (voir Figure10.11).

242

Matrise des CSS

Figure10.11
Typekit propose une liaison de polices web sans le fardeau de limplmentation @font-face et ses problmes de scurit affrents.

En un mot, @font-face offre la possibilit dutiliser virtuellement nimporte quelle police dans les maquettes reproduites sous forme de texte HTML sans se soucier de savoir si cette police est ou non installe sur lordinateur de lutilisateur. Ce procd est gnralement appel liaison ou incorporation des polices. Au lieu de placer ceci en haut du document:
body { font-family: Georgia, serif; ... }

Il est possible dcrire ceci:

@font-face { font-family: "Garamond Premier Pro"; src: url(fonts/GaramondPremrPro.otf); }

Ensuite, il suffit de faire rfrence la famille de police, comme dhabitude:

h1 { font-family: "Garamond Premier Pro", serif; }

Je frtille rien quen tapant a (je sais, je suis un vrai geek). Mais quand mme: imaginez, utiliser nimporte quelle police dans la maquette de votre site en laissant votre texte safficher en HTML, sans sIFR, sans Cufn, sans images! Ah, vous voyez, a vous chatouille, vous aussi, maintenant

tude de cas: Roma Italia

243

Bon, videmment, si ctait si facile que cela, on se serait prcipit pour utiliser @fontface il y a sept ans. Mais il y a quelques difficults. La premire, vous laurez devin, est la prise en charge des navigateurs. Safari3 et Firefox3.1 ainsi que leurs versions ultrieures prennent en charge @font-face. Internet Explorer, qui le reconnat depuis sa version4, ne reconnat cependant que le format .eot (Embedded OpenType), un format de police propritaire de Microsoft. Toutefois, Internet Explorer ne prend en charge que le format .eot (Embedded OpenType), qui est un format de police propritaire de Microsoft. Les fichiers .eot ne peuvent tre crs qu partir de fichiers .ttf (TrueType) et les autres formats de police comme .otf (OpenType) doivent tre convertis en .ttf pour tre ensuite convertis en .eot. Il nest donc pas tonnant que @font-face ait eu tant de mal dcoller. Ensuite, les diteurs de polices et les vendeurs ont t trs circonspects concernant la liaison des polices sur le Web. Leur proccupation tait double: comme les fichiers de police sont stocks sur le site et donc publiquement accessibles, ils sont exposs des tlchargements et un usage illgaux et parce que bon nombre de leurs contrats de licence dutilisation nont pas t mis jour pour autoriser la liaison sur le Web. Il y a toutefois une bonne nouvelle, double, elle aussi: de nouvelles technologies mergent, comme Typekit, qui rsolvent les deux problmes mentionns et @font-face encourage lutilisation dautres polices que le jeu standard auquel nous sommes habitus (Arial, Georgia, etc.), ce qui doit invitablement augmenter la demande commerciale en matire de polices. Les vendeurs et les diteurs de polices ont donc un rel intrt ce que la liaison et lincorporation des polices finissent par dcoller. En fait, pendant que jcrivais ce chapitre, plusieurs diteurs ont annonc que de nouvelles polices taient disponibles pour la liaison sur le Web et certains ont mme annonc dimportantes modifications dans leurs contrats de licence dutilisation. Museo Sans (voir Figure10.12) est une police conue par Jos Buivenga et commercialise en 2008. La version Museo Sans500 est gratuite et il sagit du corps que jai utilis ici. Mieux, le contrat de licence dutilisation (EULA) autorise la liaison sur le Web (notez que Gotham, la police utilise dans le logo et dans les lgendes en semi-transparence sur les images du diaporama, aurait t mon premier choix pour la liaison des polices, mais son contrat de licence, au moment o je concevais le site, ne lautorisait pas).
Figure10.12
Exemples de police Museo. (Copyright MyFonts.com.)

244

Matrise des CSS

Dans Roma Italia, jutilise @font-face pour montrer ce qui est possible prsent et dans un avenir proche. Dans screen.css, vous verrez le code suivant vers le haut du document:
@font-face { font-family: "Museo Sans X"; src: url(../fonts/MuseoSans_500.otf); }

Museo Sans est utilise dans plusieurs titres et dans le systme de navigation du haut (voir Figure10.13):
#home h3, #home h4, #home #header h2, #home #header ul a { font-family: Museo Sans X, Lucida Grande, Lucida Sans Unicode, Arial, sans-serif; }

Figure10.13
Museo Sans est la police utilise dans le systme de navigation du haut.

Vous remarquerez que jai indiqu des choix de polices de repli dans lventualit o le navigateur de lutilisateur ne prendrait pas en charge @font-face. Vous remarquerez aussi que le nom de la police est Museo SansX. Lorsque vous dfinissez @font-face dans les CSS, vous pouvez nommer la famille de police comme vous le souhaitez. Jaurais pu utiliser Musei Vaticani si cela mavait chant, ds le moment o je faisais rfrence au bon fichier de police (MuseoSans_500.otf). Comme Museo Sans est gratuite, il se peut quelle soit dj installe sur votre ordinateur. Jai spcifiquement ajoutX afin de massurer que vous voyiez fonctionner @font-face en pratique, avec ma copie de Museo Sans et non avec une copie qui serait dj installe sur votre ordinateur. Je nai pas converti le fichier Museo Sans.otf en un fichier .eot. Internet Explorer ne le reconnatra donc pas. Si vous voyez Museo Sans dans Internet Explorer, cest que Cufn est luvre et non @font-face (voir la section suivante pour plus dinformations ce sujet). Quelques autres ressources signaler sur ce thme: http://myfonts.com/fonts/exljbris/museo-sans/: pour tlcharger une copie de Museo Sans. http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work : pour une prsentation complte de @font-face et dEOT, consultez larticle de Jon Tan (en anglais) intitul "@font-face in IE: Making Web Fonts Work".

tude de cas: Roma Italia

245

Cufn, tape intermdiaire avant @font-face

Jai post un didacticiel complet concernant Cufn sur mon site web personnel que vous pouvez consulter (en anglais) ladresse suivante: http://cameronmoll.com/archives/2009/03/ cufon_font_embedding/. Je ne traiterai donc que brivement de Cufn ici. En un mot, Cufn permet de reproduire du texte HTML avec la police de son choix sans avoir utiliser dimage ni @font-face (voir Figure10.14). Commenons par le commencement. sIFR, vous le savez, est un moyen de remplacer "de courts passages de texte brut par du texte affich avec la police de votre choix, que vos utilisateurs laient installe ou non sur leur ordinateur", grce une combinaison de Flash et de JavaScript (voir http://www.mikeindustries.com/blog/sifr/). Shaun Inman, Mark Wubben, Mike Davidson et quelques autres ont consacr de nombreuses heures dvelopper et affiner IFR et sIFR. Nous leur sommes tous trs reconnaissants davoir fait avancer pas de gant la typographie sur le Web. Ce qui manquait @font-face en termes de prise en charge des navigateurs et dadhsion de la part des diteurs de polices au fil des ans, sIFR la combl dans le mme temps. La partie Flash de ces technologies les rend cependant difficiles configurer et utiliser pour nombre dentre nous. Cufn, la diffrence, peut tre configur et excut sur votre site en cinq minutes environ. Cest la raison pour laquelle je le considre comme une bonne tape intermdiaire entre sIFR et @font-face si vous navez pas la possibilit de raliser des liaisons de polices.
Figure10.14
Le gnrateur dcriture de Cufn.

246

Matrise des CSS

Voici comment vous pouvez vous appuyer sur Cufn: 1. Tlchargez le fichier de script Cufn ladresse http://wiki.github.com/sorccu/cufon. 2. Placez sur votre serveur la police de votre choix laide du gnrateur Cufn, qui fournit un second fichier de script. 3. Dans len-tte de votre document, ajoutez des rfrences au script Cufn et le script de police fourni par le gnrateur, comme ceci:
<script src="js/cufon-yui.js" type="text/JavaScript" charset="utf-8"></script> <script src="js/Museo_400.font.js" type="text/JavaScript" charset="utf-8"></script>

Ajoutez aussi ceci juste avant la balise body de fermeture pour viter un problme de clignotement dans Internet Explorer:
<script type="text/JavaScript">Cufon.now();</script>

Dans len-tte, indiquez aussi quels lments HTML ou slecteurs doivent tre remplacs par votre police, comme:
<script type="text/JavaScript"> Cufon.replace(h1); </script>

ou
<script type="text/JavaScript"> Cufon.replace(h1)(h2)(blockquote); </script>

4. Sinon, si vous utilisez un framework JavaScript comme jQuery sur le site o Cufn sera employ (comme Roma Italia), Cufn tire parti du moteur de slecteur de ce framework de telle sorte que vous pouvez appeler des slecteurs spcifiques comme ceci:
<script type="text/JavaScript" charset="utf-8"> Cufon.replace(#header h2,#header ul a); </script>

5. Dans les fichiers CSS, modifiez le texte remplac par Cufn de la mme manire que vous le feriez avec nimporte quel autre texte color: #333;, font-size: 12px;, text-transform: uppercase;,etc. Et cest tout. Cufn est actuellement pris en charge par Internet Explorer6, 7et8, Firefox 1.5 et ultrieur, Safari 3 et ultrieur, Opera 9.5 et ultrieur et Google Chrome. Dans le site dtude de cas, jai inclus Cufn en plus de @font-face, afin que vous puissiez observer les deux options. Notez que Cufn est soumis aux mmes problmes que @fontface concernant les licences dutilisation: les polices que vous choisissez doivent autoriser lincorporation sur le Web. Vous remarquerez que jai envelopp Cufon.replace dans un commentaire conditionnel, car Internet Explorer ne lit pas le fichier de police .otf que nous utilisons pour @fontface. Cufn devient donc un remplacement pour @font-face dans Internet Explorer pour les besoins de cette tude de cas. Si vous souhaitez voir Cufn fonctionner dans un autre navigateur, supprimez tout simplement le commentaire conditionnel. Cufn vient alors en remplacement de @font-face.

tude de cas: Roma Italia

247

Interactivit avec Ajax et jQuery

Lorsque jai abord le sujet dAjax au cours dun atelier de travail il y a quelques annes, je nai pas vu beaucoup de mains se lever quand jai demand qui avait dj dvelopp des sites et des applications avec Ajax. Si je devais poser la mme question aujourdhui, il est probable que vous seriez nombreux lever le bras. Il en irait sans doute de mme si lon posait cette question propos de jQuery. Ajax et jQuery ont en effet trouv leur place dans les sites de haut niveau comme le duo de choix pour linteractivit riche sur le Web. Les deux peuvent videmment sutiliser lun sans lautre, mais il est courant de les employer en tandem. Des technologies mergentes, comme Flex dAdobe ou Silverlight de Microsoft prtendent contester la suprmatie de ce duo, mais jai toutes les raisons de croire quAjax et les frameworks resteront les principaux acteurs du Web pour quelques annes encore. Cette section na pas pour but de les prsenter en dtail. Il existe de nombreux livres, didacticiels et articles de blog sur le sujet. Jaimerais plutt proposer une brve introduction (ou un rappel) Ajax et jQuery et montrer comment ils sont utiliss dans le site Roma Italia. Si vous tes dj familiaris avec ces technologies, passez directement la section "Utilisation dAjax et de jQuery pour la fonctionnalit de recherche".

Ajax
Ajax lacronyme approximatif dAsynchronous JavaScript and XML (JavaScript et XML asynchrones) inclut gnralement au moins trois composants: une communication asynchrone avec le serveur, ralise laide de XMLHttpRequest; une manipulation du DOM (Document Object Model ou modle objet de document) pour laffichage dynamique et linteraction; du JavaScript pour ficeler le tout. Laspect asynchrone de la requte est le composant-cl dAjax (et de toute technologie Internet riche en la matire), car cest lui qui donne, dans lenvironnement web, cette impression de travailler sur une application native extrmement ractive. Au lieu du modle classique de requte/rponse qui rcupre la page entire en oprant un aller-retour complet vers le serveur, lasynchronie se contente de nextraire que les donnes dune portion slectionne de la page (par exemple, en vrifiant la disponibilit dun nom dutilisateur lors de louverture dun compte). Dans le site Roma Italia, nous avons simul la communication asynchrone avec le serveur pour les besoins de la dmonstration, en utilisant du code JavaScript et en extrayant les donnes de quelques pages PHP statiques: imageLoad.php pour les images du diaporama; search.php pour la fonctionnalit de saisie semi-automatique du champ de recherche.

248

Matrise des CSS

La simulation de lasynchronie permet de tlcharger les exemples de code et douvrir linterface sur nimporte quel ordinateur qui excute PHP, sans avoir besoin dune vritable communication serveur. Nous examinerons le code de la fonctionnalit de saisie semi-automatique juste aprs la section sur jQuery.

jQuery
Le trs utile livre jQuery de Karl Swedberg et Jonathan Chaffer (Pearson France, 2009) dcrit jQuery comme "une couche dabstraction de porte gnrale pour la programmation web courante". Dans mes termes, cela donnerait plutt: "le JavaScript pour les bleus dans mon genre". jQuery permet de: parcourir le DOM; modifier lapparence dune page; modifier le contenu dune page de manire dynamique. Il permet en outre de raliser tout cela sans crire des kilomtres de JavaScript. Mieux, il exploite la syntaxe CSS pour utiliser les slecteurs dans les documents comme points dattache pour ses oprations interactives. Examinons un exemple dun autre site que jai programm afin de comprendre les composants de jQuery. Il sagit dun site fictif cr des fins ducatives quon peut consulter ladresse http://cameronmoll.com/articles/widget/.
Figure10.15
Le site de dmonstration Widget cr pour une srie darticles rdigs sur lextensibilit de linterface CSS.

Nous allons utiliser le bouton Dismiss situ dans la barre de notification jaune en haut de la page (voir Figure10.15). Lorsquon clique dessus, la barre jaune disparat lentement en glissant vers le haut. Voici le code ajout la balise dancre du bouton:
$(#alert).slideUp(slow);

tude de cas: Roma Italia

Voici une description de chaque composant:

249

$(). Cette construction (ou fonction) jQuery de base est utilise pour slectionner des parties du document. Dans cet exemple, nous slectionnons un lment dont lID est alert. .slideUp. Lune des nombreuses mthodes jQuery, qui sont, en ralit, des raccourcis de longs blocs de code JavaScript. La mthode slideUp fait glisser llment que nous ciblons (#alert) vers le haut. (slow). Cette chane prdfinie dtermine le fonctionnement de la mthode. Ici, elle indique que llment doit glisser lentement. Ce code peut tre ajout directement dans le code ou dans un fichier .js spar (ou incorpor de manire dynamique). La seconde mthode est prfrable. Mais attendez la suite: je nai pas eu programmer le moindre code de mon ct. La construction, la mthode et la chane taient toutes prdfinies dans jQuery! Il me suffisait de savoir que llment devait glisser lentement vers le haut. Jai ensuite retrouv les rfrences appropries dans la bibliothque jQuery qui correspondaient lanimation et au mouvement que je recherchais. Point final.

Utilisation dAjax et de jQuery pour la fonctionnalit derecherche

Maintenant que nous nous sommes occups du mnage au niveau des instructions, considrons un exemple dAjax et de jQuery combins dans le site Roma Italia. La fonctionnalit que nous allons explorer concerne le champ de recherche. Nous avons prcdemment vu comment le slecteur dattribut pouvait tre utilis pour cibler des lments spcifiques enclos dans le formulaire pour le champ de recherche. prsent, nous allons examiner les autres composants en action. Le code de la fonctionnalit de recherche est, en fait, lun des plus complexes du site. Lorsque lutilisateur tape une requte de mot-cl, licne de la loupe est remplace par une icne de chargement et les rsultats correspondants sont affichs. On appelle parfois cette fonctionnalit suggestions automatiques (ou autocompltion). Ajax et jQuery uvrent darrache-pied larrire-plan pour articuler ce mcanisme. Malgr sa complexit, lassemblage des composants est plus simple quil ny parat. Tout dabord, voici le code HTML:
<form action="#" method="get" accept-charset="utf-8"> <eldset> <legend></legend> <label for="search-input">Search</label> <input type="text" id="search-input" name="search" value="" title="Search"> <input type="image" name="" src="img/search-go.gif"> </eldset> </form>

250

Matrise des CSS

Pour remplacer licne par licne de chargement, la manire la plus lgre (que je nai pourtant pas encore vue sur dautres sites) consiste combiner limage darrire-plan pour le champ de saisie et licne de chargement dans une unique image GIF anime (voir Figure10.16). Le code CSS est ensuite utilis pour positionner limage en fonction de ltat de linteraction, en la dcalant vers le haut ou vers le bas quand lutilisateur tape dans le champ, afin de permuter entre licne de la loupe et licne de chargement.
Figure10.16
search-bg.gif, un unique GIF anim qui inclut deux tats.

Voici le fichier CSS pour le champ de saisie:

#header form input[type="text"] { ... padding: 6px 0 0 28px; height: 20px; background: url(../img/search-bg.gif) no-repeat; }

Par dfaut, limage darrire-plan est positionne en haut gauche et nous restreignons la hauteur 20pixels. Ajoutez-y 6pixels de remplissage suprieur et cela donne 26pixels de limage qui saffichent soit exactement la moiti de la hauteur de limage. Seule la portion correspondant la loupe apparat. Lorsque lutilisateur commence taper, plusieurs choses se passent. Tout dabord, chaque fois quil tape un caractre, quatre fichiers sont concerns: autocomplete.css, jquery.plugins.js, jquery.autocomplete.js et search.php. Lorsque la saisie commence, class="ac_ loading" est ajout dynamiquement au champ de saisie puis supprim lorsque la recherche automatique affiche les rsultats. Ce slecteur se trouve dans autocomplete.css, o il reoit le style suivant:
.ac_loading { background: url(../img/search-bg.gif) no-repeat 0 -26px!important; }

Vous remarquerez que limage darrire-plan est maintenant positionne 26 pixels du haut, ce qui la dcale vers le haut et rvle sa seconde moiti (licne de chargement). Nous indiquons ainsi lutilisateur que des donnes sont rcupres de manire asynchrone auprs du serveur (search.php). Ensuite, pendant que licne de chargement tournoie, des donnes sont changes avec search.php afin que soient localiss les rsultats correspondant aux caractres que lutilisateur a taps. Si vous ouvrez search.php, vous trouverez certains des termes avec lesquels jai rempli le fichier: Ancient Ostia, Ancient Rome, Arch of Constantine,etc. Les rsultats correspondants sont renvoys la page et un petit menu de slection est affich sous le champ de saisie avec la liste des rsultats (voir Figure10.17). Ce menu, qui nest

tude de cas: Roma Italia

251

quune simple liste puces (ul), est gnr par une combinaison de jquery.autocomplete.js et jquery.plugins.js et mis en forme par autocomplete.css. Lutilisateur peut ensuite slectionner une correspondance avec la souris ou le clavier ou continuer taper et appuyer sur la touche Entre. Linteraction sarrte l.
Figure10.17
La fonctionnalit de recherche complte en action.

jquery.autocomplete.js inclut plusieurs centaines de lignes de code, mais voil toute la beaut de jQuery: je nen ai pas crit une seule. Il sagit dun plug-in jQuery conu par la communaut. Or, il en existe bien dautres du mme genre. En fait, lessentiel des exemples de code jQuery de cette tude de cas provient de plug-ins. Le plug-in de saisie semi-automatique, jQuery Autocomplete, peut tre trouv ladresse http://bassistance.de/jquery-plugins/ jquery-plugin-autocomplete/. Pour obtenir dautres ressources et des didacticiels, consultez les sites web suivants: http://bulletproofajax.com/: Bulletproof Ajax par Jeremy Keith. http://ajaxian.com/: Ajaxian.com. http://dhtmlsite.com/ajax.php: DHTML site, didacticiels Ajax (en anglais) et scripts. http://jquery.com/: site officiel jQuery. http://www.digital-web.com/articles/jquery_crash_course/: cours intensif en jQuery du magazine Digital Web. http://simonwillison.net/2007/Aug/15/jquery/ : jQuery pour les programmeurs Java Script par Simon Willison. http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ : didactiel jQuery pour les concepteurs de Web Designer Wall. http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html : plus de cinquante didacticiels jQuery. http://www.sastgroup.com/jquery/240-plugins-jquery : deux cent quarante plug-ins pour jQuery.

En rsum
Vous avez maintenant abord de nombreuses techniques utilises pour programmer le site Roma Italia. Il y en a bien dautres; ouvrez le capot, plongez dans le code et vous dnicherez sans doute encore quelques perles. Notez que les tailles de fichier pour ce site sont assez importantes, entre autres en ce qui concerne les scripts et les images. Si le site tait un vritable site dploy, nous utiliserions

252

Matrise des CSS

Ajax pour charger les images individuellement et nous rduirions les scripts autant que possible. Par exemple, jquery-1.3.2.js fait environ 120KB, mais minimis et zipp avec gzip, il ne fait plus que 19Ko (cette version compresse est disponible en tlchargement sur le site jquery.com). Ces techniques doptimisation rduiraient considrablement la taille globale de la page. Tout lintrt des techniques illustres dans cette tude de cas rside cependant certainement dans le balisage HTML brut sous-jacent qui est aussi robuste que la maquette est esthtique. Si tous les styles devaient tre dsactivs, les utilisateurs nauraient aucune difficult lire le contenu du site et le parcourir. Si ce nest pas en soi un ravissement pour lil, le balisage signifiant et lger est une vritable confiserie pour les lecteurs dcran, les robots des moteurs de recherche et autres outils de ce genre. Cest en quelque sorte le beurre et largent du beurre: une esthtique soigne et un code source lgant.

11

tude de cas: ClimbtheMountains

Par Simon Collison Dans la prcdente dition de Matrise des CSS, jai prsent mon tude de cas "More Than Doodles" en parlant de la "palette trs riche" laide de laquelle les concepteurs web pouvaient peindre. cette poque, nous atteignions une phase critique o les standards du Web avaient opr une avance significative dans le secteur. Ctait excitant et nous nous amusions beaucoup avec les CSS 2.1, en crant dincroyables mises en page malgr les problmes que nous posaient certains parmi les anciens navigateurs. Plus de trois ans aprs, nous voil dj srieusement engags implmenter des techniques de la spcification CSS3. Nous pouvons remplacer des images darrire-plan dcoratives par des combinaisons de rgles CSS 3 comme border-radius et box-shadow et nous sommes capables de mieux contrler la transparence des calques sans avoir recours des images darrire-plan semi-transparentes grce la proprit RGBa. Plus important encore, malgr ces amliorations progressives, il est possible de proposer un affichage trs soign aux navigateurs qui ne prennent pas en charge les CSS3 et leurs outils et techniques. Dans cette tude de cas, vous en apprendrez plus sur: les conventions et lorganisation du HTML et des CSS; la flexibilit de la grille; la mise en valeur de la page actuelle en fonction de la classe de llment body; le ciblage des lments avec des pseudo-classes et des slecteurs de frres adjacents; la combinaison de classes pour plus defficacit et de flexibilit; les proprits RGBa, border-radius et box-shadow; le positionnement des lments de liste et laffichage de leur contenu.

propos de cette tude de cas

Cette tude de cas est btie sur une structure XHTML en bton aussi pure, organise et puissante que possible. En particulier, le code XHTML ne contient aucune balise superflue qui aurait t ajoute dans le simple but de pouvoir donner prise aux mcanismes de mise en forme CSS. Tout ce qui se trouve dans le code y est ncessaire et rien dautre ny figure. Le but de ce chapitre est donc de partir de ce quon a et dutiliser des slecteurs CSS vritablement astucieux pour cibler des lments XHTML spcifiques sans devoir ajouter de div supplmentaires, de div de dgagement ou quoi que ce soit dautre qui naurait pas sa propre raison dtre. Le site Climb the Mountains (grimper les montagnes), auquel nous ferons rfrence laide de lacronyme CTM, est une application web fictive ddie aux randonneurs, passionns descalade et autres fondus de la montagne qui ne pensent qu quitter le nid douillet de leur paisible maison pour passer des heures, des jours ou mme des semaines

254

Matrise des CSS

errer dans une nature sauvage, hostile et escarpe. CTM est un site web social principalement orient sur la communaut et les possibilits de mise en relation de ses membres (voir Figure 11.1). Lune de ses fonctionnalits-cls permet de charger sur le serveur les itinraires GPS des membres ou de les exporter sur leurs priphriques GPS; ces donnes ajoutent des statistiques dtailles concernant chaque itinraire archiv. Par ailleurs, chaque itinraire inclut des photographies, des cartes, des tlchargements et dautres informations associes. Larchitecture de linformation (AI) est empaquete avec les donnes.

Figure11.1
La page daccueil du site Climb the Mountains.

tude de cas: ClimbtheMountains

255

Nos super CSS vont permettre de donner vie tout cela et de sassurer que toutes ces donnes et images restent parfaitement immacules avec une mise en page trs flexible. La maquette se dcompose en blocs dinformations, afin que nous puissions facilement nous focaliser sur la zone dont nous traitons, plutt que de bricoler avec des calques de mise en forme excessivement dcoratifs. En analysant certaines de ces excellentes techniques, vous verrez sans doute comment elles peuvent tre adaptes et appliques vos propres maquettes, avec dautres fonctionnalits de ce livre. Mes remerciements vont mon collgue Greg Wood pour son aide considrable avec le concept du site. Toutes les photographies proviennent de mon compte Flickr. La plupart ont t prises dans la rgion de Lake District en Angleterre, au dbut de cette anne. Les polices utilises incluent quelques versions de la famille Palatino et des modles plus courants dont Helvetica, Georgia et notre bonne vieille Verdana, avec des renvois par dfaut Arial ou Times New Roman. Ltude de cas est accessible en ligne ladresse http://www.climbthemountains.com/ cssm/.

Organisation et conventions de la feuille de styles

Sans que la question se pose et sans envisager le moindre compromis, je considre que chaque site web dont je moccupe doit tre bti sur de solides fondations. Cest un principe. Au cours des deux dernires annes, jai travaill avec mes collgues au dveloppement dune srie de rgles de base et de conventions qui doivent tre un point de dpart pour le HTML, les CSS, le JavaScript et ExpressionEngine. Cest une petite mallette de choc, remplie de fichiers CSS connects, de conventions de noms, de modules, de plug-ins et de bibliothques de scripts qui garantissent que chaque projet sur lequel travaillent les membres de mon quipe suivra ces conventions et sera facilement comprhensible par quiconque viendra se joindre laction (voir Figure11.2). En constante volution, ce paquetage est lun des plus prcieux outils de notre arsenal.
Figure11.2
Un ensemble classique de feuilles de styles de notre paquetage de fichiers de base.

Pour les CSS, nous disposons de feuilles de styles qui se combinent pour offrir une grande flexibilit dans le traitement des irrgularits des navigateurs et pour permettre aux membres

256

Matrise des CSS

de lquipe dapporter leur contribution avec leurs propres fichiers de dpart. Avec ces fichiers, les dveloppeurs peuvent ajouter leurs propres rgles CSS qui saffichent dans le navigateur en raison de leur place dans la cascade. Si le directeur de projet est daccord avec ces CSS, elles sont rcupres dans le fichier de dpart et ajoutes la feuille de styles principale approprie, la place de toutes les dclarations similaires existantes. Nous proposons aussi des feuilles de styles de base pour limpression et les priphriques mobiles, ainsi quune feuille de styles spare pour la mise en forme des formulaires. Cest notre faon de travailler.

La laborieuse feuille screen.css

La feuille de styles screen.css contient toutes les dclarations requises pour ltude de cas CTM si vous travaillez dans un navigateur Mac ou dans Internet Explorer8 ou Firefox sur PC, ct de la feuille de styles reset.css. Si vous travaillez avec Internet Explorer6 ou7, vous aurez aussi besoin des feuilles de styles spcifiques dInternet Explorer dcrites plus loin. Le fichier screen.css est li de la manire suivante:
<link href="assets/css/screen.css" type="text/css" rel="stylesheet" media="screen" />

Un grand nombre des mthodes utilises dans notre feuille de styles screen.css vous seront familires, mais examinons rapidement deux des outils que je considre essentiels. Description du contenu On a tt fait dignorer cet outil ou de le ngliger en considrant quil nest pas ncessaire. Les CSS, pense-t-on, fonctionneront trs bien sans ces notes descriptives. Repensez-y deux fois. Que se passe-t-il si vous crez un site web au sein dune quipe de plusieurs programmeurs? Que se passe-t-il si vos feuilles de styles atteignent souvent des tailles considrables? Comment sassurer que dautres personnes pourront facilement travailler avec vos maquettes et comment sassurer que tout est bien organis? Cest ce titre que les notes de feuilles de styles notamment, la prsentation du contenu peuvent tre extrmement prcieuses. Rappelez-vous quil est possible dajouter des notes nimporte o dans les feuilles de styles en les intgrant avec la syntaxe suivante:
/* Voici une note simple */

Vous pouvez donc travailler ainsi pour fournir un tableau jour du contenu de la feuille de styles. Cette rfrence permet aux autres concepteurs et dveloppeurs de lquipe de vrifier rapidement sils consultent la bonne feuille de styles et si les rgles quils cherchent sy trouvent.
/* CLIMB THE MOUNTAINS par SIMON COLLISON VERSION 1.0

tude de cas: ClimbtheMountains

CONTENU ---------1. 2. 3. 4. 5. 6. 7. 8. 9. 10. BODY STYLES PAR DFAUT TITRES LIENS IMAGES MISE EN PAGE LOGO/EN-TTE NAVIGATION INFO SITE/PIED DE PAGE LMENTS GLOBAUX 10.1 IMAGE LGENDE 10.2 LVATION 10.3 DISTANCE/LVATION PARAGRAPHE 11. PAGE DACCUEIL 11.1 CONTENU PRINCIPAL 11.2 CONTENU SECONDAIRE 11.3 CONTENU TERTIAIRE

257

*/

La prsentation exacte de ces notes dpend de la personne ou de lquipe qui sen charge. Dans lexemple prcdent, jai utilis une structure compose de retours chariot et de tabulations pour crer une table des matires trs lisible. Limportant est de mettre jour le contenu et dy revenir chaque fois que vous ajoutez des rgles la feuille de styles, que vous en supprimez ou que vous en dplacez.

Rinitialisation
Le but, avec une feuille de styles reset.css, est de constituer une table nette pour tous les navigateurs et priphriques. Par exemple, certains navigateurs ont une feuille de styles par dfaut qui dfinit des valeurs de marges, de remplissage, de tailles de police pour les titres, de hauteur de ligne, etc., diffremment des autres navigateurs. Nous insrons la feuille reset.css dans la cascade avec la ligne suivante dans screen.css:
@import url(reset.css); /* CSS DE REINITIALISATION */

On peut ainsi continuer en sachant que lon a affaire des lments XHTML qui nont pas de marge, pas de remplissage, pas de hauteur de ligne, pas de taille de police, etc. Il est ainsi possible de travailler en confiance dans screen.css, en appliquant les valeurs souhaites sans se soucier du risque dhriter de valeurs provenant de la feuille de styles du navigateur. Le matre en CSS Eric Meyer propose ce quil appelle un "point de dpart, et non une bote noire autonome laquelle on ne touche pas" ladresse http://meyerweb.com/eric/tools/ css/reset/. Cette feuille a t mon point de dpart pour le site CTM, avec quelques ajustements et ajouts mineurs.

258

Matrise des CSS

Feuilles de styles Internet Explorer utilisant descommentairesconditionnels

Cette mthode qui permet de cibler les versions de navigateur propres Microsoft a t introduite au dpart avec Internet Explorer 5 et ses versions point. En utilisant le balisage XHTML envelopp dans une instruction conditionnelle lintrieur dun commentaire XHTML, vous pouvez utiliser cette combinaison syntaxique spciale nimporte o dans un document XHTML et vous en servir pour transmettre des informations bien prcises des navigateurs cibls.
<!--[if IE 6]> Tout ce qui vient ici nest vu que par IE6 <![endif]-->

Dans lexemple suivant, nous utilisons donc cette combinaison de syntaxe pour appeler trois feuilles de styles supplmentaires si lutilisateur observe le site avec Internet Explorer6,7 ou8.
<!--[if IE 6]><link href="assets/css/screen-ie6.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--> <!--[if IE 7]><link href="assets/css/screen-ie7.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--> <!--[if IE 8]><link href="assets/css/screen-ie8.css" type="text/css" rel="stylesheet" media="screen" /><![endif]-->

Lintrt de cette approche tient ce que lon peut viter dajouter des hacks caractristiques dInternet Explorer aux rgles CSS existantes dans screen.css (qui seront appliques par tous les autres navigateurs) et crer la place des rgles propres au navigateur dans les feuilles de styles Internet Explorer. Cest ce que nous faisons pour la maquette du site CTM, car nous appelons certains ajouts spcifiques dInternet Explorer dans les CSS, comme nous allons le voir un peu plus loin.

Flexibilit de la grille
Une grille agit la manire dune fondation solide pour nimporte quelle page dans nimporte quel site web. Le fait dy recourir doit vous librer et non vous restreindre. Nayez jamais peur de sortir des lignes et de risquer quelques essais. La grille est un rappel, un guide en quelque sorte, une prsence qui rassure. En gnral, de largeur prdtermine et dote dun nombre de colonnes et de gouttires optionnelles, la grille est un appui, un guide tranquillisant. Elle a une fonction intermdiaire entre Photoshop et les CSS. Elle livre les informations concernant vos choix de mise en page initiaux pour ce qui concerne les lments flottants, le positionnement, les marges, le remplissage, les bordures,etc. Comme bien dautres concepteurs, quand je ralise mes prototypes dans Photoshop, sous Fireworks ou dans le navigateur lui-mme, je travaille avec un calque de grille que jactive et dsactive volont (voir Figure11.3).

tude de cas: ClimbtheMountains

Figure11.3
Le site Climb the Mountains avec sa grille de colonne sousjacente.

259

Fonctionnement de la mise en page du site CTM

Le site CTM utilise une mise en page construite partir dune grille robuste mais flexible de 1000pixels de large. Dans ce canevas figurent douze colonnes, chacune pourvue dune gouttire bien marque. Chaque colonne fait 65pixels de large et chaque gouttire en fait25 (voir Figure11.4).
Figure11.4
Disposition des colonnes.

Chaque colonne possde galement sa propre structure: elle est scinde en trois sous-colonnes ou largeurs (de gauche droite) de 25pixels, 15pixels et 25pixels (voir Figure11.5).
Figure11.5
Largeurs des souscolonnes internes.

260

Matrise des CSS

Ces sous-colonnes permettent en quelque sorte de travailler avec une grille lintrieur de la grille. Elles offrent des points de rfrence supplmentaires, des units de mesure ou des repres qui peuvent tre utiliss quand les deux colonnes ne sont pas assez prcises pour le positionnement de certains lments. Observez lexemple de la Figure11.4 et voyez comment les lments sont aligns sur les principales colonnes et parfois sur les sous-colonnes.

Contrle de la navigation avec les classes de llment body

La valeur attribue llment body peut tre utilise pour changer la mise en page, le comportement du contrle et dautres choses importantes en CSS. Dans la premire dition de ce livre, jai utilis une technique avec des ID pour llment body de chaque page afin de contrler la mise en page, en combinant cela avec une classe pour lemplacement, comme <body id="threeColLayout" class="home">. Cette fois, je nutilise que la classe.
<body class="home">

Peu importe que vous utilisiez un ID ou une classe cette occasion; la technique est tout aussi efficace dans les deux cas.

Mise en valeur de la page courante

Il existe plusieurs moyens de mettre en valeur la page sur laquelle vous vous trouvez. De nombreux concepteurs utilisent dastucieux mcanismes PHP pour dclencher les CSS, par exemple en passant en surbrillance le lien Accueil de la barre de navigation principale quand on se trouve sur la page daccueil. Cest trs intressant, mais il est tout aussi facile de procder en appliquant intelligemment des CSS, en couplant la classe body et une classe de navigation. Voyons comment cela fonctionne.
<body class="home">

La page est identifie comme la page daccueil et nous allons maintenant nous assurer que chaque lment de navigation possde une classe approprie:
<ul id="navigation_pri"> <li class="nav_home"><a href="#">Home</a></li> <li class="nav_routes"><a href="#">Routes</a></li> <li class="nav_about"><a href="#">About</a></li> <li class="nav_shop"><a href="#">Shop</a></li> </ul>

Dans ce fragment de code, vous remarquerez que le lien Home possde la classe nav_home. Nous avons galement ajout une classe llment body de la page Routes, afin de pouvoir tester ce comportement par la suite:
<body class="routes">

tude de cas: ClimbtheMountains

261

Ensuite, nous utilisons les CSS pour appliquer la mise en forme la liste de navigation. Vous remarquerez que llment est positionn de manire absolue, un endroit prcis dfini par rapport au haut et la gauche du conteneur principal.
ul#navigation_pri { list-style:none; margin:0; position:absolute; top:0; left:415px; font-size:19px; font-weight:bold; font-family:Helvetica,Arial,sans-serif; } ul#navigation_pri li { oat:left; margin:0; padding:30px 10px 0 10px; height:3000px; } ul#navigation_pri li a { color:#000; } ul#navigation_pri li a:hover, ul#navigation_pri li a:focus { color:#333; text-decoration:underline; }

Notre systme de navigation de base est maintenant mis en forme (voir Figure11.6), mais sans indication concernant la page actuellement affiche (nous reviendrons sur llment blockquote qui se trouve sur le calque de navigation plus loin dans cette section).
Figure11.6
Navigation principale de base.

Ltape suivante consiste utiliser un slecteur pour dfinir la relation entre la classe de llment body et la classe home de navigation. Vous remarquerez que nous avons group deux rgles identiques pour la page daccueil et la page Routes:
.home ul#navigation_pri li.nav_home, .routes ul#navigation_pri li.nav_routes { background-color:#f5f5f5; }

262

Matrise des CSS

La premire partie du slecteur .home ou .routes vrifie que nous sommes sur cette page. La mise en forme nest applique que si llment ul#navigation_pri est un enfant de .home ou de .routes. Si une correspondance est trouve, laction est ralise. Ce style cre larrire-plan gris clair qui remplit toute la zone de longlet dans la barre de navigation. Ensuite, on peut dfinir des styles pour le comportement du lien, nouveau en regroupant les rgles identiques pour .home et .routes:
.home ul#navigation_pri li.nav_home a, .routes ul#navigation_pri li.nav_routes a { color:#278dab; background:#f5f5f5 0 center no-repeat; padding:0 0 0 20px; } .home ul#navigation_pri li.nav_home a:hover, .home ul#navigation_pri li.nav_home a:focus, .routes ul#navigation_pri li.nav_routes a:hover, .routes ul#navigation_pri li.nav_routes a:focus { text-decoration:none; color:#000; }

Nous obtenons ainsi les liens texte bleus dont nous avons besoin. Pour finir, on peut ajouter une dcoration au lien de la page daccueil uniquement. Lorsque la page daccueil est affiche, nous affichons une petite icne de maison gauche du lien Home:
.home ul#navigation_pri li.nav_home a { background-image:url(../images/site/nav_back.gif); }

La Figure11.7 montre le rsultat quand on affiche la page daccueil.

Figure11.7
Le lien Home slectionn.

La Figure11.8 prsente la page Routes.

Figure11.8
Le lien Routes slectionn.

tude de cas: ClimbtheMountains

263

Mise en forme de la citation

Revenons maintenant cette citation de John Muir qui se trouve sur le calque de navigation principal. Jaime cette citation; elle mincite sortir par tous les temps. Noublions jamais quil faut aller dehors et voir le monde tel quil est! Sur le site CTM, il serait possible de proposer des citations bien choisies et de les faire tourner dans cette partie de la page, pour stimuler les visiteurs. Voici le code:
<blockquote id="johnmuir"> <p>&ldquo;Climb the mountains and get their good tidings. Natures peace will ow into you as sunshine ows into trees. The winds will blow their own freshness into you, and the storms their energy, while cares will drop away from you like the leaves of Autumn.&rdquo;</p> <p><cite>John Muir, 1903</cite></p> </blockquote>

Hormis lemploi des entits de caractres spcifiques pour les guillemets, il ny a l rien de bien inhabituel. Passons donc la mise en forme. Auparavant, nous avons positionn llment ul#navigation_pri de manire absolue avec position:absolute, 0pixel du haut et 415pixels de la gauche.
ul#navigation_pri { list-style:none; margin:0; position:absolute; top:0; left:415px; font-size:19px; font-weight:bold; font-family:Helvetica,Arial,sans-serif; }

On peut maintenant dfinir la mise en forme pour le bloc de citation:

div#branding blockquote { width:505px; oat:right; padding:0 70px 20px 0; background:url(../images/site/branding_johnmuir.jpg) no-repeat right top; }

Le bloc figure cependant sous la zone donglet de navigation (voir Figure11.9). Comme le systme de navigation est positionn de manire absolue, on peut ajouter position:relative llment blockquote et le faire remonter au-dessus de la zone de longlet:
div#branding blockquote { position:relative; width:505px; oat:right; padding:0 70px 20px 0; background:url(../images/site/branding_johnmuir.jpg) no-repeat right top; }

264

Matrise des CSS

Figure11.9
Le bloc de citation est partiellement masqu par le lien Home.

prsent, llment blockquote se trouve au-dessus de la barre de navigation principale, comme le montraient les prcdents exemples (voir Figure11.7).

Ciblage stratgique des lments

Nous avons vu prcdemment combien il tait efficace dutiliser des slecteurs descendants pour contrler la mise en forme de la navigation principale en fonction de la classe de llment body de chaque page. Ici, nous allons voir encore comment des choix rflchis au niveau du code HTML peuvent offrir une grande flexibilit de contrle avec des slecteurs descendants et comment ce systme forme la base dun contrle plus avanc grce au ciblage des lments.

Slecteurs descendants profonds

Pour commencer, disposons les fondations. Du ct droit du site figure le panneau jaune clair Members Routes (itinraires des membres), qui prsente les randonnes transmises par dautres utilisateurs du site. Il ny a rien de particulirement remarquable dans le code, mais examinons-le pour mieux comprendre les prouesses que nous allons raliser laide de slecteurs plus loin. Vous remarquerez que plusieurs lments, comme h3, p et img, sont regroups dans chaque lment de liste puces. Jai souvent t surpris de voir que des dveloppeurs ne savaient pas quil tait possible dajouter toutes sortes dlments intressants dans llment li. Le plus souvent, vous ne dcouvrirez que des lments a et parfois img, mais en ralit, on peut faire bien plus.
<div id="others_routes"> <h2>Members routes <a href="#" class="more">(view all)</a></h2> <ul> <li> <h3><a href="#">Kinderscout circuit</a></h3> <p class="dist_elev">13.6 miles | Elevation 2,400ft</p> <p class="username"><a href="#">from Glen Swineld <img src="assets/ images/content/avatar_swineld.jpg" class="avatar" alt="Glen Swinelds avatar" /></a></p> </li> <li> <h3><a href="#">Castleton Ridge Walk</a></h3> <p class="dist_elev">12.2 miles | elevation 1,343ft</p> <p class="username"><a href="#">from Phil Swan <img src="assets/ images/content/avatar_swan.jpg" class="avatar" alt="Phil Swans avatar" /></a></p>

tude de cas: ClimbtheMountains

265

</li> <li> <h3><a href="#">Branston Circular</a></h3> <p class="dist_elev">5.7 miles | elevation 1,213ft</p> <p class="username"><a href="#">from Gregory Wood <img src="assets/ images/content/avatar_wood.jpg" class="avatar" alt="Gregory Woods avatar" /></a></p> </li> <li> <h3><a href="#">Ilkley Moor and Otley</a></h3> <p class="dist_elev">24.7 miles | elevation 2,473ft</p> <p class="username"><a href="#">from Jamie Pittock <img src="assets/ images/content/avatar_pittock.jpg" class="avatar" alt="Jamie Pittocks avatar" /></a></p> </li> </ul> </div>

En construisant le contenu de cette manire, on peut collationner les blocs dinformation sous forme de listes en profitant de tous les mcanismes de hirarchisation et de mise en forme qui font lintrt des listes. Il est ensuite trs facile dutiliser des slecteurs simples pour cibler la liste puces dans la div conteneur others_routes et les diffrents lments dans les lments li. Notez que nous utilisons des rgles border-radius, webkit-border-radius et moz-border-radius pour appliquer des bords arrondis llment ul. Nous y reviendrons un peu plus loin.
div#others_routes ul { list-style:none; border:1px solid #dedeaf; background:#ffffcc; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; margin:0; padding:10px; } div#others_routes ul li { margin:0; padding:10px 55px 10px 0; position:relative; border-bottom:1px solid #dedeaf; border-top:1px solid #fff; } div#others_routes ul li h3 { margin-bottom:5px; } div#others_routes ul li img { position:absolute; top:10px; right:10px; }

266

Matrise des CSS

div#others_routes ul li p.username margin:3px 0 0 0; font-style:italic; font-size:12px; } div#others_routes ul li p.username color:#666; } div#others_routes ul li p.username div#others_routes ul li p.username text-decoration:underline; } {

a {

a:hover, a:focus {

Dans ce code, nous ciblons les lments HTML plus profonds avec des slecteurs descendants simples. Par exemple, on peut cibler de manire stratgique la mise en forme de survol du lien de nom dutilisateur avec div#others_routes ul li p.username a:hover, en descendant de plus en plus profondment avec le slecteur, jusqu atteindre llment cible un lment que possde chaque lment antrieur du slecteur. Le rsultat est prsent la Figure11.10.
Figure11.10
Le conteneur initial Members Routes.

Parfait. La liste de randonnes et ditinraires transmis par les membres prend agrablement forme et nombreux sont ceux qui sen tiendraient l. Tout a lair bien soign. Ah, mais attendez! Nous sommes perfectionnistes et nous disposons de puissants styles CSS. Pourquoi sen tenir au bon quand on peut atteindre lexcellent? Dans les deux exemples suivants, nous allons peaufiner le haut et le bas du conteneur des itinraires grce dintressantes astuces CSS.

La pseudo-classe :first-child
Sil vous est dj arriv de vous demander comment cibler la premire lettre ou la premire ligne dun bloc de texte, sachez quil suffit dutiliser une pseudo-classe comme :rst-letter ou :rst-line. Ces astuces passionnantes permettent de mettre en forme des lments en fonction dune logique simple. La pseudo-classe :rst-child ne cible quun lment qui est lui-mme le premier enfant dun lment conteneur.

tude de cas: ClimbtheMountains

267

Dans le conteneur des itinraires des membres, les informations de dtail de chaque lment sont ajoutes sur une liste puces. Chacun des lments li possde le mme remplissage et une fine bordure suprieure et infrieure.
div#others_routes ul li { margin:0; padding:10px 55px 10px 0; position:relative; border-bottom:1px solid #dedeaf; border-top:1px solid #fff; }

Le contenu de la liste est ainsi espac de manire rgulire, mais jaimerais rduire la quantit de remplissage uniquement pour llment du haut de la liste (dans cet exemple, il sagit du circuit de randonne Kinderscout). Je ne veux dailleurs pas du tout de remplissage en haut, et pas de bordure non plus. Pseudo-classe, la rescousse! Ici, je cre une nouvelle rgle et jutilise le mme slecteur pour cibler les lments de la liste puces lintrieur de la div conteneur #others_routes, mais en ajoutant :rst-child juste aprs llment li, afin de transmettre en somme ce message au navigateur: "Entrez dans le conteneur, trouvez la liste puces et appliquez la mise en forme suivante en ne redfinissant que le tout premier lment trouv."
div#others_routes ul li:rst-child { padding-top:0; border-top:none; }

Comme le montre la Figure11.11, llment du circuit de Kinderscout na plus de bordure ni de remplissage suprieurs et se cale maintenant bien serr sur la partie suprieure du conteneur parent.
Figure11.11
Le remplissage et la bordure du haut ont t supprims.

Cette technique est un jeu denfant, mais elle constitue une mthode trs efficace pour cibler un lment particulier, mille et une fins possibles. Maintenant que nous avons trait le haut de la liste, voyons ce quon peut faire avec le bas.

268

Matrise des CSS

Slecteurs de frres adjacents

Aprs avoir vu :rst-child, le moment est tout trouv pour vous de dcouvrir :lastchild, qui permet de cibler la dernire occurrence dun lment enfant dans un conteneur parent spcifique. Le principe est le mme que pour :rst-child, aussi nhsitez pas faire des essais. Malheureusement, seules les dernires versions des navigateurs comme Safari, Firefox, Google Chrome et Opera prennent en charge cette mthode. Il convient donc de tenir compte dInternet Explorer6, 7 et8 en employant une mthode alternative, grce aux slecteurs de frres adjacents. Dans cet exemple, nous devons maintenant raliser linverse de ce que nous venons de faire avec la pseudo-classe :rst-child. Comme indiqu prcdemment, chaque lment de liste puces possde un remplissage suprieur et infrieur ainsi quune bordure suprieure et infrieure. Nous avons pu annuler ces styles pour le premier lment li, nous devons maintenant le faire pour le dernier lment. Comment procder? Comment la feuille de styles va-t-elle savoir quel est le dernier lment dun certain groupe et comment le cibler prcisment? Les slecteurs de frres adjacents sont constitus de plusieurs slecteurs spars par le combinateur +. Ce symbole reprsente un lment qui est le prochain frre du premier lment. Notez que les lments doivent avoir le mme parent et que le premier doit immdiatement prcder le second. Comme pour :rst-child, nous ciblons encore la div parente others_routes et nous descendons mthodiquement vers les profondeurs laide des slecteurs, jusqu atteindre llment que nous souhaitons mettre en forme. La liste puces aura toujours quatre lments li. Cest ici la cl de notre mthode:
div#others_routes ul li + li + li + li { padding-bottom:0; border-bottom:none; }

Nous avons cr un slecteur dont la signification pourrait se traduire ainsi: "Ah, lorsque vous tes dans la div others_routes, trouvez la liste puces, comptez jusquau quatrime lment li et appliquez les styles cet lment uniquement." Simple. Le rsultat (voir Figure11.12) prsente le quatrime lment li sans remplissage infrieur ou bordure infrieure. Le rsultat est plus soign. Il tmoigne dune grande attention porte aux dtails, grce simplement aux slecteurs CSS disposition.
Figure11.12
La bordure et le remplissage infrieurs ont t retirs avec succs.

tude de cas: ClimbtheMountains

269

Transparence, ombres et bords arrondis

Ltude de cas que jai propose dans la premire dition de ce livre sappuyait fortement sur des botes bords arrondis. Tout le monde cherche, un moment ou un autre, crer des bords arrondis par souci esthtique et pour changer des ennuyeux coins carrs. Parmi les nombreuses mthodes permettant de crer des bords arrondis, jen avais choisi une qui utilisait une quantit non ngligeable de code JavaScript, plusieurs sprites dimage darrire-plan et quelques pinces de code HTML superflu. Ctait lourd, maladroit, peu commode et il ny avait pas vraiment dalternative. Aujourdhui, tout a chang et je nai quune envie, cest de crier "CSS3!" aussi fort que je le peux. On a fait du chemin: les attentes se sont amplifies et les outils ont volu. videmment, les navigateurs nont pas tous suivi (quoi de neuf sous le soleil?), mais nous avons gagn en bravoure et sommes prts travailler avec de nouvelles ides et faire avancer les choses. cette section, je prendrai une simple image et une lgende de la page daccueil du site CTM pour raliser toutes sortes de merveilles en CSS3, sans utiliser ni JavaScript, ni autres images ou balisage superflu. Vive la rvolution!

Notre objectif
Nous allons commencer par une image JPEG de 310185pixels nomme campsite.jpg (voir Figure 11.13). Ensuite, nous appliquerons une lgende avec du texte blanc sur un calque semi-transparent gris en bas de limage, puis nous appliquerons une bordure photo de style Polarod autour de limage, en veillant y ajouter des bords arrondis et une ombre porte raliste. Et tout cela, grce aux CSS.
Figure11.13
Limage campsite.jpg initiale.

Le code HTML est trs simple. Limage et la lgende doivent tre contenues dans une div nomme captioned_image pour les besoins de cet exemple. Le paragraphe se voit attribuer la classe caption, afin quon puisse le cibler. Pour linstant, voil tout.
<div class="captioned_image"> <img src="assets/images/content/campsite.jpg" alt="From the campsite" /> <p class="caption">From the campsite bridge towards the village, Great Gable and Lingmell.</p> </div>

Une fois le code HTML en place, il est temps dexprimenter trois des techniques CSS3 les plus passionnantes qui existent.

270

Matrise des CSS

Bandeau translucide de lgende et transparence RGBa

Il existe plusieurs moyens de spcifier des couleurs. Le plus souvent, cela se fait laide dun triplet RVB au format hexadcimal. Dautres dveloppeurs utilisent les noms anglais des couleurs, dans certains cas. Il est galement possible dutiliser des pourcentages RVB ou des chiffres dcimaux. Tous les exemples suivants sont ainsi valides pour spcifier la couleur rouge:
color: color: color: color: color: #f00 #ff0000 red rgb(255,0,0) rgb(100%, 0%, 0%)

RGB est lacronyme de Red, Green, Blue (rouge, vert, bleu). Cest un mode colorimtrique bien connu des graphistes. RGBa introduit une quatrime couche, dite alpha, qui gre la transparence. La beaut des CSS 3 tient ce quil est possible de continuer spcifier les couleurs en RVB, mais galement de dfinir une transparence alpha de ces couleurs laide dune quatrime valeur dcimale. Toutes les valeurs comprises entre0.0 (transparence totale) et1.0 (opacit totale) sont autorises. Dans lexemple suivant, nous dclarons nouveau la couleur rouge en RVB, mais en fixant une transparence 50% avec la valeur0.5 pour la transparence alpha.
color: rgb(255,0,0,0.5)

La valeur RGBa nest attribue qu llment dclar: les lments enfants nhritent donc pas de la transparence. Elle se distingue ainsi de la proprit opacity, qui est toujours hrite. Pour le site CTM, les dclarations suivantes excutent les premires formules magiques pour la photo et la lgende. Nous positionnons la div conteneur de manire relative, puis la lgende de manire absolue, afin quelle puisse tre place exactement o nous le voulons au-dessus de limage.
div.captioned_image { position:relative; } div.captioned_image p.caption { position:absolute; bottom:0; left:0; margin:0; color:#fff; font-size:13px; line-height:16px; font-style:italic; padding:5px; }

Ensuite, nous dclarons la valeur RGBa avec la formule rgba(0,0,0,0.5), les trois premires valeurs combines produisant du noir et la valeur de transparence alpha de 0.5

tude de cas: ClimbtheMountains

271

produisant une semi-transparence, qui peut tre ajuste jusqu ce que leffet global soit pleinement satisfaisant.
div.captioned_image p.caption { position:absolute; bottom:0; left:0; margin:0; background:rgba(0,0,0,0.5); color:#fff; font-size:13px; line-height:16px; font-style:italic; padding:5px; }

On obtient ainsi le bandeau semi-transparent de lgende souhait (voir Figure11.14).

Figure11.14
La lgende transparente est mise en place.

Comme cest le cas avec de nouvelles possibilit CSS3, certains navigateurs restent la trane, et notamment Internet Explorer (dont la version 8 actuelle), qui ne reproduit pas latransparence alpha. Par exemple, Internet Explorer7 affiche par dfaut un calque gris uni peu prs acceptable, comme on en obtient en proposant une image PNG transparente sans forcer la prise en charge de la transparence alpha (voir Figure11.15).
Figure11.15
La lgende telle que laffiche Internet Explorer7.

Internet Explorer8, qui ne prend toujours pas en charge le mode RGBa, affiche simplement le texte de la lgende au-dessus de limage, sans arrire-plan. Pour contourner ce problme, on peut ajouter une rgle la feuille de styles screeni-ie8.css pour sassurer quun arrireplan gris est plac derrire le texte.
div.captioned_image p.caption { background:#666; }

272

Matrise des CSS

La leon retenir est de ne pas se dcourager cause dInternet Explorer et de ses dfaillances. Je vous encourage tous exprimenter lincroyable flexibilit de RGBa ds maintenant, sur une varit dlments dans vos maquettes. Vous nen dmordrez plus et toutes vos mises en page y gagneront!

Combinaison de classes
Je suis toujours bahi quand je parle des concepteurs qui ne savent pas que les classes peuvent tre combines pour un traitement plus flexible des lments. Vous pouvez ainsi utiliser class="prole" plusieurs fois dans une page donne, en attribuant des informations de couleur et de disposition courantes. Mais imaginons que vous souhaitiez ne modifier que la couleur darrire-plan en fonction dun unique critre, comme le fait que lutilisateur soit un membre ou un simple invit. Au lieu de crer deux styles de profil pour proposer ces rfrences de couleur distinctes, vous pouvez conserver simplement les couleurs dans des rgles spares et les combiner avec la classe prole.
.prole { width:300px; margin:0 10px; padding:10px; font-size:11px; } .guest { background-color:#ff9900; } .member { background-color:#ff0000; }

Ce style peut ensuite tre appliqu avec diffrentes combinaisons de classes selon le statut de lutilisateur. Vous pouvez combiner autant de classes que vous le souhaitez, en les sparant simplement par un espace, comme ceci:
<div class="prole member"> <p>Member options</p> </div>

Dans le site CTM, nous avons combin des classes pour ajouter un cadre autour de certaines images illustres. Vous remarquerez qu ct de la classe captioned_image nous avons ajout la classe polaroid:
<div class="captioned_image polaroid"> <img src="assets/images/content/campsite.jpg" alt="From the campsite" /> <p class="caption">From the campsite bridge towards the village, Great Gable and Lingmell.</p> </div>

Il est maintenant possible de dfinir la mise en forme pour ce cadre de Polarod. Celle-ci va faire appel quelques autres astuces de la spcification CSS3.

tude de cas: ClimbtheMountains

273

border-radius
Dans la prcdente dition de ce livre, Andy et moi-mme avions prsent une technique utile mais assez laborieuse pour ajouter des cadres et des ombres aux images. Elle ncessitait deux div et des images darrire-plan quil fallait mettre en forme et positionner trs soigneusement. Bon, daccord, ctait il y a bien longtemps, en 2005. Aujourdhui, la proprit border-radius permet dajouter des bords arrondis aux lments grce de simples dclarations CSS. Malheureusement, Internet Explorer (tiens, ce nom me dit quelque chose) ne prend pas du tout en charge cette proprit et affiche des coins carrs (ce qui reste acceptable, selon moi). Il en va pour le moment de mme avec le navigateur Opera. ce jour, aucun navigateur populaire ne prvoit de prendre en charge la proprit standard
border-radius. Sil est important dinclure la dclaration pour voir long terme et aller

de lavant, il faut cependant aussi ajouter deux dclarations supplmentaires court terme: lune pour les navigateurs Mozilla, comme notre ador Firefox, et lautre pour les navigateurs WebKit, comme notre cher Safari (qui prend dailleurs aussi en charge les bords elliptiques). Pour plus dinformations, des exemples et quelques astuces utiles, consultez les descriptions et les exemples ladresse http://www.the-art-of-web.com/css/border-radius/. Les trois dclarations sont clairement dfinies ici:
.polaroid { border:5px solid #f00; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; }

Considrant que le blanc sur blanc ntait pas idal pour une dmonstration, vous remarquerez que jai spcifi une bordure rouge temporaire afin que vous puissiez voir ce qui se passe la Figure11.16. Vous verrez que chaque coin est arrondi, suivant un rayon de courbure denviron 5pixels. Il sagit en fait du rayon dun quart dellipse dfinissant le coin. Comme avec les marges, le remplissage et les bordures, il existe quatre proprits border-radius individuelles (une pour chaque coin de llment) et une proprit raccourcie.
Figure11.16
La bordure rouge temporaire fait clairement apparatre les bords arrondis.

Comme vous pouvez le voir, cette mthode est bien plus simple que celle de la premire dition du livre! Maintenant que les bords sont arrondis, on peut ajouter une ombre porte simple pour donner limage un peu plus dattrait.

274

Matrise des CSS

box-shadow
Les CSS3 proposent une mthode sensiblement plus simple de crer des ombres portes pour Safari 3 et Firefox 3.5 ainsi que leurs versions ultrieures. La proprit prend trois attributs de longueur (le dcalage horizontal, le dcalage vertical et le rayon de flou) et, pour finir, une couleur. Si une valeur positive est applique au dcalage horizontal, lombre apparat du ct droit de llment. Un dcalage ngatif place lombre du ct gauche. Si une valeur ngative est applique au dcalage vertical, lombre apparat en haut de llment. Avec une valeur positive, elle apparat en bas. Le rayon de flou est un rglage trs utile. Si sa valeur est fixe 0, lombre est nette. Plus sa valeur est leve, plus lombre devient floue. Dans la classe polaroid, les quatre valeurs peuvent tre utilises pour crer une ombre porte en bas droite de notre image illustre, avec un flou de 5pixels en gris moyen:
.polaroid { border:5px solid #fff; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -webkit-box-shadow:1px 1px 5px #999; -moz-box-shadow:1px 1px 5px #999; }

Intelligemment, box-shadow respecte la valeur donne prcdemment border-radius. On obtient ainsi un cadre dimage arrondi et son ombre porte complmentaire en parfaite harmonie (voir Figure11.17).
Figure11.17
Limage possde maintenant une lgende, un cadre et des bords arrondis.

Malheureusement, ce nest pas encore le cas pour Internet Explorer (voir Figure11.18).
Figure11.18
Internet Explorer naffiche pas les proprits CSS3, mais le rsultat est acceptable.

Comme nous lavons indiqu prcdemment, Internet Explorer ne prend pas en charge la transparence RGBa pour la lgende et vous pouvez voir aussi que notre cadre est affich dans un rectangle gris angles droits. Il possde la mme largeur (5pixels) mais nest ni

tude de cas: ClimbtheMountains

275

blanc ni arrondi. Vous remarquerez aussi que nous sommes privs de notre belle ombre porte. Rappelez-vous que nous nous sommes assurs que le texte de la lgende repose sur un arrire-plan gris en ajoutant une rgle notre feuille de styles screen-i8.css. Jespre que les choses auront volu pour Internet Explorer avant que je ne devienne grand-pre.

Positionner des listes et rvler leur contenu

Dans cette partie de notre tude de cas, nous allons nous concentrer sur la zone Your latest route (votre dernier itinraire) du site, du ct gauche de la page. Dans une version totalement aboutie du site, il sagirait dune slection de statistiques, de cartes et de graphiques lis une randonne particulire, chaque panneau pouvant tre observ en cliquant sur un onglet diffrent. Pour commencer, nous allons ajouter la navigation pour la section des statistiques de la page daccueil du site CTM. Le code HTML requiert deux listes, lune pour les onglets de statistique gauche et lautre pour les options de partage, dimpression et de-mail droite:
<ul id="route_nav"> <li><a href="#">Map</a></li> <li class="cur"><a href="#">Elevation</a></li> <li><a href="#">Download GPS</a></li> <li><a href="#">Full routesheet</a></li> </ul> <ul id="route_action"> <li class="share"><a href="#">Share</a></li> <li class="print"><a href="#">Print</a></li> <li class="edit"><a href="#">Edit</a></li> </ul>

Notez que nous avons ajout class="cur" longlet Elevation, car nous souhaitons quil apparaisse comme slectionn dans cet exercice, et nous ciblons directement ce lien avec cette classe supplmentaire. Les deux listes puces hritent de quelques styles existants provenant dautres endroits du document ; on obtient ainsi les liens bleus et les rgles font-family et font-size prsentes la Figure11.19.
Figure11.19
Les listes de navigation de base de la zone Your latest route.

Sinon, jai fait flotter la liste Share, Print et Email droite. Rien de spcial ce sujet. Donc, partir de maintenant, concentrons-nous sur la liste gauche. Nous allons la faire flotter

276

Matrise des CSS

gauche et ajouter quelques dclarations de style de base, dont une couleur plus vive pour longlet slectionn:
ul#route_nav { list-style:none; font-family:Verdana,sans-serif; font-size:11px; font-weight:bold; oat:left; margin:0; } ul#route_nav li { oat:left; margin:0; padding:7px 10px; } ul#route_nav li a { color:#666; } ul#route_nav li a:hover, ul#route_nav li a:focus { color:#333; } ul#route_nav li.cur a { color:#000; }

On obtient ainsi les deux listes prsentes la Figure 11.20, lune flottante gauche et lautre flottante droite, avec une mise en forme initiale.
Figure11.20
Les deux listes flottent respectivement gauche et droite.

Nous allons maintenant dgager ces lments flottants en utilisant clear:both sur le conteneur des statistiques qui suivra cette barre de navigation. Ensuite, nous ajouterons une couleur darrire-plan la classe slectionne:
ul#route_nav li.cur { background:#dff1f1; }

Ce code dfinit la zone exacte de longlet slectionn (voir Figure11.21).

Figure11.21
Les deux listes flottent respectivement gauche et droite lorsque longlet slectionn est mis en surbrillance.

Notre systme de navigation pour la section Your latest route est maintenant fonctionnel, mais on peut encore tirer parti dune intressante astuce CSS3.

tude de cas: ClimbtheMountains

277

Arrondir les coins

Nous avons examin prcdemment la proprit CSS3 border-radius, en crant un cadre bords arrondis simple pour une image. Ici, nous allons utiliser des proprits similaires pour donner des bords arrondis une forme simple (llment slectionn de la liste dans notre systme de navigation). Nous utilisons des varits propres aux navigateurs de border-radius-top-left et order-radius-top-right pour nappliquer les bords quau haut de la forme: b
ul#route_nav li.cur { background:#dff1f1; -moz-border-radius-topleft:3px; -webkit-border-top-left-radius:3px; -moz-border-radius-topright:3px; -webkit-border-top-right-radius:3px; }

Cet ajustement simple au code CSS produit, dans Firefox et Safari, longlet subtil prsent la Figure11.22.
Figure11.22
Longlet slectionn possde maintenant des coins suprieurs arrondis, avec des CSS uniquement.

Notre systme de navigation termin, passons maintenant aux donnes daltitude.

Le graphique daltitude
Sous la barre de navigation de la zone Your latest route, nous allons maintenant ajouter le panneau de statistiques qui apparat par dfaut dans ltude de cas, soit le graphique daltitude (Elevation).
<div id="route_elevation"> </div>

Le point le plus important noter est que nous utilisons la div route_elevation pour dgager les listes de navigation flottantes. clear:both est donc immdiatement dfini pourcette div.
.home div#route_elevation { clear:both; background:#dff1f1 url(../images/site/elevation_home.gif) 0 bottom no-repeat; position:relative; height:195px; }

278

Matrise des CSS

Nous attribuons aussi un positionnement relatif la div, afin de pouvoir par la suite tracer les lments li (nous les ajouterons sous peu) sur le graphe. Nous appliquons galement limage darrire-plan elevation_home.gif (voir Figure 11.23) avec une rgle raccourcie pour les proprits de couleur, dimage, de position et de rptition.
Figure11.23
Limage darrire-plan daltitude.

On obtient ainsi limage prsente la Figure11.24, qui combine les donnes de navigation et le graphique daltitude.
Figure11.24
La navigation et le conteneur daltitude combins.

Ensuite, nous pouvons crer une nouvelle liste puces qui contiendra les rfrences daltitude. Chaque rfrence contiendra une hauteur et une image associe provenant de Flickr. Notez que chaque liste possde une classe unique, comme marker_01 et marker_02.
<div id="route_elevation"> <ul> <li class="marker_01"> <a href="#"> <strong>1,442 ft</strong> <img src="assets/images/content/elevation_photo_1.jpg" alt="At 1,442 ft: Photo of the village" /> </a> </li> <li class="marker_02"> <a href="#"> <strong>3,133 ft</strong> <img src="assets/images/content/elevation_photo_2.jpg" alt="At 3,133 ft: Pennine Way" /> </a> </li> <li class="marker_03"> <a href="#"> <strong>2,398 ft</strong> <img src="assets/images/content/elevation_photo_3.jpg" alt="At 2,398 ft: Cup of tea" /> </a> </li> <li class="marker_04"> <a href="#"> <strong>1,286 ft</strong>

tude de cas: ClimbtheMountains

279

<img src="assets/images/content/elevation_photo_4.jpg" alt="At 1,286 ft: Wool packs" /> </a> </li> </ul> </div>

Nous utiliserons ces classes uniques pour dfinir la position daffichage de chaque lment de liste sur le graphique, en dfinissant les coordonnes partir du coin suprieur gauche du conteneur de graphique daltitude.
.home div#route_elevation top:123px; left:97px; } .home div#route_elevation top:50px; left:237px; } .home div#route_elevation top:95px; left:377px; } .home div#route_elevation top:137px; left:517px; } li.marker_01 {

li.marker_02 {

li.marker_03 {

li.marker_04 {

Nous ne sommes quen cours de chemin, aussi ne disposons-nous pour linstant que dun paquet dlments de liste, avec pour chacun une hauteur et une image, empils gauche du conteneur (voir Figure11.25).
Figure11.25
Les lments de liste sont empils gauche.

Avant de forcer les lments de liste se situer aux emplacements dsirs, commenons par masquer les images et choisissons un graphisme de marqueur plus appropri. Le graphisme que nous allons utiliser correspond au point classique prsent la Figure11.26. Le fichier est nomm elevation_marker.png.
Figure11.26
Le graphisme de marqueur.

280

Matrise des CSS

Passons maintenant la mise en forme. Nous allons dfinir des styles comme font-family, font-size, supprimer ou dfinir des marges et des remplissages, etc. Fait important noter, nous dclarons limage darrire-plan elevation_marker.png pour llment div#route_ elevation ul li, en appliquant une marge gauche de 15pixels afin de crer un espace entre le point et la mesure de laltitude.
div#route_elevation ul { list-style:none; margin:0; font-family:Verdana,sans-serif; font-size:9px; font-weight:bold; } div#route_elevation ul li { margin:0; } div#route_elevation ul li a { color:#333; display:block; background:url(../images/site/elevation_marker.png) no-repeat 0 5px; padding:0 0 0 15px; } div#route_elevation ul li a:hover, div#route_elevation ul li a:focus { color:#000; } div#route_elevation ul li a img { display:none; }

Nous avons cibl les vignettes dimage de Flickr avec div#route_elevation ul li a img, en utilisant display:none afin dempcher les images de safficher. Le graphique daltitude prsente maintenant la liste avec une mise en forme plus convenable, mais toujours en les empilant sur le ct gauche du conteneur (voir Figure11.27).
Figure11.27
Les marqueurs de liste sont mis en forme, mais toujours empils gauche.

Afin de nous assurer que les lments de liste trouvent leur emplacement en fonction des coordonnes de position, nous devons les positionner de manire absolue en utilisant position:absolute, comme ceci:
div#route_elevation ul li { margin:0; position:absolute; }

tude de cas: ClimbtheMountains

281

Ce repositionnement fonctionne parce que le conteneur parent est pour sa part positionn de manire relative par rapport son propre parent. Si ce ntait pas le cas, les lments de liste positionns de manire absolue feraient dpendre leurs coordonnes du coin suprieur gauche de la fentre du navigateur, ce qui ne conviendrait pas du tout. Comme le montre la Figure11.28, les points daltitude sont maintenant dessins prcisment sur le graphique.
Figure11.28
Grce au positionnement absolu, les marqueurs se placent aux coordonnes appropries.

Nous devons maintenant grer les images que nous avons masques prcdemment et les faire safficher lorsque lutilisateur survole le point daltitude. Les cibles sont les tats de pseudo-liens :hover et :focus. En les contrlant, on peut aisment appliquer des dclarations qui afficheront les images en cas de survol. Vous remarquerez quaprs avoir dfini la hauteur et la largeur nous positionnons de nouveau les lments de manire absolue et nous utilisons des valeurs suprieure et droite ngatives pour positionner les images exactement o nous le souhaitons par rapport au marqueur de la liste.
div#route_elevation ul li a:hover img, div#route_elevation ul li a:focus img { display:block; width:40px; height:40px; padding:4px 9px 10px 12px; position:absolute; top:-16px; right:-65px; }

Quand lutilisateur survole un marqueur, limage saffiche maintenant comme prvu, juste droite du marqueur. Nous avons aussi ajout un lger remplissage autour de la vignette (voir Figure11.29).
Figure11.29
Lorsque lutilisateur survole un marqueur, sa vignette saffiche.

282

Matrise des CSS

Il est maintenant temps dutiliser ce remplissage et dinsrer un joli cadre et une image de flche sous les vignettes. Jai utilis pour cela le fichier elevation_marker_image_bg.png (voir Figure11.30). Vous remarquerez que lombre est ajoute limage dans Photoshop et exporte sous forme de PNG transparent.
Figure11.30
Un graphisme soign insrer sous les vignettes.

Il ne reste maintenant plus qu appliquer cette image darrire-plan aux CSS, comme ceci:
div#route_elevation ul li a:hover img, div#route_elevation ul li a:focus img { display:block; width:40px; height:40px; padding:4px 9px 10px 12px; position:absolute; top:-16px; right:-65px; background:url(../images/site/elevation_marker_image_bg.png) no-repeat 0 0; }

Si vous procdez de la mme manire, il se peut que vous deviez ajuster le remplissage, le positionnement et divers autres rglages, mais les lments de construction sont bien en place. Tout le travail de cette section porte maintenant ses fruits: la page inclut une zone Your latest route, avec un graphique daltitude interactif qui affiche des images de Flickr (voir Figure11.31).
Figure11.31
La section Your latest route, finalise, avec de beaux survols dimages.

Tout cela devrait videmment se trouver adoss un puissant systme de gestion de contenu pour crer un site vraiment exceptionnel, mais enfin, ce nest ici quun livre sur les CSS.

En rsum
Et voil. Ce moment de dtente aura t plus studieux quun sjour de deux semaines au bord de la mer, mais jose esprer quil aura aussi t productif. Jai particulirement apprci ce travail de mise en application des concepts du site CTM pour cette seconde dition du livre, notamment parce quil tait possible dexplorer librement de nouvelles fonctionnalits CSS3.

tude de cas: ClimbtheMountains

283

Jaurais videmment aim pouvoir prsenter bien dautres aspects du site CTM, mais un livre ne suffirait pas pour toutes ces explorations. Si vous apprciez telle fonctionnalit ou tel aspect du site qui nest pas trait dans ce livre, vous ne devriez cependant pas avoir de difficult vous plonger dans le code source, ltudier et comprendre comment les choses fonctionnent. Je me suis efforc de structurer le code avec autant de clart que possible, en insrant le maximum de commentaires utiles. Le site reste en ligne ladresse http://www.climbthemountains.com/cssm et le code source est disponible sur le site www.pearson.fr. Tlchargez-le, examinez-le, observez-le sous toutes ses coutures, rassemblez-le et utilisez-le pour inspirer vos propres projets et vos propres chefs-duvre CSS.

Index
Symboles
960 188 @font-face 241 Bogues 193 aide 202 caractres dupliqus 213 commentaires conditionnels 206 courants 211 dcalage de texte de 3 pixels 211 du coucou 214 dure de vie 216 hacks et filtres 207 Internet Explorer 206, 216 layout 203 marge double 211 marges 196 spcificit 195 techniques 198 tests 201 Botes bords arrondis 64, 269 box-sizing 45 largeur 48 niveau bloc 48 bookmarklet 19 border 147 border-bottom 112 border-collapse 143 border-image 74 border-radius 72, 157, 273, 277 Bords arrondis 269 Bordures 43, 44 biseau 111 de tableaux 143 doubles 127 Firefox 151 images 74 pointill 28 Boutons 99 biseau 111 denvoi 157 enfoncement 112 liens 117 radio 150 box-reflect 105 box-shadow 78, 234, 235, 274 box-sizing 45 button 157

A
active 92 Ajax 247 AlphaImageLoader 82 Arrire-plan 61 dfilement parallaxe 84 dgrad 157 effets de survol 101 images multiples 71, 231 PNG 210 raccourci background 64 remplissage 43 Attributs for 148 rel 28 slecteur 232 slecteurs 27, 97 summary 141 title 27, 124 XHTML 18

C
caption 141 Cartes-images 123 style Flickr 126 Cascade 30 Cases cocher 150 tiquettes 156 largeur 151 liens visits 94 multicolonnes 155 Cederholm, Dan 70 elik, Tantek 209 Centrage 165 Champs date 154 obligatoires 152 Chrome first-child 268 zoom 237 Citations 263 Clarke, Andy 28 Classes 9 body 33 combiner 272 ou ID 11 pseudo-classes 24 clear 56 Clearleft XI, 37 quipe 123 Climb the Mountains 253

B
background 26, 64, 158 background-color 24, 56 background-image 61, 62 background-position 62 background-repeat 62 Biseautage 111 blockquote 6, 8, 23, 263 Blueprint 188 body 33, 37, 62, 260

286

Matrise des CSS

Code. Voir aussiHTML historique 6 structurer 5 validation 194 Coins masqus 70 col 142 colgroup 142 Colonnes 240 CSS3 187 fausses 180 gouttire virtuelle 168 hauteurs gales 183 colspan 8 column-count 187 column-gap 187 column-width 187 Commentaires 38 conditionnels 206 mots-cls 39 supprimer 39 Contour 44 Couleurs dgrads 62, 105 hritage 34 hexadcimales 21, 38 ombres 78 site noir et blanc 28 variables 38 CSS 5 cartes-images 123 cascade 30 commentaires 38 CSS3 17, 25, 45, 71, 72, 74, 78, 95, 97, 104, 187, 230, 235, 238, 270, 274 fonctionnalits avances 230 frameworks et systmes 188 hritage 34 importer 35 info-bulles 106 modle de bote 43 ombres portes 75 priorit des rgles 31 problmes courants 194 rinitialisation 257 slecteurs 23 spcificit 31 sprites 103 units 112 validation 194 versions 17 CSS-Discuss 202 Cufn 245 Curseur 134

F
Fahrner, Todd 86 Fausses colonnes 180 Feuilles de styles gestion 35 optimiser 39 reset 225 fieldset 147, 150 Filtres 207 AlphaImageLoader 82 toile HTML 209 passe-bande 209 FIR 86 Firebug 195, 228 Firefox 108 arrire-plan 232 bordures 151 Cufn 246 extensions 198 Firebug 195, 228 first-child 268 legend 147 ombres portes 274 remplissage 110 slecteur de cible 96 text-overflow 236 versions 216 Web Developer 194, 199, 200 zoom 237 first-child 266, 268 Flash 87 Flickr 126 Flottement 52, 116 clear 55 dgagement 54 marge double 211 Flux 98 focus 92 font-size 237 Formulaires 146 boutons denvoi 157 radio 150 cases cocher 150, 155 champs de saisie 149

D
Date 154 Davidson, Mike 87 Dfilement parallaxe 83 Dfinitions 136 Dgagement 54 Dgrads 62, 105, 157 display 107, 154 div 13 DOCTYPE 19, 199, 224 commutation 21 DOM 247 Donnes tableaux 139 Downe, Natalie 176 DTD 19

E
crans 165 Effondrement des marges 46, 196 lments blocs et incorpors 48 body 62 flottants 52 tiquettes 147 cases cocher 156 tudes de cas Climb the mountains 253 Roma Italia 221 ExpressionEngine 255 Extensions Firebug 195, 228 Firefox 198 Web Developer 194, 199, 200

Index
champs obligatoires 152 tiquettes 147 Frameworks CSS 188 Fusion des marges. VoirEffondrement des marges microformats 14 span 14 structurer 37 style 35 validation 19, 194 versions 17

287
Cufn 246 dcalage de texte de 3 pixels 211 feuilles de styles spares 258 filtre de ltoile HTML 210 filtre passe-bande 209 first-child 268 layout 203 legend 147 marge double 211 modle de bote 45 positionnement 52 fixe 52 site noir et blanc 28 text-overflow 236 transparence 82 versions 216 iPhone 73

G
GIF anime 94, 250 espacement 6 transparence 7, 126 Google Chrome. VoirChrome Gouttire 43, 229, 259 mises en page flottantes 167 virtuelle 168 Griffiths, Patrick 120 Grilles 162, 228 1080 pixels 226 CTM 258 Guides 162 de styles 40

I
ID 9 body 113, 260 ou classes 11 slecteurs 23 spcificit 31 superflus 233 IFR 87 Images arrire-plan 61, 71 cartes-images 123 lastiques 178 espacement 6 fluides 227 GIF anime 94 liquides 178 ombres portes 75 positionnement 182 pour les bordures 74 remplacement 85 shim.gif 7 sprites 103 survol 101 img 178 Importation 35 Info-bulles 106 Inman, Shaun 87 input 150 Internet Explorer 216 arrire-plan 232 bogue du coucou 214 caractres dupliqus 213 commentaires conditionnels 206

J
JavaScript 100 bookmarklet 20 insertion dlments de prsentation 69 menus droulants 120 positionnement fixe 52 remplacement dimages 87 slecteur dattribut 99 jQuery 247, 248

H
Hacks 207 toile HTML 209 slecteur denfants 210 hanging-punctuation 238 hCalendar 14 height 44 Hritage 34 Homesite 7 hover 92, 93, 100 HTML body 33 button 157 conventions de nom 11 div 13 entits 239 historique 6 HTML 4 9 HTML 5 10, 18, 223

L
label 147 Largeur botes fixes 64 incorpores 48 cellules 7 champs de saisie 149 colonnes 38, 168

288

Matrise des CSS

cran 165 fixe 101 liste 111 maximale 150 max-width 176 ombre 78 police 176 variable 178 zone de contenu 44 layout 203 legend 147 li 109 Liens 91 attribut rel 28 boutons 99, 117 cartes-images 123 cible 95 curseur 134 diffrencier 96 externes 96 Liensvisits 94 relation 28 soulignements 93 survol 91 tlchargements 98 link 91 Liquid Fold 174 Listes 109 de dfinitions 136 flottantes 277 largeur 111 navigation 261 positionner 275 puces 119 rsultats 250 list-style 124 effondrement 46, 196 paragraphes vides 47 margin 166 max-width 176, 179 Menus droulants Suckerfish 120 Microformats 14 hCalendar 14 XFN 28 MIME 18 Mises en page 161 centrer 165 lastique 176 flottantes 167 grille 1080 pixels 226 largeur fixe 172 liquide 173 Modle de bote 43 Internet Explorer 45 Modes Quirks 21, 45, 166, 198 Standards 21, 199 moz 73 nofollow 28 Nouveauts attributs 97 bords arrondis 72 box-sizing 45 cible des liens 95 colonnes 187 fonctionnalits avances 230 images darrire-plan multiples 71 images de bordure 74 ombres 78 opacity 235 ponctuation hors justification 238 slecteurs avancs 25 survols 104 transparence alpha 270

O
Ombres 269 couleurs 78 portes 75 Onglets 118 coulissants 118 portes coulissantes 68 Opacit 80 opacity 80, 235 PNG 82 RGBa 81 Opera Cufn 246 first-child 268 legend 147 remplissage 110 Orchard, Dunstan 75 outline 44 overflow 57

N
Navigateurs bordures 151 Firefox 96, 108 legend 147 modes 21 Opera 110 prise en charge graduelle 217 Safari 96, 106 versions 216 zoom 237 Navigation barre graphique 116 barre horizontale 114 barre verticale 110 liste 261 onglets 118 coulissants 68 sparateurs 117 signaler la page courante 113, 260

M
Marcotte, Ethan 227 Marges 44 centrer la page 165 double pour les lments flottants 211

P
padding 44 Paragraphes vides 47

Index
Parallaxe 83 Passe-bande 209 Phark 87 Photoshop 75 Pixy 102 PNG AlphaImageLoader 82 arrire-plan 210 transparence 82, 126, 230 Polices eot 243 liaison 237 taille 176 Portes coulissantes 68, 118 Positionnement 48 absolu 50 fixe 52 Internet Explorer 52 listes 275 pourcentage 182 relatif 49, 124 Prfixes 73 Pseudo-classes 24 legend 147 modes 21 remplissage 110 Rsolution 165 RGBa 234, 235, 270 Roma Italia 221 Rundle, Mike 87 Rutter, Richard 77

289
Stackoverflow 202 Standards 21, 199 Stanek, Petr 102 Styles 35 rinitialiser 225, 257 submit 157 summary 141 Survols 91 CSS3 104 distant 132 GIF anime 94 images 101 image unique 102 Pixy 102 Systmes CSS 188

S
Safari arrire-plan 232 Cufn 246 dgrads 105 extension CSS 106 first-child 268 legend 147 ombres portes 274 remplissage 110 slecteur de cible 96 text-overflow 236 versions 216 zoom 237 screen.css 256 Slecteurs 23 avancs 25 dattribut 27, 232 de cible 95 de classe 24 de frres adjacents 26, 268 denfants 26, 210, 266 de pseudo-classe 24 descendants 23, 264 dID 24 universel 25 Snook, Jonathan 52 Soulignement 93 span 14, 132 Spcifications 17 units 112 Spcificit 30, 195 Sprites 103

T
Tableaux bordures 143 de donnes 139 GIF despacement 7 mise en forme 143 target 95 tbody 141 Tlchargements 98 text-align 166 textarea 150 Texte caractres dupliqus 213 citations 263 Cufn 245 dcalage de 3 pixels 211 Flash 87 format eot 243 liaison des polices 237 multicolonne 240 poncutation hors justification 238 remplacer par des images 85 taille 176 zone 150 text-overflow 234, 236

Q
Quirks 21, 45, 166, 198

R
Rgles cascade 30 guides 40 priorit 31 rel 28, 114 Remerciements XIII Remplissage 44 arrire-plan 43 gouttire 43 traitement des navigateurs 110 Rendu bordures 151

290

Matrise des CSS

tfoot 141 thead 141 title 27, 124 Transparence 269 alpha 270 AlphaImageLoader 82 GIF 7, 126 Internet Explorer 82 PNG 82, 126 RGBa 270 Typekit 241 Typographie Cufn 245 liaison des polices 237 poncutation hors justification 238

W
W3C 17 Web Developer 194, 199, 200 webkit 73 width 44 Willison, Simon 99 WYSIWYG 6

X
XFN 28 XHTML 18 1.0 Strict 224 XML 18 DTD 19 XMLHttpRequest 247

U
ul 109 Units 112

Y
YUI Grids 188

V
Validation 19, 194 bookmarklet 19 Veen, Jeffrey 241 visibility 58 visited 91, 95

Z
Zones de texte 150 ractives 133

Le Campus

Matrise des
CSS Mastery enn traduit en franais !

CSS
2e dition
Table des matires
Les fondations Des styles qui atteignent leur cible Vue densemble du modle de formatage visuel Utilisation des effets darrire plan Mise en forme des liens Mise en forme des listes et cration de barres de navigation Mise en forme des formulaires et des tableaux de donnes Mise en page Bogues et correctifs tude de cas : Roma Italia tude de cas : Climb the Mountains

Vritable rfrence sur le sujet, ce livre contient tout ce que vous devez connatre pour passer matre dans lart des CSS. Il regroupe les techniques les plus utiles, traite les problmes concrets de navigateurs et aide combler les lacunes les plus courantes. Si la plupart des ouvrages se concentrent habituellement sur les comptences de base, celui-ci prsuppose en revanche que vous avez dj acquis les notions fondamentales et souhaitez approfondir vos connaissances an de passer au stade suprieur en termes de programmation. Vous apprendrez : Planier, organiser et grer plus efcacement vos feuilles de styles CSS ; Mettre prot les secrets des mises en page liquides, lastiques et hybrides ; Crer des botes bords arrondis, des ombres portes et des reets uniquement en CSS ; Matriser lart de la mise en page des formulaires ; Pister et corriger les bogues de navigateurs les plus courants. Enn, toutes les techniques expliques sont mises en pratique dans deux tudes de cas de haute facture, labores par deux des meilleurs concepteurs CSS de notre temps : Simon Collison et Cameron Moll.
Niveau : Intermdiaire / Avanc Catgorie : Dveloppement web Configuration : Multiplate-forme

propos des auteurs

Andy Budd est un designer web, dveloppeur et auteur de blog de renomme internationale. Il sest spcialis dans la cration de solutions web conformes aux standards, attrayants et accessibles. Simon Collison est dveloppeur en chef pour le web chez Agenzia (www.agenzia.co.uk). Il a travaill sur de nombreux projets web pour des maisons de disques, des artistes de renomme, des graphistes et des illustrateurs majeurs. Cameron Moll est un clbre designer ddi aux nouveaux medias (web, terminaux mobiles).

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-4130-3