Re: Media Query Variables

On Fri, 13 Sep 2013 01:20:28 +0200, Kornel Lesiński <kornel@geekhood.net>  
wrote:

>
> Based on Alex's/Tab's and Yoav's proposals:
> http://lists.w3.org/Archives/Public/www-style/2013May/0812.html
> http://lists.w3.org/Archives/Public/www-style/2013May/0638.html
>
> I'd like to suggest another variant of Media Query Variables.
>
> Apart from usefulness in the stylesheets, MQ variables would help a lot  
> to reduce verbosity of the <picture> element and satisfy use-case of  
> easy maintenance of common "breakpoints" in responsive images.
>
> The main motivation is to make setting of variables simple enough to be  
> parseable by the preload scanner, so I'm proposing a basic declarative  
> syntax and avoiding cascade/inheritance. UA can simply extract  
> definitions and use them as aliases for MQs with no new  
> interdependencies and minimum added complexity.
>
> Definitions are allowed only at the beginning of a stylesheet (similarly  
> to @import). The syntax to define a variable is:
>
> "@var-media" IDENT ":" media_query_list ";"
>
> e.g.
>
> @var-media touch-tablet: screen and (pointer:coarse) and  
> (max-device-width: 10in);
>
> Later definitions overwrite earlier ones.
>
> Syntax var(name) refers to a variable and can be used wherever  
> media_query is allowed:
>
> @media var(touch-tablet) {
> }
>
> The syntax to refer to MQ variable is consistent with cascading  
> variables, but used in media query context unambiguously refers to MQ  
> variables. The two kinds of variables have separate namespaces (which I  
> think will be easy to understand for authors as these variables have  
> different "type").
>
> Reference to a variable that hasn't been defined evaluates to false,  
> e.g. @media var(im-not-set){} is same as @media not all {}.
>
> I've included a bigger example with <picture> and hypothetical  
> MQ-enabled @srcset syntax here:
>
> 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 fact that this is *possible* to do means that people are going to do  
it. If we want these variables to apply to HTML's media="" attributes, I  
think it is not acceptable to support declaring them in external  
stylesheets. It might be better to only support declaring them with a  
<meta> element or some such.

(This problem might exist already with CSS custom properties together with  
fallback values and things like background-image. Maybe we shouldn't  
support <url>s as fallback values?)

-- 
Simon Pieters
Opera Software

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