palais des congrès Paris

7, 8 et 9 février 2012

8 février 2012 Raphaël GoetterÜbercheerleader Alsacréations@goetter

Trois avancées majeures en CSS3 : Media Queries, Grid

Layout et Animations

Media Queries

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

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

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/

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;

}…

<link rel="stylesheet" media="screen and (max-width : 640px)" href="mobile.css">

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){ … }

Compatibilité

Grid Layout

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

&nbsp;calques

frameworks CSS

IE6 must die !

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;

}

Colonnesbody {

display: grid ;grid-columns: 250px 1fr;

}nav { grid-column: 1; }section { grid-column: 2; }

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;

}…

Motifs répétésbody {

display: grid ;grid-columns: 10px (1fr 10px)[4];

}…

correspond à10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px

Distributionbody {

display: grid ;grid-columns: 250px 1fr;grid-rows: 100px 300px;

}header {

grid-column: 1;grid-row: 1;grid-column-span: 2 ;

}…

Templatebody {

display: grid ;grid-template: "hh"

"nc" "ff";}header {

grid-cell: "h";}nav {

grid-cell: "n";}…

Template syntax

Alignements

section {grid-row-align: center;

}article {

grid-column-align: center;}aside {

grid-row-align: center;grid-column-align: center;

}

Fluide !body {

display: grid ;grid-template: "abcd";

}

body {display: grid ;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 »

Transitionsdiv {

width: 100px;transition: 1s;

}div:hover {

width: 200px;}

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)

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 %

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

Compatibilité

A l’assaut !

Où est la grille ?

Yeah, HTML5 !

Floatitude !

Floatitude !float float

floatfloat float float

float

absolute

absolute

absolute

absolute

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

mstechdays.fr

couche « reset » perso : display : none width : auto ; height : auto float : none position : static overflow : visible suppression de 10aines de JS

Grand Ménage !

Grilles428px 284px 284px 284px

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

}}…

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

Finish Him !TechDays remixhttp://bit.ly/mstd2012

www.alsacreations.comwww.goetter.frwww.ie7nomore.comtwitter : @goetter

Raphaël Goetter

Merci !