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

Like this? Share it with your network

Share

Le Futur du positionnement CSS

le

  • 5,417 vues

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 ...

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.

Statistiques

Vues

Total des vues
5,417
Vues sur SlideShare
5,091
Vues externes
326

Actions

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

4 Ajouts 326

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

Accessibilité

Catégories

Détails de l'import

Uploaded via as Adobe PDF

Droits d'utilisation

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

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
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire

Le Futur du positionnement CSS Presentation 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