Successfully reported this slideshow.

CSS3 - nouveautes

3 966 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

CSS3 - nouveautes

  1. 1. CSS3 - Nouveautés28 février 2012 - Rémy Savard
  2. 2. CSS3• Exemples• Introduction• Avantages• Modules• Stratégie
  3. 3. CSS3• HTML5 Logo• madmanimation• Shaun the Sheep• Our Solar System• Gabriel Sharps Small Planet• CSS3 Ads Versus Flash Ads
  4. 4. CSS31996• 1ère spécification CSS à devenir une Recommandation W3C Officiel, CSS 11997• Création de CSS 2• Le W3C ne maintient plus CSS 1
  5. 5. CSS31998• 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. 6. CSS31999Le 1er working draft CSS 3 est publié
  7. 7. CSS31999Le 1er working draft CSS 3 est publié
  8. 8. CSS32005• CSS 2.1 Candidate Recommendation à Working Draft• CSS 2.1 devient Candidate Recommendation• CSS 2.1 est renversé à Working Draft
  9. 9. CSS32007• CSS 2.1 devient Candidate Recommendation2009• CSS 2.1 est mis à jour 2 fois
  10. 10. CSS32010• CSS 2.1 est renversé à Working Draft2011• CSS 2.1 W3C Proposed Recommendation• CSS 3 = Chaque module est indépendant
  11. 11. CSS3"1, 675 techniques ultimes qui vont vous permettre de devenir un ninja du CSS"
  12. 12. CSS3"Problèmes = Solutions documentés, workaroundspour navigateurs, groupes de supports, partages de techniques, etc."
  13. 13. CSS3
  14. 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. 15. CSS3• Multiplateforme• Accessible• Sémantique• Optimisé• Standard
  16. 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. 17. CSS3 Progressive enhancement• Focus sur le contenu, ≠ navigateurs• CSS2 et un peu de CSS3• Bloque le notre potentiel créatif
  18. 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. 19. CSS3 Do websites need to beexperienced exactly the same in every browser http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com
  20. 20. CSS3
  21. 21. Avantages
  22. 22. DélaisAvantages
  23. 23. DélaisAvantages Coûts
  24. 24. Qualité Délais Avantages Coûts
  25. 25. Avantages
  26. 26. Avantages1. linear-gradient2. border-radius3. radial-gradient4. text-shadow5. box-shadow avecRGBa Trent Walton - CSS3 vs. CSS: A Speed Benchmark
  27. 27. Avantages DéveloppementCSS = 73 minutes CSS3 = 39 minutes Trent Walton - CSS3 vs. CSS: A Speed Benchmark
  28. 28. Avantages DéveloppementCSS = 73 minutes CSS3 = 39 minutes 33% plus rapide Trent Walton - CSS3 vs. CSS: A Speed Benchmark
  29. 29. Avantages PoidsCSS = 849.2 KB CSS3 = 769. KB Trent Walton - CSS3 vs. CSS: A Speed Benchmark
  30. 30. Avantages PoidsCSS = 849.2 KB CSS3 = 769. KB 9,5% plus léger Trent Walton - CSS3 vs. CSS: A Speed Benchmark
  31. 31. Avantages RequêtesCSS = 22 requêtes CSS3 = 12 requêtes Trent Walton - CSS3 vs. CSS: A Speed Benchmark
  32. 32. Avantages RequêtesCSS = 22 requêtes CSS3 = 12 requêtes 45% moins Trent Walton - CSS3 vs. CSS: A Speed Benchmark
  33. 33. Avantages
  34. 34. Modules CSS3
  35. 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. 36. Modules
  37. 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. 38. CSS3 Colors
  39. 39. CSS3 Colors
  40. 40. CSS3 Opacity• Opacité d’un élément de 0 à 1• CSS3 Colors = 1 couleur• CSS3 Opacity = 1 élément + enfants
  41. 41. CSS3 Opacity
  42. 42. CSS3 Opacity
  43. 43. CSS3 selectors[att]• Attribut att, peut importe la valeur[att=val]• Attribut att et la valeur exact val
  44. 44. CSS3 selectors[att~=val]• Attribut att avec des valeurs séparés par des espaces, l’une d’elles doit être val
  45. 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. 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. 47. CSS3 selectors[att*=val]• Attribut att et une valeur qui contient au moins une instance de la substring val
  48. 48. CSS3 selectors:root• Représente l’élément HTML
  49. 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. 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. 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. 52. CSS3 selectors:nth-child(N)• "a" et "b" peuvent êtres négatif
  53. 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. 54. CSS3 selectors:target• URIs ce terminant par # et un identifiant de fragement• http://lab.simurai.com/stars/
  55. 55. CSS3 selectors:lang• Représente un sélecteur pour un élément selon sa langue si elle est spécifié
  56. 56. CSS3 selectors:enabled• Représente un élément de l’interface usager (ex: input) qui est dans l’état enabled
  57. 57. CSS3 selectors:disabled• Représente un élément de l’interface usager (ex: input) qui est dans l’état disabled
  58. 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. 59. CSS3 selectors::first-line• Représente la première ligne formatté d’un élément.
  60. 60. CSS3 selectors::first-letter• Première lettre d’un élément• Utiliser pour donner du style• 67 millions = 6
  61. 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. 62. CSS3 selectors::selection• Change la couleur de background et de texte des sélections• http://css-tricks.com/examples/ DifferentSelectionColors/
  63. 63. CSS3 selectorsGeneral 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. 64. CSS3 selectorsGeneral sibling combinator (~)
  65. 65. CSS3 selectors CSS3 Selectors Test
  66. 66. CSS3Multiple 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. 67. CSS3Multiple backgrounds
  68. 68. CSS3Multiple backgrounds
  69. 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. 70. CSS3 Background-clip
  71. 71. CSS3 Background-clip
  72. 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. 73. CSS3 Background-clip
  74. 74. CSS3 Background-clip
  75. 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. 76. CSS3 Border-radius (rounded corners)
  77. 77. CSS3 Border-radius (rounded corners)
  78. 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. 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. 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. 81. CSS3 Border images
  82. 82. CSS3 Border images
  83. 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. 84. CSS3 Box-shadow
  85. 85. CSS3 Box-shadow
  86. 86. CSS3 Media Queries• Étiquettage CSS selon le contexe• width, height, min/max, color, orientation, aspect-ratio, etc• Outil pour "Responsive Web Design"
  87. 87. CSS3 Media QueriesChangement de CSS en haut de 800px de large
  88. 88. CSS3 Media Queries
  89. 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. 90. Responsive Web Design• http://rourkery.com/• http://forefathersgroup.com/• http://bostonglobe.com/ http://mediaqueri.es/
  91. 91. Responsive Web Design Media Queries• Cibler les appareils soutenus et identifier les points darrêt commun:• 320px, 480px, 600px, 768px, 900px et 1200px• 320 and up• css3-mediaqueries-js
  92. 92. Responsive Web Design Grille flexible
  93. 93. Responsive Web Design Images flexibles• Code réactif pour servir les images de taille appropriée en échangeant la source. Par défaut, cest la plus petite image.• Ou utiliser max-width: 100%• Responsive-Images• Respond.js
  94. 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. 95. CSS3 Text-shadow
  96. 96. CSS3 Text-shadow
  97. 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. 98. CSS3 Multiplecolumn layout
  99. 99. CSS3 Multiplecolumn layout
  100. 100. CSS3 Multiplecolumn layout
  101. 101. CSS3 Multiplecolumn layout
  102. 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. 103. @font-face Web fonts
  104. 104. @font-face Web fonts
  105. 105. @font-face Web fontsReview of Popular Web Font Embedding Services
  106. 106. @font-face Web fonts
  107. 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. 108. CSS3 TransformsScale• La transformation "scale"ninfluence pas la mise en page du document• Possible de mettre un point d’origine
  109. 109. CSS3 TransformsRotate• http://outsideapp.com/
  110. 110. CSS3 TransformsRotate• http://outsideapp.com/
  111. 111. CSS3 TransformsSkew• Penche lélément via les coordonnés x/y
  112. 112. CSS3 TransformsTranslate• Déplace les éléments via les coordonnés x/y• Valeurs négatives acceptés
  113. 113. CSS3 TransformsTranslate• Déplace les éléments via les coordonnés x/y• Valeurs négatives acceptés
  114. 114. CSS3 Transforms
  115. 115. CSS3 Transitions• Développé initialement par WebKit et ensuite incorporé au W3C• Changement des valeurs dans les CSS lorsque quune interaction est déclenché• Liste des propriétés qui peuvent être en transition
  116. 116. CSS3 Transitions
  117. 117. CSS3 Transitions
  118. 118. CSS3 Transitions
  119. 119. Stratégie
  120. 120. SupportStratégie
  121. 121. SupportStratégie Détection
  122. 122. Polyfills Support Stratégie Détection
  123. 123. Support
  124. 124. Support
  125. 125. Support
  126. 126. Support "10 years ago a browser was born. Its name wasInternet 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. 127. Support
  128. 128. Support
  129. 129. Support
  130. 130. Support
  131. 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 doesnt have to change but users will move to the better, native experience cleanly." Paul Irish - Google
  132. 132. Support<!DOCTYPE HTML>
  133. 133. Supporthtml, 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. 134. Supportcaniuse.com
  135. 135. SupportPréfixes "vendor-specific"
  136. 136. Support Préfixes "vendor-specific"• Navigateurs + développeurs testes => Commentaires pour améliorer la spécification• Lordre est important• Filtres propriétaires Microsoft ≠ préfixes
  137. 137. Support Préfixes "vendor-specific"• CSSPrefixer• cssFx• CSS Crush• CSS Agent• CSS 3 Finalize• How do you deal with Vendor prefixes?
  138. 138. Détection
  139. 139. DétectionCréer chaque élément en JavaScript pour Internet Explorer 6, 7 et 8
  140. 140. Détection
  141. 141. Détection
  142. 142. Détection
  143. 143. Polyfills"So here were collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that dont natively support them." The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks
  144. 144. Polyfills The All-In-OneEntirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks
  145. 145. Polyfills "JavaScript library to make MSIE behave like astandards-compliant browser. It fixes many HTMLand CSS issues and makes transparent PNG work correctly under IE5 and IE6."
  146. 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. 147. Polyfills
  148. 148. Polyfills
  149. 149. Polyfills
  150. 150. MerciCSS3 - Nouveautés28 février 2012 - Rémy Savard

×