Compatibility changes in IE11
With Internet Explorer 11, you get better compatibility with web standards, other browsers, and real-world websites. There's updated support for popular web standards and changes that prevent older websites from displaying incorrectly.
These changes include:
- User-agent string changes
- Document mode changes
- Legacy API additions, changes, and removals
- URL character encoding
- Custom data attributes
- HTML support for the SVG "pointer-events" property
- Updates reflecting changes to standards-based specifications
- Flexible box ("Flexbox") layout updates
- Mutation Observers
- Pointer Events
User-agent string changes
For many legacy websites, some of the most visible updates for IE11 involve the user-agent string. Here's what's reported for IE11 on Windows 8.1:
Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
The specific values of the user-agent string vary according to a number of factors, such as the operating system running the browser, the device running the browser, and whether the website is displayed in compatibility view. For more info, User-agent string changes.
As with previous versions of Internet Explorer, portions of user-agent string vary according to the environment. Here's the string for IE11 on Windows 7:
Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko
If you compare these strings to the ones reported by earlier versions of Internet Explorer, you'll find the following changes:
- The compatible ("compatible") and browser ("MSIE") tokens have been removed.
- The "like Gecko" token has been added (for consistency with other browsers).
- The version of the browser is now reported by a new revision ("rv") token.
These changes help prevent IE11 from being (incorrectly) identified as an earlier version.
In general, you should avoid detecting specific browsers or browser versions. The assumptions underlying such tests tend to lead to false positive results when browsers are updated. Instead, detect features as you need them and use progressive enhancement to provide simplified experiences for browsers or devices that do not support the features you need.
In rare cases, it may be necessary to uniquely identify IE11. Use the Trident token to do so.
Document mode changes
Windows Internet Explorer 8 introduced document modes to help you transition from features supported by earlier versions of the browser to those specified by modern standards and other browsers. Subsequent releases of Windows Internet Explorer continued this transition by introducing new document modes that emulated features supported by earlier versions while introducing support for features defined by industry standards.
While many web sites were updated to provide richer experiences to other browsers, some continued to use the presence of legacy feature support to provide legacy experiences to Internet Explorer, even though recent versions of the browser supported the experiences presented to other browsers.
Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.
Use the HTML5 document type declaration to enable edge mode:
Edge mode was introduced in Internet Explorer 8 and has been available in each subsequent release. Note that the features supported by edge mode are limited to those supported by the specific version of the browser rendering the content.
Starting with IE11, document modes are deprecated and should no longer be used, except on a temporary basis. Make sure to update sites that rely on legacy features and document modes to reflect modern standards.
If you must target a specific document mode so that your site functions while you rework it to support modern standards and features, be aware that you're using a transitional feature, one that may not be available in future versions.
Legacy API additions, changes, and removals
Many websites look for browsers that support legacy (HTML4) features in order serve experiences optimized for earlier browsers. This can be a problem for browsers that support legacy features and modern standards, such as HTML5, CSS3, and so on. If a site detects legacy features before searching for modern standard support, it can serve legacy experiences to browsers that support modern standards and richer experiences.
As a result, IE11 adds, changes, and removes a number of legacy features by default:
- The navigator.appName property now returns "Netscape" to reflect the HTML5 standard and to match behavior of other browsers.
- The navigator.product property now returns "Gecko" in order to reflect the HTML5 standard and to match behavior of other browsers.
- The XDomainRequest object is replaced by CORS for XMLHttpRequest.
- Supported for __proto__ has been added.
- The dataset property has been added.
In addition, several legacy API features have been removed in favor of features specified by modern standards:
|Removed API feature||Replacement feature|
|document.fileSize, img.fileSize||Use XMLHttpRequest to fetch the source|
|script.onreadystatechange and script.readyState||script.onload|
|window.createPopup||Use div or iframe with a high zIndex value|
|Binary behaviors||Varies; use a standards-based equivalent, such as canvas, SVG, or CSS3 Animations|
|Legacy data binding||Use data binding from a framework, such as WinJS|
These changes help, in part, prevent poorly written user-agent detection mechanisms from (incorrectly) identifying Internet Explorer as an earlier version. As a result, sites that rely on modern standards display as intended.
URL character encoding
IE11 changes the character encoding for URLs. Specifically, query strings and XHR requests are now encoded using UTF-8 character encoding.
This change affects all URLs except for:
- anchor name components (also called fragments).
- username and password components.
- file:// or ftp:// protocol links.
These changes match the behavior of other browsers and simplifies cross-browser XHR code.
Custom data attributes
IE11 adds support for HTML5 custom data attributes and the dataset property, which provides programmatic access to them. You can assign data attributes to elements using a data- prefix followed by the attribute name:
<div data-example-data="Some data here"></div>
To get or set the value of the data attribute, use this syntax:
// to get var myData = element.dataset.exampleData; // to set element.dataset.exampleData = "something new";
HTML support for the SVG "pointer-events" property
Starting with IE11, pointer-events is also supported as a CSS property on HTML elements, with the following effect:
The element does not fire pointer input events (it is not hit-testable).
Any other valid pointer-events value
The element fires pointer input events.
The pointer-events property is inherited by default, so it affects all descendants of the element of to which its applied.
Updates reflecting changes to standards-based specifications
IE11 also includes updates to support standard-based web specifications that have been updated or continued to evolve. These include changes related to support the following features:
Flexible box ("Flexbox") layout updates
With IE11, you can update your sites to match the latest flexbox standard and simplify cross-browser code.
For more info, see "Flexible box ("Flexbox") layout updates".
Mutation Observers are a new standardized web platform feature in IE11 that offers a fast-performing direct-replacement for all the same scenarios supported by mutation events, and an alternative to the scenarios supported by property change events.
See "Mutation Observers" and "Migrating mutation and property change events to Mutation Observers" for more details.
To comply with the Candidate Recommendation of the World Wide Web Consortium (W3C) Pointer Events specification, the IE11 implementation has changed slightly from that of Internet Explorer 10.
For the complete details, see "Pointer Events updates".