Raphaël Goetter                          www.alsacreations.com                          www.goetter.fr                    ...
et aussi...                            Techniques CSS avancées                            Positionnement avancé           ...
Au menu :des aspects de CSS 2 ...Finalisés depuis des annéesUtilisables en productionTrès pratiques à lusage… Souvent méco...
Soyezrévolutionnaire utilisez CSS 2 !
1996199719981999200020012002200320042005200620072008200920102011
1996 ← CSS 1199719981999200020012002200320042005200620072008200920102011
1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011
1996 ← CSS 119971998 ← CSS 2.01999200020012002200320042005200620072008200920102011 ← CSS 2.1
1996 ← CSS 119971998 ← CSS 2.0199920002001             ← IE 62002200320042005200620072008200920102011 ← CSS 2.1
1996 ← CSS 119971998 ← CSS 2.0199920002001             ← IE 620022003200420052006             ← IE 720072008200920102011 ←...
1996 ← CSS 119971998 ← CSS 2.0199920002001             ← IE 620022003200420052006             ← IE 7200720082009          ...
1996 ← CSS 119971998 ← CSS 2.0199920002001             ← IE 620022003200420052006             ← IE 7200720082009          ...
Où est passé CSS 2 ?
Un monde sans IE 6 ?!
Un monde sans IE6 ?Nos successeursne connaîtront pas IE6 !
Un monde sans IE6 : où en est-on ?   ←                       98%
Un monde sans IE6 : minima et maxima     min-width     max-width     min-height     max-heightbody { max-width: 1100px; }
Démo !
Un monde sans IE6 : minima et maxima
Un monde sans IE6 : minima et maxima
Un monde sans IE6 : first-child et :hoverpseudo-classes  first-child    :hoverp:hover { background-color: pink; }
Démo !
Un monde sans IE6 : first-child et :hover
Un monde sans IE6 : first-child et :hover
Un monde sans IE6 : enfants A > B           sélecteur           d’enfants              A>Bul#nav > li { list-style: none; }
Démo !
Un monde sans IE6 : enfants A > B
Un monde sans IE6 : attribut [attr]         sélecteur         d’attribut           [attr]input[type="submit"] { cursor: po...
Démo !
Un monde sans IE6 : attribut [attr]
Un monde sans IE6 : adjacent A + B       sélecteur      d’adjacence         A+Bh1 + p { font-style: italic; }
Démo !
Un monde sans IE6 : adjacent A + B
Un monde sans IE6 : position fixéepositionnementposition: fixed; #nav { position: fixed; top: 0; left: 0;}
Démo !
Un monde sans IE6 : position fixée
Un monde sans IE 7 ?!
Un monde sans IE7: où en est-on ?        ←  ←                      91%
Un monde sans IE7 : :before et :aftercontenu généré    :before     :afterblockquote:after { content: url(guillemets.png); }
Démo !
Un monde sans IE7 : :before et :after
Un monde sans IE7 : :before et :after
Un monde sans IE7 : inline-blockinline et block à     la fois  inline-blocka { display: inline-block; width: 150px; }
Démo !
Un monde sans IE7 : inline-block
Un monde sans IE7 : modèle tabulaire    modèle   tabulaire display: table#aside, #content { display: table-cell; }
Démo !
Un monde sans IE7 : modèle tabulaire
Un monde sans IE7 : modèle tabulaireMise en page facile et intuitiveHauteurs égalesCentrage verticalLargeur fluideHauteur ...
Un monde sans IE7 : modèle tabulaire
Un monde sans IE7 : modèle tabulaire
« pas faciled’avoir du style » © internet explorer
CréditsPhotos, illustrations :www.fotolia.frPolice :MegalopolisExtraby SMelteryIcones et pictos :www.iconfider.netRaphaël ...
Merci !Raphaël Goetter   alsacreations.com
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
Soyez revolutionnaire, utilisez CSS2 !
Prochain SlideShare
Chargement dans…5
×

Soyez revolutionnaire, utilisez CSS2 !

6 687 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
6 687
Sur SlideShare
0
Issues des intégrations
0
Intégrations
245
Actions
Partages
0
Téléchargements
80
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×