Your SlideShare is downloading. ×
Le Futur du positionnement CSS
Prochain SlideShare
Chargement dans... 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

4,814
views

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: Technologies

0 commentaires
4 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Total des vues
4,814
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
4
Actions
Partages
0
Téléchargements
62
Commentaires
0
J'aime
4
Ajouts 0
No embeds

Signaler un contenu
Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
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