turn off all css3

Question

I'm using a lot of CSS3 and I want to have 2 css versions: one with all the css3 and one without. I know I could simply remove the declarations but I'm wondering if there's another way to disable them. Specifically, I want to disable text-shadow, box-shadow and border-radius.

Thanks.

Answer 1

You can use a bookmarklet called deCSS3

It toggles off all your css3 features (okay not "all", a whitelist of supported CSS3 features is documented here . If you like, you can also toggle CSS3 back on.

As a bonus: if you're using Modernizr, it flips off those values as well, so your .no-boxshadow classes get picked up.

To people wondering why you'd want to do this.. this workflow is very nice so you can develop totally in Chrome, but quickly look at what your lo-fi version (that you'll serve to IE7, IE8) will look like.

Here's a before and after with using deCSS3:

Answer 2

You can't disable them, all you can do is override the styles using CSS:

body * {
   text-shadow:none;
   ...etc...
}

(Hey, I never said it's a good idea to do this, but it will work)

Edit: This answer got me on the right track; thanks. Here's the solution:

create a class called NoCSS3 defined like this:

.NoCSS3 * {
    text-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0px !important;}

And then in javascript, you add this line:

$('body').addClass('NoCSS3');

And you're done!

Answer 3

You can also look into CSS modernizer feature offered by HeadJS .

Can be used for many other features as well.

Answer 4

Did you try to have a look at modernizr ? This is a javascript library for detecting what is available on the client side, and behaving accordingly. Looks like what you are looking for. You can find a good introduction to it here