SlideShare une entreprise Scribd logo
Positionnement CSS :
       l’avenir du futur


13 novembre 2012
Raphaël Goetter
Cheerleader Alsacréations
Futur antérieur

▪   CSS3 Multicolumns
Multicolumns
Multi-columns
Multi-columns
Distribution
Listes ordonnées
CSS Multi-columns
Futur du subjonctif

▪ flexible box model
▪ grid layout model
▪ regions
▪ exclusions
Flexbox
Futur du-positionnement-css
Flex en action
Lignes et Colonnes
Reverse
Fluidité
Alignements
Futur du-positionnement-css
Ordre d'affichage
CSS Flexbox
Grid Layout
CSS3 Grid Layout
« Représentation virtuelle composée
de 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
Futur du-positionnement-css
<div id="origin"><p>Lorem Salu bissame ! Wie geht's les
samis ? Hans apporte moi une Wurschtsalad avec un picon
bitte, s'il 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 geht's les
samis ? Hans apporte moi une Wurschtsalad avec un picon
bitte, s'il 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;
}
Futur du-positionnement-css
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 !
CSS evolution




      s                  n                       s           d                     ?
    me table> ositio               e
                                abl k        mn           gri ions /           S4 
fra                           t            lu           /                C   S
        <         / p    p lay bloc ultico         b ox      reg sions
            loa
                t     dis ine-        m       flex                lu
          f
                          inl                                 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

Contenu connexe

Similaire à Futur du-positionnement-css

Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Microsoft
 
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Mehdi Kabab
 
Chapitre 2 - Programmation web - 3) Le CSS.pdf
Chapitre 2 - Programmation web - 3) Le CSS.pdfChapitre 2 - Programmation web - 3) Le CSS.pdf
Chapitre 2 - Programmation web - 3) Le CSS.pdf
AnouAr42
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
Kaelig Deloumeau-Prigent
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
davrous
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez
 
CSS3
CSS3CSS3
CSS3
Neovov
 
Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…
Romy Duhem-Verdière
 
L'animation newschool en html5
L'animation newschool en html5L'animation newschool en html5
L'animation newschool en html5
Christophe Villeneuve
 

Similaire à Futur du-positionnement-css (9)

Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et AnimationsTrois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
 
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
Intégrateur web aime sass pour ton bien, BLEND Web Mix 2013
 
Chapitre 2 - Programmation web - 3) Le CSS.pdf
Chapitre 2 - Programmation web - 3) Le CSS.pdfChapitre 2 - Programmation web - 3) Le CSS.pdf
Chapitre 2 - Programmation web - 3) Le CSS.pdf
 
CSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de styleCSS Facile : organiser ses feuilles de style
CSS Facile : organiser ses feuilles de style
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
CSS3
CSS3CSS3
CSS3
 
Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…Cascade et héritage : concevoir, organiser, optimiser…
Cascade et héritage : concevoir, organiser, optimiser…
 
L'animation newschool en html5
L'animation newschool en html5L'animation newschool en html5
L'animation newschool en html5
 

Plus de Raphaël Goetter

Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
Raphaël Goetter
 
Introduction à la performance web
Introduction à la performance webIntroduction à la performance web
Introduction à la performance web
Raphaël Goetter
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
Raphaël Goetter
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
Raphaël Goetter
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
Raphaël Goetter
 
Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !
Raphaël Goetter
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Raphaël Goetter
 
Quiz
QuizQuiz
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
Raphaël Goetter
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011
Raphaël Goetter
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)
Raphaël Goetter
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Raphaël Goetter
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Raphaël Goetter
 

Plus de Raphaël Goetter (14)

Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
Introduction à la performance web
Introduction à la performance webIntroduction à la performance web
Introduction à la performance web
 
10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile10 Revelations sur le Web Mobile
10 Revelations sur le Web Mobile
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
Vive les tableaux de mise en page !
Vive les tableaux de mise en page !Vive les tableaux de mise en page !
Vive les tableaux de mise en page !
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
Quiz finalistes
Quiz finalistesQuiz finalistes
Quiz finalistes
 
Quiz
QuizQuiz
Quiz
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
 
Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011Presentation de la Kiwi Party 2011
Presentation de la Kiwi Party 2011
 
Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)Atelier CSS positionnement (Paris web 2007)
Atelier CSS positionnement (Paris web 2007)
 
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)Jouons un peu avec CSS3 (Kiwiparty avril 2010)
Jouons un peu avec CSS3 (Kiwiparty avril 2010)
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 

Futur du-positionnement-css