Your SlideShare is downloading. ×
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

8,183

Published on

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 …

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.

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

No Downloads
Views
Total Views
8,183
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
96
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. palais descongrèsParis7, 8 et 9février 2012
  • 2. Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations8 février 2012Raphaël GoetterÜbercheerleader Alsacréations@goetter
  • 3. Media Queries
  • 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. S’adapter ?
  • 6. Media Queries !CSS3 Media Queries« Requête CSS3 permettant d’appliquerdes styles CSS selon des critères choisis,notamment la largeur d’écran »
  • 7. Media Queries !CSS3 Media Queries Pas besoin de site dédié Seul le design sadapte Aucune intervention sur le serveur Pas de langage de développement Tout est possible visuellement CSS est fait pour ça !
  • 8. DémosBarrack Obama Sonyhttp://www.barackobama.com/ http://www.sony.com/index.phpThe Boston Globe Theme Loomhttp://www.bostonglobe.com/ http://themeloom.com/Alsacréations Goetterhttp://www.alsacreations.fr/ http://www.goetter.fr/
  • 9. <link rel="stylesheet" media="screen and (max-width : 640px)" href="mobile.css">styles.css mobile.cssbody { body { width : 960px ; width : auto;} }nav { nav, #content { float : left ; float : none; width : 200px ; width : auto;} }#content { … float : left ; width : 760px}
  • 10. <link rel="stylesheet" media="screen and (max-width : 640px)" href="mobile.css">
  • 11. @media (max-width : styles.css640px) 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. Compatibilité
  • 13. Grid Layout
  • 14. Où en est-on ? flux spacer.gif position: relative frames bugs IE6 must die ! <br><br><br> <table> float rowspanbidouilles position: absolute reset marges négatives commentaires clearcalques conditionnels colspan frameworks CSS &nbsp; hacks
  • 15. Grid LayoutCSS3 Grid Layout« Représentation virtuelle composée delignes, de colonnes et de cellules. »
  • 16. Grid LayoutCSS3 Grid Layout Grille virtuelle Concepts de lignes et colonnes Indépendant de lordre HTML Positionnement intuitif Alignements et centrages simples Superpositions possibles
  • 17. Concept de grillebody { display: grid Et hop !}
  • 18. Colonnesbody { display: grid ; grid-columns: 250px 1fr;}
  • 19. Colonnesbody { display: grid ; grid-columns: 250px 1fr;}nav { grid-column: 1;}section { grid-column: 2;}
  • 20. Lignes / Colonnesbody { 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. Motifs répétésbody { correspond à display: grid ; 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px grid-columns: 10px (1fr 10px)[4];}…
  • 22. Distributionbody { display: grid ; grid-columns: 250px 1fr; grid-rows: 100px 300px;}header { grid-column: 1; grid-row: 1; grid-column-span: 2 ;}…
  • 23. Templatebody { Template syntax display: grid ; grid-template: "hh" "nc" "ff";}header { grid-cell: "h";}nav { grid-cell: "n";}…
  • 24. Alignementssection { grid-row-align: center;}article { grid-column-align: center;}aside { grid-row-align: center; grid-column-align: center;}
  • 25. Fluide !body { body { display: grid ; display: grid ; grid-template: "abcd"; grid-template: "a"} "b" "d" "d"; }
  • 26. Compatibilité
  • 27. Transitions / Animations
  • 28. Transitions / AnimationsCSS3 Transitions« Transition CSS3 permet une évolutionprogressive entre deux valeurs dunepropriété CSS lorsquun événement estdéclenché »CSS3 Animations« Extension de Transition. Permetdappliquer un scénario dans le temps(plusieurs transitions) lors dunévénement ou lors du chargement dunlélément »
  • 29. Transitionsdiv { width: 100px; transition: 1s;}div:hover { width: 200px;}
  • 30. Transitions Propriété Durée Courbe de progressiondiv { 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. Animations Déclaration de lanimation « kiwi » Séquences temporelles en %@keyframes kiwi { 0% {width: 100px ;} 50% {width: 50px ;} 100% {width: 100px ;}}div:hover { animation: kiwi 4s infinite ;} Appel de lanimation « kiwi » au survol
  • 32. DémosThe Expressive Web Applehttp://bit.ly/mstd1 http://www.apple.com/AT-AT Walker Photogamehttp://bit.ly/mstd2012a http://photogame.fr/Spiderman Animatablehttp://bit.ly/w4Z83s http://bit.ly/z652t3
  • 33. Compatibilité
  • 34. A l’assaut !
  • 35. Où est la grille ?
  • 36. Yeah, HTML5 !
  • 37. Floatitude !
  • 38. Floatitude !float float absolute float float float absolute floatabsoluteabsolute float
  • 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. mstechdays.fr 95 flottants 20 clear : both 65 position: absolute 60 position: relative plusieurs surcouches CSS sur chaque élément
  • 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. Grilles428px 284px 284px 284px
  • 43. Grilles428px 284px 284px 284px
  • 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. 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. 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. Finish Him ! TechDays remix http://bit.ly/mstd2012 couche « reset » perso : Suppression JS CSS3 Grid Layout CSS3 Media Queries CSS3 Animations
  • 48. Merci ! Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter : @goetter

×