CSS avancées

CSS avancées

by Raphaël Goetter
Released February 2012
Publisher(s): Eyrolles
ISBN: 9782212134056

Explore a preview version of CSS avancées right now.

O’Reilly members get unlimited access to live online training experiences, plus books, videos, and digital content from 200+ publishers.

Start your free trial

Book description

Présentation

Incontournable du design web moderne, les feuilles de styles CSS sont en pleine révolution avec l'adoption des nouveaux standards HTML5 et CSS3. Familier de CSS 2, allez plus loin en maîtrisant les techniques avancées déjà éprouvées dans CSS2.1 et découvrez les multiples possibilités de CSS3 !

Chaque jour mieux prises en charge par les navigateurs, les CSS sont sans conteste un gage de qualité dans la conception d'un site web élégant, fonctionnel et accessible, aussi bien sous Mozilla Firefox, Google Chrome, Opéra ou Safari que sous Internet Explorer ou les navigateurs mobiles.

Vous croyiez tout savoir sur les CSS ? Grâce à la deuxième édition de ce livre de référence, enrichie et mise à jour, vous irez encore plus loin ! Vous apprendrez à faire usage tout autant des technologies avant-gardistes de CSS 3 et HTML5 que de pratiques avancées, concrètes et mal connues déjà utilisables en production, et ce, pour l'ensemble des médias reconnus par les styles CSS (écrans de bureau ou mobiles, messageries, mais aussi impression, médias de restitution vocale, projection et télévision). Maîtrisez tous les rouages du positionnement en CSS2.1, exploitez les microformats, optimisez les performances d'un site, gérez efficacement vos projets ou contournez les bogues des navigateurs (hacks, commentaires conditionnels, HasLayout...). Enfin, profitez dès aujourd'hui des nouveautés de CSS3 : typographie, gestion des césures, colonnes, arrière-plans, dégradés, ombres portées, redimensionnement, rotations, transitions et autres effets animés, sans oublier les Media Queries, qui permettent d'adapter le site à son support de consultation.

Conseils méthodologiques, bonnes pratiques, outils, tests, exemples avec résultats en ligne, quizzes et exercices corrigés, tableaux récapitulatifs... rien ne manque à ce manuel du parfait designer web !

À qui s'adresse cet ouvrage ?
  • À tous les concepteurs de sites qui souhaitent exploiter les CSS au maximum de leurs possibilités ;
  • Aux designers, développeurs et intégrateurs web impatients de découvrir et d'utiliser CSS3.
Au sommaire
  • État des lieux
  • Tirer le meilleur de CSS
    • Exploiter les possibilités de CSS 2.1
    • Gestion de projet et performance
    • Gestion de projet et performance
    • Le positionnement en CSS
    • Le positionnement en CSS
    • Positionnement avancé
    • Résolution d'erreurs
  • HTML 5 et CSS 3 : l'innovation en marche
    • La révélation HTML 5
    • En route vers CSS 3
  • CSS et applications spécifiques
    • CSS pour le Web mobile
    • CSS pour l'impression
    • CSS et les messageries
    • Et les autres périphériques ?
  • Annexes
    • Liste de toutes les propriétés CSS (CSS 1, 2 et 3)
    • Prise en charge de HTML 5 et CSS 3
    • Ressources

Table of contents

  1. Couverture
  2. Page de titre
  3. Copyright
  4. Préface
  5. Table des matières
  6. Avant-propos
    1. Le site dédié au livre
    2. Conventions utilisées dans ce livre
    3. À propos de l’auteur
    4. À propos d’Alsacréations
      1. Alsacreations.com
      2. Alsacreations.fr
    5. Remerciements
  7. Chapitre 1: État des lieux
    1. Les standards du Web, une longue mise en place
    2. Où en est–on aujourd’hui ?
      1. Les usages évoluent
      2. Les normes évoluent
      3. Les navigateurs évoluent
    3. Le « cas » Internet Explorer
      1. Internet Explorer 6
      2. Internet Explorer 7
      3. Internet Explorer 8
      4. Internet Explorer 9
      5. Internet Explorer 10
    4. Prendre en compte les anciens navigateurs ?
      1. Dégradation gracieuse
      2. Prise en charge progressive
  8. Première partie: Tirer le meilleur de CSS
    1. Chapitre 2: Exploiter les possibilités de CSS 2.1
      1. Terminologie et syntaxe de base
        1. Commentaire
        2. Propriété, valeur et déclaration
        3. Sélecteur
        4. Sélecteur de classe
        5. Sélecteur d’identifiant
        6. Règle et bloc de déclaration
        7. Pseudo‐classe et pseudo‐élément
        8. L’exception :visited
      2. Généalogie
        1. Ancêtre, parent, frère
        2. Influence sur les sélecteurs
      3. Priorité des sélecteurs
        1. Mode de déclaration
        2. Poids des sélecteurs
        3. !important
      4. Sélecteurs et pseudo‐éléments CSS 2.1
        1. Sélecteur d’enfant
        2. Sélecteur de frère adjacent
        3. Sélecteur d’attribut
        4. :first-letter et :first‐line
        5. :first-child
        6. :focus
        7. :before et :after
        8. Règles @
      5. Tableau récapitulatif
      6. Microformats
        1. Définition et usage
        2. Types de microformats
        3. Qui en tient compte ?
        4. Exercice pratique : contact d’entreprise
      7. Quiz de connaissances
        1. Questions
        2. Réponses
    2. Chapitre 3: Gestion de projet et performance
      1. Bien gérer un projet CSS
        1. Un code pertinent et réutilisable
        2. Ordre des déclarations
        3. Commentaires « utiles »
        4. Gérer les versions
      2. Optimiser les performances
        1. Appliquer un Reset CSS
        2. Performances des sélecteurs
        3. Utiliser les sprites CSS
        4. Optimiser les feuilles de styles
      3. Outils en ligne et logiciels
        1. Extensions pour navigateurs
        2. Outils en ligne
        3. IETester
        4. Grilles de mise en page
        5. Frameworks CSS
        6. Zen Coding
        7. Étendre le langage CSS : Less
        8. Exploiter son éditeur HTML
        9. Checklist générale
    3. Chapitre 4: Le positionnement en CSS
      1. Histoire du positionnement en CSS
        1. Entre tableaux, cadres et calques
        2. Flottement et retour à la « sémantique »
      2. Modèle de boîte
        1. Anatomie d’une boîte
        2. Dimensions des éléments
        3. Minima et maxima
        4. Le mode Quirks de Microsoft
        5. Valeurs calculées et box-sizing en CSS 3
        6. Exercice pratique : centrer horizontalement en CSS
      3. Fusion de marges
      4. Rendu par défaut et flux courant
        1. Le rendu des éléments
        2. Le flux
      5. Positionnement absolu
        1. Sortir du flux
        2. À quel saint se vouer ?
        3. Un mode de rendu particulier
        4. La profondeur : z-index
        5. Étirer un élément
      6. Positionnement fixé
      7. Positionnement relatif
      8. Positionnement flottant
        1. Un usage détourné de son objectif initial
        2. Un positionnement à part
        3. Des blocs côte à côte
        4. La propriété clear
        5. Quiz sur le positionnement flottant
        6. Exercice pratique : dépassement de flottants
      9. Cumuler les schémas de positionnement
      10. Quiz de connaissances
        1. Questions
        2. Réponses
    4. Chapitre 5: Positionnement avancé
      1. Combiner block et inline
        1. display: inline-block
        2. Particularités pour IE6 et IE7
        3. Alignement vertical
        4. Caractères invisibles (whitespace)
        5. Exercice pratique : dimensionner des liens horizontaux
      2. Un rendu de tableau en CSS
        1. table, table-cell et table-row
        2. Quelle différence avec HTML <table> ?
        3. Particularités du modèle tabulaire
        4. Propriétés spécifiques aux tableaux
        5. Alternative pour IE6 et IE7
        6. Tableau récapitulatif
        7. Exercice pratique : hauteurs fluides
      3. Grid et Template positioning
        1. Positionnement en grille (grid positioning)
        2. Positionnement à l’aide de gabarits (template positioning)
      4. Le modèle de boîte flexible
        1. display : box
        2. Empilement vertical ou horizontal
        3. Ordre d’empilement
        4. Flexibilité : remplir l’espace
        5. Compatibilité
        6. Exercice pratique : centrer et réordonner des éléments
      5. Revue des différents schémas de positionnement
    5. Chapitre 6: Résolution d’erreurs
      1. Connaître le rendu par défaut des éléments
        1. Outils de vérification
        2. Et si ce n’était pas une erreur ?
      2. Faut-il utiliser les hacks ?
        1. Exemples de hacks
        2. Risques pour l’avenir
        3. Hacks à méditer ?
        4. Cibler les navigateurs récents à l’aide de sélecteurs avancés
      3. Préférer les commentaires conditionnels
        1. Fonctionnement
        2. Usage pratique
        3. Classe conditionnelle pour Internet Explorer
      4. HasLayout chez Internet Explorer
        1. Un mécanisme propriétaire
        2. Avoir le Layout
        3. Donner et ôter le Layout
        4. Du Layout et des erreurs
      5. Petite méthodologie de résolution d’erreurs
        1. Isoler l’élément
        2. Corriger l’erreur
  9. Deuxième partie: html 5 et CSS 3 : l’innovation en marche
    1. Chapitre 7: La révélation HTML 5
      1. Pourquoi HTML 5 ?
      2. Une nouvelle grammaire
        1. Un Doctype simplifié
        2. Une syntaxe permissive
      3. De nouveaux éléments sémantiques
        1. <header>
        2. <footer>
        3. <nav>
        4. <aside>
        5. <section>
        6. <article>
        7. <figure>
        8. Exercice pratique : utiliser les nouveaux éléments
      4. Redéfinition et obsolescence d’éléments
      5. De nouveaux éléments de périphériques
        1. <audio>
        2. <video>
        3. <canvas>
      6. Une nouvelle génération de formulaires
        1. email, url, tel, number, color
        2. range
        3. date, datetime, month, week, time
        4. search
        5. placeholder
        6. autofocus
        7. autocomplete
        8. required
        9. Exercice pratique : attributs des formulaires
      7. De nouveaux attributs généraux
        1. draggable
        2. hidden
        3. contenteditable
        4. Attributs personnalisés
      8. De nouvelles applications
        1. Géolocalisation
        2. Glisser-déposer : Drag and Drop
        3. Stockage des données : Web Storage
        4. Fichiers : File API
        5. Application web hors ligne
        6. Web Socket et Web Workers
        7. Exercice pratique : ma liste de courses
      9. Vers un HTML 5 « transitionnel »?
    2. Chapitre 8: En route vers CSS 3
      1. État de la norme CSS 3
      2. En attendant la norme : les préfixes propriétaires
      3. Propriétés CSS 3
        1. Propriétés CSS 3 liées au contenu
        2. Propriétés CSS 3 décoratives
        3. Et pour demain… CSS 4
      4. Sélecteurs CSS 3
        1. Sélecteur adjacent général
        2. Sélecteur d’attribut
      5. Pseudo-classes et pseudo-éléments CSS 3
        1. :lang
        2. :empty
        3. :root
        4. :target
        5. :not
        6. :last-child
        7. :nth-child
        8. :nth-of-type
        9. :only-child
        10. :only-of-type
        11. :first-of-type et :last-of-type
        12. :enabled, :disabled et :checked
        13. :required et :optional
        14. :valid, :invalid
        15. ::selection
        16. :contains
        17. Exercice pratique : tableau de données
      6. Media Queries : requêtes de média CSS
        1. Syntaxe
        2. Opérateurs logiques
        3. Requêtes et préfixes
        4. Exercice pratique : s’adapter à la taille de l’écran
      7. CSS Transformations
        1. scale : fonction de zoom
        2. rotate : rotation
        3. skew, translate et matrix : déformations et translations
        4. Propriété raccourcie
      8. CSS Transitions
        1. Propriété à animer : transition-property
        2. Durée de l’animation : transition-duration
        3. Accélération
        4. Notation raccourcie : transition
        5. Propriétés compatibles
        6. Compatibilité et conclusion
        7. Exercice pratique : un menu de navigation avec transition
      9. CSS Animations
      10. Alternatives CSS 3 pour Internet Explorer
        1. Reconnaissance des propriétés CSS 3
        2. Reconnaissance des sélecteurs CSS 3
        3. Trousse à outils
  10. Troisième Partie: CSS et applications spécifiques
    1. Chapitre 9: CSS pour le Web mobile
      1. État des lieux
        1. Historique
        2. Statistiques d’usage mobile
        3. Navigateurs mobiles
        4. « Penser mobile »
        5. Philosophie de conception
      2. Détecter le terminal mobile
        1. Un consensus difficile
        2. Méthodes de détection
      3. Tester sur mobile
        1. Les émulateurs en ligne
        2. Les kits officiels à télécharger
      4. Adapter pour les mobiles
        1. Résolution native
        2. Le viewport
        3. Gérer la largeur d’un site mobile
      5. Media Queries et performances
      6. Particularités iPhone
        1. Une icône sur le bureau
        2. Supprimer la barre d’adresse
        3. Une image au démarrage
      7. Méthodologie et étude de cas concret
        1. Meta viewport
        2. Redimensionnement des éléments
        3. Empêcher les débordements
        4. Redéfinition des tailles de polices
        5. Une seule colonne
        6. Supprimer le superflu
        7. Optimisation de la navigation
        8. Réorganisation des contenus
        9. Message personnalisé
        10. HTML 5 pour les champs de formulaire
    2. Chapitre 10: CSS pour l’impression
      1. Pourquoi une feuille de styles pour l’impression ?
        1. L’avantage d’un périphérique « print »
        2. Caractéristiques du format papier
        3. Les unités spécifiques
      2. Gérer le support d’impression
        1. Détecter le périphérique
        2. Appliquer les styles CSS
        3. Limites des navigateurs
      3. Méthodologie générale
        1. Que faut-il imprimer ?
        2. Bonnes pratiques
        3. Tester avant l’impression
        4. Styles de base pour l’impression
      4. HTML 5, Internet Explorer et l’impression
      5. Aller plus loin
    3. Chapitre 11: CSS et les messageries
      1. Standards ? Connais pas !
      2. Client de courrier électronique ou webmail ?
        1. Les logiciels de messagerie courants
        2. Les webmails habituels
        3. Lacunes des clients de messagerie
      3. Le marché des clients de messagerie
        1. Un peu de statistiques
        2. Quelle est votre cible ?
      4. Les bonnes pratiques du publipostage (e-mailing)
        1. Quelle largeur ?
        2. Images
        3. Flash et JavaScript
        4. Désinscription
        5. Encodage des caractères
        6. Testez !
      5. Méthodologie générale
        1. Étape 1 : retour aux tableaux de mise en page
        2. Étape 2 : styler avec parcimonie
        3. Astuce : utiliser des gabarits
        4. Outils pour le créateur de courriels
    4. Chapitre 12: Et les autres périphériques ?
      1. Speech : périphériques de restitution vocale
        1. Un environnement critiqué
        2. Quelques propriétés de speech
        3. Prise en charge de speech
      2. Projection : restitution sur grand écran
        1. Quel usage ?
        2. Compatibilité
      3. TV : environnements télévisuels
        1. Compatibilité
        2. Le format télévisuel
        3. Le navigateur Opera sur Wii
  11. Annexes
    1. Annexe A: Liste de toutes les propriétés CSS (CSS 1, CSS 2, CSS 3)
    2. Annexe B: Prise en charge de HTML 5 et CSS 3
    3. Annexe C: Ressources
      1. Événements et conférences
      2. Ressources en lignes
        1. Ressources francophones
        2. Ressources anglophones
        3. Comptes Twitter
      3. Livres
        1. CSS, CSS 3
        2. HTML, HTML 5
        3. Web mobile
  12. Index

Product information

  • Title: CSS avancées
  • Author(s): Raphaël Goetter
  • Release date: February 2012
  • Publisher(s): Eyrolles
  • ISBN: 9782212134056