Le futur du positionnement CSS

Web Event Lyon 2012

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