laurent duveau: microsoft edge pour les développeurs web
TRANSCRIPT
Edge pour les développeurs web
Laurent DuveauMS DEV MTL – 07 Décembre 2015
Internet Explorer…
“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
IE6 funeral cake!
Usage IE6 < 1% aux USA en 2011
IE6 < 1% au Canada en 2012
Un dev sur MAC essaye de tester pour IE…
• 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!
http://browseryoulovedtohate.tumblr.com/
Pourquoi tester pour IE ?
Netmarketshare.com
StatCounter.com
IE Developer Guides
http://bit.ly/iedevguides
IE Compatibility Cookbook
http://bit.ly/iecompatcookbook
Web Platform
Trident
Browser
Internet Explorer
Web Platform
Blink
Browser
Chrome
Web Platform
Webkit
Browser
Safari
Web Platform
Gecko
Browser
Firefox
3 41 2 5.5 65 7 84.x 99 10 11
Trident
1995 2015
Quirks Strict
HTML4, ES3, CSS2
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
!DOCTYPE
Quirks Strict
HTML4, ES3, CSS2
Trident
3 41 2 5.5 65 7 84.x 99 10 11
1995 2015
!DOCTYPE
!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
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
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
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
Repartir à neuf!
• User Agent intéropérable
• 4200 fixes d’intéropérabilité
• 45 nouveaux standards implémentés
• Evergreen
• Trident –» EdgeHTML
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
…Camouflage!
Faire de la détection de fonctionnalités
Browser
Firefox
Gecko
Evergreen
Browser
Chrome
Blink
Evergreen
Browser
Edge
Microsoft EdgeHTML
Evergreen
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)
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…
F12 Developer Tools
http://bit.ly/f12devtools
Comment tester pour IE et Edge ?(même si on n’a pas de PC)
Microsoft Edge Dev Portal
http://dev.microsoftedge.com
http://status.microsoftedge.com http://uservoice.modern.ie
Ouverture
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
Microsoft Edge
MS DEV MTL 07 Décembre 2015
Laurent [email protected]
AngularJS, Azure et
Xamarin
MVP / MCT / RD @laurentduveau Montrealldex.ca