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