Parce qu’un jour CSS nous promet de ne plus avoir à nous torturer avec des bidouilles de positionnement, des bugs d’affichage, des hacks, des flottants mal employés, des position: absolute tordues, des position: relative ou des clear: both sortis de nulle part, du centrage vertical intuitif, toussa. Un jour vous pourrez dire : j’y étais, c’était le bon vieux temps. Mais pas encore. On y parlera de diverses spécifications (en plein brouillon ou non) telles que : inline-block, CSS table, multicolonnes, flexbox, grid layout, float : position, regions, exclusions, CSS4, etc.

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

2. Où en est-on ?
flux
spacer.gif
position: relative
frames bugs IE6 must die !
<br><br><br>
<table> rowspan
bidouilles float position: absolute reset
marges négatives
commentaires clear
calques conditionnels
colspan
frameworks CSS &nbsp; hacks

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. body {
display: grid ;
grid-columns: 250px 1fr;
}
Colonnes

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

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 { correspond à
10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px
display: grid ;
grid-columns: 10px (1fr 10px)[4];
}
…
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;
Template
grid-template: "hh" syntax
"nc"
"ff";
}
header {
grid-cell: "h";
}
nav {
grid-cell: "n";
}
…
Template

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

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

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
es ble> ble ns / ?
m ta sition ta m
d
gri ions S4
fra < po lay lock lticolu ox
/
reg sions C S
/ p b
loa
t dis ne-b mu flex lu
f
in li exc

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 !
Raphaël Goetter
www.alsacreations.com
www.goetter.fr
www.ie7nomore.com
@goetter