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
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
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
Recently i began a new job, and one thing i noticed in their boilerplate is that on their CSS, the print styles are separated into a diff file. I asked about the reasoning and was told IE8 doesnt support #media print.
Now, for the last couple of years i've worked on a couple of sites, where IE8 was supported and which required print support. And i've always included the print styles using the #media print method. The funny thing, is that print works using this method. Any idea why ? Now that i think about it, if #media print is not supported on IE8, but the print styles are working on my projects, where is the catch?
By the way, the project im referring to, where the print styles are working on IE8 is this one: http://news.hydroquebec.com/en/press-releases/704/addenergie-will-supply-the-fast-charge-stations/?fromSearch=1
Could it be the printshiv ?
IE8 supports #media print just fine. print by itself is just a media type and not a full-fledged media query, which old versions of IE understand just fine and has worked on all browsers for over a decade.
Nothing to do with printshiv — while it provides fixes for rendering HTML5 elements to print, that is a separate thing from #media print entirely.
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.
I have two media queries in my css (not counting the print one) :
#media screen and (min-width: 720px) {} and #media screen and (min-width: 1026px) {
I am using respond.js to get them to behave under IE8. The weird thing is that it works perfectly, except for the last media query where it reverts back to the css before the media queries. I.e., it works well until the window hits that 1026px threshold in width.
Anybody got an idea as to what is going on there ? Here is the link to the preview : http://bit.ly/i6ITPe
Thanks a bunch for any answer
I have been having several issues with this and have found it working on and off again. First off based on the forums I have been reading you should not include respond.js from modernizr, they are more than likely going to drop it. Also when you include respond.js add it after all of your stylesheets. It should be one of the last things to load. Hope that helps! =)
There are a few things to bere in mind when using respond.js
It needs to parse the css by making an ajax call to the stylesheet in a link element
It cant understand dynamically created CSS from eg client side LESS , or styles injected via document.write, jQuery etc,.
#Import statements are not followed inside stylesheets
Hope this helps.
I'm not sure if this applies to you, but I just found an issue that breaks the css while using respond.js.
do you have any elements that open and close with no styles i.e:
ul.demo{}
I found this was breaking my css in ie 8 and below