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 Duveaulaurent@ldex.ca

AngularJS, Azure et

Xamarin

MVP / MCT / RD @laurentduveau Montrealldex.ca