W3C home > Mailing lists > Public > www-style@w3.org > February 2017

Re: [css3-mediaqueries] min-width, max-width, & fractional-pixel widths

From: Simon Sapin <simon.sapin@exyr.org>
Date: Mon, 6 Feb 2017 22:27:12 +0100
To: Nick Levinson <nick_levinson@yahoo.com>, www-style@w3.org, "Tab Atkins Jr." <jackalmage@gmail.com>, Florian Rivoal <florian@rivoal.net>
Message-ID: <7a1de07a-4117-3089-cd32-93c8e4ea9246@exyr.org>
On 05/02/17 03:08, Nick Levinson wrote:
> Suppose I want this:
>
> @media screen and (max-width:1500px) and (min-width:1200px) {. . . . .}
> @media screen and (max-width:1199px) and (min-width:1000px) {. . . . .}
>
> If the user drags the browser window's edge manually so the viewport is 1199.734682 pixels,
> neither at-media block applies and most users won't know why.

The "Media Queries Level 4" draft adds math-like operator syntax, with 
both greater-than and greater-or-equal (similarly smaller). So the above 
could be written:

     @media screen and (width < 1500px) and (width >= 1200px) {…}
     @media screen and (width < 1199px) and (width >= 1000px) {…}

Or even:

     @media screen and (1200px <= width < 1500px) {…}
     @media screen and (1000px <= width < 1199px) {…}

https://drafts.csswg.org/mediaqueries/#mq-range-context

However as far as I know this is not implemented yet in any browser.

Tab, Florian, how do you feel about the spec stability on this? Is it 
time to start implementing?

-- 
Simon Sapin
Received on Monday, 6 February 2017 21:27:44 UTC

This archive was generated by hypermail 2.3.1 : Monday, 6 February 2017 21:27:45 UTC