SlideShare une entreprise Scribd logo
1  sur  64
Télécharger pour lire hors ligne
Positionnement CSS :
       l’avenir du futur


15 juin 2012
Raphaël Goetter
Cheerleader Alsacréations
Où en est-on ?
                                 flux
                        spacer.gif
 position: relative
         frames     bugs IE6 must die !
 <br><br><br>
                           <table> rowspan
bidouilles    float       position: absolute reset
     marges négatives
                         commentaires    clear
calques                  conditionnels
             colspan
  frameworks CSS            &nbsp;       hacks
Temps 1 : imparfait

▪ display : block
▪ display : inline
▪ margin / padding
▪ frames / framesets
▪ calques « Dreamweaver »
▪ tableaux HTML
Temps 2 : Présent de l'indicatif

  ▪ float + clear
  ▪ position absolute +

    position relative
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é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
<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;
}
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

Contenu connexe

En vedette

Convention Medialibs : Raphaël Goetter (Introduction à la performance web)
Convention Medialibs : Raphaël Goetter (Introduction  à la performance web)Convention Medialibs : Raphaël Goetter (Introduction  à la performance web)
Convention Medialibs : Raphaël Goetter (Introduction à la performance web)
Medialibs
 

En vedette (11)

Convention Medialibs : Raphaël Goetter (Introduction à la performance web)
Convention Medialibs : Raphaël Goetter (Introduction  à la performance web)Convention Medialibs : Raphaël Goetter (Introduction  à la performance web)
Convention Medialibs : Raphaël Goetter (Introduction à la performance web)
 
La vie en flex
La vie en flexLa vie en flex
La vie en flex
 
Optimiser son workflow frontend
Optimiser son workflow frontendOptimiser son workflow frontend
Optimiser son workflow frontend
 
Le futur du Responsive Web Design
Le futur du Responsive Web DesignLe futur du Responsive Web Design
Le futur du Responsive Web Design
 
Using php to design a guestbook website tutorial
Using php to design a guestbook website tutorialUsing php to design a guestbook website tutorial
Using php to design a guestbook website tutorial
 
Le module Flex Layout du CSS3
Le module Flex Layout du CSS3Le module Flex Layout du CSS3
Le module Flex Layout du CSS3
 
Steps to register a foreign invested company
Steps to register a foreign invested companySteps to register a foreign invested company
Steps to register a foreign invested company
 
Reproductive Health: Nepal
Reproductive Health: NepalReproductive Health: Nepal
Reproductive Health: Nepal
 
23k guestbooks mix
23k guestbooks mix23k guestbooks mix
23k guestbooks mix
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
SEO Footprints by www.Netrix.co.uk - Comprehensive Guide to Website Footprints
SEO Footprints by www.Netrix.co.uk - Comprehensive Guide to Website FootprintsSEO Footprints by www.Netrix.co.uk - Comprehensive Guide to Website Footprints
SEO Footprints by www.Netrix.co.uk - Comprehensive Guide to Website Footprints
 

Similaire à Le Futur du positionnement CSS

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
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
Aurélien Maury
 

Similaire à Le Futur du positionnement CSS (20)

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
 
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
 
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
 
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
 
Atelier CSS ParisWeb 2007
Atelier CSS ParisWeb 2007Atelier CSS ParisWeb 2007
Atelier CSS ParisWeb 2007
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015Devoxx France 2015 - Développement web en 2015
Devoxx France 2015 - Développement web en 2015
 
Découverte HTML5/CSS3
Découverte HTML5/CSS3Découverte HTML5/CSS3
Découverte HTML5/CSS3
 
Edelweiss and Services
Edelweiss and ServicesEdelweiss and Services
Edelweiss and Services
 
Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011Grails from scratch to prod - MixIT 2011
Grails from scratch to prod - MixIT 2011
 
CSS3
CSS3CSS3
CSS3
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
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)
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
Javascript proprement
Javascript proprementJavascript proprement
Javascript proprement
 
HTML5 PushState
HTML5 PushStateHTML5 PushState
HTML5 PushState
 
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…
 

Plus de Raphaël Goetter

Plus de Raphaël Goetter (11)

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

Le Futur du positionnement CSS