CSS avancées : Vers CSS3 et HTML5 2212128266, 9782212128260 [PDF]

Table of contents :
CSS avancées - Vers HTML 5 et CSS 3......Page 3
Table des matières......Page 9
Avant-propos......Page 21
Conventions utilisées dans ce livre......Page 22
À propos de l’auteur......Page 23
Alsacreations.com......Page 24
Alsacreations.fr......Page 25
Remerciements......Page 27
Les standards du Web, une longue mise en place......Page 29
Les usages évoluent......Page 31
Les normes évoluent......Page 32
Les navigateurs évoluent......Page 33
Internet Explorer 6......Page 34
Internet Explorer 7......Page 35
Internet Explorer 8......Page 36
Internet Explorer 9......Page 38
Dégradation gracieuse......Page 39
Prise en charge progressive......Page 40
Première partie - Tirer le meilleur de CSS......Page 43
Terminologie et syntaxe de base......Page 45
Propriété, valeur et déclaration......Page 46
Sélecteur......Page 47
Sélecteur d’identifiant......Page 48
L’exception :visited......Page 49
Influence sur les sélecteurs......Page 50
Poids des sélecteurs......Page 51
!important......Page 52
Sélecteur d’enfant......Page 53
Sélecteur de frère adjacent......Page 55
Sélecteur d’attribut......Page 56
:first-letter et :first-line......Page 57
:focus......Page 58
:before et :after......Page 59
Règles @......Page 62
Définition et usage......Page 65
Qui en tient compte ?......Page 66
Exercice pratique : contact d’entreprise......Page 67
Questions......Page 68
Réponses......Page 69
Bien gérer un projet CSS......Page 71
Un code pertinent et réutilisable......Page 72
Ordre des déclarations......Page 73
Commentaires « utiles »......Page 74
Gérer les versions......Page 77
Appliquer un Reset CSS......Page 78
Performances des sélecteurs......Page 81
Utiliser les sprites CSS......Page 83
Optimiser les feuilles de styles......Page 84
Extensions pour navigateurs......Page 86
IETester......Page 89
Grilles de mise en page......Page 90
Frameworks CSS......Page 92
Zen Coding......Page 93
Étendre le langage CSS : Less......Page 96
Exploiter son éditeur HTML......Page 97
Checklist générale......Page 99
Entre tableaux, cadres et calques......Page 101
Flottement et retour à la « sémantique »......Page 102
Anatomie d’une boîte......Page 103
Dimensions des éléments......Page 104
Minima et maxima......Page 105
Le mode Quirks de Microsoft......Page 106
Exercice pratique : centrer horizontalement en CSS......Page 108
Fusion de marges......Page 109
Le rendu des éléments......Page 112
Le flux......Page 114
Sortir du flux......Page 115
À quel saint se vouer ?......Page 116
Un mode de rendu particulier......Page 117
Étirer un élément......Page 118
Positionnement fixé......Page 120
Positionnement relatif......Page 121
Un positionnement à part......Page 122
Des blocs côte à côte......Page 123
La propriété clear......Page 125
Quiz sur le positionnement flottant......Page 126
Exercice pratique : dépassement de flottants......Page 128
Cumuler les schémas de positionnement......Page 129
Réponses......Page 130
5 - Positionnement avancé......Page 133
display: inline-block......Page 134
Particularités pour IE6 et IE7......Page 135
Alignement vertical......Page 136
Caractères invisibles (whitespace)......Page 138
Exercice pratique : dimensionner des liens horizontaux......Page 140
Un rendu de tableau en CSS......Page 142
table, table-cell et table-row......Page 144
Particularités du modèle tabulaire......Page 146
Propriétés spécifiques aux tableaux......Page 152
Alternative pour IE6 et IE7......Page 155
Exercice pratique : hauteurs fluides......Page 157
Positionnement à l’aide de gabarits (template positioning)......Page 159
Le modèle de boîte flexible......Page 162
Empilement vertical ou horizontal......Page 163
Ordre d’empilement......Page 164
Flexibilité : remplir l’espace......Page 165
Exercice pratique : centrer et réordonner des éléments......Page 166
Revue des différents schémas de positionnement......Page 169
Outils de vérification......Page 171
Et si ce n’était pas une erreur ?......Page 172
Exemples de hacks......Page 173
Hacks à méditer ?......Page 174
Cibler les navigateurs récents à l’aide de sélecteurs avancés......Page 175
Fonctionnement......Page 176
Usage pratique......Page 177
Classe conditionnelle pour Internet Explorer......Page 178
Avoir le Layout......Page 179
Donner et ôter le Layout......Page 180
Du Layout et des erreurs......Page 181
Petite méthodologie de résolution d’erreurs......Page 183
Isoler l’élément......Page 184
Corriger l’erreur......Page 185
Deuxième partie - HTML 5 et CSS 3 : l'innovation en marche......Page 189
Pourquoi HTML 5 ?......Page 191
Un Doctype simplifié......Page 192
Une syntaxe permissive......Page 193
......Page 194
......Page 195
Exercice pratique : utiliser les nouveaux éléments......Page 196
......Page 198
......Page 200
......Page 202
email, url, tel, number, color.........Page 206
range......Page 208
search......Page 209
autofocus......Page 210
required......Page 211
Exercice pratique : attributs des formulaires......Page 212
hidden......Page 216
Attributs personnalisés......Page 217
De nouvelles applications......Page 218
Stockage des données : Web Storage......Page 219
Web Socket et Web Workers......Page 220
Exercice pratique : ma liste de courses......Page 221
Vers un HTML5 « transitionnel » ?......Page 223
État de la norme CSS 3......Page 225
En attendant la norme : les préfixes propriétaires......Page 226
Propriétés CSS 3......Page 227
Propriétés CSS 3 liées au contenu......Page 228
Propriétés CSS 3 décoratives......Page 237
Sélecteurs CSS 3......Page 256
Sélecteur d’attribut......Page 257
:lang......Page 259
:root......Page 260
:target......Page 261
:nth-child......Page 262
:only-child......Page 264
:first-of-type et :last-of-type......Page 265
:required et :optional......Page 266
:contains......Page 267
Exercice pratique : tableau de données......Page 268
Syntaxe......Page 272
Requêtes et préfixes......Page 273
Exercice pratique : s’adapter à la taille de l’écran......Page 274
scale : fonction de zoom......Page 276
rotate : rotation......Page 277
skew, translate et matrix : déformations et translations......Page 278
CSS Transitions......Page 279
Durée de l’animation : transition-duration......Page 280
Propriétés compatibles......Page 281
Exercice pratique : un menu de navigation avec transition......Page 283
CSS Animations......Page 285
Alternatives CSS 3 pour Internet Explorer......Page 286
Reconnaissance des propriétés CSS 3......Page 287
Reconnaissance des sélecteurs CSS 3......Page 288
Trousse à outils......Page 289
Troisième partie - CSS et applications spécifiques......Page 291
Historique......Page 293
Statistiques d’usage mobile......Page 294
Navigateurs mobiles......Page 295
Philosophie de conception......Page 299
Un consensus difficile......Page 300
Méthodes de détection......Page 301
Tester sur mobile......Page 304
Les émulateurs en ligne......Page 305
Résolution native......Page 306
Le viewport......Page 307
Gérer la largeur d’un site mobile......Page 310
Media Queries et performances......Page 314
Méthodologie et étude de cas concret......Page 315
Redimensionnement des éléments......Page 318
Redéfinition des tailles de polices......Page 319
Optimisation de la navigation......Page 320
Réorganisation des contenus......Page 321
HTML 5 pour les champs de formulaire......Page 322
L’avantage d’un périphérique « print »......Page 323
Caractéristiques du format papier......Page 324
Détecter le périphérique......Page 325
Limites des navigateurs......Page 327
Que faut-il imprimer ?......Page 330
Bonnes pratiques......Page 332
Tester avant l’impression......Page 335
Styles de base pour l’impression......Page 336
HTML 5, Internet Explorer et l’impression......Page 337
Aller plus loin…......Page 338
Standards ? Connais pas !......Page 339
Les logiciels de messagerie courants......Page 340
Les webmails habituels......Page 342
Un peu de statistiques......Page 344
Quelle largeur ?......Page 345
Images......Page 346
Désinscription......Page 347
Étape 1 : retour aux tableaux de mise en page......Page 348
Étape 2 : styler avec parcimonie......Page 351
Astuce : utiliser des gabarits......Page 352
Outils pour le créateur de courriels......Page 353
12 - Et les autres périphériques ?......Page 355
Un environnement critiqué......Page 356
Prise en charge de speech......Page 357
Quel usage ?......Page 358
Le format télévisuel......Page 359
Le navigateur Opera sur Wii......Page 360
Annexes......Page 361
A - Liste de toutes les propriétés CSS (CSS 1, CSS 2, CSS 3)......Page 363
B - Prise en charge......Page 373
Événements et conférences......Page 381
Ressources francophones......Page 383
Ressources anglophones......Page 387
CSS, CSS 3......Page 392
Web mobile......Page 393
A......Page 395
F......Page 396
O......Page 397
T......Page 398
Z......Page 399