CSSTechniques professionnelles pour une mise en page moderne

Eric A. Meyer

Livre 1.indb 1 01/06/2011 14:10:53

© 2011 Pearson Education France – CSS – Eric A. Meyer

Pearson Education France a apporté le plus grand soin à la réalisation de ce livre afin de vous fournir une informa-tion 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éoriques. 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 marques cités dans ce livre sont des marques déposées par leurs propriétaires res-pectifs.

All rights reserved. Authorised translation from English language edition published by John Wiley & Sons Limited. Responsibility for accuracy of the translation rests solely with Pearson Education France and is not the responsibility of John Wiley & Sons Limited. No part of this book may be reproduced in any form without the written permission of the original copyright holder, John Wiley & Sons Limited.

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.

Publié par Pearson Education France47 bis, rue des Vinaigriers75010 PARISTél. : 01 72 74 90 00www.pearson.fr

Mise en pages : Véronique Imbault

ISBN : 978-2-7440-2491-7Copyright © 2011 Pearson Education FranceTous droits réservés

Titre original : Smashing CSS, Professional Techniques for Modern Layout

Traduit par Hervé Soulard, avec la contribution de Bruno Sebarte

ISBN original : 978-0-470-68416-0

First published 2011 by John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom

Content reproduced from Meyerweb.com is copyright material and cannot be reproduced without permission ©1995-2010 Eric A. and Kathryn S. Meyer. All Rights Reserved.

Livre 1.indb 2 01/06/2011 14:10:53

© 2011 Pearson Education France – CSS – Eric A. Meyer

sommaireIntroduction....................................................................................1

1.–.Outils.........................................................................................3Firebug ....................................................................................................................................3Web Developer Toolbar ..........................................................................................................9Internet Explorer Developer Toolbar (ou Tools) .................................................................13Dragonfly (pour Opera) .......................................................................................................17Inspecteur web (Safari) ........................................................................................................19XRAY ....................................................................................................................................21SelectORacle .........................................................................................................................23Feuille de style de diagnostic ................................................................................................24Styles de reconfiguration ......................................................................................................25IE9.js .....................................................................................................................................28

2.–.Sélecteurs.................................................................................31Pseudo-… .............................................................................................................................31Des cibles qui ont du style ....................................................................................................33Spécificité ..............................................................................................................................34Importance............................................................................................................................36Omission d’un mot clé ..........................................................................................................36Prépondérance sélective des propriétés ................................................................................38Sélection universelle .............................................................................................................40

Livre 1.indb 3 01/06/2011 14:10:53

© 2011 Pearson Education France – CSS – Eric A. Meyer

iv CSS – Techniques professionnelles pour une mise en page moderne

Identifiant contre classe ........................................................................................................41Identifiant avec classe ...........................................................................................................43Classes multiples ...................................................................................................................44Sélecteur d’attribut simple ....................................................................................................45Sélecteur d’attribut pour les classes ......................................................................................47Identifiant ou sélecteur d’attribut ? ......................................................................................48Les sélecteurs d’attribut et leurs sous-chaînes ......................................................................49Autres sous-chaînes de sélection d’attribut ..........................................................................50Sélecteur d’enfants ................................................................................................................52Sélecteur d’enfant simulé ......................................................................................................54Sélecteur d’enfants adjacents ................................................................................................56Générer du contenu ..............................................................................................................57

3.–.Conseils....................................................................................61Valider le document .............................................................................................................61Ordre des valeurs de police ..................................................................................................62Fixer la hauteur de ligne ......................................................................................................63Valeurs sans unité pour la hauteur de ligne ........................................................................64Éviter les bordures sans style ................................................................................................65Contrôler l’aspect d’une bordure par sa couleur ..................................................................66Supprimer l’affichage d’un élément ......................................................................................67Retirer la visibilité d’un élément ..........................................................................................69Déplacer un élément hors de l’écran ....................................................................................70Remplacer par une image ....................................................................................................71Styles d’impression ................................................................................................................73Concevoir des styles d’impression ........................................................................................74Liens de niveau bloc .............................................................................................................75Marges ou espacements ? .....................................................................................................76Composition en sommaire ...................................................................................................78Ajouter des puces aux listes ..................................................................................................79Puces en arrière-plan ...........................................................................................................81Générer des puces .................................................................................................................84Des conteneurs déjà présents ...............................................................................................86Arrière-plans du document ..................................................................................................89CSS propre à un serveur .......................................................................................................90

Livre 1.indb 4 01/06/2011 14:10:53

© 2011 Pearson Education France – CSS – Eric A. Meyer

vSommaire

4.–.Mise.en.page.............................................................................93Contours à la place des bordures .........................................................................................93Centrer des boîtes de type bloc .............................................................................................96Confiner des éléments flottants : overflow ...........................................................................98Confiner des éléments flottants : flottement ......................................................................100Technique clearfix...............................................................................................................102Dégagement adjacent .........................................................................................................104Deux simples colonnes........................................................................................................105Trois simples colonnes ........................................................................................................106Fausses colonnes .................................................................................................................109Technique Liquid Bleach ....................................................................................................112Technique One True Layout ..............................................................................................115Technique Holy Grail .........................................................................................................119Technique des grilles variables ...........................................................................................123Mise en page fondée sur les em ..........................................................................................127Marges négatives dans le flux.............................................................................................130Positionner dans un contexte .............................................................................................133Positionner hors du bloc conteneur ...................................................................................135En-têtes et pieds de page fixes ............................................................................................138

5.–.Effets.......................................................................................141Complexspiral .....................................................................................................................141Fenêtres pop-up en CSS ......................................................................................................146Menus en CSS .....................................................................................................................148Technique de boxpunching.......................................................................................150Angles arrondis sans CSS3 .................................................................................................153Angles arrondis avec CSS3 .................................................................................................158Sprites CSS ..........................................................................................................................161Technique Sliding Doors.....................................................................................................163Technique Sliding Doors avec écrêtage ..............................................................................167Effet de parallaxe en CSS ...................................................................................................169Habillages irréguliers ..........................................................................................................172Habillages irréguliers améliorés .........................................................................................175Mettre en boîte les images ..................................................................................................179Images contraintes ..............................................................................................................181

Livre 1.indb 5 01/06/2011 14:10:54

© 2011 Pearson Education France – CSS – Eric A. Meyer

vi CSS – Techniques professionnelles pour une mise en page moderne

6.–.Tableaux.................................................................................183En-tête, corps, pied .............................................................................................................183Intitulés de lignes ................................................................................................................186Styles orientés colonne ........................................................................................................188Carte à partir d’un tableau ................................................................................................192Graphique à partir d’un tableau ........................................................................................199

7.–.Futur.proche..........................................................................207Styles pour HTML 5 ...........................................................................................................208Des classes à la manière de HTML 5 .................................................................................209Requêtes de média ..............................................................................................................210Appliquer des styles à des enfants choisis ..........................................................................215Appliquer des styles à des colonnes choisies ......................................................................218Transparence de couleur avec RVBa .................................................................................222Couleurs TSL et TSL avec canal alpha ..............................................................................223Appliquer des ombres .........................................................................................................225Arrière-plans multiples ......................................................................................................227Transformations 2D ...........................................................................................................232

Index............................................................................................243

À propos de l’auteur

Eric A. Meyer est expert en HTML, CSS et standards web de renommée mondiale. Il œuvre sur le Web depuis la fin des années 1993. Il a fondé Complex Spiral Consulting, qui compte au nombre de ses clients America On-Line, Apple, Adobe, Microsoft, Progressive Insurance, Sherwin-Williams et d’autres. Il est également le co-initiateur du mouvement micro-formats et le co-fon-dateur (avec Jeffrey Zeldman) d’An Event Apart, des conférences destinées aux créateurs de sites web. Il est l’auteur de cinq ouvrages à succès sur CSS et la conception web.

Livre 1.indb 6 01/06/2011 14:10:54

© 2011 Pearson Education France – CSS – Eric A. Meyer