Maîtrise des CSS

308 Pages·2010·9.5 MB·French

by  Andy Budd

Le Campus
Maîtrise
CSS
des
2e édition
Andy Budd
avec Cameron Mall et Simon Collison
Maîtrise des CSS
Pearson Education France a apporté le plus grand soin à la réalisation de ce livre afin de vous fournir une
information complète et fiable. Cependant, Pearson Education France n’assume de responsabilités, ni pour
son utilisation, ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient
résulter de cette utilisation.
Les exemples ou les programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théo-
riques. Ils ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle.
Pearson Education France ne pourra en aucun cas être tenu pour responsable des préjudices ou dommages de
quelque nature que ce soit pouvant résulter de l’utilisation de ces exemples ou programmes.
Tous les noms de produits ou autres marques cités dans ce livre sont des marques déposées par leurs proprié-
taires respectifs.
Publié par Pearson Education France Titre original : CSS Mastery, Advanced Web Standards
47 bis, rue des Vinaigriers Solutions, second edition
75010 PARIS
Tél. : [phone] Traduit par Patrick Fabre,
www.pearson.fr avec la contribution de Bruno Sebarte
Mise en pages : TyPAO ISBN original : 978-1-4302-2397-9
Copyright © 2009 by Andy Budd, Simon Collison,
ISBN : 978-2-7440-4130-3 and Cameron Moll
Copyright © 2010 Pearson Education France All rights reserved
Tous droits réservés
Édition originale publiée par FriendsofEd/Apress
(www.friendsofed.com/www.apress.com)
Aucune représentation ou reproduction, même partielle, autre que celles prévues à l’article L. 122-5 2˚ et 3˚ a) du code de
la propriété intellectuelle ne peut être faite sans l’autorisation expresse de Pearson Education France ou, le cas échéant,
sans le respect des modalités prévues à l’article L. 122-10 dudit code.
No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including
photocopying, recording or by any information storage retrieval system, without permission from Pearson Education,
Inc.
Maîtrise des CSS
Andy Budd
avec Cameron Moll et Simon Collison

Table des matières
Avant-propos.................................................................................................................. IX
À propos des auteurs............................................................................................... XI
À.propos.des.réviseurs.techniques.............................................................................. XII
Remerciements............................................................................................................. XIII
Introduction.................................................................................................................... 1
À.qui.ce.livre.est-il.destiné ?......................................................................................... 1
Structure.du.livre............................................................................................................... 2
Conventions.utilisées....................................................................................................... 2
1 Les fondations............................................................................................................... 5
Structuration.du.code....................................................................................................... 5
Historique.rapide.du.balisage................................................................................... 6
Types.de.document,.commutation.de.DOCTYPE..
et.modes.des.navigateurs........................................................................................... 19
Validation....................................................................................................................... 19
En.résumé............................................................................................................................ 22
2 Des styles qui atteignent leur cible................................................................ 23
Les.sélecteurs.courants................................................................................................... 23
Pseudo-classes.............................................................................................................. 24
Le.sélecteur.universel...................................................................................................... 25
Les.sélecteurs.avancés..................................................................................................... 25
Sélecteur.d’enfants.et.sélecteur.de.frère.adjacent................................................ 26
Sélecteur.d’attribut...................................................................................................... 27
Cascade.et.spécificité.................................................................................................. 30
Héritage.......................................................................................................................... 34
Planification,.organisation.et.gestion.des.feuilles.de.styles................................ 35
Application.de.styles.aux.documents..................................................................... 35
Guides.de.styles........................................................................................................... 40
En.résumé............................................................................................................................ 42
IV
Maîtrise des CSS
3 Vue d’ensemble du modèle de formatage visuel................................. 43
Récapitulatif.sur.le.modèle.de.boîte........................................................................... 43
Internet.Explorer.et.le.modèle.de.boîte.................................................................. 45
Effondrement.des.marges.......................................................................................... 46
Récapitulatif.concernant.le.positionnement............................................................. 48
Le.modèle.de.formatage.visuel................................................................................ 48
Positionnement.relatif................................................................................................ 49
Positionnement.absolu................................................................................................ 50
Flottement...................................................................................................................... 52
En.résumé............................................................................................................................ 58
4 Utilisation des effets d’arrière-plan................................................................. 61
Notions.de.base.sur.les.images.d’arrière-plan........................................................ 61
Boîtes.à.bords.arrondis.................................................................................................... 64
Boîtes.à.largeur.fixe.et.bords.arrondis.................................................................... 64
Coins.masqués.............................................................................................................. 70
Ombres.portées.................................................................................................................. 75
Ombres.portées.simples.en.CSS.............................................................................. 75
Ombres.portées."à.la.Clagnut"................................................................................. 77
Opacité.................................................................................................................................. 80
Opacité.CSS.................................................................................................................. 80
Remplacement.d’images................................................................................................ 85
Remplacement.des.images.de.Fahrner................................................................... 86
Phark............................................................................................................................... 87
Méthode.IFR.évolutive............................................................................................... 87
En.résumé............................................................................................................................ 89
5 Mise en forme des liens.......................................................................................... 91
Mise.en.forme.simple.des.liens.................................................................................... 91
Soulignements.amusants................................................................................................ 93
Embellissement.simple.des.liens............................................................................. 93
Soulignement.de.liens.originaux............................................................................. 94
Style.de.liens.visités.................................................................................................... 94
Mise.en.forme.des.cibles.des.liens.......................................................................... 95
Différenciation.des.types.de.liens............................................................................ 96
Signalement.de.documents.téléchargeables.et.de.flux....................................... 98
V
Table des matières
Création.de.liens.qui.ressemblent.à.des.boutons................................................. 99
Survol.simple................................................................................................................ 100
Survol.avec.images..................................................................................................... 101
Survol.style.Pixy.......................................................................................................... 102
Sprites.CSS................................................................................................................... 103
Survol.CSS 3................................................................................................................. 104
Info-bulles.CSS................................................................................................................. 106
En.résumé............................................................................................................................ 108
6 Mise en forme des listes et création de barres de navigation..... 109
Mise.en.forme.de.base.des.listes.................................................................................. 109
Création.d’une.barre.de.navigation.verticale........................................................... 110
Signaler.la.page.courante.dans.la.barre.de.navigation......................................... 113
Création.d’une.barre.de.navigation.horizontale.simple....................................... 114
Création.d’une.barre.de.navigation.graphique........................................................ 116
Système.de.navigation.élastique.à.onglets............................................................... 118
Menus.déroulants.Suckerfish........................................................................................ 120
Cartes-images.CSS........................................................................................................... 123
Cartes-images.à.la.mode.Flickr................................................................................ 126
Survol.distant...................................................................................................................... 132
Note.à.propos.des.listes.de.définitions....................................................................... 136
En.résumé............................................................................................................................ 137
7 Mise en forme des formulaires et des tableaux de données........ 139
Mise.en.forme.des.tableaux.de.données.................................................................... 139
Éléments.spécifiques.des.tableaux.......................................................................... 141
Balisage.des.tableaux.de.données........................................................................... 142
Mise.en.forme.du.tableau.......................................................................................... 143
Ajout.de.style.visuel................................................................................................... 144
Mise.en.forme.simple.de.formulaires........................................................................ 146
Éléments.de.formulaire.utiles................................................................................... 147
Disposition.de.base..................................................................................................... 148
Autres.éléments............................................................................................................ 150
Embellissements.......................................................................................................... 151
Mise.en.forme.complexe.de.formulaire..................................................................... 153
VI
Maîtrise des CSS
Champ.de.date.accessible.......................................................................................... 154
Cases.à.cocher.multicolonnes................................................................................... 155
Retour.de.formulaire................................................................................................... 158
En.résumé............................................................................................................................ 160
8 Mise en page.................................................................................................................. 161
Planification.de.la.mise.en.page................................................................................... 161
Les.premières.fondations............................................................................................... 164
Centrage.d’une.mise.en.page.à.l’aide.des.marges............................................... 165
Mises.en.page.flottantes.................................................................................................. 167
Mise.en.page.flottante.à.deux.colonnes................................................................. 167
Mise.en.page.flottante.à.trois.colonnes.................................................................. 170
Mises.en.page.à.largeur.fixe,.liquide.et.élastique.................................................. 172
Mises.en.page.liquides............................................................................................... 173
Mises.en.page.élastiques............................................................................................ 176
Images.liquides.et.élastiques......................................................................................... 178
Fausses.colonnes............................................................................................................... 180
Colonnes.de.hauteurs.égales......................................................................................... 183
Colonnes.CSS 3................................................................................................................. 187
Frameworks.CSS.et.systèmes.CSS............................................................................. 188
En.résumé............................................................................................................................ 191
9 Bogues et correctifs................................................................................................... 193
La.chasse.aux.bogues...................................................................................................... 193
Problèmes.CSS.courants............................................................................................ 194
Les.fondamentaux.de.la.chasse.aux.bogues............................................................. 198
Essayer.d’éviter.les.bogues.par.avance !............................................................... 200
Isoler.le.problème........................................................................................................ 200
Créer.des.cas.de.test.minimaux................................................................................ 201
Résoudre.le.problème,.pas.le.symptôme............................................................... 202
Demander.de.l’aide..................................................................................................... 202
Avoir.ou.ne.pas.avoir.un."layout"…........................................................................... 203
Qu’est-ce.que.le."layout" ?....................................................................................... 203
Quel.effet.résulte.du.layout ?.................................................................................... 204
Solutions.de.contournement.......................................................................................... 206
Les.commentaires.conditionnels.d’Internet.Explorer........................................ 206
VII
Table des matières
Avertissement.concernant.les.hacks.et.les.filtres................................................. 207
Utiliser.les.hacks.et.les.filtres.avec.raison............................................................. 208
Appliquer.le.filtre.passe-bande.pour.Internet.Explorer.version.Mac............. 209
Le.hack.de.l’étoile.HTML........................................................................................ 209
Appliquer.le.hack.du.sélecteur.d’enfants.............................................................. 210
Bogues.et.correctifs.courants........................................................................................ 211
Bogue.de.la.double.marge.des.éléments.flottants................................................ 211
Bogue.du.décalage.de.texte.de.3 pixels................................................................. 211
Bogue.des.caractères.dupliqués.d’Internet.Explorer 6...................................... 213
Bogue.du.coucou.d’Internet.Explorer 6................................................................. 214
Positionnement.absolu.dans.un.conteneur.relatif................................................ 215
Cesser.de.se.référer.à.Internet.Explorer................................................................. 216
Prise.en.charge.graduelle.des.navigateurs................................................................ 217
En.résumé............................................................................................................................ 219
10 Étude de cas : Roma Italia.................................................................................... 221
À.propos.de.cette.étude.de.cas..................................................................................... 221
Les.fondations.................................................................................................................... 223
Un.œil.rivé.sur.le.HTML 5........................................................................................ 223
reset.css.......................................................................................................................... 225
La.mise.en.page.et.la.grille.à.1 080 pixels................................................................ 226
Utilisation.des.grilles.pour.la.conception.web..................................................... 228
Fonctionnalités.CSS 2.et.CSS 3.avancées................................................................ 230
Les.sites.doivent-ils.être.identiques.dans.tous.les.navigateurs ?..................... 230
Sélecteur.d’attribut...................................................................................................... 232
box-shadow,.RGBa.et.text-overflow........................................................................ 234
Liaison.des.polices.et.typographie.web.améliorée................................................ 237
Définir.font-size.comme.en.1999............................................................................. 237
Ponctuation.hors.justification................................................................................... 238
Affichage.du.texte.sur.plusieurs.colonnes............................................................. 240
@font-face..................................................................................................................... 241
Cufón,.étape.intermédiaire.avant.@font-face....................................................... 245
Interactivité.avec.Ajax.et.jQuery................................................................................. 247
Ajax................................................................................................................................. 247
jQuery............................................................................................................................. 248