Over the past year the Microsoft Edge team has been hard at work on a new browser engine that will be better than ever at correctly, quickly, and reliably rendering the Web. As a user, your favorite web sites will just work, and as a web developer, you will find that Microsoft Edge should just work like other browsers, making it easier than ever to create a site that works everywhere.
We’ve implemented over 45 new standards — more than we’ve ever done in one release. We also made thousands of large and small improvements to make Edge more interoperable with other browsers to ensure that you get a more seamless web development experience.
Aligning browsers, content and specifications
The Web is built on the principle of multiple independent, interoperable implementations of web standards, and we feel it is important do our part in moving the Web forward. True interoperability means that all web content, browsers, and specifications align on the same well-defined behavior.
As we’re evolving our engine to be more interoperable with Blink and WebKit, we’ve spent considerable time working with all browser vendors to fix interoperability issues in browsers and specifications.
As detailed before, we forked our old MSHTML (Trident) engine, which tried to balance both backwards compatibility and modern web interoperability, into a new ‘interoperability-first’ engine called Microsoft EdgeHTML. At the start of this journey, we had to make several changes:
An ever-growing pack of lies
One of the most impactful changes to improve Microsoft Edge was also the simplest – changing the user agent string that identifies the browser to web servers.
Even today, a large number of web servers still sniff the user agent string to give browsers different content. We fixed a huge number of issues by just changing the user agent string and getting more modern content that worked without any issues in our existing IE11 engine.
All user agents strings contain more information about other browsers than the actual browser you are using – not just tokens, but also ‘meaningful’ version numbers.
Internet Explorer 11’s UA string
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
Microsoft Edge UA string:
Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10136
The userAgent property has been aptly described as "an ever-growing pack of lies" by Patrick H. Lauke in W3C discussions. ("or rather, a balancing act of adding enough legacy keywords that won’t immediately have old UA-sniffing code falling over, while still trying to convey a little bit of actually useful and accurate information.")
We recommend that web developers avoid UA sniffing as much as possible; modern web platform features are nearly all detectable in easy ways. Over the past year, we’ve seen some UA-sniffing sites that have been updated to detect Microsoft Edge… only to provide it with a legacy IE11 code path. This is not the best approach, as Microsoft Edge matches ‘WebKit’ behaviors, not IE11 behaviors (any Edge-WebKit differences are bugs that we’re interested in fixing). In our experience Microsoft Edge runs best on the ‘WebKit’ code paths in these sites. Also, with the internet becoming available on a wider variety of devices, please assume unknown browsers are good – please don’t limit your site to working only on a small set of current known browsers. If you do this, your site will almost certainly break in the future.
Past problems
To further ensure that websites don’t detect our new engine as Internet Explorer, we also spent a lot of time removing legacy IE-isms (No more ActiveX!).
In an ideal world, web developers would write interoperable content that contains prefixed and unprefixed CSS – unfortunately, this is not the case. In 2014, we had to add support for WebKit-prefixed CSS to render a very large number of modern (mobile) sites, after which we observed an improvement on more than 40% of mobile web sites. Rendering a usable mobile Web now depends on your browser supporting WebKit CSS prefixes; an approach that even Firefox is using.
Accepting WebKit CSS is trickier than just parsing static CSS; we also need to list –webkit– properties first when they are enumerated, as a significant number of sites prepare prefixed CSS using the first vendor prefix they discover.
Preparing for the future
We care very much about web developers getting a consistent feature set across browsers – which is why we spent a lot of time adding the most-requested features like ES6 (highest score!), HTTP/2, responsive images, and Media Capture, as well as older features like XPath and Motion JPEG support. If you’d like to know what if coming up soon in our evergreen browser, see our new Platform Status and change log pages.
Data Data Data
Browser interoperability requires a never-ending series of features and bug fixes; to maximize the impact of our work, we need to use data to aid in prioritizing interoperability work. Our 3+ million Windows 10 Insider users have been sending us reports of site issues; this data has been invaluable in prioritizing fixes.
We also use data from the Bing web crawler to inform our decisions. The crawler sees 33 trillion pages, 44 billion sites, and usage of seven thousand APIs and it helps us see how web sites at large are built, and how our browser changes will impact the Web. Along with our ability to rapidly flight new versions of the browser, we are able to find and fix interoperability issues faster than ever before. A lot of web sites depend on JavaScript libraries and frameworks, so we also submit fixes to libraries to ensure that they work in all browsers.
Sometimes standards don’t describe actual web content
Interoperability is more than just fully implementing a specification to the letter. We’ve also seen numerous cases where the standard doesn’t actually describe what web developers do, and as a result we have to be more liberal in parsing and accepting content – even if it means deviating from the specification.
One simple example is malformed Meta-Refresh elements. Web servers often use meta refresh to redirect browsers to the mobile versions of their sites. Some mobile sites are sending malformed meta refresh tags (missing the "url"=token) which caused IE to enter an infinite loop of redirections.
‘Malformed’:
<meta http-equiv="refresh" content="0;http://foo.com" />
Correct:
<meta http-equiv="refresh" content="0;url=http://foo.com" />
The solution here was to parse and handle the ‘malformed’ markup — the Web eventually takes a dependency on the behavior of more permissive browsers.
We’ve also seen numerous cases where the specification is (perhaps) overly prescriptive in defining behavior. Sometimes standards are too pedantic; it is easy to see a web developer making a mistake:
For example, pages often use <meta charset="utf8"> to define the character set for a page. "utf-8" is the ‘technically correct’ description. This is an easy ‘mistake’ to make; there are nearly 600k results on GitHub alone in HTML files.
This caused pages to render incorrectly in IE11 – in this case, the pull quotes:
With Microsoft Edge, we are now more permissive in accepting the "utf8"value, resulting in the correct rendering:
As another example, the mobile Web depends on your browser downloading font resources without checking the CORS headers and ’embeddable’ flag (as per spec) — we’ve had to change to WebKit behavior in our mobile browsers to make the mobile Web work.
As we are making changes to be more liberal in accepting content, we are also working to ensure that the specifications match the behavior that web developers are used to.
Sometimes the Web relies on unstandardized behavior
Large parts of a modern web page rely on browser behavior that is not standardized, and web developers have to depend on browser behavior that is not clearly defined. In these cases, we are working to add and fix specifications to ensure that the behavior of web content in all browsers is reliably specified.
Sometimes the Web relies on browser bugs
We’ve seen numerous cases where web developers start to depend on incorrect behavior in one browser, leading to ugly hacks or UA-sniffing to patch the issue. A good example is the scrollTop bug — once (major) sites started to depend on non-interoperable behavior, it became impossible to fix the issue across all browsers without breaking web content. Sometimes the best path forward is to offer alternatives to broken APIs — Chrome, Opera and Microsoft Edge all now support the alternative document.scrollingElement property.
Another example is moving DOM properties to the prototype chain — a very fundamental change in how browsers work that only recently aligned in all browsers — which makes it much easier to reliably program DOM behavior in a web page.
Getting Microsoft Edge ready for the Web
These are just some examples of the thousands of large and small interoperability changes we’ve made to our browser engine. During development, Microsoft Edge has consistently been more interoperable with the broader Web than any previous Microsoft browser. We’ve endeavored to align with other browsers where it is the best thing for the Web, and we’ve worked with other vendors and the standards bodies to fix issues on their side. Our long-term hope is that web content, all browsers, and the specifications align to a single well-defined well-designed behavior.
Every browser vendor cares deeply about creating an interoperable Web. Evolving the Web without breaking it is exceedingly hard — any mistakes are very, very hard to clean up — but an interoperable Web that just works across all browsers and devices is closer than ever. If you see examples where Microsoft Edge is not behaving interoperably with other modern browsers, please let us know @MSEdgeDev on Twitter or by filing a bug on Connect.
More hands-on with Web Development
This article is part of the web development series from Microsoft tech evangelists on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.
We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.modern.IE:
In-depth tech learning on Microsoft Edge and the Web Platform from our engineers and evangelists:
More free cross-platform tools & resources for the Web Platform:
