HTML5 and CSS3 are very powerful, helpful tools. HTML5 gives us more useful elements to define our content while CSS3 helps us make it look great. As usual however, Internet Explorer has a hard time with these newer techniques. Rather than changing your design to fit the browser, let’s take a look at some solutions that will coax IE to play fair.

The first thing I’m going to point you to is caniuse.com. This website shows compatibility tables for HTML5 and CSS3 for several different browsers. It even includes a handy statistic showing what percentage of users will have a browser compatible with that element/css effect. This is a great resource if you would rather not use workarounds but still want to ensure your design will look good on any browser using fallbacks.

HTML5 Elements in IE6-8

While the spec isn’t completely finished and won’t be for some time, I think it’s a good idea to start using HTML5 as much as possible. It has many new features and is a great improvement over previous html specifications. That being said, IE8 and below will not render HTML5 elements.

The solution is HTML5Shiv. HTML5Shiv is a JavaScript that adds HTML5 element support to IE8 and below. This is pretty much essential for any HTML5 site that needs to work on IE. The downside however is that it is extra overhead and if the user has JavaScript disabled, it can’t do it’s job.

CSS3 Pseudo-classes & Attribute Selectors

Pseudo-classes and attribute selectors allow for more precise, fine-grained selection of html elements in your css. This is very handy in cases where applying extra classes to elements is either not possible or inconvenient. For example, rather than adding a “last” class to an element in a list, you can use the “:last-child” pseudo-class.

The handy script Selectivizr adds support for pseudo-classes and attribute selectors in IE6-8. Again, as with most of the IE solutions, the downside is the extra overhead and the reliance on JavaScript. It would be a good idea to have a fallback css file for when JavaScript is disabled.

CSS3 Effects

The new CSS3 effects are great tools for making your site look great. Where before you needed extra <div>’s and a bunch of images to create rounded corners, drop shadows, and text effects, you can now use a couple of lines of CSS.

While IE9 has added a lot of support for these new features, some are still missing and IE8 and below don’t have them at all. A solution for the problem comes in the form of CSS3 Pie. CSS3 Pie uses a .htc file along with a JavaScript file to force IE to render your pages the way you want them. Again, there is a lot of overhead when using this solution so use it only when needed. There is also a problem that some servers wont serve the .htc file with the correct header. Luckily, if you don’t have access to change the proper settings on your server, CSS3 Pie comes bundled with a php wrapper script that will serve it up properly for you.

With the above solutions, there are no more excuses to not be using the newest web techniques. HTML5 can make our lives as developers much easier and enjoyable. Just remember that all of these solutions come at the price of extra overhead. Make sure to use conditionals so that they are only loaded when needed and always have a backup solution for when these fail.