Your SlideShare is downloading. ×
0
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Le Futur du positionnement CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Le Futur du positionnement CSS

5,103

Published on

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, …

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,103
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
64
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Positionnement CSS : l’avenir du futur15 juin 2012Raphaël GoetterCheerleader Alsacréations
  • 2. Où en est-on ? flux spacer.gif position: relative frames bugs IE6 must die ! <br><br><br> <table> rowspanbidouilles float position: absolute reset marges négatives commentaires clearcalques 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 lindicatif ▪ 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. display inline-block
  • 10. display : table
  • 11. display table-*
  • 12. display table-*
  • 13. display table-*
  • 14. Répartition auto
  • 15. Centrage vertical
  • 16. display table-*
  • 17. Temps 4 : Futur antérieur▪ CSS3 Multicolumns
  • 18. Multicolumns
  • 19. Multi-columns
  • 20. Multi-columns
  • 21. Distribution
  • 22. Listes ordonnées
  • 23. CSS Multi-columns
  • 24. Temps 5 : Futur du subjonctif ▪ flexible box model ▪ grid layout model ▪ regions ▪ exclusions
  • 25. Flexbox
  • 26. Flex en action
  • 27. Lignes et Colonnes
  • 28. Reverse
  • 29. Fluidité
  • 30. Alignements
  • 31. CSS Flexbox
  • 32. Grid Layout
  • 33. CSS3 Grid Layout« Représentation virtuelle composéede lignes, de colonnes et de cellules. »
  • 34. body { display: grid Et hop !} La Grille
  • 35. body { display: grid ; grid-columns: 250px 1fr;} Colonnes
  • 36. body { display: grid ; grid-columns: 250px 1fr;}nav { grid-column: 1;}section { grid-column: 2;} Colonnes
  • 37. 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;}…
  • 38. body { correspond à 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px display: grid ; grid-columns: 10px (1fr 10px)[4];}… Répétitions
  • 39. body { display: grid; grid-columns: 250px 1fr; grid-rows: 100px 300px;}header { grid-column: 1; grid-row: 1; grid-column-span: 2;}… Distribution
  • 40. body { display: grid; Template grid-template: "hh" syntax "nc" "ff";}header { grid-cell: "h";}nav { grid-cell: "n";}… Template
  • 41. section { grid-row-align: center;}article { grid-column-align: center;}aside { grid-row-align: center; grid-column-align: center;} Alignements
  • 42. body { body { display: grid; display: grid; grid-template: "abcd"; grid-template:} "a" "b" "c" "d"; } Adaptatif !
  • 43. CSS Grid Layout
  • 44. CSS regions
  • 45. <div id="origin"><p>Lorem Salu bissame ! Wie gehts lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, sil 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>
  • 46. <div id="origin"><p>Lorem Salu bissame ! Wie gehts lessamis ? Hans apporte moi une Wurschtsalad avec un piconbitte, sil 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;}
  • 47. CSS regions
  • 48. CSS exclusions
  • 49. #exclusion {float :positionned ; wrap-flow: auto}
  • 50. #exclusion {float :positionned ; wrap-flow: both}
  • 51. #exclusion {float :positionned ; shape-inside: circle} ‘rectangle’, ‘circle’, ‘ellipse’ or ‘polygon’
  • 52. ▪ http://labs.adobe.com/downloads/cssregions.html Démo !
  • 53. Et ensuite ? CSS 4 ?
  • 54. 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
  • 55. 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
  • 56. Merci ! Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter

×