palais descongrèsParis7, 8 et 9février 2012
Trois avancées majeures en  CSS3 : Media Queries, Grid     Layout et Animations8 février 2012Raphaël GoetterÜbercheerleade...
Media Queries
Mon quotidien 1 PC de bureau (24") 1 PC portable (15") 1 PC portable (11.6") 1 netbook (10") 1 tablette Windows (10") 1 ta...
S’adapter ?
Media Queries !CSS3 Media Queries« Requête CSS3 permettant d’appliquerdes styles CSS selon des critères choisis,notamment ...
Media Queries !CSS3 Media Queries  Pas besoin de site dédié  Seul le design sadapte  Aucune intervention sur le serveur  P...
DémosBarrack Obama                  Sonyhttp://www.barackobama.com/    http://www.sony.com/index.phpThe Boston Globe      ...
<link rel="stylesheet" media="screen and (max-width : 640px)" href="mobile.css">styles.css                mobile.cssbody {...
<link rel="stylesheet" media="screen and (max-width : 640px)" href="mobile.css">
@media (max-width :   styles.css640px)                body {                            width : 960px ;{…}                ...
Compatibilité
Grid Layout
Où en est-on ?                                 flux                        spacer.gif position: relative         frames   ...
Grid LayoutCSS3 Grid Layout« Représentation virtuelle composée delignes, de colonnes et de cellules. »
Grid LayoutCSS3 Grid Layout  Grille virtuelle  Concepts de lignes et colonnes  Indépendant de lordre HTML  Positionnement ...
Concept de grillebody {  display: grid   Et hop !}
Colonnesbody {  display: grid ;  grid-columns: 250px 1fr;}
Colonnesbody {    display: grid ;    grid-columns: 250px 1fr;}nav {  grid-column: 1;}section {  grid-column: 2;}
Lignes / Colonnesbody {     display: grid ;     grid-columns: 250px 1fr;     grid-rows: 100px 300px;}nav {     grid-column...
Motifs répétésbody {                                 correspond à   display: grid ;                     10px 1fr 10px 1fr ...
Distributionbody {   display: grid ;   grid-columns: 250px 1fr;   grid-rows: 100px 300px;}header {   grid-column: 1;   gri...
Templatebody {                      Template syntax    display: grid ;    grid-template: "hh"                    "nc"     ...
Alignementssection {     grid-row-align: center;}article {     grid-column-align: center;}aside {     grid-row-align: cent...
Fluide !body {                      body {   display: grid ;             display: grid ;   grid-template: "abcd";      gri...
Compatibilité
Transitions / Animations
Transitions / AnimationsCSS3 Transitions« Transition CSS3 permet une évolutionprogressive entre deux valeurs dunepropriété...
Transitionsdiv {     width: 100px;     transition: 1s;}div:hover {     width: 200px;}
Transitions                                   Propriété                                   Durée                           ...
Animations                                          Déclaration de lanimation « kiwi »                                    ...
DémosThe Expressive Web        Applehttp://bit.ly/mstd1       http://www.apple.com/AT-AT Walker              Photogamehttp...
Compatibilité
A l’assaut !
Où est la grille ?
Yeah, HTML5 !
Floatitude !
Floatitude !float                 float   absolute                   float                                         float f...
mstechdays.fr 4 redirections d’URL 155 requêtes 33 fichiers JS externes 6 iframes 22.36s de chargement sur bureau 8s de ch...
mstechdays.fr  95 flottants  20 clear : both  65 position: absolute  60 position: relative  plusieurs surcouches CSS sur c...
Grand Ménage !         couche « reset » perso :         display : none         width : auto ; height : auto         float ...
Grilles428px     284px   284px   284px
Grilles428px     284px   284px   284px
Grilles#inGrid {    display: grid ;    grid-columns: 428px 284px 284px 284px;    grid-rows: 132px 132px 140px;}#grid1 {   ...
Media Queries@media (max-width: 1280px) {  #inGrid {      grid-columns: 428px 284px 284px;      grid-rows: 132px 132px 140...
Media Queries@media (max-width: 1000px) {  #inGrid {      grid-columns: 428px 284px;      grid-rows: 132px 132px 140px 140...
Finish Him !               TechDays remix               http://bit.ly/mstd2012           couche « reset » perso :         ...
Merci !          Raphaël Goetter           www.alsacreations.com           www.goetter.fr           www.ie7nomore.com     ...
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)
Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)
Prochain SlideShare
Chargement dans…5
×

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

9 827 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
9 827
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3 540
Actions
Partages
0
Téléchargements
109
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. palais descongrèsParis7, 8 et 9février 2012
  2. 2. Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations8 février 2012Raphaë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’appliquerdes 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 sadapte Aucune intervention sur le serveur Pas de langage de développement Tout est possible visuellement CSS est fait pour ça !
  8. 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. 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. 10. <link rel="stylesheet" media="screen and (max-width : 640px)" href="mobile.css">
  11. 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. 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 rowspanbidouilles position: absolute reset marges négatives commentaires clearcalques conditionnels colspan frameworks CSS &nbsp; hacks
  15. 15. Grid LayoutCSS3 Grid Layout« Représentation virtuelle composée delignes, de colonnes et de cellules. »
  16. 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. 17. Concept de grillebody { display: grid Et hop !}
  18. 18. Colonnesbody { display: grid ; grid-columns: 250px 1fr;}
  19. 19. Colonnesbody { display: grid ; grid-columns: 250px 1fr;}nav { grid-column: 1;}section { grid-column: 2;}
  20. 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. 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. 22. Distributionbody { display: grid ; grid-columns: 250px 1fr; grid-rows: 100px 300px;}header { grid-column: 1; grid-row: 1; grid-column-span: 2 ;}…
  23. 23. Templatebody { Template syntax display: grid ; grid-template: "hh" "nc" "ff";}header { grid-cell: "h";}nav { grid-cell: "n";}…
  24. 24. Alignementssection { 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 / 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. 29. Transitionsdiv { width: 100px; transition: 1s;}div:hover { width: 200px;}
  30. 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. 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. 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. 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 floatabsoluteabsolute 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. Grilles428px 284px 284px 284px
  43. 43. Grilles428px 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

×