Download - Microsoft Edge pour les développeurs web
![Page 1: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/1.jpg)
Edge pour les développeurs web
Laurent DuveauHTML5mtl – 10 Novembre 2015
![Page 2: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/2.jpg)
![Page 3: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/3.jpg)
![Page 4: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/4.jpg)
Internet Explorer…
![Page 5: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/5.jpg)
![Page 6: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/6.jpg)
![Page 7: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/7.jpg)
![Page 8: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/8.jpg)
![Page 9: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/9.jpg)
![Page 10: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/10.jpg)
![Page 11: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/11.jpg)
“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
![Page 12: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/12.jpg)
![Page 13: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/13.jpg)
![Page 14: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/14.jpg)
IE6 funeral cake!
Usage IE6 < 1% aux USA en 2011
![Page 15: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/15.jpg)
IE6 < 1% au Canada en 2012
![Page 16: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/16.jpg)
![Page 17: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/17.jpg)
![Page 18: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/18.jpg)
Un dev sur MAC essaye de tester pour IE…
![Page 19: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/19.jpg)
![Page 20: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/20.jpg)
• 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!
![Page 21: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/21.jpg)
http://browseryoulovedtohate.tumblr.com/
![Page 22: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/22.jpg)
Pourquoi tester pour IE ?
![Page 23: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/23.jpg)
Netmarketshare.com
![Page 24: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/24.jpg)
StatCounter.com
![Page 25: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/25.jpg)
![Page 26: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/26.jpg)
![Page 27: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/27.jpg)
IE Developer Guides
http://bit.ly/iedevguides
![Page 28: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/28.jpg)
IE Compatibility Cookbook
http://bit.ly/iecompatcookbook
![Page 29: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/29.jpg)
![Page 30: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/30.jpg)
![Page 31: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/31.jpg)
Web Platform
Trident
Browser
Internet Explorer
![Page 32: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/32.jpg)
Web Platform
Blink
Browser
Chrome
![Page 33: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/33.jpg)
Web Platform
Webkit
Browser
Safari
![Page 34: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/34.jpg)
Web Platform
Gecko
Browser
Firefox
![Page 35: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/35.jpg)
3 41 2 5.5 65 7 84.x 99 10 11
Trident
1995 2015
![Page 36: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/36.jpg)
Quirks Strict
HTML4, ES3, CSS2
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
!DOCTYPE
![Page 37: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/37.jpg)
Quirks Strict
HTML4, ES3, CSS2
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
!DOCTYPE
![Page 38: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/38.jpg)
!DOCTYPE
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
x-ua-compatibleIE5Quirks
IE7Compatibility
View
IE8Standards
Mode
HTML4, ES3, CSS2 CSS2.1
![Page 39: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/39.jpg)
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
IE5Quirks
IE7Compatibility
View
IE8Standards
Mode
IE9Standards
Mode
![Page 40: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/40.jpg)
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
IE5Quirks
IE7Compatibility
View
IE8Standards
Mode
QMEQuirks Mode
Emulation
IE9Standards
Mode
IE10Standards
Mode
![Page 41: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/41.jpg)
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
IE5Quirks
IE7Compatibility
View
IE8Standards
Mode
IE10Standards
Mode
IE9Standards
Mode
QMEQuirks
Mode
Emulation
EMIEEnterprise
Mode
IE11Standards
Mode
Modern WebLegacy Web
![Page 42: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/42.jpg)
Repartir à neuf!
![Page 43: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/43.jpg)
• User Agent intéropérable
• 4200 fixes d’intéropérabilité
• 45 nouveaux standards implémentés
• Evergreen
• Trident –» EdgeHTML
![Page 44: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/44.jpg)
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
![Page 45: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/45.jpg)
…Camouflage!
![Page 46: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/46.jpg)
![Page 47: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/47.jpg)
Faire de la détection de fonctionnalités
![Page 48: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/48.jpg)
Browser
Firefox
Gecko
Evergreen
![Page 49: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/49.jpg)
Browser
Chrome
Blink
Evergreen
![Page 50: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/50.jpg)
Browser
Edge
Microsoft EdgeHTML
Evergreen
![Page 51: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/51.jpg)
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)
![Page 52: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/52.jpg)
![Page 53: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/53.jpg)
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…
![Page 54: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/54.jpg)
F12 Developer Tools
http://bit.ly/f12devtools
![Page 55: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/55.jpg)
Comment tester pour IE et Edge ?(même si on n’a pas de PC)
![Page 56: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/56.jpg)
Microsoft Edge Dev Portal
http://dev.microsoftedge.com
![Page 57: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/57.jpg)
![Page 58: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/58.jpg)
http://status.microsoftedge.com http://uservoice.modern.ie
Ouverture
![Page 59: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/59.jpg)
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
![Page 60: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/60.jpg)
![Page 61: Microsoft Edge pour les développeurs web](https://reader034.vdocuments.fr/reader034/viewer/2022052405/5872b37e1a28ab523c8b6053/html5/thumbnails/61.jpg)
Microsoft Edge
HTML5mtl 10 Novembre 2015
Laurent [email protected]
AngularJS, Azure et
Xamarin
MVP / MCT / RD @laurentduveau Montrealldex.ca