Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
If you can't read please download the document
-
Upload
microsoft -
Category
Technology
-
view
1.693 -
download
0
description
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.
Transcript of Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations
- 1. palais descongrsParis7, 8 et 9fvrier 2012
2. Trois avances majeures en CSS3: Media Queries, Grid Layout
etAnimations8 fvrier 2012Raphal Goetterbercheerleader
Alsacrations@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") 5. Sadapter? 6. Media Queries!CSS3 Media
QueriesRequteCSS3permettantdappliquerdesstylesCSSselondescritreschoisis,notammentlalargeurdcran
7. Media Queries!CSS3 Media
QueriesPasbesoindesiteddiSeulledesignsadapteAucuneinterventionsurleserveurPasdelangagededveloppementToutestpossiblevisuellementCSSestfaitpoura!
8. DmosBarrack Obama Sonyhttp://www.barackobama.com/
http://www.sony.com/index.phpThe Boston GlobeTheme
Loomhttp://www.bostonglobe.com/http://themeloom.com/Alsacrations
Goetterhttp://www.alsacreations.fr/ http://www.goetter.fr/ 9.
styles.cssmobile.cssbody{body{width:960px; width:auto;} }nav{
nav,#content{float:left;float:none;width:200px; width:auto;}
}#content{float:left;width:760px} 10. 11. @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; } } 12. Compatibilit 13. Grid Layout 14. O en est-on?
fluxspacer.gif position: relative frames bugs IE6 must die !
float position: absolute rowspanbidouillesreset marges ngatives
commentairesclearcalquesconditionnels colspanframeworks CSS hacks
15. Grid LayoutCSS3 Grid Layout Division de lespace en grille
virtuellecompose de lignes, colonnes etcellules destines
positionner leslments HTML. 16. Grid LayoutCSS3 Grid LayoutGrille
virtuelleConcepts de lignes et colonnesIndpendant de lordre
HTMLPositionnement intuitifAlignements et centrages
simplesSuperpositions possibles 17. Concept de grillebody {display:
grid Et hop !} 18. Colonnesbody {display: grid ;grid-columns: 250px
1fr;} 19. Colonnesbody {display: grid ;grid-columns: 250px 1fr;}nav
{grid-column: 1;}section {grid-column: 2;} 20. 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;} 21. Motifs rptsbody { correspond
display: grid ; 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px
grid-columns: 10px (1fr 10px)[4];} 22. Distributionbody { display:
grid ; grid-columns: 250px 1fr; grid-rows: 100px 300px;}header {
grid-column: 1; grid-row: 1; grid-column-span: 2 ;} 23.
Templatebody {Template syntaxdisplay: grid ;grid-template:
"hh""nc""ff";}header {grid-cell: "h";}nav {grid-cell: "n";} 24.
Alignementssection { grid-row-align: center;}article {
grid-column-align: center;}aside { grid-row-align: center;
grid-column-align: center;} 25. Fluide!body {body { display: grid ;
display: grid ; grid-template: "abcd";grid-template: "a"}"b" "d"
"d";} 26. Compatibilit 27. Transitions / Animations 28. Transitions
/ AnimationsCSS3
TransitionsTransitionCSS3permetunevolutionprogressiveentredeuxvaleursdunepropritCSSlorsquunvnementestdclenchCSS3
AnimationsExtensiondeTransition.Permetdappliquerunscnariodansletemps(plusieurstransitions)lorsdunvnementoulorsduchargementdunllment
29. Transitionsdiv{ width:100px; transition:1s;}div:hover{
width:200px;} 30. TransitionsPropritDureCourbedeprogressiondiv{
Dlaiwidth:100px;transition:width1sease2s;}Aussiall(ourien)div:hover{width:200px;
Aussi}
:hover,:focus,:active,:checked,:disabled,:valid,:invalid,:target,::selection,
31.
AnimationsDclarationdelanimationkiwiSquencestemporellesen%@keyframeskiwi{0%{width:100px;}50%{width:50px;}100%{width:100px;}}div:hover{animation:kiwi4sinfinite;}Appeldelanimationkiwiausurvol
32. DmosThe Expressive
WebApplehttp://bit.ly/mstd1http://www.apple.com/AT-AT
WalkerPhotogamehttp://bit.ly/mstd2012a
http://photogame.fr/Spiderman
Animatablehttp://bit.ly/w4Z83shttp://bit.ly/z652t3 33. Compatibilit
34. A lassaut! 35. O est la grille? 36. Yeah, HTML5! 37.
Floatitude! 38. Floatitude! float float absolute floatfloatfloat
absolute float absolute absolute float 39. mstechdays.fr 4
redirections dURL 155 requtes 33 fichiers JS externes 6 iframes
22.36s de chargement sur bureau 8s de chargement sur mobile 40.
mstechdays.fr95 flottants20 clear: both65 position: absolute60
position: relativeplusieurs surcouches CSS sur chaque lment 41.
Grand Mnage! couche reset perso: display: none width: auto; height:
auto float: none position: static overflow: visible suppression de
10aines de JS 42. Grilles428px 284px 284px 284px 43. Grilles428px
284px 284px 284px 44. 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; 45. 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;}} 46. 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 140px140px
140px;}} 47. Finish Him! TechDays remix http://bit.ly/mstd2012
couche reset perso: Suppression JS CSS3 Grid Layout CSS3 Media
Queries CSS3 Animations 48. Merci!Raphal Goetter
www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter :
@goetter
