trois avancées majeures en css3 : mediaqueries, grid layout et animations (mstechdays 2012)
DESCRIPTION
Parmi l'ensemble des nouveautés apportés par CSS3, arrêtons-nous un instant sur trois modules qui feront sans nul doute parler beaucoup à l'avenir : les Media Queries et le Web mobile, le nouveau positionnement fluide sous forme de grilles et les animations d'éléments.Découvrons ce qui se cache sous le capot de ces technologies et voyons ce qu'elles peuvent apporter sur des navigateurs récents tels qu'Internet Explorer 9 et 10.TRANSCRIPT
![Page 1: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/1.jpg)
palais des congrès Paris
7, 8 et 9 février 2012
![Page 2: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/2.jpg)
8 février 2012 Raphaël GoetterÜbercheerleader Alsacréations@goetter
Trois avancées majeures en CSS3 : Media Queries, Grid
Layout et Animations
![Page 3: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/3.jpg)
Media Queries
![Page 4: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/4.jpg)
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")
Mon quotidien
![Page 5: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/5.jpg)
![Page 6: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/6.jpg)
![Page 7: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/7.jpg)
S’adapter ?
![Page 8: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/8.jpg)
Media Queries !
CSS3 Media Queries« Requête CSS3 permettant d’appliquer des styles CSS selon des critères choisis, notamment la largeur d’écran »
![Page 9: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/9.jpg)
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 !
![Page 10: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/10.jpg)
Démos
Sonyhttp://www.sony.com/index.php
Barrack Obamahttp://www.barackobama.com/
Theme Loomhttp://themeloom.com/
The Boston Globehttp://www.bostonglobe.com/
Goetterhttp://www.goetter.fr/
Alsacréationshttp://www.alsacreations.fr/
![Page 11: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/11.jpg)
styles.css
body {width : 960px ;
}nav {
float : left ;width : 200px ;
}#content {
float : left ;width : 760px
}
<link rel="stylesheet" media="screen and (max-width : 640px)" href="mobile.css">
mobile.css
body {width : auto;
}nav, #content {
float : none;width : auto;
}…
![Page 12: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/12.jpg)
<link rel="stylesheet" media="screen and (max-width : 640px)" href="mobile.css">
![Page 13: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/13.jpg)
styles.css
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;
}}
@media (max-width : 640px){ … }
![Page 14: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/14.jpg)
Compatibilité
![Page 15: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/15.jpg)
Grid Layout
![Page 16: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/16.jpg)
Où en est-on ?position: relative
<br><br><br>frames
spacer.gif
marges négatives
float position: absolute<table>
colspan hacks
clearbidouilles
fluxbugs
rowspanreset
commentaires conditionnels
calques
frameworks CSS
IE6 must die !
![Page 17: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/17.jpg)
![Page 18: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/18.jpg)
Grid Layout
CSS3 Grid Layout« Représentation virtuelle composée de lignes, de colonnes et de cellules. »
![Page 19: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/19.jpg)
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
![Page 20: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/20.jpg)
Concept de grille
body {display: grid
}Et hop !
![Page 21: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/21.jpg)
Colonnes
body {display: grid ;grid-columns: 250px 1fr;
}
![Page 22: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/22.jpg)
Colonnesbody {
display: grid ;grid-columns: 250px 1fr;
}nav { grid-column: 1; }section { grid-column: 2; }
![Page 23: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/23.jpg)
Lignes / Colonnesbody {
display: grid ;grid-columns: 250px 1fr;grid-rows: 100px 300px;
}nav {
grid-column: 1;grid-row: 1;
}article {
grid-column: 1;grid-row: 2;
}…
![Page 24: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/24.jpg)
Motifs répétésbody {
display: grid ;grid-columns: 10px (1fr 10px)[4];
}…
correspond à10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px
![Page 25: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/25.jpg)
Distributionbody {
display: grid ;grid-columns: 250px 1fr;grid-rows: 100px 300px;
}header {
grid-column: 1;grid-row: 1;grid-column-span: 2 ;
}…
![Page 26: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/26.jpg)
Templatebody {
display: grid ;grid-template: "hh"
"nc" "ff";}header {
grid-cell: "h";}nav {
grid-cell: "n";}…
Template syntax
![Page 27: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/27.jpg)
Alignements
section {grid-row-align: center;
}article {
grid-column-align: center;}aside {
grid-row-align: center;grid-column-align: center;
}
![Page 28: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/28.jpg)
Fluide !body {
display: grid ;grid-template: "abcd";
}
body {display: grid ;grid-template: "a"
"b" "d" "d";}
![Page 29: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/29.jpg)
Compatibilité
![Page 30: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/30.jpg)
Transitions / Animations
![Page 31: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/31.jpg)
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 »
![Page 32: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/32.jpg)
Transitionsdiv {
width: 100px;transition: 1s;
}div:hover {
width: 200px;}
![Page 33: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/33.jpg)
Transitions
div { width: 100px ; transition: width 1s ease 2s ;}
div:hover { width: 200px ;}
Aussi:hover, :focus, :active, :checked, :disabled, :valid, :invalid, :target, ::selection, …
PropriétéDuréeCourbe de progressionDélai
Aussi « all » (ou rien)
![Page 34: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/34.jpg)
Animations@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éclaration de l'animation « kiwi »Séquences temporelles en %
![Page 35: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/35.jpg)
Démos
Applehttp://www.apple.com/
The Expressive Webhttp://bit.ly/mstd1
Photogamehttp://photogame.fr/
AT-AT Walkerhttp://bit.ly/mstd2012a
Animatablehttp://bit.ly/z652t3
Spidermanhttp://bit.ly/w4Z83s
![Page 36: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/36.jpg)
Compatibilité
![Page 37: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/37.jpg)
![Page 38: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/38.jpg)
A l’assaut !
![Page 39: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/39.jpg)
Où est la grille ?
![Page 40: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/40.jpg)
Yeah, HTML5 !
![Page 41: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/41.jpg)
Floatitude !
![Page 42: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/42.jpg)
Floatitude !float float
floatfloat float float
float
absolute
absolute
absolute
absolute
![Page 43: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/43.jpg)
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
![Page 44: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/44.jpg)
95 flottants 20 clear : both 65 position: absolute 60 position: relative plusieurs surcouches CSS sur chaque élément
mstechdays.fr
![Page 45: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/45.jpg)
couche « reset » perso : display : none width : auto ; height : auto float : none position : static overflow : visible suppression de 10aines de JS
Grand Ménage !
![Page 46: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/46.jpg)
Grilles428px 284px 284px 284px
![Page 47: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/47.jpg)
Grilles428px 284px 284px 284px
![Page 48: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/48.jpg)
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;
}…
![Page 49: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/49.jpg)
![Page 50: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/50.jpg)
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;}
}…
![Page 51: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/51.jpg)
![Page 52: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/52.jpg)
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;
}}…
![Page 53: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/53.jpg)
couche « reset » perso : Suppression JS CSS3 Grid Layout CSS3 Media Queries CSS3 Animations
Finish Him !TechDays remixhttp://bit.ly/mstd2012
![Page 54: Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)](https://reader035.vdocument.in/reader035/viewer/2022081403/5560b6cad8b42af43b8b4a79/html5/thumbnails/54.jpg)
www.alsacreations.comwww.goetter.frwww.ie7nomore.comtwitter : @goetter
Raphaël Goetter
Merci !