Successfully reported this slideshow.

Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)

9

Share

Loading in …3
×
1 of 54
1 of 54

Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)

9

Share

Download to read offline

Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments.
Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.

Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments.
Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)

  1. 1. palais des congrès Paris 7, 8 et 9 février 2012
  2. 2. Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations 8 février 2012 Raphaël Goetter Übercheerleader Alsacréations @goetter
  3. 3. Media Queries
  4. 4. Mon quotidien 1 PC de bureau (24") 1 PC portable (15") 1 PC portable (11.6") 1 netbook (10") 1 tablette Windows (10") 1 tablette Android (8.9") 1 smartphone Apple (3.5")
  5. 5. S’adapter ?
  6. 6. Media Queries ! CSS3 Media Queries « Requête CSS3 permettant d’appliquer des styles CSS selon des critères choisis, notamment la largeur d’écran »
  7. 7. Media Queries ! CSS3 Media Queries Pas besoin de site dédié Seul le design s'adapte Aucune intervention sur le serveur Pas de langage de développement Tout est possible visuellement CSS est fait pour ça !
  8. 8. Démos Barrack Obama Sony http://www.barackobama.com/ http://www.sony.com/index.php The Boston Globe Theme Loom http://www.bostonglobe.com/ http://themeloom.com/ Alsacréations Goetter http://www.alsacreations.fr/ http://www.goetter.fr/
  9. 9. <link rel="stylesheet" media="screen and (max- width : 640px)" href="mobile.css"> styles.css mobile.css body { body { width : 960px ; width : auto; } } nav { nav, #content { float : left ; float : none; width : 200px ; width : auto; } } #content { … float : left ; width : 760px }
  10. 10. <link rel="stylesheet" media="screen and (max- width : 640px)" href="mobile.css">
  11. 11. @media (max-width : styles.css 640px) body { width : 960px ; {…} } nav { float : left ; width : 200px ; } #content { float : left ; width : 760px } @media (max-width : 640px) { body { width : auto; } nav, #content { float : none; width : auto; } }
  12. 12. Compatibilité
  13. 13. Grid Layout
  14. 14. Où en est-on ? flux spacer.gif position: relative frames bugs IE6 must die ! <br><br><br> <table> float rowspan bidouilles position: absolute reset marges négatives commentaires clear calques conditionnels colspan frameworks CSS &nbsp; hacks
  15. 15. Grid Layout CSS3 Grid Layout « Représentation virtuelle composée de lignes, de colonnes et de cellules. »
  16. 16. Grid Layout CSS3 Grid Layout Grille virtuelle Concepts de lignes et colonnes Indépendant de l'ordre HTML Positionnement intuitif Alignements et centrages simples Superpositions possibles
  17. 17. Concept de grille body { display: grid Et hop ! }
  18. 18. Colonnes body { display: grid ; grid-columns: 250px 1fr; }
  19. 19. Colonnes body { display: grid ; grid-columns: 250px 1fr; } nav { grid-column: 1; } section { grid-column: 2; }
  20. 20. Lignes / Colonnes body { display: grid ; grid-columns: 250px 1fr; grid-rows: 100px 300px; } nav { grid-column: 1; grid-row: 1; } article { grid-column: 1; grid-row: 2; } …
  21. 21. Motifs répétés body { correspond à display: grid ; 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px grid-columns: 10px (1fr 10px)[4]; } …
  22. 22. Distribution body { display: grid ; grid-columns: 250px 1fr; grid-rows: 100px 300px; } header { grid-column: 1; grid-row: 1; grid-column-span: 2 ; } …
  23. 23. Template body { Template syntax display: grid ; grid-template: "hh" "nc" "ff"; } header { grid-cell: "h"; } nav { grid-cell: "n"; } …
  24. 24. Alignements section { grid-row-align: center; } article { grid-column-align: center; } aside { grid-row-align: center; grid-column-align: center; }
  25. 25. Fluide ! body { body { display: grid ; display: grid ; grid-template: "abcd"; grid-template: "a" } "b" "d" "d"; }
  26. 26. Compatibilité
  27. 27. Transitions / Animations
  28. 28. Transitions / Animations CSS3 Transitions « Transition CSS3 permet une évolution progressive entre deux valeurs d'une propriété CSS lorsqu'un événement est déclenché » CSS3 Animations « Extension de Transition. Permet d'appliquer un scénario dans le temps (plusieurs transitions) lors d'un événement ou lors du chargement d'un l'élément »
  29. 29. Transitions div { width: 100px; transition: 1s; } div:hover { width: 200px; }
  30. 30. Transitions Propriété Durée Courbe de progression div { Délai width: 100px ; transition: width 1s ease 2s ; } Aussi « all » (ou rien) div:hover { width: 200px ; Aussi } :hover, :focus, :active, :checked, :disabled, :valid, :invalid, :target, ::selection, …
  31. 31. Animations Déclaration de l'animation « kiwi » Séquences temporelles en % @keyframes kiwi { 0% {width: 100px ;} 50% {width: 50px ;} 100% {width: 100px ;} } div:hover { animation: kiwi 4s infinite ; } Appel de l'animation « kiwi » au survol
  32. 32. Démos The Expressive Web Apple http://bit.ly/mstd1 http://www.apple.com/ AT-AT Walker Photogame http://bit.ly/mstd2012a http://photogame.fr/ Spiderman Animatable http://bit.ly/w4Z83s http://bit.ly/z652t3
  33. 33. Compatibilité
  34. 34. A l’assaut !
  35. 35. Où est la grille ?
  36. 36. Yeah, HTML5 !
  37. 37. Floatitude !
  38. 38. Floatitude ! float float absolute float float float absolute float absolute absolute float
  39. 39. mstechdays.fr 4 redirections d’URL 155 requêtes 33 fichiers JS externes 6 iframes 22.36s de chargement sur bureau 8s de chargement sur mobile
  40. 40. mstechdays.fr 95 flottants 20 clear : both 65 position: absolute 60 position: relative plusieurs surcouches CSS sur chaque élément
  41. 41. Grand Ménage ! couche « reset » perso : display : none width : auto ; height : auto float : none position : static overflow : visible suppression de 10aines de JS
  42. 42. Grilles 428px 284px 284px 284px
  43. 43. Grilles 428px 284px 284px 284px
  44. 44. Grilles #inGrid { display: grid ; grid-columns: 428px 284px 284px 284px; grid-rows: 132px 132px 140px; } #grid1 { grid-column: 1; grid-row: 1; grid-row-span: 3; } #grid2 { grid-column: 2; grid-row: 1; grid-row-span: 2;
  45. 45. Media Queries @media (max-width: 1280px) { #inGrid { grid-columns: 428px 284px 284px; grid-rows: 132px 132px 140px 140px; } #grid7 {grid-column: 1; grid-row: 4;} #grid8 {grid-column: 2; grid-row: 4;} #grid9 {grid-column: 3; grid-row: 4;} } …
  46. 46. Media Queries @media (max-width: 1000px) { #inGrid { grid-columns: 428px 284px; grid-rows: 132px 132px 140px 140px 140px 140px 140px; } } @media (max-width: 712px) { #inGrid { grid-columns: 1fr; grid-rows: 132px 132px 140px 140px 140px 140px 140px 140px 140px; } } …
  47. 47. Finish Him ! TechDays remix http://bit.ly/mstd2012 couche « reset » perso : Suppression JS CSS3 Grid Layout CSS3 Media Queries CSS3 Animations
  48. 48. Merci ! Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter : @goetter

×