W3C home > Mailing lists > Public > public-respimg@w3.org > September 2013

Re: Simplified source selection algorithm

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>
Message-ID: <op.w3kv9tpzte2ec8@aimac.local>
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

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:12:40 UTC