Download - HTML5 / CSS3 : Mythes et realite

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...


34% des 100 plus grands sites mondiaux

Mais...


Support HTML5 actuellement :


<!DOCTYPE html>

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...

http://www.w3.org/html/logo/


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) ?


• Doctype • <!DOCTYPE html>

• Sémantique• <header>• <footer>• <nav>• <aside>• <figure>• <section>…


• 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...


• 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,...

«●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 !


• Internet Explorer 10 • flexbox layout• grid layout• text-shadow• transformations 2D• transformations 3D• etc.


• 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, ...


• 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


• décoration • border-radius• opacity• box-shadow• text-shadow• border-image• background-size• multiple backgrounds• ...


• 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• ...


• 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)


• 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

http://www.goetter.fr/

http://www.alsacreations.com/

http://www.knacss.com/

http://www.ie7nomore.com/

http://www.thinkmobilefirst.net/

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