Michael Gunner

Michael Gunner

© 2014 Michael Gunner. All rights reserved.

Using Polyfills to replicate HTML5/CSS3 features in old browsers.

One of the most common excuses I hear from people for not using the latest CSS3/HTML5 features is that they’re not widely supported enough. The most problematic browser is IE8, with most developers having dropped support for IE6 and IE7. If you haven’t already done this, then unless you have clear evidence to the contrary suggesting you should, then by all means do. IE6/7 account for no more than 2/3% of total browser traffic. Even in China, where IE6 has held on, it has dropped 50% in the last year and is now at around the 20% mark and dropping rapidly.

The fact is however, you can use HTML5 and CSS3 features and still support IE8. How? Simple – polyfills. Polyfills are small scripts that replicate HTML5 and CSS3 features. You’re probably already thinking however, that you don’t want to load a ton of extra Javascript, just to get placeholders (for example) to work in IE8.

This is where Modernizr comes in handy. Modernizr detects support for features, and when no support is found, loads the scripts that enable it. This means your polyfills only load for browsers that need them. Let’s stick with the placeholder example. Placeholders allow you to make forms appear much neater, clearer, and easier to use. It’s a feature most of us have been using already for years, using Javascript. HTML5 allows us to replace the need for scripts by simply doing this:

However, being a HTML5 feature, IE8 ignores the placeholder, so you end up with blank inputs. You could use conditional rules in your stylesheets to show a label for IE8 users – but why compromise? If you can make your website look identical for all users, you should. So, we use a polyfill.

Once you’ve uploaded the JS and CSS file to your theme, you then need to add a Modernizr snippet:

You’ll need to make sure the URLs are complete. Modernizr will now test for placeholder support, and when undetected, load the polyfill. The polyfill will then run through your HTML, find your placeholders, and display them.

It doesn’t stop at placeholders. There are polyfills for most HTML5 and CSS3 features, and you can find a list here. You may be thinking that having to load Modernizr is just loading more Javascript and slowing down your site, but the reality is it shouldn’t affect anything and you can always load it off a CDN if you’re concerned about loading times. The great thing about this is is removes any excuse to not be using HTML5 and CSS3 now.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">