Nouveautés CSS3. Formation présenté lors de l'événement ConFoo 2012

1. CSS3 - Nouveautés
28 février 2012 - Rémy Savard

2. CSS3
• Exemples
• Introduction
• Avantages
• Modules
• Stratégie

3. CSS3
• HTML5 Logo
• madmanimation
• Shaun the Sheep
• Our Solar System
• Gabriel Sharp's Small Planet
• CSS3 Ads Versus Flash Ads

4. CSS3
1996
• 1ère spécification CSS à devenir une
Recommandation W3C Officiel, CSS 1
1997
• Création de CSS 2
• Le W3C ne maintient plus CSS 1

5. CSS3
1998
• CSS 2 devient une recommandation
• CSS 2.1 = CSS 2 - fonctionnalités
• Développement de la spécification
CSS 3
• Le W3C ne maintient plus la
recommandation CSS 2

6. CSS3
1999
Le 1er working draft CSS 3 est publié

7. CSS3
1999
Le 1er working draft CSS 3 est publié

8. CSS3
2005
• CSS 2.1 Candidate Recommendation
à Working Draft
• CSS 2.1 devient Candidate
Recommendation
• CSS 2.1 est renversé à Working Draft

9. CSS3
2007
• CSS 2.1 devient Candidate
Recommendation
2009
• CSS 2.1 est mis à jour 2 fois

10. CSS3
2010
• CSS 2.1 est renversé à Working Draft
2011
• CSS 2.1 W3C Proposed
Recommendation
• CSS 3 = Chaque module est
indépendant

11. CSS3
"1, 675 techniques ultimes qui vont vous permettre
de devenir un ninja du CSS"

12. CSS3
"Problèmes = Solutions documentés, workarounds
pour navigateurs, groupes de supports, partages de
techniques, etc."

13. CSS3

14. /* http://meyerweb.com/eric/tools/css/
reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object,
iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
pre,
a, abbr, acronym, address, big, cite,
code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr,
th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
http://www.flickr.com/photos/aquan/2780541892/

15. CSS3
• Multiplateforme
• Accessible
• Sémantique
• Optimisé
• Standard

16. CSS3
Graceful degradation
• Navigateurs modernes = Prioritaires
avec tests sur les versions précédentes
des principaux
• Anciens navigateurs = expérience
passable + petits fixes

17. CSS3
Progressive enhancement
• Focus sur le contenu, ≠ navigateurs
• CSS2 et un peu de CSS3
• Bloque le notre potentiel créatif

18. CSS3
Hardboiled
• Aucuns compromis, meilleur
expérience Web possible
• Expérience selon les capacités du
navigateur (CSS3)
• Design différent pour les navigateurs

19. CSS3
Do websites need to be
experienced exactly the same
in every browser
http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

20. CSS3

21. Avantages

22. Délais
Avantages

23. Délais
Avantages
Coûts

24. Qualité Délais
Avantages
Coûts

25. Avantages

26. Avantages
1. linear-gradient
2. border-radius
3. radial-gradient
4. text-shadow
5. box-shadow avec
RGBa
Trent Walton - CSS3 vs. CSS: A Speed Benchmark

27. Avantages
Développement
CSS = 73 minutes CSS3 = 39 minutes
Trent Walton - CSS3 vs. CSS: A Speed Benchmark

28. Avantages
Développement
CSS = 73 minutes CSS3 = 39 minutes
33% plus rapide
Trent Walton - CSS3 vs. CSS: A Speed Benchmark

29. Avantages
Poids
CSS = 849.2 KB CSS3 = 769. KB
Trent Walton - CSS3 vs. CSS: A Speed Benchmark

30. Avantages
Poids
CSS = 849.2 KB CSS3 = 769. KB
9,5% plus léger
Trent Walton - CSS3 vs. CSS: A Speed Benchmark

31. Avantages
Requêtes
CSS = 22 requêtes CSS3 = 12 requêtes
Trent Walton - CSS3 vs. CSS: A Speed Benchmark

32. Avantages
Requêtes
CSS = 22 requêtes CSS3 = 12 requêtes
45% moins
Trent Walton - CSS3 vs. CSS: A Speed Benchmark

33. Avantages

34. Modules CSS3

35. Modules
"Rather than attempting to shove dozens of updates
into a single monolithic specification, it will be
much easier and more efficient to be able to update
individual pieces of the specification. Modules will
enable CSS to be updated in a more timely and
precise fashion, thus allowing for a more flexible
and timely evolution of the specification as a
whole."
W3C - http://www.w3.org/TR/css3-roadmap/

36. Modules

37. CSS3 Colors
• RGB(A), HSL(A) et noms de couleurs
• ≠ propriété
• Nouveau modèle de couleurs
• Valeur RGB ou HSL avec
optionnellement l’opacité

38. CSS3 Colors

39. CSS3 Colors

40. CSS3 Opacity
• Opacité d’un élément de 0 à 1
• CSS3 Colors = 1 couleur
• CSS3 Opacity = 1 élément + enfants

41. CSS3 Opacity

42. CSS3 Opacity

43. CSS3 selectors
[att]
• Attribut att, peut importe la valeur
[att=val]
• Attribut att et la valeur exact val

44. CSS3 selectors
[att~=val]
• Attribut att avec des valeurs séparés
par des espaces, l’une d’elles doit être
val

45. CSS3 selectors
[att|=val]
• Attribut att et la valeur exact val ou
commençant par val et
immédiatement suivit de "-"
• Principalement pour les sous-code de
languages

46. CSS3 selectors
[att^=val]
• Attribut att et une valeur qui
commence par val
[att$=val]
• Attribut att et une valeur qui se
termine par val

47. CSS3 selectors
[att*=val]
• Attribut att et une valeur qui contient
au moins une instance de la substring
val

48. CSS3 selectors
:root
• Représente l’élément HTML

49. CSS3 selectors
:nth-child(N)
• L’argument "N" peut être un mot-clé,
un nombre ou une expression de
nombre sous la forme an+b
• Mots-clé: odd(2n+1) et even(2n)

50. CSS3 selectors
:nth-child(N)
• Si l’argument "N" est un nombre, il
représente la position ordinale de
l’élément sélectionné

51. CSS3 selectors
:nth-child(N)
• Si l’argument a la forme an+b
• "b" représente la position ordinale du
premier élément sélectionné
• "a" représente la position ordinale de
chaque éléments que nous voulons
sélectionné par la suite

52. CSS3 selectors
:nth-child(N)
• "a" et "b" peuvent êtres négatif

53. CSS3 selectors
:first-child
• Sélectionne le premier enfant du
parent de l’élément
:last-child
• Sélectionne le dernier enfant du
parent de l’élément

54. CSS3 selectors
:target
• URIs ce terminant par # et un
identifiant de fragement
• http://lab.simurai.com/stars/

55. CSS3 selectors
:lang
• Représente un sélecteur pour un
élément selon sa langue si elle est
spécifié

56. CSS3 selectors
:enabled
• Représente un élément de l’interface
usager (ex: input) qui est dans l’état
enabled

57. CSS3 selectors
:disabled
• Représente un élément de l’interface
usager (ex: input) qui est dans l’état
disabled

58. CSS3 selectors
:checked
• Éléments radio et checkbox choisis
• Lorsque ces élément sont choisi(on) la
pseudo-class :checked s’applique
• Bon aussi pour les éléments qui
peuvent avoir l’attribut "selected"

59. CSS3 selectors
::first-line
• Représente la première ligne formatté
d’un élément.

60. CSS3 selectors
::first-letter
• Première lettre d’un élément
• Utiliser pour donner du style
• 67 millions = 6

61. CSS3 selectors
::before et ::after
• Les pseudo-éléments ::before et ::after
peuvent êtres utilisés pour inséré du
contenu généré avant ou après le
contenu d’un élément

62. CSS3 selectors
::selection
• Change la couleur de background et
de texte des sélections
• http://css-tricks.com/examples/
DifferentSelectionColors/

63. CSS3 selectors
General sibling combinator (~)
• 2 séquences de sélecteurs séparés (~)
• Partagent le même parent
• L'élément représenté par la première
séquence précède (Pas nécessairement
immédiatement) l’élément représenté
par la deuxième séquence

64. CSS3 selectors
General sibling combinator (~)

65. CSS3 selectors
CSS3 Selectors Test

66. CSS3
Multiple backgrounds
• Images de background sur un élément
• Séparés par une virgule (,)
• Les navigateurs qui ne supportent pas
vont ignoré la règle, donc mettre une
déclaration simple avant
• La première image dans la liste est la
plus près de l’utilisateur

67. CSS3
Multiple backgrounds

68. CSS3
Multiple backgrounds

69. CSS3 Background-clip
• Spécifie la zone de peinture de fond du
background
• "border-box": Intérieur du border-box
• "padding-box": Intérieur du padding-
box
• "content-box": Intérieur du content-box

70. CSS3 Background-clip

71. CSS3 Background-clip

72. CSS3 Background-size
• Spécifie la taille de l’image de
background
• Première valeur = largeur
• Deuxième valeur = hauteur
• Si une des dimensions à sa valeur à
auto, l’image doit garder son ratio

73. CSS3 Background-clip

74. CSS3 Background-clip

75. CSS3 Border-radius
(rounded corners)
• Arrondis les coins d’un élément avec
une valeur de rayon (%, px ou ems)
• Possibilité de contrôlé chaque coins
• http://lab.simurai.com/buttons/

76. CSS3 Border-radius
(rounded corners)

77. CSS3 Border-radius
(rounded corners)

78. CSS3 Border images
• Images de background comme bordure
à la place d’un style
• Les côtés et les coins sont pris de
l’image spécifié, dont les parties seront
découpé, redimentionné et tendu au
besoin

79. CSS3 Border images
• L’image fournit sera découpé en 9
partie selon une grille 3x3. Comme avec
les guides dans Photoshop
• Valeurs = Source de l’image suivit par
la position des guides de découpe

80. CSS3 Border images
• "stretch": Étiré pour couvrir la zone
• "repeat": Tuilé et répété pour couvrir la zone
• "round": Tuilé et répété pour couvrir la
zone. Si la zone n’est pas couverte avec un
nombre complet de tuiles, les images sont
redimensionnés afin qu’il la couvre
• "space": Tuilé et répété pour couvrir la
zone. Si la zone n’est pas couverte avec un
nombre complet de tuiles, les images se
distribuent l’espace afin qu’il la couvre

81. CSS3 Border images

82. CSS3 Border images

83. CSS3 Box-shadow
• Possibilité de combiné avec RGBa
• Première valeur = Décalage horizontal
• Seconde valeur = Décalage vertical
• Troisième valeur = Rayon de flou
• Quatrième valeur, couleur pour
l’ombrage
• Effet de 3D = Ajouter une 2e ombre

84. CSS3 Box-shadow

85. CSS3 Box-shadow

86. CSS3 Media Queries
• Étiquettage CSS selon le contexe
• width, height, min/max, color,
orientation, aspect-ratio, etc
• Outil pour "Responsive Web Design"

87. CSS3 Media Queries
Changement de CSS en haut de 800px de large

88. CSS3 Media Queries

89. Responsive Web Design
• Différentes vues offertes pour les
différents contextes via les media
queries
• Site construit avec une grille flexible
• Images doivent être flexibles
Understanding the Elements of Responsive Web Design

90. Responsive Web Design
• http://rourkery.com/
• http://forefathersgroup.com/
• http://bostonglobe.com/
http://mediaqueri.es/

91. Responsive Web Design
Media Queries
• Cibler les appareils soutenus et identifier
les points d'arrêt commun:
• 320px, 480px, 600px, 768px, 900px et
1200px
• 320 and up
• css3-mediaqueries-js

92. Responsive Web Design
Grille flexible

93. Responsive Web Design
Images flexibles
• Code réactif pour servir les images de
taille appropriée en échangeant la source.
Par défaut, c'est la plus petite image.
• Ou utiliser max-width: 100%
• Responsive-Images
• Respond.js

94. CSS3 Text-shadow
• Ombre du texte
• 1e valeur = Décalage horizontal
• 2e valeur = Décalage vertical
• 3e valeur = Rayon du dégradé
• 4e valeur = Couleur de l’ombre
• Possibilité de mettre plusieurs ombres

95. CSS3 Text-shadow

96. CSS3 Text-shadow

97. CSS3 Multiple
column layout
• Mise en page avec colonnes ≠ floats
• Système de colonnes en définissant:
• Nombre de colonnes
• Largeur des colonnes
• Le contenu peut continuer d’une
colonne à une autre

98. CSS3 Multiple
column layout

99. CSS3 Multiple
column layout

100. CSS3 Multiple
column layout

101. CSS3 Multiple
column layout

102. @font-face Web fonts
• Utilisation de fonts plus variés. Pas de
Flash, pas de JavaScripts
• Vérifier la licence EULA (End User
License Agreement)
• La police doit se trouver sur le même
domaine

103. @font-face Web fonts

104. @font-face Web fonts

105. @font-face Web fonts
Review of Popular Web Font Embedding Services

106. @font-face Web fonts

107. CSS3 Transforms
• Développé initialement par WebKit et
ensuite incorporé au W3C
• Permet au élément rendu par CSS d’être
transformé dans un espace en 2D

108. CSS3 Transforms
Scale
• La transformation "scale"n'influence
pas la mise en page du document
• Possible de mettre un point d’origine

109. CSS3 Transforms
Rotate
• http://outsideapp.com/

110. CSS3 Transforms
Rotate
• http://outsideapp.com/

111. CSS3 Transforms
Skew
• Penche l'élément via les coordonnés
x/y

112. CSS3 Transforms
Translate
• Déplace les éléments via les
coordonnés x/y
• Valeurs négatives acceptés

113. CSS3 Transforms
Translate
• Déplace les éléments via les
coordonnés x/y
• Valeurs négatives acceptés

114. CSS3 Transforms

115. CSS3 Transitions
• Développé initialement par WebKit et
ensuite incorporé au W3C
• Changement des valeurs dans les CSS
lorsque qu'une interaction est déclenché
• Liste des propriétés qui peuvent être en
transition

116. CSS3 Transitions

117. CSS3 Transitions

118. CSS3 Transitions

119. Stratégie

120. Support
Stratégie

121. Support
Stratégie
Détection

122. Polyfills Support
Stratégie
Détection

123. Support

124. Support

125. Support

126. Support
"10 years ago a browser was born. Its name was
Internet Explorer 6. Now that we’re in 2012, in an
era of modern web standards, it’s time to say
goodbye."
Microsoft - http://www.theie6countdown.com/

127. Support

128. Support

129. Support

130. Support

131. Support
"We, as developers, should be able to develop with
the HTML5 apis [...]. Developing in this future-
proof way means as users upgrade, your code
doesn't have to change but users will move to the
better, native experience cleanly."
Paul Irish - Google

132. Support
<!DOCTYPE HTML>

133. Support
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

134. Support
caniuse.com

135. Support
Préfixes "vendor-specific"

136. Support
Préfixes "vendor-specific"
• Navigateurs + développeurs testes =>
Commentaires pour améliorer la
spécification
• L'ordre est important
• Filtres propriétaires Microsoft ≠ préfixes

137. Support
Préfixes "vendor-specific"
• CSSPrefixer
• cssFx
• CSS Crush
• CSS Agent
• CSS 3 Finalize
• How do you deal with Vendor prefixes?

138. Détection

139. Détection
Créer chaque élément en JavaScript pour Internet
Explorer 6, 7 et 8

140. Détection

141. Détection

142. Détection

143. Polyfills
"So here we're collecting all the shims, fallbacks, and
polyfills in order to implant html5 functionality in
browsers that don't natively support them."
The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks

144. Polyfills
The All-In-One
Entirely-Not-Alphabetical
No-Bullshit
Guide to
HTML5 Fallbacks
The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks

145. Polyfills
"JavaScript library to make MSIE behave like a
standards-compliant browser. It fixes many HTML
and CSS issues and makes transparent PNG work
correctly under IE5 and IE6."

146. Polyfills
• Fixed positioning supported
• Max & min width & height supported
• Additional CSS selectors
• Double margin float bug
• Unscrollable content bug
• Peekaboo bug
• 3 pixel text jog bug

147. Polyfills

148. Polyfills

149. Polyfills

150. Merci
CSS3 - Nouveautés
28 février 2012 - Rémy Savard