• Aide
  • Eurêkoi Eurêkoi

Livre

CSS3 : pratique du design web

Résumé

Pour tout savoir sur les modules CSS en vue de réaliser des sites et des applications web performants, avec des informations sur les nouvelles techniques de mise en page, les interfaces graphiques, les variables natives, les animations et transitions, sans oublier les styles conditionnels.


  • Autre(s) auteur(s)
  • Contributeur(s)
  • Éditeur(s)
  • Date
    • DL 2019
  • Notes
    • CSS = Cascading style sheets (feuilles de style en cascade)
    • La couv. porte en plus : "Bonus en ligne, 1 heure de formation vidéo pour : apprendre à créer une feuille de styles de A à Z, débugger votre feuille de styles"
  • Langues
    • Français
  • Description matérielle
    • 1 vol. (XVIII-353 p.) : ill. en coul. ; 23 cm
  • Collections
  • Sujet(s)
  • ISBN
    • 978-2-212-67896-3
  • Indice
  • Quatrième de couverture
    • Vingt ans après sa conception, le langage CSS n'en est plus à ses balbutiements et n'est plus optionnel en ce qui concerne la conception web moderne. Sans le moindre concurrent en vue, CSS a encore de belles années devant lui. Et pour cause, il est toujours en perpétuelle évolution !

      Ce livre n'a pas pour prétention d'être le guide ultime de l'intégrateur dans la mesure où il ne reprend pas les bases. Il offre simplement une mise à niveau en levant le voile sur tous les modules CSS, afin d'offrir dès aujourd'hui les connaissances nécessaires à la réalisation de sites et d'applications web. En effet, les enjeux comme les objectifs ne sont plus les mêmes qu'il y a quelques années, aussi est-il important que les intégrateurs, designers et développeurs s'arment face aux nouvelles problématiques que sont le Responsive Web Design, le rétrécissement de l'écart entre le Web et le natif, et la course à la performance.

      Qu'il s'agisse de mise en page avec Flexbox ou Grid Layout, d'embellissement des interfaces, d'élaboration d'animations ou même de design fluide avec les Media Queries, vous devriez être capable de maîtriser tous ces sujets au sortir de votre lecture. Au-delà de l'aspect purement didactique de l'ouvrage, vous trouverez un grand nombre d'exemples et de mises en pratique, ainsi que tout ce que vous devez savoir vis-à-vis du support des fonctionnalités par les navigateurs. Pour finir, vous découvrirez dans les annexes la liste des valeurs par défaut des propriétés CSS, celle des propriétés que l'on peut animer et une bibliographie pour aller plus loin.


  • Tables des matières
      • 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

  • Origine de la notice:
    • BPI
  • Disponible - 681.229 GIR

    Niveau 3 - Informatique