I'm trying to include a browser specific CSS using the #import style media query as follows:
<style type="text/css">#import url(foo.css) all and (-moz-box-sizing: content-box);</style>
The foo.css then has:
.myStyle { -moz-box-sizing: border-box; }
The idea is that I'll include the foo.css for Firefox (Gecko/Mozilla) browsers. However, it looks like the foo.css is never applied on Firefox. So:
How do I debug in Firefox why the #import media query isn't evaluating to true. I've checked via "InspectQ" to make sure that -moz-box-sizing is indeed context-box in the browser I'm using. But for whatever reason, that media query expression apparently is evaluating to false. What tool(s) can I use to see that evaluation at runtime.
Does anyone see anything wrong with that media query?
Is there a more common way to detect Mozilla browsers using the #import style media query?
The Media Queries spec defines a specific set of media features that you can use. Although the syntax resembles a property declaration, you can't use any arbitrary CSS property as a media feature, because it won't necessarily make sense as one. For example, what is -moz-box-sizing supposed to mean in a media query, even to Mozilla browsers?
In your case, since only Mozilla browsers will understand the -moz- prefix anyway, you can just place your CSS rule directly in your main stylesheet without any conditional imports.
Related
How can I reliable create a fallback for CSS grid styling for browsers that don't support the current spec, with a feature query or media query?
According to articles like this one, browsers ignore CSS that they can't parse. Therefore, I expected negative feature queries to work even on browsers that don't support it. E.g. IE11 does not support feature queries, so I expected it to ignore this line and apply the styles inside the query: #supports not (display: grid){}. However, as you can see in this test, IE11 ignores all the styles inside that query.
I found a media query for IE10+, but that one excludes other browsers that don't support grid. Of course I could first declare the fallback styles and override them with a #supports (grid-area: area) query, but I prefer a solution that does not require overrides.
According to articles like this one, browsers ignore CSS that they can't parse [...] However, as you can see in this test, IE11 ignores all the styles inside that query.
Well, yeah. Since Internet Explorer doesn't understand feature queries themselves, it's going to ignore #supports not (display: grid) and everything inside it, because it doesn't understand what that means. Just like the article says.
Overriding, i.e. making use of the cascade, is your only option. There is no clean way of doing this. The reality is that #supports was introduced too late to be useful for distinguishing browsers that don't support features that precede it, such as grid layout.
In CSS 3 syntax we have #media to define responsive screen to apply.
I intend to use it as custom code-folding for CSS entries.
E.g.
#media {
div { color: green; }
}
So I wonder if there are any side-effect problems may arise when doing so?
First off, the #media CSS at-rule is not new to CSS3. It was introduced in CSS2, and has been supported by every browser including IE5+. What is new to CSS3 are media queries. The difference between media queries and #media are detailed in this answer.
An #media rule without an accompanying media query is equivalent to #media all, which, again, is understood correctly by every browser including IE5 and up. In other words, in terms of browser behavior there are no side-effects other than hiding CSS from IE4 and any other browsers from the late 90s (which don't support #media in any way, shape or form).
Note that this construct does not validate as either CSS2 or CSS3 in the Jigsaw CSS validator; this is a bug with the validator which may be due to the fact that CSS2 did not explicitly allow empty media types with #media. Having said that, what is stated in CSS3 is consistent with browser behavior up to 17 years back, so this is something you can totally rely on.
I'm trying to figure out how to structure my CSS files (which are quite numerous by now), and I'm wondering whether there is any actual difference between having:
<link href="blah.css" media="print" rel="stylesheet" type="text/css" />
or having:
#media print {
definitions
}
I'm asking from the browser's perspective. Are both equally well supported? Can I not care?
Or is one clearly superior?
According to http://www.w3.org/TR/css3-mediaqueries/ the use of #media ... in CSS files has been supported since HTML4 and CSS2.
"The ‘print’ and ‘screen’ media types are defined in HTML4. The
complete list of media types in HTML4 is: ‘aural’, ‘braille’,
‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’. CSS2 defines
the same list, deprecates ‘aural’ and adds ‘embossed’ and ‘speech’.
Also, ‘all’ is used to indicate that the style sheet applies to all
media types."
CSS3 expanded the use of #media ... to also allow media queries to be used, these are also documented on the w3.org page I linked earlier.
Usage of media types is also documented here:
http://www.w3schools.com/css/css_mediatypes.asp
Here is a list of support for media queries:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
As far as I can tell; use of #media screen, print, ... is very widely supported, however the newer media queries that you can use are only supported in CSS3 compatible browsers.
Edit: There is even more info about this here:
http://www.w3.org/TR/CSS2/media.html#x2
I wouldn't worry about support for using #media ... this way.
I would just use #media print, you won't have to make the additional call for a stylesheet if the user decides to print. The only thing you are giving up is the extra few KB on your stylesheet, but I'd say that's not a bad price to pay for consolidating all your styles.
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
I tried to validate my site's CSS using the W3C CSS Validator. Unfortunately, reset-min.css from YUI framework produced parse error on the string " {*font-size:100%; ".
The validator results.
On further investigation I noticed the following error on Firefox's error console:
Warning: Expected declaration but found '*'. Skipped to next declaration.
I couldn't find any explanation for the meaning of the '*', nor references for a problem in this popular reset CSS.
What am I missing?
This is a hack for IE7 and lower. IE7 and lower will skip the asterisk and continue to parse the CSS as normal. Other browsers will just ignore the entire rule.
As an example, since CSS will use the last declared version of a rule, doing the following will cause IE7 and below to use a font-size of 113%, while other browsers use a font-size of 100% for paragraphs.
p { font-size: 100%; *font-size: 113%; }
There is a little more information at webdevout.net.
Personally, I think that it is acceptable to use such hacks for the purposes of working around the brokenness of IE. Apparently, Yahoo! feels the same way.
It's probably an IE compatibility hack.
There are many CSS syntax errors that some browsers (notably IE 6) will ignore and others won't. Some CSS files will use the errors to make a rule that one browser will see and another browser won't.
EDIT: For a full list, see here. In your particular case, that rule will be seen only by IE 7 or lower.