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.
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
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.
Related
I assume that, just like the media queries that are used in link tags, the media queries which we define in our CSS files are parsed/overwritten or omitted by the browser according to their media query rules (Actually I know that, although the CSS files requested by the link tags with unmatched media are anyway downloaded, they are not render blocking the browser).
So, from the CSSOM build optimization stand point, isn't it better to separate the generic CSS rules that applies to all screen devices from the mobile specific CSS rules and encapsulate the mobile specific rules in a max-width media query? So that browser will parse less CSS to build CSSOM without the need of overwriting them for tablet, desktop etc. I wonder if that would affect the building of CSSOM performance or is it just overkill?
<link> tags with unmatched media queries are download with low priority so that they don't block page rendering, but are still downloaded in order to be available in case media properties change (for example by rotating a smartphone or by zooming out a desktop browser). There is an advantage in having separate stylesheets for different media types, but there is also a disadvantage in creating multiple HTTP requests.
Media blocks inside a stylesheet are already downloaded and I would assume that they are compiled anyway, so it's not really the same as a media query in the tag. But if a certain set of rules is only relevant to a certain width and is always overriden in wider screens, it makes sense to tell the browser that by encapsulating it inside a media query. It's not just about the original page rendering but about any change to the window or to the DOM that requires a redraw - the less rules the browser would need to evaluate, the faster it would be.
I encountered this question while browsing the Q&A section of an online course on advanced responsive design. I found an answer for it, shared it, and decided to post it here as well in case anyone else might have the same dillema.
The dillema is that it could be a lot easier for ensuring browser compatibility if we could define a different style for certain browsers that behave differently from most, e.g. Internet Explorer and, in the case of my website at least, Safari.
So how do we go about doing that? Check out my answer below to find out, and feel free to contribute if you think you know a better way to target specific browsers for specific media queries unique to them.
Using caniuse (https://caniuse.com/), look for a specific property that is only supported by the specific browser you want to target. Then, using the #support query, target that browser with the property you've found is unique to it. Then, whatever styling you apply within that query will only apply to the browser(s) that support(s) the property by which you defined the query.
That is, the properties inside the brackets of a #support query are used to define when - for which browsers - the styling inside the curly braces will apply; they do not need to be the same, that is, you do not need to use the same property styled within the curly braces to define the query in the brackets, so you can choose any property that targets the specific browser(s) you want to display the styling for.
Update:
I found this site that seems to provide the solution to targeting specific browsers and browser versions in the caniuse style, sparing you the need to test each property by hand:
http://browserhacks.com/
This article offers a briefing on how to use it:
https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
Update:
For Internet Explorer only, older versions only, you can create a separate stylesheet to load for them using conditional comments in your HTML. This can be a copy of your general stylesheet, tweaked to work on old IE versions, but loaded only if those versions are detected, therefore not interfering with display on other browsers. They are not, unfortunately, usable for other browsers. This article explains how to use conditional statements.
https://www.quirksmode.org/css/condcom.html
Update:
The most effective solution to this problem seems to me to be to implement some javascript that detects the browser version and then applies specific styles or even modifies the DOM based on the browser(s) you target.
This explains the principle and some applications nicely:
Is there any equivalent to IE conditional comment for chrome and safari?
This, if rather old, is still a very useful such application:
http://rafael.adm.br/css_browser_selector/
And that's it! The ability to ensure browser compatibility with most any browser!
Using SASS and Respond-To (Breakpoint) produces a .css file with multiple media queries, not merged.
Not a big deal, but in IE8, using css3-mediaqueries.js, cause IE8 crash. css3-mediaqueries.js add a style tag for every mediaqueries, and IE8 can't get up to 32...
How can I merge all the media queries automatically?
Thanks
Sass does not have this functionality. Either plan your media queries better so that you only have a few as possible or find a 3rd party application that will merge them for you.
Generally, multiple media queries is not a big deal thanks to GZIP being used to compress CSS when passed from server to client.
To enable media queries support in IE7 and 8, i've been succesfully using Respond.js.
See this small guide how to combine Respond.js with Selectivizr: https://stackoverflow.com/a/16732064/901944
Using SASS and Respond-To (Breakpoint) produces a .css file with multiple media queries, not merged.
Not a big deal, but in IE8, using css3-mediaqueries.js, cause IE8 crash. css3-mediaqueries.js add a style tag for every mediaqueries, and IE8 can't get up to 32...
How can I merge all the media queries automatically?
Thanks
Sass does not have this functionality. Either plan your media queries better so that you only have a few as possible or find a 3rd party application that will merge them for you.
Generally, multiple media queries is not a big deal thanks to GZIP being used to compress CSS when passed from server to client.
To enable media queries support in IE7 and 8, i've been succesfully using Respond.js.
See this small guide how to combine Respond.js with Selectivizr: https://stackoverflow.com/a/16732064/901944
So, well, we have an XPage application which works very well on all the browsers including the internal notes browser. Since, our target audience is both the desktop/mobile users we have designed a responsive layout using css media queries which works well on browsers, however, we just found out that when it runs as a notes application, it doesn't respect the media queries. It works as if there were no media queries (For eg. even the mobile specific items are shown on desktop). Any suggestions here to get it working? We are far way through and removing media queries would be kind of a last alternative.
Any help would be really appreciated. Thanks!
I think the reason is that your Notes browser is rendering as IE. IE doesn't support media queries up through IE 8.
IE is the default, try changing the internal browser to Firefox. See this link for instructions.
http://www-01.ibm.com/support/docview.wss?uid=swg21268588