0
CSS3 - Nouveautés28 février 2012 - Rémy Savard
CSS3• Exemples• Introduction• Avantages• Modules• Stratégie
CSS3• HTML5 Logo• madmanimation• Shaun the Sheep• Our Solar System• Gabriel Sharps Small Planet• CSS3 Ads Versus Flash Ads
CSS31996• 1ère spécification CSS à devenir une  Recommandation W3C Officiel, CSS 11997• Création de CSS 2• Le W3C ne maintie...
CSS31998• CSS 2 devient une recommandation• CSS 2.1 = CSS 2 - fonctionnalités• Développement de la spécification  CSS 3• Le...
CSS31999Le 1er working draft CSS 3 est publié
CSS31999Le 1er working draft CSS 3 est publié
CSS32005• CSS 2.1 Candidate Recommendation  à Working Draft• CSS 2.1 devient Candidate  Recommendation• CSS 2.1 est renver...
CSS32007• CSS 2.1 devient Candidate  Recommendation2009• CSS 2.1 est mis à jour 2 fois
CSS32010• CSS 2.1 est renversé à Working Draft2011• CSS 2.1 W3C Proposed  Recommendation• CSS 3 = Chaque module est  indép...
CSS3"1, 675 techniques ultimes qui vont vous permettre            de devenir un ninja du CSS"
CSS3"Problèmes = Solutions documentés, workaroundspour navigateurs, groupes de supports, partages de                 techn...
CSS3
/* http://meyerweb.com/eric/tools/css/reset/   v2.0 | 20110126   License: none (public domain)*/html, body, div, span, app...
CSS3• Multiplateforme• Accessible• Sémantique• Optimisé• Standard
CSS3         Graceful degradation• Navigateurs modernes = Prioritaires  avec tests sur les versions précédentes  des princ...
CSS3       Progressive enhancement• Focus sur le contenu, ≠ navigateurs• CSS2 et un peu de CSS3• Bloque le notre potentiel...
CSS3             Hardboiled• Aucuns compromis, meilleur  expérience Web possible• Expérience selon les capacités du  navig...
CSS3   Do websites need to beexperienced exactly the same      in every browser    http://dowebsitesneedtobeexperiencedexa...
CSS3
Avantages
DélaisAvantages
DélaisAvantages   Coûts
Qualité           Délais    Avantages          Coûts
Avantages
Avantages1. linear-gradient2. border-radius3. radial-gradient4. text-shadow5. box-shadow avecRGBa           Trent Walton -...
Avantages          DéveloppementCSS = 73 minutes                     CSS3 = 39 minutes         Trent Walton - CSS3 vs. CSS...
Avantages          DéveloppementCSS = 73 minutes                     CSS3 = 39 minutes     33% plus rapide         Trent W...
Avantages                        PoidsCSS = 849.2 KB                       CSS3 = 769. KB         Trent Walton - CSS3 vs. ...
Avantages                        PoidsCSS = 849.2 KB                       CSS3 = 769. KB      9,5% plus léger         Tre...
Avantages                    RequêtesCSS = 22 requêtes                     CSS3 = 12 requêtes          Trent Walton - CSS3...
Avantages                    RequêtesCSS = 22 requêtes                     CSS3 = 12 requêtes           45% moins         ...
Avantages
Modules CSS3
Modules"Rather than attempting to shove dozens of updates   into a single monolithic specification, it will be much easier ...
Modules
CSS3 Colors• RGB(A), HSL(A) et noms de couleurs• ≠ propriété• Nouveau modèle de couleurs• Valeur RGB ou HSL avec  optionne...
CSS3 Colors
CSS3 Colors
CSS3 Opacity• Opacité d’un élément de 0 à 1• CSS3 Colors = 1 couleur• CSS3 Opacity = 1 élément + enfants
CSS3 Opacity
CSS3 Opacity
CSS3 selectors[att]• Attribut att, peut importe la valeur[att=val]• Attribut att et la valeur exact val
CSS3 selectors[att~=val]• Attribut att avec des valeurs séparés   par des espaces, l’une d’elles doit être   val
CSS3 selectors[att|=val]• Attribut att et la valeur exact val ou  commençant par val et  immédiatement suivit de  "-"• Pri...
CSS3 selectors[att^=val]• Attribut att et une valeur qui  commence par val[att$=val]• Attribut att et une valeur qui se  t...
CSS3 selectors[att*=val]• Attribut att et une valeur qui contient  au moins une instance de la substring  val
CSS3 selectors:root• Représente l’élément HTML
CSS3 selectors:nth-child(N)• L’argument "N" peut être un mot-clé,  un nombre ou une expression de  nombre sous la forme an...
CSS3 selectors:nth-child(N)• Si l’argument "N" est un nombre, il  représente la position ordinale de  l’élément sélectionné
CSS3 selectors:nth-child(N)• Si l’argument a la forme an+b• "b" représente la position ordinale du  premier élément sélect...
CSS3 selectors:nth-child(N)• "a" et "b" peuvent êtres négatif
CSS3 selectors:first-child• Sélectionne le premier enfant du  parent de l’élément:last-child• Sélectionne le dernier enfant...
CSS3 selectors:target• URIs ce terminant par # et un  identifiant de fragement• http://lab.simurai.com/stars/
CSS3 selectors:lang• Représente un sélecteur pour un  élément selon sa langue si elle est  spécifié
CSS3 selectors:enabled• Représente un élément de l’interface  usager (ex: input) qui est dans l’état  enabled
CSS3 selectors:disabled• Représente un élément de l’interface  usager (ex: input) qui est dans l’état  disabled
CSS3 selectors:checked• Éléments radio et checkbox choisis• Lorsque ces élément sont choisi(on) la  pseudo-class :checked ...
CSS3 selectors::first-line• Représente la première ligne formatté  d’un élément.
CSS3 selectors::first-letter• Première lettre d’un élément• Utiliser pour donner du style• 67 millions = 6
CSS3 selectors::before et ::after• Les pseudo-éléments ::before et ::after  peuvent êtres utilisés pour inséré du  contenu...
CSS3 selectors::selection• Change la couleur de background et  de texte des sélections• http://css-tricks.com/examples/  D...
CSS3 selectorsGeneral sibling combinator (~)• 2 séquences de sélecteurs séparés (~)• Partagent le même parent• Lélément re...
CSS3 selectorsGeneral sibling combinator (~)
CSS3 selectors  CSS3 Selectors Test
CSS3Multiple backgrounds• Images de background sur un élément• Séparés par une virgule (,)• Les navigateurs qui ne support...
CSS3Multiple backgrounds
CSS3Multiple backgrounds
CSS3 Background-clip• Spécifie la zone de peinture de fond du  background• "border-box": Intérieur du border-box• "padding-...
CSS3 Background-clip
CSS3 Background-clip
CSS3 Background-size• Spécifie la taille de l’image de  background• Première valeur = largeur• Deuxième valeur = hauteur• S...
CSS3 Background-clip
CSS3 Background-clip
CSS3 Border-radius   (rounded corners)• Arrondis les coins d’un élément avec  une valeur de rayon (%, px ou ems)• Possibil...
CSS3 Border-radius (rounded corners)
CSS3 Border-radius (rounded corners)
CSS3 Border images• Images de background comme bordure  à la place d’un style• Les côtés et les coins sont pris de  l’imag...
CSS3 Border images• L’image fournit sera découpé en 9  partie selon une grille 3x3. Comme avec  les guides dans Photoshop•...
CSS3 Border images• "stretch": Étiré pour couvrir la zone• "repeat": Tuilé et répété pour couvrir la zone• "round": Tuilé ...
CSS3 Border images
CSS3 Border images
CSS3 Box-shadow• Possibilité de combiné avec RGBa• Première valeur = Décalage horizontal• Seconde valeur = Décalage vertic...
CSS3 Box-shadow
CSS3 Box-shadow
CSS3 Media Queries• Étiquettage CSS selon le contexe• width, height, min/max, color,  orientation, aspect-ratio, etc• Outi...
CSS3 Media QueriesChangement de CSS en haut de 800px de large
CSS3 Media Queries
Responsive Web Design• Différentes vues offertes pour les  différents contextes via les media  queries• Site construit ave...
Responsive Web Design• http://rourkery.com/• http://forefathersgroup.com/• http://bostonglobe.com/                http://m...
Responsive Web Design               Media Queries• Cibler les appareils soutenus et identifier  les points darrêt commun:• ...
Responsive Web Design      Grille flexible
Responsive Web Design               Images flexibles• Code réactif pour servir les images de  taille appropriée en échangea...
CSS3 Text-shadow• Ombre du texte• 1e valeur = Décalage horizontal• 2e valeur = Décalage vertical• 3e valeur = Rayon du dég...
CSS3 Text-shadow
CSS3 Text-shadow
CSS3 Multiple       column layout• Mise en page avec colonnes ≠ floats• Système de colonnes en définissant: • Nombre de colo...
CSS3 Multiplecolumn layout
CSS3 Multiplecolumn layout
CSS3 Multiplecolumn layout
CSS3 Multiplecolumn layout
@font-face Web fonts• Utilisation de fonts plus variés. Pas de  Flash, pas de JavaScripts• Vérifier la licence EULA (End Us...
@font-face Web fonts
@font-face Web fonts
@font-face Web fontsReview of Popular Web Font Embedding Services
@font-face Web fonts
CSS3 Transforms• Développé initialement par WebKit et  ensuite incorporé au W3C• Permet au élément rendu par CSS d’être  t...
CSS3 TransformsScale• La transformation "scale"ninfluence  pas la mise en page du document• Possible de mettre un point d’o...
CSS3 TransformsRotate• http://outsideapp.com/
CSS3 TransformsRotate• http://outsideapp.com/
CSS3 TransformsSkew• Penche lélément via les coordonnés  x/y
CSS3 TransformsTranslate• Déplace les éléments via les  coordonnés x/y• Valeurs négatives acceptés
CSS3 TransformsTranslate• Déplace les éléments via les  coordonnés x/y• Valeurs négatives acceptés
CSS3 Transforms
CSS3 Transitions• Développé initialement par WebKit et  ensuite incorporé au W3C• Changement des valeurs dans les CSS  lor...
CSS3 Transitions
CSS3 Transitions
CSS3 Transitions
Stratégie
SupportStratégie
SupportStratégie  Détection
Polyfills               Support     Stratégie            Détection
Support
Support
Support
Support "10 years ago a browser was born. Its name wasInternet Explorer 6. Now that we’re in 2012, in an  era of modern we...
Support
Support
Support
Support
Support"We, as developers, should be able to develop with  the HTML5 apis [...]. Developing in this future-   proof way me...
Support<!DOCTYPE HTML>
Supporthtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address,...
Supportcaniuse.com
SupportPréfixes "vendor-specific"
Support        Préfixes "vendor-specific"• Navigateurs + développeurs testes =>  Commentaires pour améliorer la  spécificatio...
Support          Préfixes "vendor-specific"• CSSPrefixer• cssFx• CSS Crush• CSS Agent• CSS 3 Finalize• How do you deal with V...
Détection
DétectionCréer chaque élément en JavaScript pour Internet                Explorer 6, 7 et 8
Détection
Détection
Détection
Polyfills"So here were collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in    bro...
Polyfills     The All-In-OneEntirely-Not-Alphabetical       No-Bullshit         Guide to    HTML5 Fallbacks  The All-In-On...
Polyfills  "JavaScript library to make MSIE behave like astandards-compliant browser. It fixes many HTMLand CSS issues and ...
Polyfills• Fixed positioning supported• Max & min width & height supported• Additional CSS selectors• Double margin float b...
Polyfills
Polyfills
Polyfills
MerciCSS3 - Nouveautés28 février 2012 - Rémy Savard
Upcoming SlideShare
Loading in...5
×

CSS3 - nouveautes

2,921

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,921
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
177
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×