Share via

Compatibility changes in IE11

  • Article

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:

<!doctype html>

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.

If you currently use the x-ua-compatible header to target a legacy document mode, it's possible your site won't reflect the best experience available with IE11. For more info, see modern.ie.

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:

In addition, several legacy API features have been removed in favor of features specified by modern standards:

Removed API feature Replacement feature
attachEvent addEventListener
window.execScript eval
window.doScroll window.scrollLeft, window.scrollTop
document.all document.getElementById
document.fileSize, img.fileSize Use XMLHttpRequest to fetch the source
script.onreadystatechange and script.readyState script.onload
document.selection window.getSelection
document.createStyleSheet document.createElement("style")
style.styleSheet style.sheet
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:

Value Description

none

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

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.

Pointer Events

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".