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

Re: Simplified source selection algorithm

From: Ben Callahan <ben@heysparkbox.com>
Date: Tue, 17 Sep 2013 15:09:22 -0400
Message-ID: <CADcYynT+cZ2rU99x6YWkdBaFnJNONJAJQycrzRoHw1LwDQqzuQ@mail.gmail.com>
To: (wrong string) „ski <kornel@geekhood.net>
Cc: Marcos Caceres <w3c@marcosc.com>, Cory Brown <oh.wise.man@gmail.com>, "public-respimg@w3.org" <public-respimg@w3.org>
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).

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>

b
Received on Tuesday, 17 September 2013 19:09:49 UTC

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