Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)

palais descongrèsParis7, 8 et 9février 2012

Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations8 février 2012Raphaë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’appliquerdes 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 sadapte Aucune intervention sur le serveur Pas de langage de développement Tout est possible visuellement CSS est fait pour ça !

DémosBarrack Obama Sonyhttp://www.barackobama.com/ http://www.sony.com/index.phpThe Boston Globe Theme Loomhttp://www.bostonglobe.com/ http://themeloom.com/Alsacréations Goetterhttp://www.alsacreations.fr/ http://www.goetter.fr/

@media (max-width : styles.css640px) 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 rowspanbidouilles position: absolute reset marges négatives commentaires clearcalques conditionnels colspan frameworks CSS hacks

Grid LayoutCSS3 Grid Layout« Représentation virtuelle composée delignes, de colonnes et de cellules. »

Grid LayoutCSS3 Grid Layout Grille virtuelle Concepts de lignes et colonnes Indépendant de lordre HTML Positionnement intuitif Alignements et centrages simples Superpositions possibles

Concept de grillebody { display: grid Et hop !}

Colonnesbody { 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 { correspond à display: grid ; 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px grid-columns: 10px (1fr 10px)[4];}…

Distributionbody { display: grid ; grid-columns: 250px 1fr; grid-rows: 100px 300px;}header { grid-column: 1; grid-row: 1; grid-column-span: 2 ;}…

Templatebody { Template syntax display: grid ; grid-template: "hh" "nc" "ff";}header { grid-cell: "h";}nav { grid-cell: "n";}…

Alignementssection { 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 / AnimationsCSS3 Transitions« Transition CSS3 permet une évolutionprogressive entre deux valeurs dunepropriété CSS lorsquun événement estdéclenché »CSS3 Animations« Extension de Transition. Permetdappliquer un scénario dans le temps(plusieurs transitions) lors dunévénement ou lors du chargement dunlélément »

Transitionsdiv { width: 100px; transition: 1s;}div:hover { width: 200px;}

Transitions Propriété Durée Courbe de progressiondiv { 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 lanimation « kiwi » Séquences temporelles en %@keyframes kiwi { 0% {width: 100px ;} 50% {width: 50px ;} 100% {width: 100px ;}}div:hover { animation: kiwi 4s infinite ;} Appel de lanimation « kiwi » au survol

DémosThe Expressive Web Applehttp://bit.ly/mstd1 http://www.apple.com/AT-AT Walker Photogamehttp://bit.ly/mstd2012a http://photogame.fr/Spiderman Animatablehttp://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 floatabsoluteabsolute 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

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

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

http://blog.goetter.fr	1933
http://un-seul-web.fr	78
http://www.scoop.it	62
http://www.newsblur.com	12
http://admin.totalmarketing.com	1
http://paper.li	1
http://www.twylah.com	1

Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012)

by Raphaël Goetter on Feb 09, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 2,088

Statistics

Trois avancées majeures en CSS3 : Mediaqueries, Grid Layout et Animations (MStechdays 2012) Presentation Transcript