Beaucoup d’incompréhensions accompagnent les nouveaux et excitants langages HTML5 et CSS3.
Raphaël se propose de vous en faire découvrir les grandes lignes, de démêler le vrai du faux et les nombreuses idées reçues : “HTML5 c'est encore trop tôt”, “On ne peut pas faire de HTML5 sans CSS3”, “Avec HTML5, je devrai tout réapprendre depuis zéro”, “CSS3 ne fonctionne pas sur IE”, “CSS3 c'est que de la décoration”, etc.
1. TM L5 et CSS3
H é
Myth es et réalit
Petit tour des principales idées reçues
Raphaël Goetter
Alsacréations
2. Idées reçues ?
1. HTML5 c'est encore trop tôt !
2. CSS3 est très différent de CSS2
3. HTML5 et CSS3, c'est pas pareil ?!
4. HTML5 est devenu trop complexe !
5. CSS3 ne fonctionne pas sur Internet Explorer !
6. CSS3 c'est que de la décoration, nan ?
7. HTML5 et CSS3 seront finalisés en 2022 !
3. idée reçue n°1
●
HTML5 c'est e ncore trop tôt !
« HTML5
c'est encore
trop tôt !
5. idée reçue n°1
●
HTML5 c'est e ncore trop tôt !
De nombreux grands sites sont passés à
HTML5 : Google, Yahoo, Facebook, Youtube,
Wikipedia, Twitter, etc.
Mais...
6. idée reçue n°1
●
HTML5 c'est e ncore trop tôt !
34% des 100 plus grands sites mondiaux
Mais...
7. idée reçue n°1
●
HTML5 c'est e ncore trop tôt !
Support HTML5 actuellement :
29. idée reçue n°5
●
CSS3 ne fonct ionne pas sur IE !
CSS3 est très bien supporté... par IE10 !
30. idée reçue n°5
●
CSS3 ne fonct ionne pas sur IE !
•
Internet Explorer 10
•
flexbox layout
•
grid layout
•
text-shadow
•
transformations 2D
•
transformations 3D
•
etc.
31. idée reçue n°5
●
CSS3 ne fonct ionne pas sur IE !
•
Internet Explorer 10 •
Internet Explorer 9
•
flexbox layout •
multicolonnes
•
grid layout •
border-radius
•
text-shadow •
box-shadow
•
transformations 2D •
opacity / RGBa
•
transformations 3D •
multiple backgrounds
•
etc. •
media queries
•
:last-child, :nth-
child, :only-child,
:target, :not, ...
32. idée reçue n°5
●
CSS3 ne fonct ionne pas sur IE !
•
Internet Explorer 8 •
Internet Explorer 6
•
box-sizing •
@font-face
•
text-overflow
•
Internet Explorer 7 •
word-wrap
•
overflow-x, overflow-y
•
+ filters proprio...
•
sélecteurs [att^=val],
[att*=val], [att$=val]
•
E~F
33. la décoration, nan ?
idée reçue n°6
●
CSS3 c'est que de
« CSS3 c'est que
de la
décoration,
nan ?
35. la décoration, nan ?
idée reçue n°6
●
CSS3 c'est que de
Tout ceux qui ont dit « vrai » ont un gage
36. la décoration, nan ?
idée reçue n°6
●
CSS3 c'est que de
•
décoration
•
border-radius
•
opacity
•
box-shadow
•
text-shadow
•
border-image
•
background-size
•
multiple backgrounds
•
...
37. la décoration, nan ?
idée reçue n°6
●
CSS3 c'est que de
•
décoration •
contenu et textes
•
border-radius •
@font-face
•
opacity •
word-wrap
•
box-shadow •
hyphens
•
text-shadow •
text-overflow
•
border-image •
font-smoothing
•
background-size •
ligatures
•
multiple backgrounds •
...
•
...
38. la décoration, nan ?
idée reçue n°6
●
CSS3 c'est que de
•
positionnement •
transformations
•
multicolonnes •
rotate
•
flexbox layout •
skew
•
grid layout •
scale
•
regions •
matrix
•
exclusions •
... et aussi en 3D
•
media queries
•
@media screen and
(max-width: 480px)
39. la décoration, nan ?
idée reçue n°6
●
CSS3 c'est que de
•
Transitions, Animations •
sélecteurs
•
vitesse •
A~B
•
accélération •
[attr*=val]
•
répétitions, ... •
:not
•
:target
•
unités et fonctions •
:last-child, :nth-child
•
rem, fr, vw, vh, vmin, •
:only-child
vmax, deg, rad, s, ms •
:enabled, :disabled,
•
calc(100%-50px) :checked, :required
•
etc. •
:valid, :invalid, ...
40. 3 finalisés en 2022 !
idée reçue n°7
●
HTML5 et CSS
« HTML5 et
CSS3 seront
finalisés en
2022 !
41. 3 finalisés en 2022 !
idée reçue n°7
●
HTML5 et CSS
« FAUX !