I have a mobile website that is styled with extensive use of CSS3 Media Queries.
I want to do a version for browsers that don't support Media Queries by adding an extra css file for them, that overwrites some of the css rules.
I was wondering if there is a way to disable Media Queries support in Firefox (21.0) to be able to develop, since I don't have anything else to test with.
A Chrome solution would also work out, although I prefer using firebug.
Problem courtesy of: Mecca
You could always try testing in IE 8.
Media queries is something you define in your CSS, if a browser does not understand media queries, it has no support for it, it will not execute the CSS that makes the site responsive.
As a result you will have a not responsive site in a browsers that not supports media queries, thats the whole point of media queries.
There is no option in any browser to disable media queries.
If you want to test your site without the media queries kicking in, comment out the rules in your CSS. With this approach you can continue testing in Firefox, without having the need to test in Internet explorer 8
Discussion courtesy of: Mark
You have it backwards. Media Queries and corresponding rules are implicitly ignored by browsers which do not support them. The common/basic rules must therefore come before the specialized ones, not vice-versa.
You should always test in the target environments. If that is not an option, you can put the media-specific rules in a separate stylesheet and disable that stylesheet, for example with HTML comments or the Web Developer extension (apparently this feature of the extension is not available in Chromium/Chrome, but you can disable "Handheld Styles"). Equally with Web Developer and Chrome Dev Tools you can test media-specific stylesheets as if you were using the corresponding viewports. But do not rely on that; there is more to it than just viewport size.
This recipe can be found in it's original form on Stack Over Flow.