Re: Simplified source selection algorithm

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