Le futur du positionnement CSS

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