Successfully reported this slideshow.

Soyez revolutionnaire, utilisez CSS2 !

3

Share

Upcoming SlideShare
0u trouver l_argent-cp
0u trouver l_argent-cp
Loading in …3
×
1 of 58
1 of 58

Soyez revolutionnaire, utilisez CSS2 !

3

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Soyez revolutionnaire, utilisez CSS2 !

  1. 1. Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetter Soyez révolutionnaires, utilisez CSS 2 !
  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. 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. 4. Soyez révolutionnaire utilisez CSS 2 !
  5. 5. 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
  6. 6. 1996 ← CSS 1 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
  7. 7. 1996 ← CSS 1 1997 1998 ← CSS 2.0 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
  8. 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. 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. 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. 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. 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
  13. 13. Où est passé CSS 2 ?
  14. 14. Un monde sans IE 6 ?!
  15. 15. Un monde sans IE6 ? Nos successeurs ne connaîtront pas IE6 !
  16. 16. Un monde sans IE6 : où en est-on ? ← 98%
  17. 17. Un monde sans IE6 : minima et maxima min-width max-width min-height max-height body { max-width: 1100px; }
  18. 18. Démo !
  19. 19. Un monde sans IE6 : minima et maxima
  20. 20. Un monde sans IE6 : minima et maxima
  21. 21. Un monde sans IE6 : first-child et :hover pseudo-classes first-child :hover p:hover { background-color: pink; }
  22. 22. Démo !
  23. 23. Un monde sans IE6 : first-child et :hover
  24. 24. Un monde sans IE6 : first-child et :hover
  25. 25. Un monde sans IE6 : enfants A > B sélecteur d’enfants A>B ul#nav > li { list-style: none; }
  26. 26. Démo !
  27. 27. Un monde sans IE6 : enfants A > B
  28. 28. Un monde sans IE6 : attribut [attr] sélecteur d’attribut [attr] input[type="submit"] { cursor: pointer; }
  29. 29. Démo !
  30. 30. Un monde sans IE6 : attribut [attr]
  31. 31. Un monde sans IE6 : adjacent A + B sélecteur d’adjacence A+B h1 + p { font-style: italic; }
  32. 32. Démo !
  33. 33. Un monde sans IE6 : adjacent A + B
  34. 34. Un monde sans IE6 : position fixée positionnement position: fixed; #nav { position: fixed; top: 0; left: 0;}
  35. 35. Démo !
  36. 36. Un monde sans IE6 : position fixée
  37. 37. Un monde sans IE 7 ?!
  38. 38. Un monde sans IE7: où en est-on ? ← ← 91%
  39. 39. Un monde sans IE7 : :before et :after contenu généré :before :after blockquote:after { content: url(guillemets.png); }
  40. 40. Démo !
  41. 41. Un monde sans IE7 : :before et :after
  42. 42. Un monde sans IE7 : :before et :after
  43. 43. Un monde sans IE7 : inline-block inline et block à la fois inline-block a { display: inline-block; width: 150px; }
  44. 44. Démo !
  45. 45. Un monde sans IE7 : inline-block
  46. 46. Un monde sans IE7 : modèle tabulaire modèle tabulaire display: table #aside, #content { display: table-cell; }
  47. 47. Démo !
  48. 48. Un monde sans IE7 : modèle tabulaire
  49. 49. 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
  50. 50. Un monde sans IE7 : modèle tabulaire
  51. 51. Un monde sans IE7 : modèle tabulaire
  52. 52. « pas facile d’avoir du style » © internet explorer
  53. 53. Crédits Photos, illustrations : www.fotolia.fr Police : MegalopolisExtra by SMeltery Icones et pictos : www.iconfider.net Raphaël Goetter alsacreations.com @goetter
  54. 54. Merci ! Raphaël Goetter alsacreations.com

×