Re: Media Query Variables

On 13 September 2013 09:40:38 "Simon Pieters" <simonp@opera.com> wrote:
>
> > https://github.com/ResponsiveImagesCG/picture-element/issues/64
>
> So if we take the case where the author declares the variable in an 
> external stylesheet and then uses it in <picture>:
>
>     <link rel=stylesheet href="..."><!-- sets @var-media smalltouchscreen:
> ...; -->
>     ...
>      <picture>
>          <source media="var(smalltouchscreen)" src="tap.png">
>          <source src="click.png">
>      </picture>
>
> When the browser sees the <picture>, the variable hasn't been declared yet, 
> so the first source evaluates to false and click.png is downloaded. But if 
> the stylesheet happened to load already, tap.png would be downloaded 
> instead. If the developer only tests locally, the stylesheet might well 
> reliably load quickly, but not for users visiting his page.

The algorithm is reliable in all cases, since the browser will have to 
re-run image selection algorithm when media query changes (just like it 
would when window size changes on viewport-based query).

That case is suboptimal from performance perspective, since the last 
variant may be unnecessarily preloaded, but this wouldn't break the page.

It can be solved in two ways

1. educate authors about performance best practices suggesting vars in 
<style> or a var() on all options. Education is hard and not all authors 
will get it, but if the spec introduces feature as intended for <style> 
only maybe even w3schools will copy right advice ;)

2. Browsers can postpone loading of the image when preload scanner 
encounters an unknown variable.

The worst case of misuse is bandwidth waste. The right image will be 
displayed regardless - picture is not like video where you have to make the 
choice once and do it perfectly first time. It allows browsers to 
reevaluate options when conditions change.

-- 
regards, Kornel

Received on Friday, 13 September 2013 09:08:32 UTC