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.
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
1.
2.
3.
4.
5.
6.
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
9.
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
13.
14.
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
18.
19.
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
21.
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)
27.
28.
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