Soyez revolutionnaire, utilisez CSS2 !

6,817 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,817
On SlideShare
0
From Embeds
0
Number of Embeds
245
Actions
Shares
0
Downloads
80
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Soyez revolutionnaire, utilisez CSS2 !

  1. 1. Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetterSoyez 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éesUtilisables en productionTrès pratiques à lusage… Souvent méconnus !
  4. 4. Soyezrévolutionnaire utilisez CSS 2 !
  5. 5. 1996199719981999200020012002200320042005200620072008200920102011
  6. 6. 1996 ← CSS 1199719981999200020012002200320042005200620072008200920102011
  7. 7. 1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011
  8. 8. 1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011 ← CSS 2.1
  9. 9. 1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 62002200320042005200620072008200920102011 ← CSS 2.1
  10. 10. 1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 620022003200420052006 ← IE 720072008200920102011 ← CSS 2.1
  11. 11. 1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 620022003200420052006 ← IE 7200720082009 ← IE 820102011 ← CSS 2.1
  12. 12. 1996 ← CSS 119971998 ← CSS 2.0199920002001 ← IE 620022003200420052006 ← IE 7200720082009 ← IE 820102011 ← 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 successeursne 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-heightbody { 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 :hoverpseudo-classes first-child :hoverp: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>Bul#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+Bh1 + 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éepositionnementposition: 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 :aftercontenu généré :before :afterblockquote: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-blockinline et block à la fois inline-blocka { 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 tabulaireMise en page facile et intuitiveHauteurs égalesCentrage verticalLargeur fluideHauteur fluideRé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 faciled’avoir du style » © internet explorer
  53. 53. CréditsPhotos, illustrations :www.fotolia.frPolice :MegalopolisExtraby SMelteryIcones et pictos :www.iconfider.netRaphaël Goetter alsacreations.com @goetter
  54. 54. Merci !Raphaël Goetter alsacreations.com

×