Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Le futur du positionnement CSS

Le futur du positionnement CSS

Web Event Lyon 2012

Raphael Goetter

June 15, 2012
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

  1. Positionnement CSS :
    l’avenir du futur
    15 juin 2012
    Raphaël Goetter
    Cheerleader Alsacréations

    View Slide

  2. Où en est-on ?
    position: relative




    frames
    spacer.gif
    marges négatives
    float
    position: absolute

    colspan hacks
    clear
    bidouilles
    flux
    bugs
    rowspan
    reset
    commentaires
    conditionnels
     
    calques
    frameworks CSS
    IE6 must die !

    View Slide

  3. Temps 1 : imparfait
    ▪ display : block
    ▪ display : inline
    ▪ margin / padding
    ▪ frames / framesets
    ▪ calques « Dreamweaver »
    ▪ tableaux HTML

    View Slide

  4. Temps 2 : Présent de l'indicatif
    ▪ float + clear
    ▪ position absolute +
    position relative

    View Slide

  5. Web Event Lyon 2012
    http://event.lafermeduweb.net
    ▪ float : 66x
    ▪ clear : 8x
    ▪ position absolute : 27x
    ▪ position relative : 20x

    View Slide

  6. Temps 3 : Futur simple
    ▪ display : inline-block
    ▪ display : table-cell

    View Slide

  7. display : inline-block

    View Slide

  8. display inline-block

    View Slide

  9. View Slide

  10. View Slide

  11. display inline-block

    View Slide

  12. display : table

    View Slide

  13. display table-*

    View Slide

  14. display table-*

    View Slide

  15. display table-*

    View Slide

  16. Répartition auto

    View Slide

  17. Centrage vertical

    View Slide

  18. display table-*

    View Slide

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

    View Slide

  20. Multicolumns

    View Slide

  21. Multi-columns

    View Slide

  22. Multi-columns

    View Slide

  23. Distribution

    View Slide

  24. Listes ordonnées

    View Slide

  25. CSS Multi-columns

    View Slide

  26. Temps 5 : Futur du subjonctif
    ▪ flexible box model
    ▪ grid layout model
    ▪ regions
    ▪ exclusions

    View Slide

  27. Flexbox

    View Slide

  28. View Slide

  29. Flex en action

    View Slide

  30. Lignes et Colonnes

    View Slide

  31. Reverse

    View Slide

  32. Fluidité

    View Slide

  33. Alignements

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. CSS Flexbox

    View Slide

  38. Grid Layout

    View Slide

  39. CSS3 Grid Layout
    « Représentation virtuelle composée
    de lignes, de colonnes et de cellules. »

    View Slide

  40. body {
    display: grid
    }
    Et hop !
    La Grille

    View Slide

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

    View Slide

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

    View Slide

  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;
    }

    View Slide

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

    correspond à
    10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px
    Répétitions

    View Slide

  45. body {
    display: grid;
    grid-columns: 250px 1fr;
    grid-rows: 100px 300px;
    }
    header {
    grid-column: 1;
    grid-row: 1;
    grid-column-span: 2;
    }

    Distribution

    View Slide

  46. body {
    display: grid;
    grid-template: "hh"
    "nc"
    "ff";
    }
    header {
    grid-cell: "h";
    }
    nav {
    grid-cell: "n";
    }

    Template
    syntax
    Template

    View Slide

  47. section {
    grid-row-align: center;
    }
    article {
    grid-column-align: center;
    }
    aside {
    grid-row-align: center;
    grid-column-align: center;
    }
    Alignements

    View Slide

  48. Adaptatif !
    body {
    display: grid;
    grid-template: "abcd";
    }
    body {
    display: grid;
    grid-template:
    "a"
    "b"
    "c"
    "d";
    }

    View Slide

  49. CSS Grid Layout

    View Slide

  50. CSS regions

    View Slide

  51. View Slide

  52. Lorem Salu bissame ! Wie geht's les
    samis ? Hans apporte moi une Wurschtsalad avec un picon
    bitte, s'il te plaît. […]

    1)
    2)

    3)
    4)
    5)
    6)

    View Slide

  53. Lorem Salu bissame ! Wie geht's les
    samis ? Hans apporte moi une Wurschtsalad avec un picon
    bitte, s'il te plaît. […]

    1)
    2)

    3)
    4)
    5)
    6)

    #origin {
    flow-into: kiwi;
    }
    #layout p {
    flow-from: kiwi;
    }

    View Slide

  54. View Slide

  55. CSS regions

    View Slide

  56. CSS exclusions

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  61. Et ensuite ? CSS 4 ?

    View Slide

  62. CSS evolution
    frames

    float / position
    display table
    inline-block
    multicolumns
    flexbox / grid
    regions /
    exclusions CSS4 ?

    View Slide

  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

    View Slide

  64. Merci !
    www.alsacreations.com
    www.goetter.fr
    www.ie7nomore.com
    @goetter
    Raphaël Goetter

    View Slide