Now With IE8 Support!
Posted on 2014-03-22
Notice anything different about this site? …well, hopefully not.
You see, I've added some fixes specifically for Internet Explorer 8. I hope that no one is still on this ancient browser, but I do feel it's nice to support it. People who are tied to an old IE version don't generally have the option of upgrading, even if they would like to.
Even with IE8's poor support for modern CSS and HTML, the fixes weren't difficult. IE 9 and up display the site fine, so I used conditional comments to target IE8 specifically.
First, I added a small javascript loop that creates HTML5 elements. Once these elements have been created with javascript, the rest of the elements found in the HTML will behave like real elements and can be styled with CSS. Here's the code I used:
var html5 = ['article','figure','figcaption','footer','header','nav','section'];
for(i=0;i<html5.length;i++) {
document.createElement(html5[i]);
}
The rest were CSS fixes for the navigation bar and floating issues. For some reason, the navigation bar on the top went completely bonkers on IE8. So I simplified it, removed the icons, and added some additional float properties to make things behave.
I technically could have fixed the icons on the nav bars… but chose not to. IE8 supports @font-face enough to make it work, but it doesn't natively support a lot of the other CSS properties used to make the icons, like border-radius and text-shadow. Besides that, there were lots of visual bugs with the icons that would take a lot of effort to fix, and the links function perfectly good without them.
I might be accused of hiding behind progressive enhancement, but I'm not going to knock myself out supporting frills on older browsers when the site is perfectly functional without them. Which is absolutely fine!
Tags: housekeeping css browsers html javascript