Upgrade Warning for Internet Explorer 10 and Below




I recently had a request to display a warning message to Internet Explorer users who use IE 10 or less. There are many WordPress plugins and other suggestions, but they all pretty much apply to Internet Explorer 8 and below. I tried jReject, but there seems to be a compatibility issue with IE 8 and below since support for those browsers were removed in the latest jQuery versions.

Because Internet Explorer 10 is mostly compatible with modern CSS and HTML, a lot of people may not care to display a warning upgrade message to these users. That may be why it was difficult to find a guide to target IE10 and lower. Most guides target Internet Explorer users 8 and below.

Web-Browsers-Internet-Explorer-10-Metro-iconI decided to piece together 2 methods to cover Internet Explorer 9 and below and then a specific message for Internet Explorer 10. Microsoft dropped conditional comments (ex: using “<!–[if lte IE 9]>” means “if less than or equal to IE 9, run this code”) with Internet Explorer 10. However, you can use a few methods like feature detection (preferred) or browser detection. I chose to go with browser detection for IE 10 as it would cover most users.

You can use the code below to display a simple message for Internet Explorer users on IE10 or less. You can modify the warning message to whatever you need. This isn’t probably the most efficient way to do this, but its simple and works well. I placed it just after the opening <body> tag.


<!-- START Display Upgrade Message for IE 10 or Less -->
<!-- [if lte IE 9]>
<div style="background: #000; text-align: center; position: absolute; top: 0px; width: 100%; color: #FFF;">This website may not be compatible with your outdated Internet Explorer version. <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" target="_blank" style="color: #fff; text-decoration: underline;">Please upgrade here.</a></div>
<![endif]-->
<script>
// IF THE BROWSER IS INTERNET EXPLORER 10
if (navigator.appVersion.indexOf("MSIE 10") !== -1)
{
document.write('
<div style="background: #000; text-align: center; position: absolute; top: 0px; width: 100%; color: #FFF;">This website may not be compatible with your outdated Internet Explorer version. <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" target="_blank" style="color: #fff; text-decoration: underline;">Please upgrade here.</a></div>
');
}
// ]]></script>
<!-- END Display Upgrade Message for IE 10 or Less -->

, , , , , , , , , , , ,