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

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

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

4. Soyez
révolutionnaire
utilisez CSS 2 !

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

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

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

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

9. 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

10. 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

11. 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

12. 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

14. Où est passé CSS 2 ?

15. Un monde sans IE 6 ?!

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

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

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

19. Démo !

20. Un monde sans IE6 : minima et maxima

21. Un monde sans IE6 : minima et maxima

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

23. Démo !

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

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

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

27. Démo !

28. Un monde sans IE6 : enfants A > B

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

30. Démo !

31. Un monde sans IE6 : attribut [attr]

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

33. Démo !

34. Un monde sans IE6 : adjacent A + B

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

36. Démo !

37. Un monde sans IE6 : position fixée

39. Un monde sans IE 7 ?!

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

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

42. Démo !

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

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

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

46. Démo !

47. Un monde sans IE7 : inline-block

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

49. Démo !

50. Un monde sans IE7 : modèle tabulaire

51. 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

52. Un monde sans IE7 : modèle tabulaire

53. Un monde sans IE7 : modèle tabulaire

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

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

58. Merci !
Raphaël Goetter alsacreations.com