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

Le Futur du positionnement CSS

on

  • 5,365 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,365
Vues sur SlideShare
5,039
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.
    Are you sure you want to
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire

Le Futur du positionnement CSS Le Futur du positionnement CSS Presentation Transcript

  • Positionnement CSS : l’avenir du futur15 juin 2012Raphaël GoetterCheerleader Alsacréations
  • 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
  • Temps 1 : imparfait▪ display : block▪ display : inline▪ margin / padding▪ frames / framesets▪ calques « Dreamweaver »▪ tableaux HTML View slide
  • Temps 2 : Présent de lindicatif ▪ float + clear ▪ position absolute + position relative View slide
  • Web Event Lyon 2012 http://event.lafermeduweb.net▪ float : 66x▪ clear : 8x▪ position absolute : 27x▪ position relative : 20x
  • Temps 3 : Futur simple▪ display : inline-block▪ display : table-cell
  • display : inline-block
  • display inline-block
  • display inline-block
  • display : table
  • display table-*
  • display table-*
  • display table-*
  • Répartition auto
  • Centrage vertical
  • display table-*
  • Temps 4 : Futur antérieur▪ CSS3 Multicolumns
  • Multicolumns
  • Multi-columns
  • Multi-columns
  • Distribution
  • Listes ordonnées
  • CSS Multi-columns
  • Temps 5 : Futur du subjonctif ▪ flexible box model ▪ grid layout model ▪ regions ▪ exclusions
  • Flexbox
  • Flex en action
  • Lignes et Colonnes
  • Reverse
  • Fluidité
  • Alignements
  • CSS Flexbox
  • Grid Layout
  • CSS3 Grid Layout« Représentation virtuelle composéede lignes, de colonnes et de cellules. »
  • body { display: grid Et hop !} La Grille
  • body { display: grid ; grid-columns: 250px 1fr;} Colonnes
  • body { display: grid ; grid-columns: 250px 1fr;}nav { grid-column: 1;}section { grid-column: 2;} Colonnes
  • 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;}…
  • body { correspond à 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px display: grid ; grid-columns: 10px (1fr 10px)[4];}… Répétitions
  • body { display: grid; grid-columns: 250px 1fr; grid-rows: 100px 300px;}header { grid-column: 1; grid-row: 1; grid-column-span: 2;}… Distribution
  • body { display: grid; Template grid-template: "hh" syntax "nc" "ff";}header { grid-cell: "h";}nav { grid-cell: "n";}… Template
  • section { grid-row-align: center;}article { grid-column-align: center;}aside { grid-row-align: center; grid-column-align: center;} Alignements
  • body { body { display: grid; display: grid; grid-template: "abcd"; grid-template:} "a" "b" "c" "d"; } Adaptatif !
  • CSS Grid Layout
  • CSS regions
  • <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>
  • <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;}
  • CSS regions
  • CSS exclusions
  • #exclusion {float :positionned ; wrap-flow: auto}
  • #exclusion {float :positionned ; wrap-flow: both}
  • #exclusion {float :positionned ; shape-inside: circle} ‘rectangle’, ‘circle’, ‘ellipse’ or ‘polygon’
  • ▪ http://labs.adobe.com/downloads/cssregions.html Démo !
  • Et ensuite ? CSS 4 ?
  • 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
  • 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
  • Merci ! Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter