Le futur du positionnement CSS

Le futur du positionnement CSS

Web Event Lyon 2012

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

June 15, 2012
Tweet

Transcript

  1. Positionnement CSS : l’avenir du futur 15 juin 2012 Raphaël

    Goetter Cheerleader Alsacréations
  2. 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 !
  3. Temps 1 : imparfait ▪ display : block ▪ display

    : inline ▪ margin / padding ▪ frames / framesets ▪ calques « Dreamweaver » ▪ tableaux HTML
  4. Temps 2 : Présent de l'indicatif ▪ float + clear

    ▪ position absolute + position relative
  5. Web Event Lyon 2012 http://event.lafermeduweb.net ▪ float : 66x ▪

    clear : 8x ▪ position absolute : 27x ▪ position relative : 20x
  6. Temps 3 : Futur simple ▪ display : inline-block ▪

    display : table-cell
  7. display : inline-block

  8. display inline-block

  9. None
  10. None
  11. display inline-block

  12. display : table

  13. display table-*

  14. display table-*

  15. display table-*

  16. Répartition auto

  17. Centrage vertical

  18. display table-*

  19. Temps 4 : Futur antérieur ▪ CSS3 Multicolumns

  20. Multicolumns

  21. Multi-columns

  22. Multi-columns

  23. Distribution

  24. Listes ordonnées

  25. CSS Multi-columns

  26. Temps 5 : Futur du subjonctif ▪ flexible box model

    ▪ grid layout model ▪ regions ▪ exclusions
  27. Flexbox

  28. None
  29. Flex en action

  30. Lignes et Colonnes

  31. Reverse

  32. Fluidité

  33. Alignements

  34. None
  35. None
  36. None
  37. CSS Flexbox

  38. Grid Layout

  39. CSS3 Grid Layout « Représentation virtuelle composée de lignes, de

    colonnes et de cellules. »
  40. body { display: grid } Et hop ! La Grille

  41. Colonnes body { display: grid ; grid-columns: 250px 1fr; }

  42. Colonnes body { display: grid ; grid-columns: 250px 1fr; }

    nav { grid-column: 1; } section { grid-column: 2; }
  43. 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; } …
  44. body { display: grid ; grid-columns: 10px (1fr 10px)[4]; }

    … correspond à 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px Répétitions
  45. body { display: grid; grid-columns: 250px 1fr; grid-rows: 100px 300px;

    } header { grid-column: 1; grid-row: 1; grid-column-span: 2; } … Distribution
  46. body { display: grid; grid-template: "hh" "nc" "ff"; } header

    { grid-cell: "h"; } nav { grid-cell: "n"; } … Template syntax Template
  47. section { grid-row-align: center; } article { grid-column-align: center; }

    aside { grid-row-align: center; grid-column-align: center; } Alignements
  48. Adaptatif ! body { display: grid; grid-template: "abcd"; } body

    { display: grid; grid-template: "a" "b" "c" "d"; }
  49. CSS Grid Layout

  50. CSS regions

  51. None
  52. <div id="origin"><p>Lorem Salu bissame ! Wie geht's les samis ?

    Hans apporte moi une Wurschtsalad avec un picon bitte, s'il 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>
  53. <div id="origin"><p>Lorem Salu bissame ! Wie geht's les samis ?

    Hans apporte moi une Wurschtsalad avec un picon bitte, s'il 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; }
  54. None
  55. CSS regions

  56. CSS exclusions

  57. #exclusion {float :positionned ; wrap-flow: auto}

  58. #exclusion {float :positionned ; wrap-flow: both}

  59. #exclusion {float :positionned ; shape-inside: circle} ‘rectangle’, ‘circle’, ‘ellipse’ or

    ‘polygon’
  60. ▪ http://labs.adobe.com/downloads/cssregions.html Démo !

  61. Et ensuite ? CSS 4 ?

  62. CSS evolution frames <table> float / position display table inline-block

    multicolumns flexbox / grid regions / exclusions CSS4 ?
  63. 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
  64. Merci ! www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter Raphaël Goetter