JavaScript archives
Compatibility
Thidrekssaga
QuirksBlog
Donations
CSS book
Politics
Mobile
About
COH
During my media query test I found out that min-resolution: 0[unit] does not work in any browser for any unit. I find this weird.
Here is a quick test case for the dpi and dpcm units. The media queries tested are the following:
@media (min-resolution: 0dpi) and (max-resolution: 200dpi) @media (min-resolution: 0.1dpi) and (max-resolution: 200dpi) @media (min-resolution: 0dpcm) and (max-resolution: 200dpcm) @media (min-resolution: 0.1dpcm) and (max-resolution: 200dpcm)
The ones with 0 should be applied to the test page, since the resolution is larger than 0. Yet they aren’t. Changing the value to 0.1 solves the issue, but seems like a hack.
I do not understand what’s going on. True, an actual resolution of 0dpi or 0dpcm will only occur if there is in fact no screen. Still, the same goes for, for instance, min-device-width: 0cm, which works fine in all browsers.
This isn’t a simple browser bug: Firefox, Opera, and IE10 all agree that the media queries with 0 should not be applied. (The WebKit-based browsers do not support resolution at all.)
So apparently the 0 value is not allowed. I checked the CSS3 media queries spec and the CSS4 media queries spec, and neither give a whisper of a hint of 0 being a forbidden value. So I wonder why the browsers did this; having 0 around for comparisons seems useful.
I don’t know what’s going on, but it’s weird. And you have to make sure you don’t use min-resolution: 0[unit]. So don’t.
This is the blog of Peter-Paul Koch, web developer, consultant, and trainer.
You can also follow
him on Twitter or Mastodon.
Atom
RSS
If you like this blog, why not donate a little bit of money to help me pay my bills?
Categories:
Comments are closed.
1 Posted by Simon Sapin on 21 October 2012 | Permalink
Hi,
I re-read the spec and can’t find even a twisted interpretation that would make this conforming. As surprising as it is, I think that all these browsers just share the same bug.
(Of course the advice for authors not to use this still stands.)
2 Posted by Simon Sapin on 21 October 2012 | Permalink
I asked on the mailing list and Boris Zbarsky gave the explanation:
http://lists.w3.org/Archives/Public/www-style/2012Oct/0593.html
http://dev.w3.org/csswg/css3-mediaqueries/#values says:
The value is a positive immediately followed
by a unit identifier (‘dpi’ or ‘dpcm’).
So "0dpi" is not a valid value for .
3 Posted by SelenIT on 21 October 2012 | Permalink
The section 5 ("Values") of the CSS3 media queries says that "The value is a *positive* immediately followed by a unit identifier", and the previous paragraph in that section explains "positive" as "not *zero* or negative". May be this is the answer?
4 Posted by Piotr Ingling on 21 October 2012 | Permalink
It probably comes down to the question: os "0" a positive value? As far as I know it isn't,
Specification for "device-width" says "A specified 'length' cannot be negative" while for "resolution" it says "The 'resolution' value is a positive 'number' immediately followed by a unit identifier (‘dpi’ or ‘dpcm’)."
5 Posted by GreLI on 21 October 2012 | Permalink
As mentioned in www-style mail list “The value is a positive immediately followed by a unit identifier (‘dpi’ or ‘dpcm’).” as per http://www.w3.org/TR/css3-mediaqueries/#values
So, It's correct behavior. Zero is not a positive value. It's zero.
6 Posted by ppk on 21 October 2012 | Permalink
Right, so it was in the spec, but not in the part I expected it in.
It's still inconsistent with other media queries, notably width and device-width, where 0 is an allowed value. And it messes up my neat test case.