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:
: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!
- Yup, got it!
- I’ve got something similar, will that do?
- Use modern CSS rules
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