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:
- Plugins
- External JavaScript Libraries
- CSS prefixes
- Browser and feature detection
- Rendering modes (this article)
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!
Additional resources
- Check out the Microsoft Edge Developer Center for valuable resources and tools when working with the Microsoft Edge browser.
- An in-depth overview on how to scan your site using the site scanner.
- View our complete video on Channel 9: Riding the Modern Web: Five things to consider as a web developer
- Download Visual Studio Code for free for a great cross-platform coding experience for web developers. Also check out our webinar on how to get started with Visual Studio Code.
For an overview of the 5 things to consider when developing for the modern web, check out our 17-minute video.