SlideShare une entreprise Scribd logo
palais des
congrès
Paris




7, 8 et 9
février 2012
Trois avancées majeures en
  CSS3 : Media Queries, Grid
     Layout et Animations

8 février 2012
Raphaël Goetter
Übercheerleader Alsacréations
@goetter
Media Queries
Mon quotidien

 1 PC de bureau (24")
 1 PC portable (15")
 1 PC portable (11.6")
 1 netbook (10")
 1 tablette Windows (10")
 1 tablette Android (8.9")
 1 smartphone Apple (3.5")
S’adapter ?
Media Queries !

CSS3 Media Queries
« Requête CSS3 permettant d’appliquer
des styles CSS selon des critères choisis,
notamment la largeur d’écran »
Media Queries !

CSS3 Media Queries
  Pas besoin de site dédié
  Seul le design s'adapte
  Aucune intervention sur le serveur
  Pas de langage de développement
  Tout est possible visuellement
  CSS est fait pour ça !
Démos

Barrack Obama                  Sony
http://www.barackobama.com/    http://www.sony.com/index.php

The Boston Globe               Theme Loom
http://www.bostonglobe.com/    http://themeloom.com/

Alsacréations                  Goetter
http://www.alsacreations.fr/   http://www.goetter.fr/
<link rel="stylesheet" media="screen and (max-
width : 640px)" href="mobile.css">


styles.css                mobile.css
body {                    body {
      width : 960px ;           width : auto;
}                         }
nav {                     nav, #content {
      float : left ;            float : none;
      width : 200px ;           width : auto;
}                         }
#content {                …
      float : left ;
      width : 760px
}
<link rel="stylesheet" media="screen and (max-
width : 640px)" href="mobile.css">
@media (max-width :   styles.css
640px)                body {
                            width : 960px ;
{…}                   }
                      nav {
                            float : left ;
                            width : 200px ;
                      }
                      #content {
                            float : left ;
                            width : 760px
                      }
                      @media (max-width : 640px) {
                            body {
                                  width : auto;
                            }
                            nav, #content {
                                  float : none;
                                  width : auto;
                            }
                      }
Compatibilité
Grid Layout
Où en est-on ?
                                 flux
                        spacer.gif
 position: relative
         frames     bugs IE6 must die !
 <br><br><br>
                           <table>
              float                      rowspan
bidouilles                position: absolute reset
     marges négatives
                         commentaires    clear
calques                  conditionnels
             colspan
  frameworks CSS            &nbsp;       hacks
Grid Layout

CSS3 Grid Layout
« Représentation virtuelle composée de
lignes, de colonnes et de cellules. »
Grid Layout

CSS3 Grid Layout
  Grille virtuelle
  Concepts de lignes et colonnes
  Indépendant de l'ordre HTML
  Positionnement intuitif
  Alignements et centrages simples
  Superpositions possibles
Concept de grille

body {
  display: grid   Et hop !

}
Colonnes

body {
  display: grid ;
  grid-columns: 250px 1fr;
}
Colonnes
body {
    display: grid ;
    grid-columns: 250px 1fr;
}
nav {
  grid-column: 1;
}
section {
  grid-column: 2;
}
Lignes / 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;
}
…
Motifs répétés
body {                                 correspond à
   display: grid ;                     10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px

   grid-columns: 10px (1fr 10px)[4];
}
…
Distribution
body {
   display: grid ;
   grid-columns: 250px 1fr;
   grid-rows: 100px 300px;
}
header {
   grid-column: 1;
   grid-row: 1;
   grid-column-span: 2 ;
}
…
Template
body {                      Template syntax
    display: grid ;
    grid-template: "hh"
                    "nc"
                    "ff";
}
header {
    grid-cell: "h";
}
nav {
    grid-cell: "n";
}
…
Alignements
section {
     grid-row-align: center;
}
article {
     grid-column-align: center;
}
aside {
     grid-row-align: center;
     grid-column-align: center;
}
Fluide !
body {                      body {
   display: grid ;             display: grid ;
   grid-template: "abcd";      grid-template: "a"
}                                              "b"
                                               "d"
                                               "d";
                            }
Compatibilité
Transitions / Animations
Transitions / Animations


CSS3 Transitions
« Transition CSS3 permet une évolution
progressive entre deux valeurs d'une
propriété CSS lorsqu'un événement est
déclenché »

CSS3 Animations
« Extension de Transition. Permet
d'appliquer un scénario dans le temps
(plusieurs transitions) lors d'un
événement ou lors du chargement d'un
l'élément »
Transitions
div {
     width: 100px;
     transition: 1s;
}
div:hover {
     width: 200px;
}
Transitions
                                   Propriété
                                   Durée
                                   Courbe de progression
div {                              Délai

  width: 100px ;
  transition: width 1s ease 2s ;
}
                                   Aussi « all » (ou rien)

div:hover {
  width: 200px ;                   Aussi
}                                  :hover, :focus, :active, :checked, :disabled,
                                   :valid, :invalid, :target, ::selection, …
Animations
                                          Déclaration de l'animation « kiwi »
                                          Séquences temporelles en %

@keyframes kiwi {
  0% {width: 100px ;}
  50% {width: 50px ;}
  100% {width: 100px ;}
}

div:hover {
  animation: kiwi 4s infinite ;
}

            Appel de l'animation « kiwi » au survol
Démos

The Expressive Web        Apple
http://bit.ly/mstd1       http://www.apple.com/

AT-AT Walker              Photogame
http://bit.ly/mstd2012a   http://photogame.fr/

Spiderman                 Animatable
http://bit.ly/w4Z83s      http://bit.ly/z652t3
Compatibilité
A l’assaut !
Où est la grille ?
Yeah, HTML5 !
Floatitude !
Floatitude !
float                 float   absolute                   float
                                         float

 float     absolute           float


absolute




absolute                                         float
mstechdays.fr

 4 redirections d’URL
 155 requêtes
 33 fichiers JS externes
 6 iframes
 22.36s de chargement sur
 bureau
 8s de chargement sur mobile
mstechdays.fr

  95 flottants
  20 clear : both
  65 position: absolute
  60 position: relative
  plusieurs surcouches CSS sur
 chaque élément
Grand Ménage !

         couche « reset » perso :
         display : none
         width : auto ; height : auto
         float : none
         position : static
         overflow : visible
         suppression de 10aines de JS
Grilles
428px     284px   284px   284px
Grilles
428px     284px   284px   284px
Grilles
#inGrid {
    display: grid ;
    grid-columns: 428px 284px 284px 284px;
    grid-rows: 132px 132px 140px;
}
#grid1 {
    grid-column: 1;
    grid-row: 1;
    grid-row-span: 3;
}
#grid2 {
    grid-column: 2;
    grid-row: 1;
    grid-row-span: 2;
Media Queries
@media (max-width: 1280px) {
  #inGrid {
      grid-columns: 428px 284px 284px;
      grid-rows: 132px 132px 140px 140px;
  }
  #grid7 {grid-column: 1; grid-row: 4;}
  #grid8 {grid-column: 2; grid-row: 4;}
  #grid9 {grid-column: 3; grid-row: 4;}
}
…
Media Queries
@media (max-width: 1000px) {
  #inGrid {
      grid-columns: 428px 284px;
      grid-rows: 132px 132px 140px 140px 140px 140px 140px;
  }
}
@media (max-width: 712px) {
  #inGrid {
      grid-columns: 1fr;
      grid-rows: 132px 132px 140px 140px 140px 140px 140px
      140px 140px;
  }
}
…
Finish Him !
               TechDays remix
               http://bit.ly/mstd2012




           couche « reset » perso :
           Suppression JS
           CSS3 Grid Layout
           CSS3 Media Queries
           CSS3 Animations
Merci !


          Raphaël Goetter
           www.alsacreations.com
           www.goetter.fr
           www.ie7nomore.com
           twitter : @goetter

Contenu connexe

En vedette

Mieux Développer en PHP avec Symfony
Mieux Développer en PHP avec SymfonyMieux Développer en PHP avec Symfony
Mieux Développer en PHP avec Symfony
Hugo Hamon
 
100 ans de la maison du peuple de Saint Claude
100 ans de la maison du peuple de Saint Claude100 ans de la maison du peuple de Saint Claude
100 ans de la maison du peuple de Saint Claude
aucharle
 
EU-Bürger sorgen sich um gesunde Meere.
EU-Bürger sorgen sich um gesunde Meere.EU-Bürger sorgen sich um gesunde Meere.
EU-Bürger sorgen sich um gesunde Meere.WWF Deutschland
 
Charte du forum de la société civile fr-
Charte du forum de la société civile  fr-Charte du forum de la société civile  fr-
Charte du forum de la société civile fr-Forum Societe Civile
 
Warum nicht?! Selbstdarstellung von Kindern und Jugendlichen im Internet
Warum nicht?! Selbstdarstellung von Kindern und Jugendlichen im InternetWarum nicht?! Selbstdarstellung von Kindern und Jugendlichen im Internet
Warum nicht?! Selbstdarstellung von Kindern und Jugendlichen im Internet
Karsten D. Wolf
 
Drupal Meetup - développement de module
Drupal Meetup - développement de moduleDrupal Meetup - développement de module
Drupal Meetup - développement de module
Sébastien Corbin
 
Le festival des oranges
Le festival des orangesLe festival des oranges
Le festival des orangesandreamoedo
 
Run in lyon
Run in lyonRun in lyon
Run in lyon
bemece69
 
Les categorie des_ordinateursz
Les categorie des_ordinateurszLes categorie des_ordinateursz
Les categorie des_ordinateursz
samarkochtane
 
Scala und Lift
Scala und LiftScala und Lift
Scala und Lift
Felix Müller
 
Ccip 2012
Ccip 2012Ccip 2012
Ccip 2012
nominoeducation
 
De la réception de l’image à la prise de parole
De la réception de l’image à la prise de paroleDe la réception de l’image à la prise de parole
De la réception de l’image à la prise de parolejoe972
 
Ateliers Numeriques Office de Tourisme Vallée du Lot et du Vignoble Autmone H...
Ateliers Numeriques Office de Tourisme Vallée du Lot et du Vignoble Autmone H...Ateliers Numeriques Office de Tourisme Vallée du Lot et du Vignoble Autmone H...
Ateliers Numeriques Office de Tourisme Vallée du Lot et du Vignoble Autmone H...
Anouk Marchand Mooldijk
 
Les 10 facteurs qui poussent vos employés à démissionner
Les 10 facteurs qui poussent vos employés à démissionnerLes 10 facteurs qui poussent vos employés à démissionner
Les 10 facteurs qui poussent vos employés à démissionnerDrake International
 
Programme de l’assemblée de district 2012
Programme de l’assemblée de district 2012Programme de l’assemblée de district 2012
Programme de l’assemblée de district 2012Joseph-eugene
 
Présentation de Neten'Board par NETENCY
Présentation de Neten'Board par NETENCYPrésentation de Neten'Board par NETENCY
Présentation de Neten'Board par NETENCY
J-Marc Beaudoin
 
Le marché des bureaux en région lyonnaise - Bilan & Perspectives 2013
Le marché des bureaux en région lyonnaise - Bilan & Perspectives 2013Le marché des bureaux en région lyonnaise - Bilan & Perspectives 2013
Le marché des bureaux en région lyonnaise - Bilan & Perspectives 2013
JLL France
 
Unsa pe question dp 2012
Unsa pe question dp 2012Unsa pe question dp 2012
Unsa pe question dp 2012Miguel Iglesias
 

En vedette (20)

Mieux Développer en PHP avec Symfony
Mieux Développer en PHP avec SymfonyMieux Développer en PHP avec Symfony
Mieux Développer en PHP avec Symfony
 
100 ans de la maison du peuple de Saint Claude
100 ans de la maison du peuple de Saint Claude100 ans de la maison du peuple de Saint Claude
100 ans de la maison du peuple de Saint Claude
 
EU-Bürger sorgen sich um gesunde Meere.
EU-Bürger sorgen sich um gesunde Meere.EU-Bürger sorgen sich um gesunde Meere.
EU-Bürger sorgen sich um gesunde Meere.
 
Charte du forum de la société civile fr-
Charte du forum de la société civile  fr-Charte du forum de la société civile  fr-
Charte du forum de la société civile fr-
 
Warum nicht?! Selbstdarstellung von Kindern und Jugendlichen im Internet
Warum nicht?! Selbstdarstellung von Kindern und Jugendlichen im InternetWarum nicht?! Selbstdarstellung von Kindern und Jugendlichen im Internet
Warum nicht?! Selbstdarstellung von Kindern und Jugendlichen im Internet
 
Drupal Meetup - développement de module
Drupal Meetup - développement de moduleDrupal Meetup - développement de module
Drupal Meetup - développement de module
 
2011 05 11 09-15 ips_libelle_topsoft
2011 05 11 09-15 ips_libelle_topsoft2011 05 11 09-15 ips_libelle_topsoft
2011 05 11 09-15 ips_libelle_topsoft
 
Le festival des oranges
Le festival des orangesLe festival des oranges
Le festival des oranges
 
Run in lyon
Run in lyonRun in lyon
Run in lyon
 
Les categorie des_ordinateursz
Les categorie des_ordinateurszLes categorie des_ordinateursz
Les categorie des_ordinateursz
 
Scala und Lift
Scala und LiftScala und Lift
Scala und Lift
 
Ccip 2012
Ccip 2012Ccip 2012
Ccip 2012
 
De la réception de l’image à la prise de parole
De la réception de l’image à la prise de paroleDe la réception de l’image à la prise de parole
De la réception de l’image à la prise de parole
 
Ateliers Numeriques Office de Tourisme Vallée du Lot et du Vignoble Autmone H...
Ateliers Numeriques Office de Tourisme Vallée du Lot et du Vignoble Autmone H...Ateliers Numeriques Office de Tourisme Vallée du Lot et du Vignoble Autmone H...
Ateliers Numeriques Office de Tourisme Vallée du Lot et du Vignoble Autmone H...
 
Les 10 facteurs qui poussent vos employés à démissionner
Les 10 facteurs qui poussent vos employés à démissionnerLes 10 facteurs qui poussent vos employés à démissionner
Les 10 facteurs qui poussent vos employés à démissionner
 
Programme de l’assemblée de district 2012
Programme de l’assemblée de district 2012Programme de l’assemblée de district 2012
Programme de l’assemblée de district 2012
 
Présentation de Neten'Board par NETENCY
Présentation de Neten'Board par NETENCYPrésentation de Neten'Board par NETENCY
Présentation de Neten'Board par NETENCY
 
Le marché des bureaux en région lyonnaise - Bilan & Perspectives 2013
Le marché des bureaux en région lyonnaise - Bilan & Perspectives 2013Le marché des bureaux en région lyonnaise - Bilan & Perspectives 2013
Le marché des bureaux en région lyonnaise - Bilan & Perspectives 2013
 
Unsa pe question dp 2012
Unsa pe question dp 2012Unsa pe question dp 2012
Unsa pe question dp 2012
 
2011 05 12 09-45 top_soft
2011 05 12 09-45 top_soft2011 05 12 09-45 top_soft
2011 05 12 09-45 top_soft
 

Similaire à Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)

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
 
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
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
Kaelig Deloumeau-Prigent
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
pefringant
 
Le futur du Responsive Web Design
Le futur du Responsive Web DesignLe futur du Responsive Web Design
Le futur du Responsive Web Design
Microsoft
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
codedarmor
 
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 - 2Horacio Gonzalez
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
Frédéric Harper
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive design
Jean Michel
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
Thomas Bassetto
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
Jonathan Levaillant
 
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
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
Raphaël Goetter
 
L'animation newschool en html5
L'animation newschool en html5L'animation newschool en html5
L'animation newschool en html5
Christophe Villeneuve
 
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
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
davrous
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
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
 

Similaire à Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012) (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
 
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
 
Faire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au GuardianFaire le pont entre designers et développeurs avec Sass au Guardian
Faire le pont entre designers et développeurs avec Sass au Guardian
 
Gagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs cssGagnez en productivité grâce aux préprocesseurs css
Gagnez en productivité grâce aux préprocesseurs css
 
Le futur du Responsive Web Design
Le futur du Responsive Web DesignLe futur du Responsive Web Design
Le futur du Responsive Web Design
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
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
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive design
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
 
Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !Préprocesseurs vs CSS natif : Le match !
Préprocesseurs vs CSS natif : Le match !
 
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
 
Intégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudesIntégrateurs, bousculez vos habitudes
Intégrateurs, bousculez vos habitudes
 
L'animation newschool en html5
L'animation newschool en html5L'animation newschool en html5
L'animation newschool en html5
 
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
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
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)
 

Plus de 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
 
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
 
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 (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
 
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 !
 
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
 

Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)

  • 1. palais des congrès Paris 7, 8 et 9 février 2012
  • 2. Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations 8 février 2012 Raphaël Goetter Übercheerleader Alsacréations @goetter
  • 4. Mon quotidien 1 PC de bureau (24") 1 PC portable (15") 1 PC portable (11.6") 1 netbook (10") 1 tablette Windows (10") 1 tablette Android (8.9") 1 smartphone Apple (3.5")
  • 5.
  • 6.
  • 8. Media Queries ! CSS3 Media Queries « Requête CSS3 permettant d’appliquer des styles CSS selon des critères choisis, notamment la largeur d’écran »
  • 9. Media Queries ! CSS3 Media Queries Pas besoin de site dédié Seul le design s'adapte Aucune intervention sur le serveur Pas de langage de développement Tout est possible visuellement CSS est fait pour ça !
  • 10. Démos Barrack Obama Sony http://www.barackobama.com/ http://www.sony.com/index.php The Boston Globe Theme Loom http://www.bostonglobe.com/ http://themeloom.com/ Alsacréations Goetter http://www.alsacreations.fr/ http://www.goetter.fr/
  • 11. <link rel="stylesheet" media="screen and (max- width : 640px)" href="mobile.css"> styles.css mobile.css body { body { width : 960px ; width : auto; } } nav { nav, #content { float : left ; float : none; width : 200px ; width : auto; } } #content { … float : left ; width : 760px }
  • 12. <link rel="stylesheet" media="screen and (max- width : 640px)" href="mobile.css">
  • 13. @media (max-width : styles.css 640px) body { width : 960px ; {…} } nav { float : left ; width : 200px ; } #content { float : left ; width : 760px } @media (max-width : 640px) { body { width : auto; } nav, #content { float : none; width : auto; } }
  • 16. Où en est-on ? flux spacer.gif position: relative frames bugs IE6 must die ! <br><br><br> <table> float rowspan bidouilles position: absolute reset marges négatives commentaires clear calques conditionnels colspan frameworks CSS &nbsp; hacks
  • 17.
  • 18. Grid Layout CSS3 Grid Layout « Représentation virtuelle composée de lignes, de colonnes et de cellules. »
  • 19. Grid Layout CSS3 Grid Layout Grille virtuelle Concepts de lignes et colonnes Indépendant de l'ordre HTML Positionnement intuitif Alignements et centrages simples Superpositions possibles
  • 20. Concept de grille body { display: grid Et hop ! }
  • 21. Colonnes body { display: grid ; grid-columns: 250px 1fr; }
  • 22. Colonnes body { display: grid ; grid-columns: 250px 1fr; } nav { grid-column: 1; } section { grid-column: 2; }
  • 23. Lignes / 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; } …
  • 24. Motifs répétés body { correspond à display: grid ; 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px grid-columns: 10px (1fr 10px)[4]; } …
  • 25. Distribution body { display: grid ; grid-columns: 250px 1fr; grid-rows: 100px 300px; } header { grid-column: 1; grid-row: 1; grid-column-span: 2 ; } …
  • 26. Template body { Template syntax display: grid ; grid-template: "hh" "nc" "ff"; } header { grid-cell: "h"; } nav { grid-cell: "n"; } …
  • 27. Alignements section { grid-row-align: center; } article { grid-column-align: center; } aside { grid-row-align: center; grid-column-align: center; }
  • 28. Fluide ! body { body { display: grid ; display: grid ; grid-template: "abcd"; grid-template: "a" } "b" "d" "d"; }
  • 31. Transitions / Animations CSS3 Transitions « Transition CSS3 permet une évolution progressive entre deux valeurs d'une propriété CSS lorsqu'un événement est déclenché » CSS3 Animations « Extension de Transition. Permet d'appliquer un scénario dans le temps (plusieurs transitions) lors d'un événement ou lors du chargement d'un l'élément »
  • 32. Transitions div { width: 100px; transition: 1s; } div:hover { width: 200px; }
  • 33. Transitions Propriété Durée Courbe de progression div { Délai width: 100px ; transition: width 1s ease 2s ; } Aussi « all » (ou rien) div:hover { width: 200px ; Aussi } :hover, :focus, :active, :checked, :disabled, :valid, :invalid, :target, ::selection, …
  • 34. Animations Déclaration de l'animation « kiwi » Séquences temporelles en % @keyframes kiwi { 0% {width: 100px ;} 50% {width: 50px ;} 100% {width: 100px ;} } div:hover { animation: kiwi 4s infinite ; } Appel de l'animation « kiwi » au survol
  • 35. Démos The Expressive Web Apple http://bit.ly/mstd1 http://www.apple.com/ AT-AT Walker Photogame http://bit.ly/mstd2012a http://photogame.fr/ Spiderman Animatable http://bit.ly/w4Z83s http://bit.ly/z652t3
  • 37.
  • 39. Où est la grille ?
  • 42. Floatitude ! float float absolute float float float absolute float absolute absolute float
  • 43. mstechdays.fr 4 redirections d’URL 155 requêtes 33 fichiers JS externes 6 iframes 22.36s de chargement sur bureau 8s de chargement sur mobile
  • 44. mstechdays.fr 95 flottants 20 clear : both 65 position: absolute 60 position: relative plusieurs surcouches CSS sur chaque élément
  • 45. Grand Ménage ! couche « reset » perso : display : none width : auto ; height : auto float : none position : static overflow : visible suppression de 10aines de JS
  • 46. Grilles 428px 284px 284px 284px
  • 47. Grilles 428px 284px 284px 284px
  • 48. Grilles #inGrid { display: grid ; grid-columns: 428px 284px 284px 284px; grid-rows: 132px 132px 140px; } #grid1 { grid-column: 1; grid-row: 1; grid-row-span: 3; } #grid2 { grid-column: 2; grid-row: 1; grid-row-span: 2;
  • 49.
  • 50. Media Queries @media (max-width: 1280px) { #inGrid { grid-columns: 428px 284px 284px; grid-rows: 132px 132px 140px 140px; } #grid7 {grid-column: 1; grid-row: 4;} #grid8 {grid-column: 2; grid-row: 4;} #grid9 {grid-column: 3; grid-row: 4;} } …
  • 51.
  • 52. Media Queries @media (max-width: 1000px) { #inGrid { grid-columns: 428px 284px; grid-rows: 132px 132px 140px 140px 140px 140px 140px; } } @media (max-width: 712px) { #inGrid { grid-columns: 1fr; grid-rows: 132px 132px 140px 140px 140px 140px 140px 140px 140px; } } …
  • 53. Finish Him ! TechDays remix http://bit.ly/mstd2012 couche « reset » perso : Suppression JS CSS3 Grid Layout CSS3 Media Queries CSS3 Animations
  • 54. Merci ! Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter : @goetter