Tweet
Tweet

Slide 1

Slide 1 text

palais des congrès Paris 7, 8 et 9 février 2012

Slide 2

Slide 2 text

8 février 2012 Raphaël Goetter Übercheerleader Alsacréations @goetter Trois avancées majeures en CSS3 : Media Queries, Grid Layout et Animations

Slide 3

Slide 3 text

Media Queries

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

S’adapter ?

Slide 8

Slide 8 text

Media Queries ! CSS3 Media Queries « Requête CSS3 permettant d’appliquer des styles CSS selon des critères choisis, notamment la largeur d’écran »

Slide 9

Slide 9 text

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 !

Slide 10

Slide 10 text

Démos Sony http://www.sony.com/index.php Barrack Obama http://www.barackobama.com/ Theme Loom http://themeloom.com/ The Boston Globe http://www.bostonglobe.com/ Goetter http://www.goetter.fr/ Alsacréations http://www.alsacreations.fr/

Slide 11

Slide 11 text

styles.css body { width : 960px ; } nav { float : left ; width : 200px ; } #content { float : left ; width : 760px } mobile.css body { width : auto; } nav, #content { float : none; width : auto; } …

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Compatibilité

Slide 15

Slide 15 text

Grid Layout

Slide 16

Slide 16 text

Où en est-on ? position: relative


frames spacer.gif marges négatives float position: absolute colspan hacks clear bidouilles flux bugs rowspan reset commentaires conditionnels   calques frameworks CSS IE6 must die !

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Concept de grille body { display: grid } Et hop !

Slide 21

Slide 21 text

Colonnes body { display: grid ; grid-columns: 250px 1fr; }

Slide 22

Slide 22 text

Colonnes body { display: grid ; grid-columns: 250px 1fr; } nav { grid-column: 1; } section { grid-column: 2; }

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Motifs répétés body { display: grid ; grid-columns: 10px (1fr 10px)[4]; } … correspond à 10px 1fr 10px 1fr 10px 1fr 10px 1fr 10px

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Alignements section { grid-row-align: center; } article { grid-column-align: center; } aside { grid-row-align: center; grid-column-align: center; }

Slide 28

Slide 28 text

Fluide ! body { display: grid ; grid-template: "abcd"; } body { display: grid ; grid-template: "a" "b" "d" "d"; }

Slide 29

Slide 29 text

Compatibilité

Slide 30

Slide 30 text

Transitions / Animations

Slide 31

Slide 31 text

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 »

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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ée Courbe de progression Délai Aussi « all » (ou rien)

Slide 34

Slide 34 text

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 %

Slide 35

Slide 35 text

Démos Apple http://www.apple.com/ The Expressive Web http://bit.ly/mstd1 Photogame http://photogame.fr/ AT-AT Walker http://bit.ly/mstd2012a Animatable http://bit.ly/z652t3 Spiderman http://bit.ly/w4Z83s

Slide 36

Slide 36 text

Compatibilité

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

A l’assaut !

Slide 39

Slide 39 text

Où est la grille ?

Slide 40

Slide 40 text

Yeah, HTML5 !

Slide 41

Slide 41 text

Floatitude !

Slide 42

Slide 42 text

Floatitude ! float float float float float float float absolute absolute absolute absolute

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

95 flottants 20 clear : both 65 position: absolute 60 position: relative plusieurs surcouches CSS sur chaque élément mstechdays.fr

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Grilles 428px 284px 284px 284px

Slide 47

Slide 47 text

Grilles 428px 284px 284px 284px

Slide 48

Slide 48 text

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;

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

couche « reset » perso : Suppression JS CSS3 Grid Layout CSS3 Media Queries CSS3 Animations Finish Him ! TechDays remix http://bit.ly/mstd2012

Slide 54

Slide 54 text

www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter : @goetter Raphaël Goetter Merci !