Post on 24-May-2015
description
HTML5 et CSS3Mythes et réalité
Petit tour des principales idées reçuesRaphaël Goetter
Alsacréations
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 !
«●HTML5 c'est encore trop tôt !
idée reçue n°1
HTML5 c'est encore trop tôt !
«●HTML5 c'est encore trop tôt !
idée reçue n°1
Ça dépend...
●HTML5 c'est encore trop tôt !idée reçue n°1
De nombreux grands sites sont passés à HTML5 : Google, Yahoo, Facebook, Youtube, Wikipedia, Twitter, etc.
Mais...
●HTML5 c'est encore trop tôt !idée reçue n°1
34% des 100 plus grands sites mondiaux
Mais...
●HTML5 c'est encore trop tôt !idée reçue n°1
Support HTML5 actuellement :
●HTML5 c'est encore trop tôt !idée reçue n°1
<!DOCTYPE html>
●HTML5 c'est encore trop tôt !idée reçue n°1
●HTML5 c'est encore trop tôt !idée reçue n°1
●HTML5 c'est encore trop tôt !idée reçue n°1
<!--[if lt IE 9]><script src="scripts/html5shim.js"></script><![endif]-->
document.createElement("header"); document.createElement("footer"); document.createElement("section"); document.createElement("aside"); document.createElement("nav"); ...
Solution de repli ?
«●CSS3 est très différent de CSS2idée reçue n°2
CSS3 est très différent de CSS2
«●CSS3 est très différent de CSS2idée reçue n°2
FAUX !
●CSS3 est très différent de CSS2idée reçue n°2
« CSS3 » = CSS1 + CSS2 + nouveautés
«●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
HTML5 et CSS3, c'est pas pareil ?!
«●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
FAUX !
●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
« HTML5 » = HTML5 + CSS3 + JavaScript ?
http://www.w3.org/html/logo/ Mais...
●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
http://www.w3.org/html/logo/
●HTML5 et CSS3, c'est pas pareil ?!idée reçue n°3
Les spécifications sont complètement indépendantes (et valides) :✔ HTML4 + CSS2 ✔ HTML4 + CSS3✔ XHTML + CSS2✔ XHTML + CSS3✔ HTML5 + CSS2✔ etc.
«●HTML5 est devenu trop complexe !idée reçue n°4
HTML5 est devenu trop complexe !
«●HTML5 est devenu trop complexe !idée reçue n°4
Ça dépend...
●HTML5 est devenu trop complexe !idée reçue n°4
Le métier d'intégrateur devient-il celui de développeur front-end (par la force des choses) ?
●HTML5 est devenu trop complexe !idée reçue n°4
• Doctype • <!DOCTYPE html>
• Sémantique• <header>• <footer>• <nav>• <aside>• <figure>• <section>…
●HTML5 est devenu trop complexe !idée reçue n°4
• Doctype • <!DOCTYPE html>
• Sémantique• <header>• <footer>• <nav>• <aside>• <figure>• <section>…
• Formulaires • email, URL, number• color, search, range• date, month, time,...
• Attributs• placeholder• autofocus• required• contenteditable• draggable...
●HTML5 est devenu trop complexe !idée reçue n°4
• Accessibilité • ARIA
• Média• <audio>• <video>• <canvas>• SVG
• APIs • Géolocalisation• Drag & drop• History• Web storage• Web offline• File access• Touch Event• Vibration• Web workers,...
●HTML5 est devenu trop complexe !idée reçue n°4
«●CSS3 ne fonctionne pas sur IE !idée reçue n°5
CSS3 ne fonctionne pas sur IE !
«●CSS3 ne fonctionne pas sur IE !idée reçue n°5
FAUX !
●CSS3 ne fonctionne pas sur IE !idée reçue n°5
CSS3 est très bien supporté... par IE10 !
●CSS3 ne fonctionne pas sur IE !idée reçue n°5
• Internet Explorer 10 • flexbox layout• grid layout• text-shadow• transformations 2D• transformations 3D• etc.
●CSS3 ne fonctionne pas sur IE !idée reçue n°5
• Internet Explorer 10 • flexbox layout• grid layout• text-shadow• transformations 2D• transformations 3D• etc.
• Internet Explorer 9• multicolonnes• border-radius• box-shadow• opacity / RGBa• multiple backgrounds• media queries• :last-child, :nth-
child, :only-child, :target, :not, ...
●CSS3 ne fonctionne pas sur IE !idée reçue n°5
• Internet Explorer 8 • box-sizing
• Internet Explorer 6• @font-face• text-overflow• word-wrap• + filters proprio...
• Internet Explorer 7 • overflow-x, overflow-y• sélecteurs [att^=val],
[att*=val], [att$=val]• E~F
«●CSS3 c'est que de la décoration, nan ?idée reçue n°6
CSS3 c'est que de la décoration, nan ?
«●CSS3 c'est que de la décoration, nan ?idée reçue n°6
FAUX !
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
Tout ceux qui ont dit « vrai » ont un gage
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
• décoration • border-radius• opacity• box-shadow• text-shadow• border-image• background-size• multiple backgrounds• ...
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
• décoration • border-radius• opacity• box-shadow• text-shadow• border-image• background-size• multiple backgrounds• ...
• contenu et textes • @font-face• word-wrap• hyphens• text-overflow• font-smoothing• ligatures• ...
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
• positionnement • multicolonnes• flexbox layout• grid layout• regions• exclusions
• transformations • rotate• skew• scale• matrix• ... et aussi en 3D
• media queries • @media screen and
(max-width: 480px)
●CSS3 c'est que de la décoration, nan ?idée reçue n°6
• Transitions, Animations • vitesse• accélération• répétitions, ...
• sélecteurs • A ~ B• [attr*=val]• :not• :target• :last-child, :nth-child• :only-child• :enabled, :disabled,
:checked, :required• :valid, :invalid, ...
• unités et fonctions • rem, fr, vw, vh, vmin,
vmax, deg, rad, s, ms• calc(100%-50px)• etc.
«●HTML5 et CSS3 finalisés en 2022 !idée reçue n°7
HTML5 et CSS3 seront finalisés en 2022 !
«●HTML5 et CSS3 finalisés en 2022 !idée reçue n°7
FAUX !
●HTML5 et CSS3 finalisés en 2022 !idée reçue n°7
●HTML5 et CSS3 finalisés en 2022 !idée reçue n°7
✔ HTML5.0 → 2014✔ HTML5 .1 → 2016 ✔ CSS3 → ???
Et voilà !
Crédits
● Illustrations : Fotolia (majoritairement)● Polices :
● Segoe UI light● Georgia (citations)
Merci !
www.goetter.frwww.alsacreations.com www.knacss.com www.ie7nomore.com www.thinkmobilefirst.net
@goetter
QUIZ !HTML & CSS
Question 1
Citez l'un des deux co-inventeurs du langage css
Question 1
Citez l'un des deux co-inventeurs du langage css
(indice : ils sont deux)
Question 1
Bert BosHâkon Lie
Question 2
Quel navigateur fut initialement développé dans cette ferme danoise ?
Question 2
(indice : il est connu !)
Question 2
Google Chromepar Lars Bak qui ne voulait pas s'expatrierpour travailler en Californie
Question 3
En quelle année CSS 2.1 est-il devenu une recommandation officielle (Rec) ?
Question 3
(indice : pas si longtemps que ça)
Question 3
Mai 2011