Tweet
Tweet

Slide 1

Slide 1 text

www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter Raphaël Goetter Raphaël Goetter Soyez révolutionnaires, utilisez CSS 2 ! Soyez révolutionnaires, utilisez CSS 2 !

Slide 2

Slide 2 text

Soyez révolutionnaires, utilisez CSS 2 ! Soyez révolutionnaires, utilisez CSS 2 ! depuis le 17 mars depuis le 17 mars et aussi... et aussi... Techniques CSS avancées Positionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3) Gestion de projet (conventions, optimisation des performances, frameworks) HTML5, CSS3 Résolution de bogues Multimédia (web mobile, e-mailing, impression, projection,...) Techniques CSS avancées Positionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3) Gestion de projet (conventions, optimisation des performances, frameworks) HTML5, CSS3 Résolution de bogues Multimédia (web mobile, e-mailing, impression, projection,...)

Slide 3

Slide 3 text

Au menu : des aspects de CSS 2 ... Au menu : des aspects de CSS 2 ... Finalisés depuis des années Utilisables en production Très pratiques à l'usage … Souvent méconnus ! Finalisés depuis des années Utilisables en production Très pratiques à l'usage … Souvent méconnus !

Slide 4

Slide 4 text

Soyez révolutionnaire utilisez CSS 2 ! Soyez révolutionnaire utilisez CSS 2 !

Slide 5

Slide 5 text

1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

Slide 6

Slide 6 text

1996 ← CSS 1 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 1996 ← CSS 1 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

Slide 7

Slide 7 text

1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

Slide 8

Slide 8 text

1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 ← CSS 2.1 1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 ← CSS 2.1

Slide 9

Slide 9 text

1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 ← IE 6 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 ← CSS 2.1 1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 ← IE 6 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 ← CSS 2.1

Slide 10

Slide 10 text

1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 ← IE 6 2002 2003 2004 2005 2006 ← IE 7 2007 2008 2009 2010 2011 ← CSS 2.1 1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 ← IE 6 2002 2003 2004 2005 2006 ← IE 7 2007 2008 2009 2010 2011 ← CSS 2.1

Slide 11

Slide 11 text

1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 ← IE 6 2002 2003 2004 2005 2006 ← IE 7 2007 2008 2009 ← IE 8 2010 2011 ← CSS 2.1 1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 ← IE 6 2002 2003 2004 2005 2006 ← IE 7 2007 2008 2009 ← IE 8 2010 2011 ← CSS 2.1

Slide 12

Slide 12 text

1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 ← IE 6 2002 2003 2004 2005 2006 ← IE 7 2007 2008 2009 ← IE 8 2010 2011 ← CSS 2.1 ← IE 9 1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 ← IE 6 2002 2003 2004 2005 2006 ← IE 7 2007 2008 2009 ← IE 8 2010 2011 ← CSS 2.1 ← IE 9

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Où est passé CSS 2 ? Où est passé CSS 2 ?

Slide 15

Slide 15 text

Un monde sans IE 6 ?! Un monde sans IE 6 ?!

Slide 16

Slide 16 text

Un monde sans IE6 ? Un monde sans IE6 ? Nos successeurs ne connaîtront pas IE6 ! Nos successeurs ne connaîtront pas IE6 !

Slide 17

Slide 17 text

Un monde sans IE6 : où en est-on ? Un monde sans IE6 : où en est-on ? ← ← 98% 98%

Slide 18

Slide 18 text

Un monde sans IE6 : minima et maxima Un monde sans IE6 : minima et maxima min-width max-width min-height max-height min-width max-width min-height max-height body { max-width: 1100px; }

Slide 19

Slide 19 text

Démo ! Démo !

Slide 20

Slide 20 text

Un monde sans IE6 : minima et maxima Un monde sans IE6 : minima et maxima

Slide 21

Slide 21 text

Un monde sans IE6 : minima et maxima Un monde sans IE6 : minima et maxima

Slide 22

Slide 22 text

Un monde sans IE6 : first-child et :hover Un monde sans IE6 : first-child et :hover pseudo-classes first-child :hover pseudo-classes first-child :hover p:hover { background-color: pink; }

Slide 23

Slide 23 text

Démo ! Démo !

Slide 24

Slide 24 text

Un monde sans IE6 : first-child et :hover Un monde sans IE6 : first-child et :hover

Slide 25

Slide 25 text

Un monde sans IE6 : first-child et :hover Un monde sans IE6 : first-child et :hover

Slide 26

Slide 26 text

Un monde sans IE6 : enfants A > B Un monde sans IE6 : enfants A > B sélecteur d’enfants A > B sélecteur d’enfants A > B ul#nav > li { list-style: none; }

Slide 27

Slide 27 text

Démo ! Démo !

Slide 28

Slide 28 text

Un monde sans IE6 : enfants A > B Un monde sans IE6 : enfants A > B

Slide 29

Slide 29 text

Un monde sans IE6 : attribut [attr] Un monde sans IE6 : attribut [attr] sélecteur d’attribut [attr] sélecteur d’attribut [attr] input[type="submit"] { cursor: pointer; }

Slide 30

Slide 30 text

Démo ! Démo !

Slide 31

Slide 31 text

Un monde sans IE6 : attribut [attr] Un monde sans IE6 : attribut [attr]

Slide 32

Slide 32 text

Un monde sans IE6 : adjacent A + B Un monde sans IE6 : adjacent A + B sélecteur d’adjacence A + B sélecteur d’adjacence A + B h1 + p { font-style: italic; }

Slide 33

Slide 33 text

Démo ! Démo !

Slide 34

Slide 34 text

Un monde sans IE6 : adjacent A + B Un monde sans IE6 : adjacent A + B

Slide 35

Slide 35 text

Un monde sans IE6 : position fixée Un monde sans IE6 : position fixée positionnement position: fixed; positionnement position: fixed; #nav { position: fixed; top: 0; left: 0;}

Slide 36

Slide 36 text

Démo ! Démo !

Slide 37

Slide 37 text

Un monde sans IE6 : position fixée Un monde sans IE6 : position fixée

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Un monde sans IE 7 ?! Un monde sans IE 7 ?!

Slide 40

Slide 40 text

Un monde sans IE7: où en est-on ? Un monde sans IE7: où en est-on ? ← ← 91% 91% ← ←

Slide 41

Slide 41 text

Un monde sans IE7 : :before et :after Un monde sans IE7 : :before et :after contenu généré :before :after contenu généré :before :after blockquote:after { content: url(guillemets.png); }

Slide 42

Slide 42 text

Démo ! Démo !

Slide 43

Slide 43 text

Un monde sans IE7 : :before et :after Un monde sans IE7 : :before et :after

Slide 44

Slide 44 text

Un monde sans IE7 : :before et :after Un monde sans IE7 : :before et :after

Slide 45

Slide 45 text

Un monde sans IE7 : inline-block Un monde sans IE7 : inline-block inline et block à la fois inline-block inline et block à la fois inline-block a { display: inline-block; width: 150px; }

Slide 46

Slide 46 text

Démo ! Démo !

Slide 47

Slide 47 text

Un monde sans IE7 : inline-block Un monde sans IE7 : inline-block

Slide 48

Slide 48 text

Un monde sans IE7 : modèle tabulaire Un monde sans IE7 : modèle tabulaire modèle tabulaire display: table modèle tabulaire display: table #aside, #content { display: table-cell; }

Slide 49

Slide 49 text

Démo ! Démo !

Slide 50

Slide 50 text

Un monde sans IE7 : modèle tabulaire Un monde sans IE7 : modèle tabulaire

Slide 51

Slide 51 text

Un monde sans IE7 : modèle tabulaire Un monde sans IE7 : modèle tabulaire Mise en page facile et intuitive Hauteurs égales Centrage vertical Largeur fluide Hauteur fluide Réordonnement d’éléments Mise en page facile et intuitive Hauteurs égales Centrage vertical Largeur fluide Hauteur fluide Réordonnement d’éléments

Slide 52

Slide 52 text

Un monde sans IE7 : modèle tabulaire Un monde sans IE7 : modèle tabulaire

Slide 53

Slide 53 text

Un monde sans IE7 : modèle tabulaire Un monde sans IE7 : modèle tabulaire

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

« pas facile d’avoir du style » © internet explorer « pas facile d’avoir du style » © internet explorer

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Crédits Crédits Raphaël Goetter alsacreations.com @goetter Raphaël Goetter alsacreations.com @goetter Photos, illustrations : www.fotolia.fr Police : MegalopolisExtra by SMeltery Icones et pictos : www.iconfider.net Photos, illustrations : www.fotolia.fr Police : MegalopolisExtra by SMeltery Icones et pictos : www.iconfider.net

Slide 58

Slide 58 text

Merci ! Merci ! Raphaël Goetter alsacreations.com Raphaël Goetter alsacreations.com