Media Query Variables

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



-- 
regards, Kornel

Received on Thursday, 12 September 2013 23:21:01 UTC