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
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
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
29. Flex en action
30. Lignes et Colonnes
31. Reverse
32. Fluidité
33. Alignements
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
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; }
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