Le Futur du positionnement CSS
Prochain SlideShare
Loading in...5
×

Vous aimez ? Partagez donc ce contenu avec votre réseau

Partager

Le Futur du positionnement CSS

  • 5,496 vues
Uploaded 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.

Plus dans : Technologies
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Be the first to comment
No Downloads

Vues

Total des vues
5,496
Sur Slideshare
5,170
From Embeds
326
Nombre d'ajouts
4

Actions

Partages
Téléchargements
62
Commentaires
0
J'aime
4

Ajouts 326

http://www.scoop.it 289
http://blog.goetter.fr 34
https://twitter.com 2
https://si0.twimg.com 1

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