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
Related
I compile my gwt project with gwt-style=OBF and realize that this generates media queries where the space between "and" and "(" is missing.
So out of
#media screen and ( ... gets
#media screen and(
According to W3C this not ok and also does not work (at least in Chrome and Firefox). Do you have any idea how to generate working CSS and still use gwt-style=OBF?
"GWT-CSS" (or "GWT-aware CSS") is limited to CSS 2. If you want CSS 3 you have to use "GSS".
this post was a mistake by myself. I assumed that obfuscation would cause the problem above. As I learned now it has nothing to do with obfuscation but with minifying the css. We used yui-compressor which has a known bug when it comes to #media and ... So we just need to switch the tool for minifying the css.
Sorry for the mistake
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
I am just asking, since didn't find anything relevant here.
Is using media queries together with display: none a legit thing for creating a mobile version of the web-site? I mean, is this an acceptable practice or is there another way to do so?
I just used it on a project, looks alright, but maybe there are some snags here?
Thank you in advance.
You could only work with media queries instead of having one default css. In that case you wouldn't need to set something that you don't use in other resolutions.
e.g.
put here everything which you don't wanna show in the lower resolutions:
#media only all and (min-width: 1024)
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!
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