[whatwg] So if media-queries aren't for determining the media to be used what are they for?

[Kornel Lesiński]

On Tue, 15 May 2012 23:57:48 +0100, Silvia Pfeiffer  
<silviapfeiffer1 at gmail.com> wrote:

>> Media queries come from the client side. They allow the author of a web
>> page to tell exactly how she want to lay out her design based on the
>> different queries. The browser *HAS* to follow these queries. And also,
>> I don't think (please correct me if wrong) the media query can be subset
>> to only the stuff that's really meaningful to do at prefetch-time.
>>
>> The srcset proposal, on the other hand, are purely HINTS to the browser
>> engine about the resources. They are only declarative hints that can be
>> leveraged in a secret sauce way (like Bruce said in another mail) to
>> always optimize image fetching and other features. If you make a new
>> kind of browser (like e.g. Opera mini) it can have its own heuristics
>> that make sense *for that single browser* without asking _anyone_.
>> Without relying on web authors doing the correct thing, or changing
>> anything or even announce to anyone what they are doing. It's opening up
>> for innovation, good algorithms and smart uses in the future.
>>
>>
>> That's the basic difference, totally different. :-)
>
> If that's the case, would it make sense to get rid of the @media
> attribute on <source> elements in <video> and replace it with @srcset?

I think something like that would be perfect.

In fact, I'd keep @media, because it serves some cases very well (I see  
dpi/bandwidth optimisation as a problem orthogonal to layout adaptation:  
http://geekhood.net/MediaQuery-vs-PerfQuery.png)


It may be enough to add another attribute that describes image properties,  
and can be used either alone or with conjunction with MQs:

<picture>
<source scale="1" src="low">
<source scale="2" src="high">
</picture>

would be equivalent to:

<img srcset="low 1x, high 2x">

(I've proposed that in the RespImg community group)


And combination of the two opens new possibilities:

<picture>
<source scale="1" src="low-narrow" media="(orientation:portrait)">
<source scale="2" src="high-narrow" media="(orientation:portrait)">
<source scale="1" src="low-wide" media="(orientation:landscape)">
<source scale="2" src="high-wide"  media="(orientation:landscape)">
</picture>

-- 
regards, Kornel Lesiński