Présentation par Laurent Duveau au groupe HTML5mtl (www.meetup.com/HTML5mtl/) le 10 Novembre 2015.

1. Edge pour les développeurs web
Laurent Duveau
HTML5mtl – 10 Novembre 2015

4. Internet Explorer…

11. “On January 12, 2016, we will stop
support for all versions of IE
except IE11”
- Microsoft
https://support.microsoft.com/en-us/lifecycle/search?sort=PN&alpha=internet%20explorer

14. IE6 funeral cake!
Usage IE6 < 1% aux USA en 2011

15. IE6 < 1% au Canada en 2012

18. Un dev sur MAC essaye de tester pour IE…

20. • WebGL
• WebSockets
• CSS3 Gradients
• Blocked scoped
variables
• Pointer Events
• Fullscreen API
• Device Orientation
• Flexbox
• Encrypted Media
Extensions
• CSS3 Regions
• File API
• AppCache
• IndexedDB
• CSS3 Media Queries
• Canvas
• CSS3 Transforms
Pourtant IE11 n’est pas si pire!

21. http://browseryoulovedtohate.tumblr.com/

22. Pourquoi tester pour IE ?

23. Netmarketshare.com

24. StatCounter.com

27. IE Developer Guides
http://bit.ly/iedevguides

28. IE Compatibility Cookbook
http://bit.ly/iecompatcookbook

31. Web Platform
Trident
Browser
Internet Explorer

32. Web Platform
Blink
Browser
Chrome

33. Web Platform
Webkit
Browser
Safari

34. Web Platform
Gecko
Browser
Firefox

35. 3 41 2 5.5 65 7 84.x 99 10 11
Trident
1995 2015

36. Quirks Strict
HTML4, ES3, CSS2
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
!DOCTYPE

37. Quirks Strict
HTML4, ES3, CSS2
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
!DOCTYPE

38. !DOCTYPE
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
x-ua-compatible
IE5
Quirks
IE7
Compatibility
View
IE8
Standards
Mode
HTML4, ES3, CSS2 CSS2.1

39. HTML5, SVG, ES5
!DOCTYPE
HTML4, ES3, CSS2
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
CSS2.1
x-ua-compatible
IE5
Quirks
IE7
Compatibility
View
IE8
Standards
Mode
IE9
Standards
Mode

40. HTML5, SVG, ES5, CSS3
!DOCTYPE
HTML4, ES3, CSS2
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
CSS2.1
x-ua-compatible
IE5
Quirks
IE7
Compatibility
View
IE8
Standards
Mode
QME
Quirks Mode
Emulation
IE9
Standards
Mode
IE10
Standards
Mode

41. HTML5, SVG, ES5, CSS3
!DOCTYPE
HTML4, ES3, CSS2
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
CSS2.1
x-ua-compatible
IE5
Quirks
IE7
Compatibility
View
IE8
Standards
Mode
IE10
Standards
Mode
IE9
Standards
Mode
QME
Quirks
Mode
Emulation
EMIE
Enterprise
Mode
IE11
Standards
Mode
Modern WebLegacy Web

42. Repartir à neuf!

43. • User Agent intéropérable
• 4200 fixes d’intéropérabilité
• 45 nouveaux standards implémentés
• Evergreen
• Trident –» EdgeHTML

44. Interoperable UA string
Le but étant de recevoir le même contenu que les
autres navigateurs…
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36
Edge/12.10240
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1)
AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0
Safari/600.1.25
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:39.0) Gecko/20100101
Firefox/39.0

45. …Camouflage!

47. Faire de la détection de fonctionnalités

48. Browser
Firefox
Gecko
Evergreen

49. Browser
Chrome
Blink
Evergreen

50. Browser
Edge
Microsoft EdgeHTML
Evergreen

51. Compatibilité ?
 IE11 est toujours présent sur Windows 10
 IE11 Win10 est identique à IE11 Win 7 & 8
 Entreprises: mode pour configurer par défaut IE11
(qui lui-même à un mode d’émulation IE8)

53. Extensions
IE a supporté 30 modèles
d’extensions pendant 20
ans…
Edge n’en supportera aucun
• ActiveX, Toolbars, BHO, …
• Problèmes de sécurité,
fiabilité et performances.
• Support natif pour Flash et
PDF.
• Modèle d’extensions
modernes en JavaScript à
venir…

54. F12 Developer Tools
http://bit.ly/f12devtools

55. Comment tester pour IE et Edge ?
(même si on n’a pas de PC)

56. Microsoft Edge Dev Portal
http://dev.microsoftedge.com

58. http://status.microsoftedge.com http://uservoice.modern.ie
Ouverture

59. Recap
Valider le User Agent de Edge avec votre site
Utiliser remote.modern.ie pour tester la
dernière version of IE
Faire de la détection de fonctionnalités
Ne pas parser le User Agent

61. Microsoft Edge
HTML5mtl 10 Novembre 2015
Laurent Duveau
laurent@ldex.ca
AngularJS, Azure et
Xamarin
MVP / MCT / RD @laurentduveau Montrealldex.ca