Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Soyez révolutionnaires, utilisez CSS2 !

Soyez révolutionnaires, utilisez CSS2 !

KiwiParty 2011

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

March 26, 2011
Tweet

Transcript

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

    utilisez CSS 2 ! Soyez révolutionnaires, utilisez CSS 2 !
  2. Soyez révolutionnaires, utilisez CSS 2 ! Soyez révolutionnaires, utilisez CSS

    2 ! depuis le 17 mars depuis le 17 mars et aussi... et aussi... Techniques CSS avancées Positionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3) Gestion de projet (conventions, optimisation des performances, frameworks) HTML5, CSS3 Résolution de bogues Multimédia (web mobile, e-mailing, impression, projection,...) Techniques CSS avancées Positionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3) Gestion de projet (conventions, optimisation des performances, frameworks) HTML5, CSS3 Résolution de bogues Multimédia (web mobile, e-mailing, impression, projection,...)
  3. Au menu : des aspects de CSS 2 ... Au

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

    2 !
  5. 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005

    2006 2007 2008 2009 2010 2011 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 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 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 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 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 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 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 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. None
  14. Où est passé CSS 2 ? Où est passé CSS

    2 ?
  15. Un monde sans IE 6 ?! Un monde sans IE

    6 ?!
  16. Un monde sans IE6 ? Un monde sans IE6 ?

    Nos successeurs ne connaîtront pas IE6 ! Nos successeurs ne connaîtront pas IE6 !
  17. Un monde sans IE6 : où en est-on ? Un

    monde sans IE6 : où en est-on ? ← ← 98% 98%
  18. Un monde sans IE6 : minima et maxima Un monde

    sans IE6 : minima et maxima min-width max-width min-height max-height min-width max-width min-height max-height body { max-width: 1100px; }
  19. Démo ! Démo !

  20. Un monde sans IE6 : minima et maxima Un monde

    sans IE6 : minima et maxima
  21. Un monde sans IE6 : minima et maxima Un monde

    sans IE6 : minima et maxima
  22. Un monde sans IE6 : first-child et :hover Un monde

    sans IE6 : first-child et :hover pseudo-classes first-child :hover pseudo-classes first-child :hover p:hover { background-color: pink; }
  23. Démo ! Démo !

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

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

    sans IE6 : first-child et :hover
  26. Un monde sans IE6 : enfants A > B Un

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

  28. Un monde sans IE6 : enfants A > B Un

    monde sans IE6 : enfants A > B
  29. Un monde sans IE6 : attribut [attr] Un monde sans

    IE6 : attribut [attr] sélecteur d’attribut [attr] sélecteur d’attribut [attr] input[type="submit"] { cursor: pointer; }
  30. Démo ! Démo !

  31. Un monde sans IE6 : attribut [attr] Un monde sans

    IE6 : attribut [attr]
  32. Un monde sans IE6 : adjacent A + B Un

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

  34. Un monde sans IE6 : adjacent A + B Un

    monde sans IE6 : adjacent A + B
  35. Un monde sans IE6 : position fixée Un monde sans

    IE6 : position fixée positionnement position: fixed; positionnement position: fixed; #nav { position: fixed; top: 0; left: 0;}
  36. Démo ! Démo !

  37. Un monde sans IE6 : position fixée Un monde sans

    IE6 : position fixée
  38. None
  39. Un monde sans IE 7 ?! Un monde sans IE

    7 ?!
  40. Un monde sans IE7: où en est-on ? Un monde

    sans IE7: où en est-on ? ← ← 91% 91% ← ←
  41. Un monde sans IE7 : :before et :after Un monde

    sans IE7 : :before et :after contenu généré :before :after contenu généré :before :after blockquote:after { content: url(guillemets.png); }
  42. Démo ! Démo !

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

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

    sans IE7 : :before et :after
  45. Un monde sans IE7 : inline-block Un monde sans IE7

    : inline-block inline et block à la fois inline-block inline et block à la fois inline-block a { display: inline-block; width: 150px; }
  46. Démo ! Démo !

  47. Un monde sans IE7 : inline-block Un monde sans IE7

    : inline-block
  48. Un monde sans IE7 : modèle tabulaire Un monde sans

    IE7 : modèle tabulaire modèle tabulaire display: table modèle tabulaire display: table #aside, #content { display: table-cell; }
  49. Démo ! Démo !

  50. Un monde sans IE7 : modèle tabulaire Un monde sans

    IE7 : modèle tabulaire
  51. Un monde sans IE7 : modèle tabulaire 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 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 Un monde sans

    IE7 : modèle tabulaire
  53. Un monde sans IE7 : modèle tabulaire Un monde sans

    IE7 : modèle tabulaire
  54. None
  55. « pas facile d’avoir du style » © internet explorer

    « pas facile d’avoir du style » © internet explorer
  56. None
  57. Crédits Crédits Raphaël Goetter alsacreations.com @goetter Raphaël Goetter alsacreations.com @goetter

    Photos, illustrations : www.fotolia.fr Police : MegalopolisExtra by SMeltery Icones et pictos : www.iconfider.net Photos, illustrations : www.fotolia.fr Police : MegalopolisExtra by SMeltery Icones et pictos : www.iconfider.net
  58. Merci ! Merci ! Raphaël Goetter alsacreations.com Raphaël Goetter alsacreations.com