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

Question

As for disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm that the rendering page is OK if there is no support for certain properties there? I know that this is only a presentation layer, but I just hope that there is a more efficient way to test it without using old browsers, especially if Modernizr is used.

Answer 1

The project, called deCSS3 , allows you to disable the vast majority of CSS3 properties using a bookmarklet, which overrides and neutralizes their use using !important rules.

A final addition to the project is the Modernizr toggling class for an additional level of testing when using Modernizr.

Answer 2

Even if there was a way to do this, would it help? Each browser has its own quirks, so there is no guarantee that, for example:

 Firefox - CSS3 = Older Browser 

Answer 3

CSS3 is not a collection of CSS2 add-ons; it replaces CSS2. The CSS3 background and border module 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 can turn off new material, then Tom’s answer is correct - this won’t leave you checking for anything that really exists in the real world.

Answer 4

If you need a way to “disable CSS3,” then I don’t think you are thinking of / gradual improvement / graceful deterioration. You should start with things other than CSS3 and then improve your site. When you create a non-CSS3 framework and test it in your target browsers, adding CSS3 should not change anything (browsers ignore styles that they don’t recognize). If you choose CSS3 in your stylesheet, you can tell older versions of IE to completely ignore it (or, if you use stuff that is partially supported in IE9, you can say that all versions of IE ignore it) to save the download.

However, CSS is handled by the main rendering engine, so to view a page without CSS3 you need to view it in a browser that does not support CSS3. This sucks, it means that you need to have several browsers and even virtual machines (or physical machines) for testing very well, but, unfortunately, this is a state of web development. Theoretically, you should test in several browsers, one way or another, and already know that IE6-8 has its own features that are not even related to CSS3, and should already be configured to check them (so if you need to check old versions other browsers, you can install them in the IE testing environment).

Answer 5

There is a useful add-on for Firefox called "User Agent Switcher" that allows you to remove your browser rendering to an older version of IE (iPhone rendering is also very useful). This should help you double check.