CSS 3 Flexbox : plongez dans les CSS modernes

Auteur(s) :

Goetter, Raphaël Découvrir l'auteur

Résumé

Initiation à la conception des designs en CSS grâce au module de positionnement Flexbox.

Éditeur(s)
- Eyrolles
Date
- DL 2016
Langues
- Français
Description matérielle
- 1 vol. (XVIII-134 p.) : ill. en coul.; ; 23 cm
Collections
- Design web
Sujet(s)
- Feuilles de style en cascade
- Sites Web -- Développement
ISBN
- 978-2-212-14363-8
Indice
- 681.226 HTML, CSS, XML, XSLT
Quatrième de couverture
- CSS 3 Flexbox
  Flexbox est en passe de révolutionner de manière profonde et pérenne notre façon de concevoir des designs et des composants en CSS. Pourquoi y consacrer un ouvrage ? Car, bien utilisé, Flexbox permet de faciliter la tâche de bon nombre de développeurs web.
  Un ouvrage de référence pour les webdesigners et intégrateurs
  « Flexible Box Layout Module », mieux connue sous le nom de « Flexbox », est une spécification CSS 3 du W3C qui définit un nouveau modèle de boîte et de positionnement jusqu'alors inédit. Il intègre une gestion naturelle de la fluidité des éléments et du Responsive, et rend caduc l'usage de grilles d'affichage complexes, voire de frameworks - véritables usines à gaz où l'on n'exploite qu'à peine 10 % de l'outil. Oubliez donc tout ce que vous aviez appris sur CSS et, comme moi, tombez amoureux de Flexbox !
  Outre la simplification des schémas de positionnement, Flexbox apporte des solutions parfaites à une problématique bien ancrée dans notre époque : le Responsive Webdesign. Le design d'éléments flexibles, la réorganisation des blocs ainsi que la faculté à basculer très aisément d'un mode d'affichage horizontal vers un mode vertical en font un allié formidable dans nos projets d'adaptation aux tablettes et smartphones.
  Une spécification CSS 3 novatrice
  Flexbox a été pensé et optimisé pour faire table rase de toutes les techniques bancales historiques de positionnement et des contournements de propriétés qui pullulent dans nos projets web. Les « anciennes » méthodes encore (mal) utilisées de nos jours pour aligner ou placer des éléments ne sont souvent rien d'autre que du bricolage empirique : « tiens, à quoi peut bien servir ce position : relative ? », « pas grave, je mets une classe .clearfix partout ! », « oh ! mais pourquoi ça ne veut pas rentrer ? », etc.
  Flexbox est conçu pour mettre de l'ordre dans tout ce maelström de bidouilles et revenir enfin aux bases d'un positionnement propre et adapté aux besoins actuels. Cet ouvrage vous permettra de découvrir et de tirer parti de toutes les nouveautés apportées par cette spécification CSS 3, notamment à travers six travaux pratiques...
  À qui s'adresse cet ouvrage ?
  ¤ Aux webdesigners et intégrateurs avancés ou experts qui souhaitent appréhender et maîtriser en production ce nouveau modèle de positionnement excitant.
  ¤ Aux développeurs et chefs de projet web soucieux de découvrir les rouages d'une technologie qui facilitera assurément la vie de leurs projets.
  ¤ À quiconque est impatient de laisser tomber toutes les bidouilles ancestrales de CSS et d'ouvrir ses horizons à des modèles bien plus intuitifs.
Tables des matières
- - CSS 3
  - Flexbox
  - Plongez dans les CSS modernes
  - Raphaël Goetter
  - Eyrolles
  - Chapitre 1
    Une Brève histoire de Flexbox1
  - Une popularité grandissante 3
  - Un usage en production3
  - Sites internationaux5
  - Sites français5
  - Chapitre 2
    Les bases du design avec Flexbox7
  - flex-container et flex-item 8
  - Propriétés sur le parent8
  - display 8
  - flex-direction 8
  - flex-wrap 10
  - flex-flow 11
  - justify-content 12
  - align-items 13
  - align-content 14
  - Propriétés sur les enfants15
  - order 15
  - align-self 16
  - flex-grow 17
  - flex-shrink 17
  - flex-basis 18
  - flex 19
  - Chapitre 3
    TP : réordonner des éléments21
  - Le code HTML 22
  - Une mission pour order ! 23
  - Les Media Queries en action 24
  - Limitations 24
  - N'en abusez pas ! 24
  - Chapitre 4
    Trois astuces utiles27
  - Occuper l'espace restant 27
  - Centrer verticalement 29
  - Pousser un élément 30
  - Chapitre 5
    TP : une navigation Responsive33
  - Le code HTML 34
  - Titre complet ou initiales ? 34
  - Écrans de smartphones 35
  - Grands écrans 36
  - Astuce : réordonner les éléments 37
  - Écrans de taille moyenne (tablettes) 37
  - Le truc en plus : la « variable » currentColor 38
  - Chapitre 6
    TP : un gabarit simple41
  - La structure HTML 42
  - Étape 1 : occuper toute la hauteur 43
  - Étape 2 : pied en bas de page 44
  - Étape 3 : navigation, aside et contenu principal 45
  - Étape 4 : le contenu en premier 46
  - C'est Responsive, ma bonne dame ! 46
  - Chapitre 7
    TP : une galerie d'images49
  - Le code HTML 50
  - Répartition horizontale 51
  - Explications51
  - Limitations52
  - Répartition verticale 53
  - Explications53
  - Limitations54
  - Object-fit à la rescousse 55
  - Explications56
  - Le truc en plus : object-position56
  - Limitations57
  - Effets au survol et focus57
  - Chapitre 8
    Les principes fondamentaux59
  - Les trois principes fondamentaux de Flexbox 60
  - 1 - De l'apparente simplicité de Flexbox60
  - 2 - De l'apparente omnipotence de Flexbox60
  - 3 - De l'apparente stabilité de Flexbox60
  - Les cinq pense-bêtes de l'intégrateur 60
  - 1 - min-width et max-width sont prioritaires sur tout60
  - 2 - flex-wrap est prioritaire sur flex-shrink61
  - 3 - flex-shrink et flex-grow sont prioritaires sur flex-basis61
  - 4 - flex-basis est prioritaire sur width61
  - 5 - Dimensions minimales intrinsèques61
  - Récapitulatif des priorités62
  - Chapitre 9
    TP : un formulaire fluide63
  - Objectif à atteindre 64
  - Le code HTML 64
  - Étape 1 : les deux <div> de même hauteur 66
  - Étape 2 : les <input> de largeur restante 67
  - Étape 3 : le <textarea> de hauteur restante 67
  - Étape 4 : le bonus Responsive 68
  - Chapitre 10
    La propriété flex en détail71
  - Valeurs courantes de flex 71
  - Quelques mythes débusqués 72
  - Attention terrain glissant ! 73
  - L'espace restant 73
  - Calcul de flex-grow 74
  - La formule magique74
  - flex-grow n'est pas flex !75
  - Quelques exemples concrets75
  - Cas 1. Chaque enfant est doté de flex: 1 75
  - Cas 2. flex: 1 0 200px et flex: 1 0 400px 76
  - Cas 3. flex: 1 et flex-grow: 1 76
  - Cas 4. flex: 1 0 200px et width: 200px 76
  - Cas 5. Pas de flex et width : 200px 77
  - Calcul de flex-shrink 77
  - La formule magique77
  - Des ressources bien pratiques 78
  - Chapitre 11
    Modèles de design79
  - Répartition sur une ligne 80
  - Principe et objectif80
  - Code nécessaire80
  - Explications sommaires80
  - Une gouttière ?80
  - Question pour des champions comme vous81
  - Répartition en forçant le retour à la ligne 81
  - La solution min-width81
  - La solution width82
  - Marges et gouttières82
  - Le truc en plus : calc()83
  - Automatiser en production83
  - Répartition automatique (Autoflow) 84
  - Principe et objectif84
  - Code nécessaire84
  - Explications sommaires85
  - Limitations de cette technique85
  - L'astuce en plus86
  - Chapitre 12
    TP : construction de grilles87
  - Principes généraux 87
  - Des grilles, des grilles, des grilles 88
  - Frameworks CSS88
  - Grilles autonomes89
  - Les bases de la grille 89
  - Ébauche de grille en Flexbox 89
  - Gérer la gouttière 90
  - Variante avec : nth-child()91
  - Automatiser avec un préprocesseur 92
  - Bonus : éléments double ou triple taille 93
  - Bonus :« à la Une » 93
  - Bonus : pull et push 94
  - Grille Responsive 95
  - Résultat final 96
  - Chapitre 13
    Encore plus loin avec Flexbox99
  - Des propriétés non appliquées 9
  - Un contexte de formatage particulier 100
  - Des pseudo-éléments embarrassants 100
  - Largeur minimale intrinsèque 101
  - Flexbox et z-index 101
  - Flexbox et les espaces en pourcentage 102
  - Flexbox et les animations 103
  - Flexbox et accessibilité 103
  - Quelques astuces pratiques 104
  - Décoration de titre104
  - Points de conduite105
  - Tunnel d'achat105
  - Fenêtre modale107
  - Chapitre 14
    Performances et compatibilité109
  - Performances de Flexbox 109
  - Compatibilité des navigateurs 110
  - Statistiques d'usage en France et dans le monde111
  - Les outils et alternatives à Flexbox111
  - Modernizr 111
  - Autoprefixer 112
  - Les prépocesseurs 114
  - Les polyfills 114
  - Bogues connus et solutions 115
  - La valeur par défaut de flex a changé (IE 10)115
  - Bogue de min-height non appliqué (IE 10-IE 11)116
  - Propriété flex non reconnue sur des éléments inline (IE 10-IE 11)116
  - Pas de box-sizing sur flex-basis (IE 10-IE 11)117
  - Pas de calc() sur flex (IE 10-IE 11)118
  - max-width : 100% non appliqué sur les images ?118
  - Chapitre 15
    Flexbox contre Grid Layout ?119
  - Les limites de Flexbox ? 119
  - Grid Layout 120
  - Le positionnement par grille120
  - Les propriétés usuelles de Grid Layout121
  - Mise en oeuvre121
  - Exemple 1 (affichage de deux blocs sur une ligne) 121
  - Exemple 2 (grille de 4 emplacements) 122
  - Variante : la syntaxe de templates123
  - Exemple 3 (template) 123
  - Centrer les éléments123
  - Exemple 4 (centrage multiple) 124
  - Occuper plusieurs emplacements125
  - Exemple 5 (column span) 125
  - Et bien d'autres choses encore !126
  - Chapitre 16
    Ressources utiles127
  - Références 127
  - Tutoriels et articles 128
  - Vidéos 129
  - Conférences 129
  - Livres 129
  - Autres 129
  - Annexe
    Mémo des propriétés131
  - Index133
Origine de la notice:
- Electre