- From: Kornel Lesiński <kornel@geekhood.net>
- Date: Fri, 13 Sep 2013 00:20:28 +0100
- To: www-style <www-style@w3.org>
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