Ever since the introduction of HTML5, the compliance for modern web standards have continuously been a debacle when dealing with older browsers, particularly with Internet Explorer. While IE9 and newer has had considerable support for modern web standards, older versions of IE have just been a pain to design around.
With the new HTML5 tags available to use, web designers and developers alike, have had trouble dealing with older browsers recognizing these new tags.
In this tutorial, I’ll show you a very useful script that will enable older versions of IE (particularly IE7 and IE8) to support newer HTML tags.
New HTML5 Tags
There are several HTML5 tags that are being consistently used on most websites today. Here are a few that are commonly used which add semantic meaning when designing/creating the HTML structure of a website:
header nav menu section article aside footer
Unfortunately, IE7 and IE8 (No one care’s about IE6 anymore) don’t quite understand or recognize these new elements. However, we can create a very small, and easy to use script to target older versions of IE to recognize and support these new tags.
JavaScript
Here’s an easy script that you can add to the top of your page. My suggestion is to put it in the head portion of your page.
[HTML]
[/HTML]
What this script does, is allow IE7/8 to create a DOM element of those specific HTML5 tags (They won’t actually show up on the page, but just created as placeholders), so that older versions of IE can recognize those elements. You can add or subtract any elements from the list if you decide to use less/more.
You’ll also notice that we are using conditional comments so that only versions of Internet Explorer that are less than IE9 will only run that script.
CSS
As default, these HTML5 tags have display: block; applied to them. With these new recognized tags, iE7 and IE8 unfortunately won’t know the default display value for them. In order for IE7 and IE8 to recognize that, we must specify them directly like so:
[CSS]
header,nav,menu,section,article,aside,footer {
display: block;
}
[/CSS]
This will allow those elements to be properly displayed for those browsers.
Conclusion
While most modern browsers are becoming more and more compliant with web standards, we, as designers and developers, still need to support older browsers that still have a significant stake on the browser market. Unfortunately, it may be several more years until these older browsers become less relevant and no longer supported. Until then, we have to find ways to support them.
Let me know in the comments below if you found this useful or if you’ve used this on your projects or websites.
