Using JavaScript to detect CSS Support

Have you ever had a client that explicitly asked for rounded corners and drop shadows on their design? It’s a royal pain in the … well, it’s a royal pain. Every modern piece of CSS you want to use: box-shadow, box-radius, :nth-child(even), all blown to hell because you know your client will be checking in IE. You know that you’ll have to do it because a job’s a job but you really want to use those things for a large number of reasons (including, but not limited to: pride, saving bandwidth, page speed, mobile support). It’s times like that you need a survival strategy and, since I’ve just had one of those clients, let me show you mine.

Does anyone remember the post I made way back in July called Fixing CSS with jQuery? In it I offered a link to a function that could check whether a browser understands any given CSS selector. It was based on a function by Lea Verou that I managed to get working in IE. Recently, Lea released a series of tests to show how well your browser supports CSS3. It didn’t work in IE8 and Lea said that no-one uses IE8 for it’s CSS3 support. A valid point to be sure, but the scripts she created have a huge potential: they allow us to ask a browser whether it understands a simple CSS rule, or even property/value combination. After a little IE-loving, it’s possible to take her scripts and turn them into a series of CSS support-checking functions: behold my fiddle!

Using JavaScript to plug the holes in a browser’s CSS ability is my new favourite tactic. It allows me to use all the CSS3 toys that I want, then turn to the browser and say “did you get that?” The browser will say one of three things:

  1. Yup, got it!
  2. I’ve got something similar, will that do?
  3. Derp!

On derp, I can use JavaScript to add the extra elements and classes that can render rounded corners or drop shadows (having cut out all the images first) and give the client the rounded corners they crave so very badly. This adds an extra layer to the standard progressive enhancement process of “use modern CSS rules, convince client that rounded corners won’t appear in their outdated browser.” The process is now:

  1. Use modern CSS rules
  2. Try to fake it with JavaScript
  3. Convince client that enabling JavaScript in their outdated browser won’t mean their credit card numbers are instantly stolen

You could even re-phase that third step to “there’s no better security measure than keeping your browser up to date.” Their modern browser reads the CSS3 rules and our JavaScript isn’t even needed.

This completely opens up a process I’ve wanted to do for years: making my mockups in markup.

Edit 27-20-2012: updated fiddle with a debugged version

Leave a Reply

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