Re: Media Query Variables

On Mon, 16 Sep 2013 00:59:44 +0100, Tab Atkins Jr. <jackalmage@gmail.com>
wrote:

>> Media query variables don't require browser to block. They're basically
>> event-based.
>>
>> You can parse <style> asynchronously, and trigger <picture> source  
>> selection
>> algorithm (asynchronously as well) at any time when you encounter MQ
>> variable definition.
>
> No, you really can't.
>
> Obviously, multiple sources can match at any given time.  Because of
> this, you'll have some way of choosing between multiple valid sources.
>  This method is almost certainly not stable to additions - adding more
> choices might mean that it's the new option that gets chosen.

That's good. I'd like <picture> to be able to change selected source at
any time, and not be frozen forever with choice that preload scanner had
to make.

It's not like the fragile algorithm in <video> which has to make the right
choice on the first try. The source selection algorithm I'm proposing can
be re-run at any time
(https://github.com/ResponsiveImagesCG/picture-element/issues/62#issuecomment-24479164)

<picture> is supposed to be *responsive*. If you have:

<picture>
<source media="screen and (max-width:300px)"...>
<source media="screen and (max-width:500px)"...>
<source...>
</picture>

it is supposed to switch sources as you resize the window. It's supposed
to be roughly equivalent to:

<img id=1..>
<img id=2..>
<img id=3..>

<style>
@media screen and (max-width:300px) {
     #2,#3 {display:none}
}
@media screen and (max-width:500px) and (min-width:301px) {
     #1,#3 {display:none}
}
@media screen and (min-width:501px) {
     #1,#2 {display:none}
}


and yes, it means that in some cases user may cause all 3 images to be
loaded. That's fine, because these 3 images may have different sizes,
different content (it's for art-direction case) and layout of the page
(which does react to the same media queries) may depend on it. That's
supposed to be responsive layout with responsive images.

I think it would be awful misfeature if media queries in <picture> worked
once and only once, while media queries in CSS could update dynamically.

> A custom MQ is, at first, an invalid MQ, which doesn't match.  As you
> parse in definitions, some of them become valid, which means that the
> set of valid sources might grow.  This means that the "best" choice
> might change as parsing happens.

Yes, that's the point. When UA discovers that choice might change it's
supposed to schedule re-running of source selection algorithm on the next
tick.

What I've defined is:

- If possible, make the choice immediately.
- If not possible to make the choice yet, wait until external CSS is
loaded (first rendering starts) and then make choice with whatever data is
available.
- Update the choice at any time when conditions change, even if it means
downloading and displaying a different image.

The algorithm I'm proposing doesn't even delay <picture> that has unknown
MQ in option that definitely won't be chosen, e.g.

<picture>
<source media="max-device-width:1000px" ...>
<source media="var(unknown)">
</picture>

won't wait for the variable on on devices with <1000px screens, since
source selection algorithm won't reach delay logic.

-- 
regards, Kornel

Received on Monday, 16 September 2013 00:37:13 UTC