Riding the Modern Web: Render Mode-less

Internet Explorer 8 introduced the idea of document modes as a way to transition websites from proprietary features to features based on standards and supported by multiple browsers and devices.

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 websites were updated to provide richer experiences based on modern features, some sites used earlier document modes in order to continue serve experiences based on older practices.  In order to ensure users receive the best experience possible, earlier document modes will not be supported in Microsoft Edge. Websites based on legacy techniques should be updated to rely on features defined by modern standards and practices.

This blogpost is the fifth in a series about Modern Web development. We’ll be covering the following topics:

Specifying legacy document modes

Using the <!DOCTYPE> tag you can define the document type of a webpage, which determines how the page is displayed to the end-user.

One way to specify the document mode and restrict the webpage to use a document mode supported by an older version of Internet Explorer, is to use the x-ua-compatible heder. An example of this is shown below.

<html>
<head>
  <!-- Use Internet Explorer 9 Standards mode -->
  <meta http-equiv="x-ua-compatible" content="IE=9">
  <title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html> 

More information about legacy document modes can be found on MSDN.

Using HTML5 document mode

Because all supported versions of Internet Explorer (including Microsoft Internet Explorer 6) interpret the HTML5 document type as a standards mode document type, we recommend using the HTML5 document type for all webpages that don’t require a different declaration. This ensures that your webpages are display in the highest available standards mode.

To specify that your webpage uses the HTML5 document mode, use the following syntax:

<!DOCTYPE html>

Conclusion

Legacy document modes are really something from the past and you should use HTML5 document mode in all your webpages. This will allow your web content to be available across devices and browsers.

Check your website now for compatibility with the Modern Web!
8

Additional resources

For an overview of the 5 things to consider when developing for the modern web, check out our 17-minute video.