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.

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

3. Media Queries

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

7. S’adapter ?

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;
}
}

14. Compatibilité

15. Grid Layout

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

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";
}

29. Compatibilité

30. Transitions / Animations

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

36. Compatibilité

38. A l’assaut !

39. Où est la grille ?

40. Yeah, HTML5 !

41. Floatitude !

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;

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;}
}
…

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