CODEWITHSUNDEEP
cssmodernizr
Marcel
Marcel

Reputation: 28087

Is there a way to disable CSS3 support in Firefox or Chrome?

Similar to disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm a page is rendering OK if support for certain properties isn't there? I know it's only a presentation layer, but I'm just hoping there's a more efficient way to test against this without using old browsers, especially if Modernizr is being utilised.

Upvotes: 4

Views: 3839

Answers (5)

Marcel
Marcel

Reputation: 28087

A project called deCSS3 manages to disable a large majority of CSS3 properties through the use of a bookmarklet that overrides and neutralises their usage with !important rules.

A recent addition to the project is "Modernizr class toggling" for an added level of testing when Modernizr is utilised.

Upvotes: 4

Shauna
Shauna

Reputation: 9596

If you need a way to "turn off CSS3" then I don't think you're thinking about/implementing progressive enhancement/graceful degradation properly. You should be starting with non-CSS3 stuff, then enhancing your site with it. When you build the non-CSS3 foundation and test it in your target browsers, then adding CSS3 shouldn't change anything (browsers ignore styles they don't recognize). If you sandbox your CSS3 in its own stylesheet, then you can tell old versions of IE to completely ignore it (or, if you're using stuff that's only partially supported in IE9, can tell all versions of IE to ignore it) to save a download.

That said, CSS is handled by the core rendering engine, so in order to view a page without CSS3, you have to view it in a browser that doesn't support CSS3. It sucks, it means you have to have several browsers, and even virtual machines (or physical machines) to test very well, but such is the state of web development, unfortunately. Theoretically, you should be testing in several browsers, anyway, and already know that IE6-8 have their own quirks that don't even relate to CSS3, and should already be set up to test them (so, therefore, if you need to test old versions of other browsers, you can install them in your IE test environment).

Upvotes: 1

robertc
robertc

Reputation: 75707

CSS3 isn't a set of additions to CSS2, it replaces CSS2. The backgrounds and borders module in CSS3 includes border and background as well as border-radius and box-shadow. If you 'turn off' CSS3 you turn off all CSS, and even if you could disable the new stuff Tom's answer is correct - that wouldn't leave you testing anything that actually exists in the real world.

Upvotes: 1

HaeckDesign
HaeckDesign

Reputation: 29

There's a useful add-on for Firefox called "User Agent Switcher" which allows you to bump your browser rendering down to an older version of IE (the iPhone rendering is also pretty useful). That should help you double check.

Upvotes: -4

Tom Shaw
Tom Shaw

Reputation: 660

Even if there were a way to do so, would it help? Each browser has its own quirks, so there is no guarantee that e.g.:

Firefox - CSS3 = Older Browser

Upvotes: 3

Related Questions