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

Soyez révolutionnaires, utilisez CSS2 !

Soyez révolutionnaires, utilisez CSS2 !

KiwiParty 2011

Raphael Goetter

March 26, 2011
Tweet

More Decks by Raphael Goetter

Other Decks in Design

Transcript

  1. 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,...)
  2. 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 !
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  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 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
  10. 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
  11. Un monde sans IE6 ? Un monde sans IE6 ?

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

    monde sans IE6 : où en est-on ? ← ← 98% 98%
  13. 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; }
  14. Un monde sans IE6 : minima et maxima Un monde

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

    sans IE6 : minima et maxima
  16. 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; }
  17. Un monde sans IE6 : first-child et :hover Un monde

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

    sans IE6 : first-child et :hover
  19. 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; }
  20. Un monde sans IE6 : enfants A > B Un

    monde sans IE6 : enfants A > B
  21. 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; }
  22. 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; }
  23. Un monde sans IE6 : adjacent A + B Un

    monde sans IE6 : adjacent A + B
  24. 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;}
  25. Un monde sans IE7: où en est-on ? Un monde

    sans IE7: où en est-on ? ← ← 91% 91% ← ←
  26. 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); }
  27. Un monde sans IE7 : :before et :after Un monde

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

    sans IE7 : :before et :after
  29. 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; }
  30. 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; }
  31. 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
  32. « pas facile d’avoir du style » © internet explorer

    « pas facile d’avoir du style » © internet explorer
  33. 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