CSS3
Pratique du design web
Hugo Giraudel
Raphaël Goetter
Eyrolles
Avant-propos1
CSS, un langage en perpétuelle évolution
1
Pourquoi cet ouvrage ?
1
À qui s'adresse cet ouvrage ?
2
La structure de l'ouvrage
2
Compléments vidéo à consulter en ligne
3
Remerciements
4
Chapitre 1
L'état actuel du W3C et des standards CSS5
Une évolution implacable
5
Un tour d'horizon des navigateurs d'aujourd'hui
7
L'état actuel des standards
8
L'aventure des préfixes constructeurs
9
La standardisation des CSS
11
Étape 1. Trouver une idée12
Étape 2. Editor's Draft (ED)12
Étape 3. Working Draft (WD)12
Étape 4. Candidate Recommendation (CR)12
Étape 5. Recommendation (REC)13
Chapitre 2
Les sélecteurs : l'accès au DOM15
Les opérateurs
15
Opérateur d'adjacence directe (CSS 2)16
Compatibilité des navigateurs pour l'opération d'adjacence directe
16
Opérateur d'adjacence générale17
Compatibilité des navigateurs pour l'opération d'adjacence générale
18
Les sélecteurs d'attribut
18
Sélecteur d'attribut simple (CSS 2)18
Compatibilité des navigateurs pour les sélecteurs d'attribut
19
Sélecteur d'attribut modulé19
Attribut dont la valeur est comprise dans une liste séparée par des espaces avec [attr(...)« value »] (CSS 2)
20
Attribut dont la valeur est exacte ou démarre par une chaîne précédée du caractère - avec [attr|=« value »] (CSS 2)
20
Attribut dont la valeur débute par une chaîne avec [attr(...)=« value »]
21
Attribut dont la valeur termine par une chaîne avec [attr$=« value »]22
Attribut dont la valeur contient une chaîne avec [attr*=« value »]22
Les pseudo-classes de position
22
Premier et dernier enfant avec : first-child et :last-child23
Compatibilité des navigateurs pour :first-child
23
Compatibilité des navigateurs pour :last-child
24
Énièmes enfants avec :nth-chld et :nth-last-child24
Styler en fonction du nombre d'éléments dans le parent
28
Compatibilité des navigateurs pour :nth-child et :nth-last-child
30
Enfant unique avec :only-child30
Compatibilité des navigateurs pour :only-child
31
Propriétés *-of-type31
Compatibilité des navigateurs pour les pseudo-classes : *-of-type
32
Les pseudo-classes de contexte
32
Ciblage par ancre avec :target32
Les pseudo-classes de contexte
32
Ciblage par ancre avec :target32
Compatibilité des navigateurs pour :target
33
Éléments vides avec :empty et :blank33
Compatibilité des navigateurs pour :empty
34
Gestion de la langue avec :lang (CSS 2)35
Compatibilité des navigateurs pour :lang
35
Élément racine avec :root36
Compatibilité des navigateurs pour :root
36
Négation avec :not36
Compatibilité des navigateurs pour :not
37
Simplification des sélecteurs avec :matches37
Compatibilité des navigateurs pour :matches
39
Les pseudo-classes de formulaire
39
Focus avec :focus (en toute simplicité)39
Compatibilité des navigateurs pour :focus
40
État des champs de formulaire avec :enabled et :disabled40
Compatibilité des navigateurs pour :enabled et :disabled
41
Mode d'écriture avec :read-write et :read-only41
Compatibilité des navigateurs pour :read-write et :read-only
43
Validité des champs de formulaire avec :valid et :invalid43
Compatibilité des navigateurs pour :valid et :invalid
44
Statut des champs de formulaire avec :optional et :required45
Compatibilité des navigateurs pour :optional et :required
45
Précisions sur les checkboxes et les boutons radio avec :checked et :indeterminate45
Compatibilité des navigateurs pour :checked
47
Compatibilité des navigateurs pour :indeterminate
47
Valeur par défaut des boutons radio avec :default47
Compatibilité des navigateurs pour :default
48
Gestion de l'amplitude des champs de type number avec :in-range et :out-of-range49
Compatibilité des navigateurs pour :in-range et :out-of-range
49
Les pseudo-éléments
49
Évolution de la syntaxe50
Contrôle de la sélection du texte avec ::selection50
Compatibilité des navigateurs pour ::selection
51
Chapitre 3
Positionnement et layout : les nouvelles techniques de mise en page53
Le modèle de boîte : retour aux sources avec box-sizing
54
Cas pratique : simplifier les calculs de dimensions56
Compatibilité des navigateurs pour box-sizing57
Le multicolonne
58
Comment ça marche ?58
Syntaxe59
Largeur des colonnes avec column-width
59
Nombre de colonnes avec column-count
60
Déclaration raccourcie avec columns
61
Gestion de la gouttière avec column-gap
61
Séparation des colonnes avec column-rule
62
Interruption des colonnes avec break-*
63
Envahissement des colonnes avec column-span
64
Équilibrage des colonnes avec column-fill
65
Cas pratique : alléger une liste chargée66
Cas pratique : utiliser les colonnes comme grille66
Compatibilité des navigateurs pour le multicolonne69
Les modèles de boîtes flexibles avec Flexbox
70
Comment ça marche ?70
Syntaxe72
Initialisation avec display : flex | inline-flex
72
Direction générale avec flex-direction
72
Gestion des retours à la ligne avec flex-wrap
73
Déclaration raccourcie avec flex-flow
74
Justification avec justify-content
74
Alignement du contenu avec align-items
75
Répartition des lignes avec align-content
76
Gestion de l'ordre d'apparition avec order
76
Accroissement avec flex-grow
77
Rétrécissement avec flex-shrink
77
Dimensions par défaut avec flex-basis
78
Déclaration raccourcie avec flex
78
Alignement particulier avec align-self
79
Cas pratique : un menu responsive79
Cas pratique : un layout mobile first81
Cas pratique : centrage absolu83
Cas pratique : un formulaire fluide84
Compatibilité des navigateurs pour Flexbox85
Mettre en place une solution pour tous les navigateurs
86
Un préprocesseur pour simplifier les préfixes (Sass)
86
Le Grid Layout
87
Comment ça marche ?88
Une introduction par l'exemple89
Initialiser une grille92
Définir la grille93
Simplifier les définitions avec la fonction repeat()
94
Fractions de l'espace restant avec l'unité fr
94
Nommage95
Nommer les lignes
95
Nommer les zones
96
Placer les éléments97
Le placement avec grid-row-start, grid-row-end, grid-column-start et grid-column-end
98
Le positionnement simplifié avec grid-row et grid-column
101
Le positionnement encore plus simplifié avec grid-area
101
Placement automatique des éléments avec grid-auto-flow102
Gestion des erreurs de placement103
Le terme subgrid103
Cas pratique : réaliser une galerie d'images104
Simplifier les choses avec un préprocesseur (Sass)
107
Cas pratique : créer un layout simple108
Compatibilité des navigateurs pour Grid Layout111
La position « sticky »
111
Cas pratique : un header fixe112
Compatibilité des navigateurs pour position : sticky112
Une solution de repli en JavaScript112
Les régions
113
Terminologie113
Comment ça marche ?114
Injecter du contenu dans un flux114
Réclamer le contenu d'un flux115
Gérer la fin d'un flux115
Quelques informations complémentaires116
Boucles infinies
116
Arborescence HTML spécifique
116
Cas pratique : une gestion des encarts publicitaires différente selon la taille de l'écran117
Comptabilité des navigateurs pour les régions CSS120
Les masques de forme en CSS
121
Comment ça marche ?122
Zone de flottement122
Formes de base122
circle
122
ellipse
123
inset
123
polygon
124
Syntaxe124
Déclaration d'une forme avec shape-outside
125
Seuil d'opacité avec shape-image-threshold
125
Marge avec shape-margin
125
Cas pratique : une bio avec un avatar circulaire126
Compatibilité des navigateurs pour les masques de forme127
Chapitre 4
Interfaces graphiques et amélioration visuelle129
Des couleurs plus colorées
130
De nouvelles couleurs130
La notation rgba130
Compatibilité des navigateur pour rgba
131
La notation hsla131
Compatibilité des navigateurs pour hsla
133
L'opacité
133
opacity et l'héritage134
opacity et les contextes d'empilement135
Compatibilité des navigateurs pour opacity135
Émuler le support sur Internet Explorer grâce aux filtres propriétaires de Microsoft136
Des bords arrondis en CSS
137
La version simple137
Dissocier les axes X et Y139
Bordures et bords arrondis142
Compatibilité des navigateurs pour border-radius143
Des ombres avec box-shadow
144
À propos des performances146
Cas pratique : donner du sens aux interfaces147
Compatibilité des navigateurs pour box-shadow149
Des ombres de texte avec text-shadow
149
Compatibilité des navigateurs pour text-shadow151
Des dégradés
151
Syntaxe151
Dégradés linéaires
152
Dégradés radiaux
153
Les dégradés au quotidien155
Compatibilité des navigateurs pour les dégradés155
Un meilleur contrôle des arrière-plans
157
Plusieurs arrière-plans sur un même élément157
Compatibilité des navigateurs pour les arrière-plans multiples
158
De nouvelles valeurs pour background-repeat159
Cas pratique : placeholders dans une galerie d'images
159
Compatibilité des navigateurs pour background-repeat : space et background-repeat : round
160
De nouvelles valeurs pour background-size161
Compatibilité des navigateurs pour background-size : cover et background-size : contain
162
Émuler le support sur Internet Explorer grâce aux filtres propriétaires de Microsoft
162
Un nouveau système de valeurs pour background-position163
Compatibilité des navigateurs pour le nouveau système de background-position
164
Origine d'arrière-plan avec backgrond-origin164
Compatibilité des navigateurs pour background-origin
165
Fixation de l'arrière-plan avec background-attachment : local165
Cas pratique : effet d'ombre sur un élément scrollable
166
Compatibilité des navigateurs pour background-attachment : local
167
Zone d'arrière-plan avec background-clip167
Cas pratique : pop-up et bordure semi-transparente
168
Compatibilité des navigateurs pour background-clip
169
Les filtres CSS
170
Comment fonctionnent-ils ?170
Syntaxe170
blur
171
brightness
172
contrast
172
drop-shadow
173
grayscale
174
hue-rotate
175
invert
175
opacity
176
saturate
176
sepia
177
Cas pratique : différents coloris d'image177
Compatibilité des navigateurs pour les filtres CSS179
Pointer-events
179
Cas pratique : améliorer les performances durant le scroll180
Compatibilité des navigateurs pour les pointer-events181
Des images comme bordures
181
Comment ça marche ?181
Syntaxe182
border-image-source
182
border-image-slice
182
border-image-width
183
border-image-outset
183
border-image-repeat
183
Compatibilité des navigateurs pour border-image184
Chapitre 5
De nouvelles unités et valeurs185
Le Saint-Graal des calculs : calc
186
À propos de la syntaxe186
Pourquoi pas un préprocesseur ?186
Cas pratique : utiliser calc pour le layout187
Cas pratique : position de l'arrière-plan187
Cas pratique : centrage absolu188
Compatibilité des navigateurs pour calc189
Root em : l'évolution de l'unité em
189
Pourquoi rem et pas simplement em ?190
Cas pratique : une grille typographique191
Compatibilité des navigateurs pour l'unité rem193
Une solution de repli avec un préprosseur (Sass)
193
Démystification : à propos de 62.5 %194
Une unité pour la largeur d'un caractère : ch
196
Compatibilité des navigateurs pour l'unité ch197
Les unités relatives au viewport
197
Pourcentage de la largeur/hauteur avec vw et vh197
Cas pratique : limiter la hauteur des images à la hauteur du viewport
198
Cas pratique : typographie responsive
198
Cas pratique : typographie responsive et rem
200
Cas pratique : conserver un ratio relatif au viewport
200
Compatibilité des navigateurs pour les unités vw et vh
202
Pourcentage de la largeur/hauteur avec vmin et vmax203
Cas pratique : ratio 16:9 occupant toute la largeur du viewport
203
Compatibilité des navigateurs pour les unités vmin et vmax
204
Les dimensions intrinsèques
204
Largeur minimale avec min-content204
Cas pratique : figure dimensionnée selon la largeur de l'image
204
Largeur maximale avec max-content206
Comportement de type block avec fill206
Largeur optimale avec fit-content207
Cas pratique : liste centrée mais dimensionnée selon son contenu
207
Compatibilité des navigateurs pour les dimensions intrinsèques208
Faciliter l'utilisation des valeurs intrinsèques avec un préprocesseur (Sass)
208
Chapitre 6
Contrôle du texte211
La gestion des débordements avec ovrflow-wrap
212
Compatibilité des navigateurs pour overflow-wrap212
La gestion des espaces avec white-space
213
Cas pratique : affichage de code214
Compatibilité des navigateurs pour white-space216
Les débordements de texte et text-overflow
217
Cas pratique : des lignes de tableau de même hauteur218
Compatibilité des navigateurs pour text-overflow221
Les césures hyphens
221
Syntaxe222
none
222
manual (valeur initiale)
222
auto
223
Compatibilité des navigateurs pour hyphens223
Les césures agressives avec word-break
224
Compatibilité des navigateurs pour word-break225
La gestion des tabulations avec tab-size
225
Compatibilité des navigateurs pour tab-size226
Une ponctuation plus élégante avec hanging-punctuation
226
Compatibilité des navigateurs pour hanging-punctuation228
De meilleurs alignements avec text-align-last
228
Compatibilité des navigateurs pour text-align-last229
La restriction de caractères avec unicode-range
229
Cas pratique : embellir les esperluettes232
Compatibilité des navigateurs pour unicode-range234
Cas pratique : des blocs de code qui donnent envie
235
Chapitre 7
Variables natives237
Comment ça marche ?
238
La syntaxe
238
Les variables invalides
239
Les valeurs de recours en cas d'invalidité
240
Cas particuliers et clarifications
241
Variables qui se référencent mutuellement241
Propriété all et propriétés personnalisées241
Animations242
La compatibilité des navigateurs pour les variables natives
242
Chapitre 8
Styles conditionnels243
Feature Queries
243
De la notion de « support »244
Syntaxe245
API JavaScript246
@supports et préfixes constructeurs247
Cas pratique : header fixe à compter d'une certaine position avec position : sticky248
Cas pratique : carrousel de Bootstrap 3248
Compatibilité des navigateurs pour les Feature Queries250
Media Queries
250
Syntaxe251
Conjonction
251
Condition
252
Négation
252
Restriction
252
Que peut-on détecter ?252
Les dimensions : width et height
252
L'orientation de l'appareil
253
Le ration hauteur/largeur de l'écran
253
La résolution de l'écran
254
Futur : davantage de contrôle255
Présence de JavaScript
255
Luminosité ambiante
256
Système de pointage
257
Capacité de survol
258
Fréquence de mise à jour
259
Gestion des débordements
260
Futur : Media Queries et variables260
Cas pratique : le design Mobile First261
Comptabilité des navigateurs pour les Media Queries262
Chapitre 9
Transformations : un nouveau monde en 2D et en 3D263
À quoi servent les transformations CSS ?
264
Les transformations 2D
265
Rotation265
Cas pratique : réaliser des flèches
267
Émulation de rotation avec les filtres propriétaires
269
Conversion d'angle avec un préprocesseur (Sass)
269
Translation270
À propos des offsets
271
Cas pratique : centrage absolu
271
Mise à l'échelle272
Cas pratique : agrandissement au survol
273
Émulation de mise à l'échelle avec zoom sur Internet Explorer 8
273
Bug d'Android 2.3
274
Inclinaison274
Cas pratique : un menu incliné
275
matrix276
Comptabilité des navigateurs pour les transformations 2D277
L'origine de transformation
277
Tester et débugger transform-origin278
L'ordre des transformations
179
Les transformations 3D
281
Compatibilité des navigateurs pour les transformations 3D282
Environnement 3D avec perspective282
Origine de perspective284
En résumé284
Contexte et transform-style284
Notion de faces avec backface-visibility285
Cas pratique : effet card flip
285
Chapitre 10
Animations et transitions : pour des interfaces moins statiques289
À quoi servent les animations ?
290
Animation ou transition ?
291
À propos de l'accélération matérielle
292
Compatibilité des navigateurs pour will-change
293
JavaScript ou CSS ?
294
Les transitions
295
« Quoi ? » avec transition-property296
« Comment ? » avec transition-timing-function296
« Combien de temps ? » avec transition-duration299
« Quand ? » avec transition-delay300
Utilisation301
Quelques informations complémentaires301
Cas pratique : une sidebar plus légère302
Cas pratique : changement de vue sur mobile304
Cas pratique : animation d'une pop-up307
Compatibilité des navigateurs pour les transitions309
Transitions et pseudo-éléments
309
Les animations
310
« Quoi ? » avec animation-name311
« Comment ? » avec animation-timing-function311
« Combien de temps ? » avec animation-duration312
« Combien de fois ? » avec animation-iteration-count313
« Dans quel sens ? » avec animation-direction313
« Quel état ? » avec animation-play-state314
« Quand ? » avec animation-delay315
« Quel impact ? » avec animation-fill-mode315
La définition d'une animation : @keyframes316
Animations et performance317
Cas pratique : animation d'un loader318
Cas pratique : animation d'un carrousel319
Cas pratique : animation de l'affichage d'une galerie d'images323
Faciliter la génération des styles avec un préprocesseur (Sass)
324
Cas pratique : animations comme feedbacks324
Cas pratique : mise en place d'un système anti-spoiler327
Compatibilité des navigateurs pour les animations334
Annexe A
Liste des propriétés CSS et de leur valeur par défaut335
Annexe B
Liste des propriétés CSS qui peuvent être animées341
Notes344
Ce que l'on aimerait pouvoir animer344
Annexe C
Ressources et liens345
Sites francophones345
Sites anglophones346
Newsletters347
Comptes Twitter347
Bibliographie348
Index349