Parce que CSS3 c'est super, mais qu'on vit encore un peu dans le présent et que des pans entiers de CSS 2.1 ont été occultés en raison du dinosaure IE6. En attendant que tout le monde ait Internet Explorer 9 ou Firefox 4, voyons ce qu'on peut faire avec IE7 et IE8 en utilisant un langage CSS2 mal connu.

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