CSS avancées

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