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. 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 !
  2. 3.

    Temps 1 : imparfait ▪ display : block ▪ display

    : inline ▪ margin / padding ▪ frames / framesets ▪ calques « Dreamweaver » ▪ tableaux HTML
  3. 4.

    Temps 2 : Présent de l'indicatif ▪ float + clear

    ▪ position absolute + position relative
  4. 5.

    Web Event Lyon 2012 http://event.lafermeduweb.net ▪ float : 66x ▪

    clear : 8x ▪ position absolute : 27x ▪ position relative : 20x
  5. 9.
  6. 10.
  7. 26.

    Temps 5 : Futur du subjonctif ▪ flexible box model

    ▪ grid layout model ▪ regions ▪ exclusions
  8. 27.
  9. 28.
  10. 31.
  11. 32.
  12. 34.
  13. 35.
  14. 36.
  15. 42.

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

    nav { grid-column: 1; } section { grid-column: 2; }
  16. 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; } …
  17. 44.

    body { display: grid ; grid-columns: 10px (1fr 10px)[4]; }

    … correspond à 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px Répétitions
  18. 45.

    body { display: grid; grid-columns: 250px 1fr; grid-rows: 100px 300px;

    } header { grid-column: 1; grid-row: 1; grid-column-span: 2; } … Distribution
  19. 46.

    body { display: grid; grid-template: "hh" "nc" "ff"; } header

    { grid-cell: "h"; } nav { grid-cell: "n"; } … Template syntax Template
  20. 47.

    section { grid-row-align: center; } article { grid-column-align: center; }

    aside { grid-row-align: center; grid-column-align: center; } Alignements
  21. 48.

    Adaptatif ! body { display: grid; grid-template: "abcd"; } body

    { display: grid; grid-template: "a" "b" "c" "d"; }
  22. 51.
  23. 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>
  24. 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; }
  25. 54.
  26. 62.

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

    multicolumns flexbox / grid regions / exclusions CSS4 ?