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
Related
I thought it would be a neat idea to put my default css which has no width/height/.. dependencies in a media query like this:
#media only all and (min-width: 0px){ ... }
Are there any possible drawbacks I've missed?
It's not as readable to be honest with you. If I were to see that in a CSS file, I would assume it's some weird CSS hack.
The other downside is you're adding an unnecessary media query. Setting all your default attributes through a media query is making more work for the CSS compiler.
Finally is support. Not all browsers support media queries, especially if you work in enterprise or with clients who have very old browsers. If you have all your defaults set through media queries you don't have an easy fallback if those queries fail.
It's not a good idea to use anything that isn't really adding to your webpages.
The unnecessary use of media queries can also cause problems with old browsers (eg. IE 7,8,9) if there is no polyfilling. It will also add to the page load time.
There are other numerous ways to increase readablity:
1.opening and closing comment lines to a set of CSS blocks
/******default code******/
html{
.....
}
body{
.....
}
/****--default code--****/
separate CSS files
code collapsing in IDE
other tips are mentioned here at Improving Code Readability With CSS Styleguides
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
While refactoring my main css into a modular approach I'm using #media all {} to wrap css modules in the IDE. This approach makes it much more easy to scan the files' content as we can't use a preprocessor like less or sass right now.
My only concern is that all those media queries (one for each css module / set of coherent selectors) might cause a performance hit while rendering the site. I am NOT concerned about the file size of our css files as this is a minor issue with a slim modular css framework and proper zipping.
Do media queries like #media all {} have an impact on the performance (both on desktop and mobile/other) devices if used to frequently?
The answer is no... and yes. Having a bunch of media queries will not make the site harder to render. But more lines of code makes a file larger and that technically takes longer to load. Still this isn't much of a performance hit.
But when resizing the browser, it will be taxing on the browser to recalculate a bunch of different mq settings. Read more here: Web Performance: One or thousands of Media Queries?
But...if you want to be proactive about this, with out a preprocessor, just use Pleeease. Pleeease gives you preprocessor like ability with vanilla css. AND it provides a PostProcessor function called mqpacker. It will find all similar media queries in your style sheet and merge them into related media queries. But again, if you are gzipping your stylesheet on the server, you don't need to worry about it.
Good luck! Stay awesome!
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.
There's a fairly old article on smashing magazine (technique 3) that says that if you start a media query like this:
#media screen, all and (min-width: 300px)
then browsers that understand media queries will understand the whole media query where as older ie will ignore everything after "all and". So in theory older ie still sees everything inside the query. This is amazingly true for ie6 and ie7 but unfortunately ie8 ignores all the rules inside the query.
It's unfortunate because if we could get
We can do something similar using Jeremy Keiths example which involves moving the layout stuff into a separate style sheet and using conditional comments to serve this to older IE.
The problem with this approach is that that my css modules are split between separate style sheets. This goes against principles in OOCSS and SMACSS (which are really useful!)
There's a JS Fiddle where someone has tried to crack it but wondering if anyone has any ideas on how to do this?
Credit to #cimmanon for the comment which led me to a solution.
Using .less I can have
global.less - This has all my CSS in there including all my breakpoints. The breakpoints are set as less variables.
compiled.less - This imports global.less and compiles to a css file
Compiled-belowie8 - This imports global.less and compiles to a css file BUT I've changed the widest layout's media query variable to "none" so that in this one there is no media query.
Then, in the I've used conditional comments to serve compiled.css to all browsers except