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

Adf4ff2212aea06456ca3c3bca95c0db?s=47 Raphael Goetter
February 09, 2012

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

Microsoft Techdays 2012, Paris

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

February 09, 2012
Tweet

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
  5. None
  6. None
  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 !
  17. None
  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é

  37. None
  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;
  49. None
  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;} } …
  51. None
  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 !