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.
<input type="text" placeholder="Your name">
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.