CSS. Techniques professionnelles pour une mise en page moderne. Eric A. Meyer Pearson Education France CSS Eric A. Meyer

Transcription

1 CSS Techniques professionnelles pour une mise en page moderne Eric A. Meyer

2 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é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 respectifs. Publié par Pearson Education France 47 bis, rue des Vinaigriers PARIS Tél. : Mise en pages : Véronique Imbault ISBN : Copyright 2011 Pearson Education France Tous 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 : 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 Eric A. and Kathryn S. Meyer. All Rights Reserved. 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 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 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.

3 sommaire Introduction Outils...3 Firebug...3 Web Developer Toolbar...9 Internet Explorer Developer Toolbar (ou Tools)...13 Dragonfly (pour Opera)...17 Inspecteur web (Safari)...19 XRAY...21 SelectORacle...23 Feuille de style de diagnostic...24 Styles de reconfiguration...25 IE9.js Sélecteurs...31 Pseudo Des cibles qui ont du style...33 Spécificité...34 Importance...36 Omission d un mot clé...36 Prépondérance sélective des propriétés...38 Sélection universelle...40

4 iv CSS Techniques professionnelles pour une mise en page moderne Identifiant contre classe...41 Identifiant avec classe...43 Classes multiples...44 Sélecteur d attribut simple...45 Sélecteur d attribut pour les classes...47 Identifiant ou sélecteur d attribut?...48 Les sélecteurs d attribut et leurs sous-chaînes...49 Autres sous-chaînes de sélection d attribut...50 Sélecteur d enfants...52 Sélecteur d enfant simulé...54 Sélecteur d enfants adjacents...56 Générer du contenu Conseils...61 Valider le document...61 Ordre des valeurs de police...62 Fixer la hauteur de ligne...63 Valeurs sans unité pour la hauteur de ligne...64 Éviter les bordures sans style...65 Contrôler l aspect d une bordure par sa couleur...66 Supprimer l affichage d un élément...67 Retirer la visibilité d un élément...69 Déplacer un élément hors de l écran...70 Remplacer par une image...71 Styles d impression...73 Concevoir des styles d impression...74 Liens de niveau bloc...75 Marges ou espacements?...76 Composition en sommaire...78 Ajouter des puces aux listes...79 Puces en arrière-plan...81 Générer des puces...84 Des conteneurs déjà présents...86 Arrière-plans du document...89 CSS propre à un serveur...90

5 Sommaire v 4 Mise en page...93 Contours à la place des bordures...93 Centrer des boîtes de type bloc...96 Confiner des éléments flottants : overflow...98 Confiner des éléments flottants : flottement Technique clearfix Dégagement adjacent Deux simples colonnes Trois simples colonnes Fausses colonnes Technique Liquid Bleach Technique One True Layout Technique Holy Grail Technique des grilles variables Mise en page fondée sur les em Marges négatives dans le flux Positionner dans un contexte Positionner hors du bloc conteneur En-têtes et pieds de page fixes Effets Complexspiral Fenêtres pop-up en CSS Menus en CSS Technique de boxpunching Angles arrondis sans CSS Angles arrondis avec CSS Sprites CSS Technique Sliding Doors Technique Sliding Doors avec écrêtage Effet de parallaxe en CSS Habillages irréguliers Habillages irréguliers améliorés Mettre en boîte les images Images contraintes...181

6 vi CSS Techniques professionnelles pour une mise en page moderne 6 Tableaux En-tête, corps, pied Intitulés de lignes Styles orientés colonne Carte à partir d un tableau Graphique à partir d un tableau Futur proche Styles pour HTML Des classes à la manière de HTML Requêtes de média Appliquer des styles à des enfants choisis Appliquer des styles à des colonnes choisies Transparence de couleur avec RVBa Couleurs TSL et TSL avec canal alpha Appliquer des ombres Arrière-plans multiples Transformations 2D Index À 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 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-fondateur (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.