CODEWITHSUNDEEP
javascriptcss
frenchie
frenchie

Reputation: 51947

turn off all css3

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.

Upvotes: 0

Views: 240

Answers (4)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114377

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!

Upvotes: 2

Paul Irish
Paul Irish

Reputation: 49142

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:

Upvotes: 6

Asif
Asif

Reputation: 5038

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

Can be used for many other features as well.

Upvotes: 1

ClemKeirua
ClemKeirua

Reputation: 504

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

Upvotes: 0

Related Questions