Vous n’avez pas encore sauté le pas HTML 5 / CSS 3 ? Par manque de temps ? Par méconnaissance ? Par frilosité ? Juste pour nous contrarier ? Pascale Lambert-Charreteur et Raphaël Goetter vous proposent d'en découvrir les grandes lignes (de code), démêleront le vrai du faux (et les nombreuses idées reçues) et partageront avec vous leurs expériences.

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