Positionnement CSS :       l’avenir du futur15 juin 2012Raphaël GoetterCheerleader Alsacréations
Où en est-on ?                                 flux                        spacer.gif position: relative         frames   ...
Temps 1 : imparfait▪ display : block▪ display : inline▪ margin / padding▪ frames / framesets▪ calques « Dreamweaver »▪ tab...
Temps 2 : Présent de lindicatif  ▪ float + clear  ▪ position absolute +    position relative
Web Event Lyon 2012       http://event.lafermeduweb.net▪ float : 66x▪ clear : 8x▪ position absolute : 27x▪ position relati...
Temps 3 : Futur simple▪ display : inline-block▪ display : table-cell
display : inline-block
display inline-block
display inline-block
display : table
display table-*
display table-*
display table-*
Répartition auto
Centrage vertical
display table-*
Temps 4 : Futur antérieur▪   CSS3 Multicolumns
Multicolumns
Multi-columns
Multi-columns
Distribution
Listes ordonnées
CSS Multi-columns
Temps 5 : Futur du subjonctif ▪ flexible box model ▪ grid layout model ▪ regions ▪ exclusions
Flexbox
Flex en action
Lignes et Colonnes
Reverse
Fluidité
Alignements
CSS Flexbox
Grid Layout
CSS3 Grid Layout« Représentation virtuelle composéede lignes, de colonnes et de cellules. »
body {  display: grid    Et hop !}            La Grille
body {  display: grid ;  grid-columns: 250px 1fr;}            Colonnes
body {   display: grid ;   grid-columns: 250px 1fr;}nav {    grid-column: 1;}section {    grid-column: 2;}                ...
body {   display: grid ;   grid-columns: 250px 1fr;   grid-rows: 100px 300px;}nav {   grid-column: 1;   grid-row: 1;}artic...
body {                             correspond à                                   10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px...
body {   display: grid;   grid-columns: 250px 1fr;   grid-rows: 100px 300px;}header {   grid-column: 1;   grid-row: 1;   g...
body {    display: grid;                              Template    grid-template:    "hh"    syntax                      "n...
section {    grid-row-align: center;}article {    grid-column-align: center;}aside {    grid-row-align: center;    grid-co...
body {                       body {    display: grid;               display: grid;    grid-template: "abcd";       grid-te...
CSS Grid Layout
CSS regions
<div id="origin"><p>Lorem Salu bissame ! Wie gehts lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, sil te...
<div id="origin"><p>Lorem Salu bissame ! Wie gehts lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, sil te...
CSS regions
CSS exclusions
#exclusion {float :positionned ; wrap-flow: auto}
#exclusion {float :positionned ; wrap-flow: both}
#exclusion {float :positionned ; shape-inside: circle}            ‘rectangle’, ‘circle’, ‘ellipse’ or ‘polygon’
▪   http://labs.adobe.com/downloads/cssregions.html                            Démo !
Et ensuite ? CSS 4 ?
CSS evolution     es ble>                         ble        ns                   /             ?    m ta              sit...
Crédits photos▪   http://www.flickr.com/photos/41597157@N00/6919795175/▪   http://www.flickr.com/photos/8070463@N03/248468...
Merci !          Raphaël Goetter          www.alsacreations.com          www.goetter.fr          www.ie7nomore.com        ...
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Prochain SlideShare
Chargement dans... 5
×

Le Futur du positionnement CSS

5,160

Published on

Parce qu’un jour CSS nous promet de ne plus avoir à nous torturer avec des bidouilles de positionnement, des bugs d’affichage, des hacks, des flottants mal employés, des position: absolute tordues, des position: relative ou des clear: both sortis de nulle part, du centrage vertical intuitif, toussa.

Un jour vous pourrez dire : j’y étais, c’était le bon vieux temps.
Mais pas encore.

On y parlera de diverses spécifications (en plein brouillon ou non) telles que : inline-block, CSS table, multicolonnes, flexbox, grid layout, float : position, regions, exclusions, CSS4, etc.

Published in: Technologies
0 commentaires
4 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Total des vues
5,160
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
4
Actions
Partages
0
Téléchargements
64
Commentaires
0
J'aime
4
Ajouts 0
No embeds

No notes for slide

Transcript of "Le Futur du positionnement CSS"

  1. 1. Positionnement CSS : l’avenir du futur15 juin 2012Raphaël GoetterCheerleader Alsacréations
  2. 2. Où en est-on ? flux spacer.gif position: relative frames bugs IE6 must die ! <br><br><br> <table> rowspanbidouilles float position: absolute reset marges négatives commentaires clearcalques conditionnels colspan frameworks CSS &nbsp; hacks
  3. 3. Temps 1 : imparfait▪ display : block▪ display : inline▪ margin / padding▪ frames / framesets▪ calques « Dreamweaver »▪ tableaux HTML
  4. 4. Temps 2 : Présent de lindicatif ▪ float + clear ▪ position absolute + position relative
  5. 5. Web Event Lyon 2012 http://event.lafermeduweb.net▪ float : 66x▪ clear : 8x▪ position absolute : 27x▪ position relative : 20x
  6. 6. Temps 3 : Futur simple▪ display : inline-block▪ display : table-cell
  7. 7. display : inline-block
  8. 8. display inline-block
  9. 9. display inline-block
  10. 10. display : table
  11. 11. display table-*
  12. 12. display table-*
  13. 13. display table-*
  14. 14. Répartition auto
  15. 15. Centrage vertical
  16. 16. display table-*
  17. 17. Temps 4 : Futur antérieur▪ CSS3 Multicolumns
  18. 18. Multicolumns
  19. 19. Multi-columns
  20. 20. Multi-columns
  21. 21. Distribution
  22. 22. Listes ordonnées
  23. 23. CSS Multi-columns
  24. 24. Temps 5 : Futur du subjonctif ▪ flexible box model ▪ grid layout model ▪ regions ▪ exclusions
  25. 25. Flexbox
  26. 26. Flex en action
  27. 27. Lignes et Colonnes
  28. 28. Reverse
  29. 29. Fluidité
  30. 30. Alignements
  31. 31. CSS Flexbox
  32. 32. Grid Layout
  33. 33. CSS3 Grid Layout« Représentation virtuelle composéede lignes, de colonnes et de cellules. »
  34. 34. body { display: grid Et hop !} La Grille
  35. 35. body { display: grid ; grid-columns: 250px 1fr;} Colonnes
  36. 36. body { display: grid ; grid-columns: 250px 1fr;}nav { grid-column: 1;}section { grid-column: 2;} Colonnes
  37. 37. 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;}…
  38. 38. body { correspond à 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px display: grid ; grid-columns: 10px (1fr 10px)[4];}… Répétitions
  39. 39. body { display: grid; grid-columns: 250px 1fr; grid-rows: 100px 300px;}header { grid-column: 1; grid-row: 1; grid-column-span: 2;}… Distribution
  40. 40. body { display: grid; Template grid-template: "hh" syntax "nc" "ff";}header { grid-cell: "h";}nav { grid-cell: "n";}… Template
  41. 41. section { grid-row-align: center;}article { grid-column-align: center;}aside { grid-row-align: center; grid-column-align: center;} Alignements
  42. 42. body { body { display: grid; display: grid; grid-template: "abcd"; grid-template:} "a" "b" "c" "d"; } Adaptatif !
  43. 43. CSS Grid Layout
  44. 44. CSS regions
  45. 45. <div id="origin"><p>Lorem Salu bissame ! Wie gehts lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, sil te plaît. […]</p></div><div id="layout"> <p>1)</p> <p>2)</p> <img src="img.jpg" alt=""> <p>3)</p> <p>4)</p> <p>5)</p> <p>6)</p></div>
  46. 46. <div id="origin"><p>Lorem Salu bissame ! Wie gehts lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, sil te plaît. […]</p></div><div id="layout"> <p>1)</p> <p>2)</p> <img src="img.jpg" alt=""> <p>3)</p> <p>4)</p> <p>5)</p> <p>6)</p></div>#origin { flow-into: kiwi;}#layout p { flow-from: kiwi;}
  47. 47. CSS regions
  48. 48. CSS exclusions
  49. 49. #exclusion {float :positionned ; wrap-flow: auto}
  50. 50. #exclusion {float :positionned ; wrap-flow: both}
  51. 51. #exclusion {float :positionned ; shape-inside: circle} ‘rectangle’, ‘circle’, ‘ellipse’ or ‘polygon’
  52. 52. ▪ http://labs.adobe.com/downloads/cssregions.html Démo !
  53. 53. Et ensuite ? CSS 4 ?
  54. 54. CSS evolution es ble> ble ns / ? m ta sition ta m d gri ions S4 fra < po lay lock lticolu ox / reg sions C S / p b loa t dis ne-b mu flex lu f in li exc
  55. 55. Crédits photos▪ http://www.flickr.com/photos/41597157@N00/6919795175/▪ http://www.flickr.com/photos/8070463@N03/2484684062/▪ http://www.flickr.com/photos/7762644@N04/2220008689/▪ http://www.flickr.com/photos/please/131241808/▪ www.GdeFon.ru (CSS evolution)▪ http://www.flickr.com/photos/7900943@N06/3084329562/▪ http://www.toutsaufsarkozy.com
  56. 56. Merci ! Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×