Post on 24-May-2015
description
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
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 !