Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations

Microsoft Techdays 2012, Paris

Transcript

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