Legacy Browser Compatibility for HTML5

As long as Internet Explorer will be around holding onto their share of the market in the world of legacy browsers, you’ll have to face the facts and develop your CSS to work around versions of Internet Explorer 7 and 8. We have had a ray of hope with the shunning of Internet Explorer 6 as it has now begun to join Netscape in the graveyard of browsers past.

I understand, getting Internet Explorer to comply can be infuriating at times. And I’ve had to take a stance against developing in Internet Explorer 6, as we all should, but there is help and I hope this article points you where you need to go. One of the first steps when putting the project together is figuring out what browsers you need to develop for. If you ask the client, 9 times out of 10 they’ll say “All the browsers!”. You’ll need to take a step back and examine who their target audience is. Are most of their users tech savvy and use modern browsers like chrome? OR will their users be accessing the site, often at work, behind some sort of firewall system, and forced to endure a browser like Internet Explorer 7 or 8 due to corporate security reasons?

Chrome, while great, at times can make us see our sites through rose colored glasses. It understands HTML5 tags, has little to no compliance issues, and makes everything right the first time. A lot like a warm development security blanket. Depending on how you built your site, particularly in this case dealing with WordPress, there is a good chance that everything will not be as kosher when you view it in Internet Explorer 7/8. That doesn’t mean you’ll have to toil day and night trying to sort out all of the compatibility issues, trust me I’ve been there and done that. Then there is that eureka moment where it all starts to come together.

I will admit it did take some honest feedback and a hard look at how my code was structured and a fair amount of research on a previous project to get it to even look half way decent in Internet Explorer. Instead of sweating the details over positioning and floats, IE likes elements that stack well together. In this case it was a background image in a featured area. I was trying to wrap everything under one .container class when I should have created 3 different stackable divs with a width of 100% and margins left and right to auto. That being said, if your audience will be viewing the site in IE 8 or 7 it might be a good idea to tackle building for those browsers first, then branching out into Firefox, Safari, and Chrome.

In this article, I will be showing you how to make your conditional statements, transparencies, and fonts renderings help make Internet Explorer 7/8 more compliant browsers. The use of conditional tags to target specific browser cannot be stressed enough in this article. Much like media queries, the conditional tags that can be found in your <head> section, execute certain variables once met with the condition of the statement. Let begin by structuring a tag:

So now you’re beginning to wonder “What can we honestly place inside these tags?” It’s not uncommon to link to external stylesheets that cater to that specific browser, inline CSS, or Javascript. One that everyone might be familiar with is setting classes with the html tag:

Now you can begin to format your CSS in the same sytlesheet, if you so choose, with the prefix class of: .ie7 #wrap { width: 80% }

All of you’re IE 7 specific styles should then apply themselves accordingly. If you keep running into issues and your website still looks like a hot mess more than the structured design you envisioned, you’ll need to make Internet Explorer recognize several of your linchpin elements in the code.

One snippet of Javascript I’ve found rather useful creates element names based on the HTML5 tags that you’ve used. That means you can still utilize the navs, headers, articles, and so forth. It’s nothing complex, so let’s take a look:

And almost like magic, your website begins to look consistent between various browsers. You can then begin to use positioning in your main CSS files with with the classes of .ie8 or .ie7 before the CSS property. Like so:

You should take a moment to toy around with the position and elements till you can get them close as possible if not perfect. As most of us have moved onto greener pastures with our browser choices, there are ways you can test your designs in Internet Explorer 7 or 8. IE Tester, is a good place to start. It is the closest testing environment I’ve used that mimics how the site will look and all of it’s quirks. There’s also the cloud based in browser application Browser Stack which allows you to test all of your browsers even mobile browsers. God help us if someone was evil enough to make IE7 for a windows phone.

HTML5 Shiv

HTML5 Shiv or ‘Shim’ targets browsers older than Internet Explorer 9 in the same regards as the above Javascript. Shiv allows older versions of Firefox, safari, and Internet Explorer to read HTML5 tags and you can style them through the CSS. The only major difference between using this and the code above is the method of implementation.

Transparency and PNG images

Both versions of Internet Explorer 7 and 8 have native support for transparency, but it often falls short of what you need. You can either face what is called the ‘black-halo’ when you set your opacity to 100%. Granted it can be removed when you remove the alpha properties, but what about gradients, etc.? This is where ‘filters’ play a role in our CSS. Let’s take a look:

In the above example we’ve set the background of our div class to transparent, then introduced a filter property. The 2 parameters outline our image source and the method we’re using to size it.

If we wanted to utilize a gradient inside of our div, we use a filter that is a not more complex than the Alpha Transparency. All your doing instead of calling the source and size in the filter, you are calling your starting bottom color #90B4B2 to your top ending color #D7EEED.

Quick Fix

If you need go back even further, there is hop in the form of the pngfix.js file from Bob Osloa. This JS file has been around a while as a response to the poor PNG rendering methods of Internet Explorer 6. I feel that the script itself still holds up today.

Font Rendering

In the several cases I’ve seen you can run into issues as well with ClearTypes. ClearType was introduced as a technology to improve the readability of text on LCD’s by Microsoft. Using ClearType with a background fill is best for that situation that way your fonts can appear as intended in the browsers.

It’s really a matter of choice. You can opt not to use ClearType, but those of you reading this that tend to be shall we say a bit “retentive” with the sites that you produce, such as myself, go for the ClearType with background fill option.

Hopefully if this article does not help you resolve the Internet Explorer compatibility issues your facing, I hope I could have at least provided you with a stepping stone. Using the methods and tools in this article can help save you hours or literally days of compatibility development time and a headache or two. Remember to keep your headache medicine close.

If you have any questions please leave them in the comments and I will respond to them promptly.

Josh is currently the Creative Director at Rappsody Studios located in Jacksonville, FL and has been working in across the web for close to eight years. He has a soft spot for front-end development and comics.
More articles by Joshua Rapp

robertoblake

I disagree with the premise of Designing around internet explorer 6-8 at this point. For one thing most of those older browsers are tied to either illegal versions of the Windows Operating System or soon to be unsupported versions as Windows 8 rolls live this month, Microsoft will be discontinuing support for anything below Windows 7.

That being the case most people’s valued viewer marketshare (people likely and able to purchase their products and services) will be using legitimate supported versions of Windows, which default to t he latest version of the browser IE9 soon IE10.

Additionally if your Google Analytics dictates majority of your traffic is not coming from older versions of IE, there is little to no point also.

While standards are good and if you’re using them you “shouldn’t” experience much of a difference in your website from browser to browser, I don’t subscribe to the idea of coding just for IE unless you are fairly large organization that knows it has a user base that will be on the older software.

Again this is just my opinion, and it comes down to your audience and the intent of your site. This article is good and well thought out and provides useful information. I just don’t agree with the premise of it.

I don’t believe in building something for a group that isn’t buying what I’m offering. It’s a philosophy actually shared by Apple, Google and obviously Microsoft.

Adam Taylor

People should avoid using the filter declaration too. It’s synchronous; every instance of a filter in your CSS will pause page rendering while it’s processed. I’ve seen IE6 take 8-10 seconds longer to display a page that had a pngfix implemented via a filter expression.

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.