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