7. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est encore trop tôt ! »
Je ne vous
crois pas !
Démos :
mammouthland.net
alsacreations.fr
Pascale Lambert-Charreteur et Raphaël Goetter

8. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est encore trop tôt ! »
À vous de
jouer !
1- doctype HTML5
Pascale Lambert-Charreteur et Raphaël Goetter

10. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est encore trop tôt ! »
Pour IE ? Des solutions de repli
... comme d'hab
<!--[if IE]>
<script src="scripts/html5ie.js"></script>
<![endif]-->
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
...
Pascale Lambert-Charreteur et Raphaël Goetter Solutions de repli ?

11. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est encore trop tôt ! »
À vous de
jouer !
2- IE et HTML5
Pascale Lambert-Charreteur et Raphaël Goetter

12. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Idée reçue numéro 2 :
HTML5 c'est juste des nouvelles
balises !
Vous avez dit « balise » ?
Pascale Lambert-Charreteur et Raphaël Goetter

15. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est juste des nouvelles balises ! »
Je ne vous
crois pas !
Démo vidéo : dailymotion.com/html5
LocalStorage : ie7nomore.com/fun/todolist/
Pascale Lambert-Charreteur et Raphaël Goetter

16. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« HTML5 c'est juste des nouvelles balises ! »
À vous de
jouer !
3- contenteditable
4- vidéo
Pascale Lambert-Charreteur et Raphaël Goetter

17. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Idée reçue numéro 3 :
On ne peut pas faire de HTML5
sans CSS3 (et vice versa...)
Pascale Lambert-Charreteur et Raphaël Goetter

20. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Idée reçue numéro 4 :
CSS3 est trop jeune, encore
inutilisable
Pascale Lambert-Charreteur et Raphaël Goetter

22. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3 c'est trop jeune, encore inutilisable »
Pascale Lambert-Charreteur et Raphaël Goetter

23. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3 c'est trop jeune, encore inutilisable »
Et même sur IE !
Depuis IE6 Depuis IE7
✔ font-face, text-overflow, ✔ overflow-x, overflow-y
word-wrap ✔ [att^=val], [att*=val],
[att$=val], E~F
A partir de IE9
✔ border-radius, box-shadow, opacity,
RGBa multiple backgrounds
✔ :last-child, :nth-child, :only-child,
:first-of-type, :target, :not, :empty, ...
Pascale Lambert-Charreteur et Raphaël Goetter

24. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3 c'est trop jeune, encore inutilisable »
Je ne vous
crois pas !
Démo kiwis : ie7nomore.com/fun/kiwi/
Démo wrapping : ie7nomore.com/fun/wrapping/
Pascale Lambert-Charreteur et Raphaël Goetter

25. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3 c'est trop jeune, encore inutilisable »
À vous de
jouer !
5- font-face
Pascale Lambert-Charreteur et Raphaël Goetter

26. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Idée reçue numéro 5 :
CSS3, c'est que de la déco, nan ?
Pascale Lambert-Charreteur et Raphaël Goetter Daniel Glazman, 3 ans (fake)

29. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3, c'est que de la déco, nan ? »
Je ne vous
crois pas !
Démos MediaQueries : mammouthland.net &
alsacreations.fr
Démo animations : the-art-of-web.com/css/css-animation
Pascale Lambert-Charreteur et Raphaël Goetter

30. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
« CSS3, c'est que de la déco, nan ? »
À vous de
jouer !
6- media-queries
7- nth-child
Pascale Lambert-Charreteur et Raphaël Goetter

31. Plus belle la vie avec HTML5 et CSS3 Paris-Web 2010
Ressources
Pascale Lambert-Charreteur et Raphaël Goetter