Soyez révolutionnaires, utilisez CSS2 !

KiwiParty 2011

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