- From: Kornel Lesiński <kornel@geekhood.net>
- Date: Wed, 18 Sep 2013 00:16:31 +0100
- To: "Ben Callahan" <ben@heysparkbox.com>
- Cc: "Marcos Caceres" <w3c@marcosc.com>, "Cory Brown" <oh.wise.man@gmail.com>, "public-respimg@w3.org" <public-respimg@w3.org>
On Tue, 17 Sep 2013 20:09:22 +0100, Ben Callahan <ben@heysparkbox.com>
wrote:
> I would guess that most folks would expect the last source to win in that
> example. I also believe that most people writing responsive CSS expect a
> series of media queries like this:
>
> @media (min-width: 20em) { /* styles */ }
> @media (min-width: 40em) { /* styles */ }
> @media (min-width: 60em) { /* styles */ }
>
> to progressively apply. In other words, if the viewport is 60em or
> greater in width, then it is also 40em or greater and it is also 20em or
> greater. I believe many devs are using this idea to enhance their layout
> as the
> viewport increases (or the opposite if they are starting with larger
> layouts).
Makes sense.
> Obviously, the structure of a CSS file is different than that syntax we
> would use with the picture element. All of this is just to say that I
> might expect a similar behavior. Alternativel, I supposed we could write
> mutually exclusive queries in the media attribute:
>
> <picture>
> <source media="(max-width: 400px)" src="small.jpg">
> <source media="(max-width: 401px) and (min-width: 700px)"
> src="mid.jpg">
> <source media="(min-width: 701px)" src="large.jpg">
> </picture>
I don't think CSS authors will be happy to need to know De Morgan's laws
by heart :)
--
regards, Kornel
Received on Tuesday, 17 September 2013 23:17:05 UTC