SlideShare a Scribd company logo
June 24, 2015 – SFHTML5
Microsoft Edge
for the Web of Today and Tomorrow
@JacobRossi
Senior Program Manager
Microsoft Edge platform team
Browser wars
Technology wars
Massive multiplayer wars
We’re distracted.
What makes us love the web?
SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow
The web has unique strengths
Playing to the web’s unique strengths
Linkability
Searchability
Ephemerality
Interoperability
Openness
An interconnected and
indexed set of
33 trillion pages that run
cross-platform and are
publicly viewable.
Write on the page and share it
Search faster with Cortana
Save it for later in your Reading List
Run the x-browser code with EdgeHTML
Plan for the future via our open roadmap
Linkability
Searchability
Ephemerality
Interoperability
Openness
Write on the page and share it
Search faster with Cortana
Save it for later in your Reading List
Run the x-browser code with EdgeHTML
Plan for the future via our open roadmap
Linkability
Searchability
Ephemerality
Interoperability
Openness
A fork from the past
The engine split
SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow
Interoperability: a new approach
SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow
“The web should just work for everyone – users,
developers, and businesses.”
If standard defines an API
behavior but all other
browsers behave differently, is
it a standard?
Interoperability means the web “just works”
if ($.client.profile().name === 'msie') {
var IHateIE = {
'scrollTop': context.$textarea.scrollTop(),
'pos': context.$textarea.textSelection('getCaretPosition', {startAndEnd:
true})
};
context.$textarea.data('IHateIE', IHateIE);
}
For some reason IE seems to be
calculating that differently. You
might have to put in a special
rule for IE there.
In Chrome, the error does not occur, the xml is
appended successfully and the other methods after
these two run as expected. In IE however, a
hierarchyRequestError is thrown at the appendChild
statement.
no matter HOW I passed the ko object
to the child window, something got lost.
Horrible behavior, IE...
Why does the following code throw an
'Unspecified error' (on the appendChild
line) in IE11 which I click the button?
Getting the right, modern content
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
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) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/40.0.2214.93 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
User-Agent Strings
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
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) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/40.0.2214.93 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
User-Agent Strings
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
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) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/40.0.2214.93 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
Mozilla/5.0
The HTML5 Standard even does this!
window.mobileCheck = function() {
var check = false;
(function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hi
ptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera
m(ob|in)i|palm(
os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|win
dows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a
wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-
m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-
|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-
d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-
mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-|
|_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-
|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt
|kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-
w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-|
|o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-
|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-
8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-
)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-
|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v
)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-
|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-
v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g
|nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))check =
true})(navigator.userAgent||navigator.vendor||window.opera);
Please don’t do UA sniffing
Please don’t do UA sniffing
Please avoid UA sniffing as much as
possible
Always do feature detection
(If isolating a bug) Sniff for specific browser versions
Assume unknown browsers are good
Interoperable intersection
TheMobileWeb
Interoperable intersection
TheMobileWeb
Prioritizing interop
Interop2
Interop1
Interop3
Interop0Worked in IE11
Used by real sites
Works in other
browsers
We anticipate
sites will require
this functionality
soon
Real site usage is
farther out or never
Font Resource Handling
Before loading font resources, IE and
Firefox check the font server’s CORS
header, and the font’s installable header
(as per W3C specification).
This is done to ensure that the font
usage rights are honored.
WebKit does not check CORS /
installable header.before after
Control Appearance Overrides
Apple added ways to restyle HTML controls on the
iPhone to match OS control look and feel.
Web developers add custom markup to disable
Apple’s styles and provide their own.
-webkit-appearance: none ← Most common value.
-webkit-appearance: button
-webkit-appearance: checkbox
-webkit-appearance: radio
etc..
before after
Control Appearance Overrides
Some sites restyle input controls using
-webkit-appearance: none for
critical functionality.
before after
Gradients
Apple originally added support for gradients to WebKit using a
Core Graphics friendly syntax.
During standardization the syntax was changed leaving WebKit
incompatible with the standard. Some sites continue to use the
original Apple syntax.
Proprietary Apple Markup (still in WebKit):
-webkit-gradient(linear, left top, right bottom, colorstop(0,
#FFFFFF), color-stop(1, #00A3EF));
Webkit-prefixed W3C Standard Gradient in WebKit:
-webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
Unprefixed W3C standard:
linear-gradient(to bottom right, FFFFFF 0%, #00A3EF 100%);
before after
innerHTML orphaned children
Interop patterns we’re working on
Bugs where we’re just plain wrong
Standards we’re missing
Unstandardized but interoperable APIs
“defacto” differences from standards
Bugs in other browsers
innerHTML orphaned children
Web audio, preserve-3d, RTC, CSP, responsive images
-webkit-appearance, <meta viewport>
<meta http-equiv="refresh" content="0;http://foo.com" />
body.scrollTop versus documentElement.scrollTop, DOM prototypes
To date, we’ve made
of these types of fixes in Edge.
Removing code (yay!)
VML
attachEvent()
VB Script
Conditional Comments
X-UA-Compatible
currentStyle
currentStyle
IE Layout Quirks
MS-prefixed Events
interface AesGcmEncryptResult
{
readonly ciphertext
constructor
readonly tag
}
interface ApplicationCache : EventTarget
{
function addEventListener
function dispatchEvent
function removeEventListener
}
interface Attr : Node
{
readonly boolean expando
}
interface AudioTrackList : EventTarget
{
addEventListener
dispatchEvent
removeEventListener
}
interface BookmarkCollection
Remembering
the IEisms that
have passed
Using data to design a platform
Insiders Program
3+ million users


33 trillion pages
44 billion sites
7 thousand APIs
bing
Web Crawler
Instrumentation
Microsoft Edge
Implementing XPath: crawler data in action
Implementing XPath: crawler data in action
Hypothesis:
Most XPath queries can be rewritten in CSS selectors
//element1/element2/element3
//element[@attribute="value"]
.//*[contains(concat(" ", @class, " "), " classname ")]
element1 > element2 > element3
element[attribute="value"]
*.classname
So we tried it
94%
So we tried it
97%
Using open source JavaScript to complete it
Selectors Engine
Wicked-Good-Xpath
code.google.com/p/wicked-good-xpath
C++
JS
97%
3%
Standards and our roadmap
Specifications
130
140
150
160
170
180
190
200
210
May June July Aug Sept Oct Nov Dec Jan Feb Mar April
Under Consideration In Development Preview Release
Planning in the open
What’s available in Microsoft Edge now
How we think about what’s beyond that
Real World Usage Data
Developer/Partner
Feedback
Standards Stability
Development Capacity
Join in and help us build a browser for you
uservoice.modern.ie
status.modern.ie
remote.modern.ie
insider.windows.com
@JacobRossi

More Related Content

KEY
HTML5 로 iPhone App 만들기
PPT
Flex vs. HTML5 for RIAS
PPT
Flex vs HTML5
PPTX
No more excuses left - Webinale 2015 Lunch keynote
PPTX
Personas enhances usability fewer clicks
PPTX
Push it to the Edge
PPTX
Os in-a-browser
PPT
Developing RIAs... 10 reasons to use Adobe Flex
HTML5 로 iPhone App 만들기
Flex vs. HTML5 for RIAS
Flex vs HTML5
No more excuses left - Webinale 2015 Lunch keynote
Personas enhances usability fewer clicks
Push it to the Edge
Os in-a-browser
Developing RIAs... 10 reasons to use Adobe Flex

Similar to SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow (20)

PDF
DevTeach Ottawa - Silverlight5 and HTML5
PPTX
Lenguajes y plataformas de desarrollo
PPT
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
PPTX
Front End Development | Introduction
PDF
Web Frameworks of the Future
PDF
Douglas - Real JavaScript
ODP
HTML5 - The Python Angle (PyCon Ireland 2010)
PDF
Flourish2011
PPT
Adobe® Flex™
PPT
What is Adobe Flex ?
PPTX
Apache Flex - Enterprise ready GUI framework
PPTX
Get your site microsoft edge ready
PPTX
Silverlight 3.0
PPT
Top 10 HTML5 frameworks for effective development in 2016
PPTX
Silverlight
PDF
Intel AppUp Day Bologna
PPT
Os Henrikson
PPT
Visual Studio 2008 & .Net 3.5
PDF
Html5 workshop part 1
PPTX
O futuro do .NET : O que eu preciso saber
DevTeach Ottawa - Silverlight5 and HTML5
Lenguajes y plataformas de desarrollo
European SharePoint Conference: Mobile Applications for SharePoint using HTML5
Front End Development | Introduction
Web Frameworks of the Future
Douglas - Real JavaScript
HTML5 - The Python Angle (PyCon Ireland 2010)
Flourish2011
Adobe® Flex™
What is Adobe Flex ?
Apache Flex - Enterprise ready GUI framework
Get your site microsoft edge ready
Silverlight 3.0
Top 10 HTML5 frameworks for effective development in 2016
Silverlight
Intel AppUp Day Bologna
Os Henrikson
Visual Studio 2008 & .Net 3.5
Html5 workshop part 1
O futuro do .NET : O que eu preciso saber
Ad

Recently uploaded (20)

PPTX
Agentic AI Use Case- Contract Lifecycle Management (CLM).pptx
PPTX
Introduction to Artificial Intelligence
PDF
Wondershare Filmora 15 Crack With Activation Key [2025
PPTX
L1 - Introduction to python Backend.pptx
PDF
EN-Survey-Report-SAP-LeanIX-EA-Insights-2025.pdf
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
PDF
Design an Analysis of Algorithms II-SECS-1021-03
PDF
top salesforce developer skills in 2025.pdf
PPTX
Transform Your Business with a Software ERP System
PDF
wealthsignaloriginal-com-DS-text-... (1).pdf
PDF
Odoo Companies in India – Driving Business Transformation.pdf
PDF
AI in Product Development-omnex systems
PPTX
ai tools demonstartion for schools and inter college
PDF
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
PPTX
Odoo POS Development Services by CandidRoot Solutions
PDF
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
PPTX
Essential Infomation Tech presentation.pptx
PDF
2025 Textile ERP Trends: SAP, Odoo & Oracle
PDF
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
PDF
Adobe Premiere Pro 2025 (v24.5.0.057) Crack free
Agentic AI Use Case- Contract Lifecycle Management (CLM).pptx
Introduction to Artificial Intelligence
Wondershare Filmora 15 Crack With Activation Key [2025
L1 - Introduction to python Backend.pptx
EN-Survey-Report-SAP-LeanIX-EA-Insights-2025.pdf
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
Design an Analysis of Algorithms II-SECS-1021-03
top salesforce developer skills in 2025.pdf
Transform Your Business with a Software ERP System
wealthsignaloriginal-com-DS-text-... (1).pdf
Odoo Companies in India – Driving Business Transformation.pdf
AI in Product Development-omnex systems
ai tools demonstartion for schools and inter college
Claude Code: Everyone is a 10x Developer - A Comprehensive AI-Powered CLI Tool
Odoo POS Development Services by CandidRoot Solutions
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
Essential Infomation Tech presentation.pptx
2025 Textile ERP Trends: SAP, Odoo & Oracle
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
Adobe Premiere Pro 2025 (v24.5.0.057) Crack free
Ad

SFHTML5 Meetup - Engineering Microsoft Edge for the web of today and tomorrow

  • 1. June 24, 2015 – SFHTML5 Microsoft Edge for the Web of Today and Tomorrow @JacobRossi Senior Program Manager Microsoft Edge platform team
  • 6. What makes us love the web?
  • 8. The web has unique strengths
  • 9. Playing to the web’s unique strengths Linkability Searchability Ephemerality Interoperability Openness An interconnected and indexed set of 33 trillion pages that run cross-platform and are publicly viewable.
  • 10. Write on the page and share it Search faster with Cortana Save it for later in your Reading List Run the x-browser code with EdgeHTML Plan for the future via our open roadmap Linkability Searchability Ephemerality Interoperability Openness
  • 11. Write on the page and share it Search faster with Cortana Save it for later in your Reading List Run the x-browser code with EdgeHTML Plan for the future via our open roadmap Linkability Searchability Ephemerality Interoperability Openness
  • 12. A fork from the past
  • 17. “The web should just work for everyone – users, developers, and businesses.”
  • 18. If standard defines an API behavior but all other browsers behave differently, is it a standard? Interoperability means the web “just works” if ($.client.profile().name === 'msie') { var IHateIE = { 'scrollTop': context.$textarea.scrollTop(), 'pos': context.$textarea.textSelection('getCaretPosition', {startAndEnd: true}) }; context.$textarea.data('IHateIE', IHateIE); } For some reason IE seems to be calculating that differently. You might have to put in a special rule for IE there. In Chrome, the error does not occur, the xml is appended successfully and the other methods after these two run as expected. In IE however, a hierarchyRequestError is thrown at the appendChild statement. no matter HOW I passed the ko object to the child window, something got lost. Horrible behavior, IE... Why does the following code throw an 'Unspecified error' (on the appendChild line) in IE11 which I click the button?
  • 19. Getting the right, modern content
  • 20. Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0 User-Agent Strings
  • 21. Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0 User-Agent Strings
  • 22. Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.93 Safari/537.36 Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
  • 24. The HTML5 Standard even does this!
  • 25. window.mobileCheck = function() { var check = false; (function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hi ptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|win dows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|- m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm- |cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|- d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g- mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |- |/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1- w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)- |on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1- 8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i- )|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(- |0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m- |m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|- v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  • 26. Please don’t do UA sniffing
  • 27. Please don’t do UA sniffing Please avoid UA sniffing as much as possible Always do feature detection (If isolating a bug) Sniff for specific browser versions Assume unknown browsers are good
  • 30. Prioritizing interop Interop2 Interop1 Interop3 Interop0Worked in IE11 Used by real sites Works in other browsers We anticipate sites will require this functionality soon Real site usage is farther out or never
  • 31. Font Resource Handling Before loading font resources, IE and Firefox check the font server’s CORS header, and the font’s installable header (as per W3C specification). This is done to ensure that the font usage rights are honored. WebKit does not check CORS / installable header.before after
  • 32. Control Appearance Overrides Apple added ways to restyle HTML controls on the iPhone to match OS control look and feel. Web developers add custom markup to disable Apple’s styles and provide their own. -webkit-appearance: none ← Most common value. -webkit-appearance: button -webkit-appearance: checkbox -webkit-appearance: radio etc.. before after
  • 33. Control Appearance Overrides Some sites restyle input controls using -webkit-appearance: none for critical functionality. before after
  • 34. Gradients Apple originally added support for gradients to WebKit using a Core Graphics friendly syntax. During standardization the syntax was changed leaving WebKit incompatible with the standard. Some sites continue to use the original Apple syntax. Proprietary Apple Markup (still in WebKit): -webkit-gradient(linear, left top, right bottom, colorstop(0, #FFFFFF), color-stop(1, #00A3EF)); Webkit-prefixed W3C Standard Gradient in WebKit: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%); Unprefixed W3C standard: linear-gradient(to bottom right, FFFFFF 0%, #00A3EF 100%); before after
  • 36. Interop patterns we’re working on Bugs where we’re just plain wrong Standards we’re missing Unstandardized but interoperable APIs “defacto” differences from standards Bugs in other browsers innerHTML orphaned children Web audio, preserve-3d, RTC, CSP, responsive images -webkit-appearance, <meta viewport> <meta http-equiv="refresh" content="0;http://foo.com" /> body.scrollTop versus documentElement.scrollTop, DOM prototypes
  • 37. To date, we’ve made of these types of fixes in Edge.
  • 38. Removing code (yay!) VML attachEvent() VB Script Conditional Comments X-UA-Compatible currentStyle currentStyle IE Layout Quirks MS-prefixed Events
  • 39. interface AesGcmEncryptResult { readonly ciphertext constructor readonly tag } interface ApplicationCache : EventTarget { function addEventListener function dispatchEvent function removeEventListener } interface Attr : Node { readonly boolean expando } interface AudioTrackList : EventTarget { addEventListener dispatchEvent removeEventListener } interface BookmarkCollection Remembering the IEisms that have passed
  • 40. Using data to design a platform
  • 42. 33 trillion pages 44 billion sites 7 thousand APIs bing Web Crawler Instrumentation Microsoft Edge
  • 43. Implementing XPath: crawler data in action
  • 44. Implementing XPath: crawler data in action
  • 45. Hypothesis: Most XPath queries can be rewritten in CSS selectors //element1/element2/element3 //element[@attribute="value"] .//*[contains(concat(" ", @class, " "), " classname ")] element1 > element2 > element3 element[attribute="value"] *.classname
  • 46. So we tried it 94%
  • 47. So we tried it 97%
  • 48. Using open source JavaScript to complete it Selectors Engine Wicked-Good-Xpath code.google.com/p/wicked-good-xpath C++ JS 97% 3%
  • 49. Standards and our roadmap
  • 51. 130 140 150 160 170 180 190 200 210 May June July Aug Sept Oct Nov Dec Jan Feb Mar April Under Consideration In Development Preview Release Planning in the open
  • 52. What’s available in Microsoft Edge now
  • 53. How we think about what’s beyond that Real World Usage Data Developer/Partner Feedback Standards Stability Development Capacity
  • 54. Join in and help us build a browser for you uservoice.modern.ie status.modern.ie remote.modern.ie insider.windows.com @JacobRossi

Editor's Notes

  • #7: Why do we want the web to win in this fight?
  • #14: TODO: add more splitting and animate between them
  • #24: Anyone remember Mozilla 5.0? It’s actually Netscape Navigator 6, from the year 2000
  • #26: Actual UA sniffing example
  • #31: We receive an amazing amount of data on site compatibility and I’ll talk more about that in a moment. To make sense of it all, we use a classification system to prioritize what we invest in to maximize its impact. At the top of this priority list is what we call “Interop 0”, these are sites that worked in IE11 but no longer work in Project Spartan. Sometimes this is because we goofed, but most often it’s because we’re now getting interoperable content and need to make a change to behave like other browsers. So beyond just ensuring a site continues to work, we’re also reducing the delta in behavior of our engine when compared with other engines. Next there is Interop 1 issues, these are ones that affect Project Spartan but also were broken in IE11. Often these are new standards that are being adopted by the web. So we implement them. Next we have Interop 2, these are things that are typically emerging in standards. They may or may not be supported by any browser at the moment. Generally, sites aren’t yet adopting these features quite yet but we anticipate they will in the near future. Finally there’s the Interop 3 bucket, these are things that are still in the idea or iteration stage or are supported but deprecated in other browsers with very low or 0 usage on the web. Some features in this bucket will eventually make it to Interop 2 once standards solidify and developer interest increases. Others are on their way out and may never get implemented in our engine.
  • #32: Feature 602898 http://www.w3.org/TR/css3-fonts/ CSS Fonts Module Level 3 W3C Candidate Recommendation 3 October 2013 4.9 Font fetching requirements For font loads, user agents must use the potentially CORS-enabled fetch method defined by the [HTML5] specification for URL's defined within @font-face rules. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document. The implications of this for authors are that fonts will typically not be loaded cross-origin unless authors specifically takes steps to permit cross-origin loads. Sites can explicitly allow cross-site loading of font data using the Access-Control-Allow-Origin HTTP header. For other schemes, no explicit mechanism to allow cross-origin loading, beyond what is permitted by the potentially CORS-enabled fetch method, is defined or required.
  • #39: It makes developers really happy to remove code. Like really happy. I tried to enumerate all the IEisms we’ve removed, but I just couldn’t.
  • #40: So I made a diff. Let’s take a second to review the non-interoperable IE’isms we’ve removed thus far.
  • #42: “So we’re done once each one of them browses 11 million pages”
  • #43: [Diagram for crawler + instrumentation] [Perhaps animate fade/in out series of stats] [Live demo Finder – “someone give me a popular DOM API”]
  • #51: Status tracks 193 standards or proposals – this doesn’t include the baseline stuff supported IE8+ The HTML5 spec alone is 693 pages when printed. Microsoft has 90 members in 58 different Working Groups (avg amongst top 5 browser makers is ~80) So you can imagine how easy it is for browsers to behave differently or for specs to have mistakes.