Re: DRYing up media queries

On Fri, May 24, 2013 at 3:29 PM, Yoav Weiss <yoav@yoav.ws> wrote:
> Media queries are very common, both in their CSS form and as a `media`
> attribute. RWD often results in media query break points repeated in various
> places in the code.
>
> In CSS, authors have been using preprocessors to DRY up media queries from
> the code, place them in a single location and give them meaninful names
> [3][4]
>
> In HTML, the media attribute can be used with <link rel=stylesheet> and with
> <source> tags.
> There are a few new proposals that rely on the media attribute [1][2] (I'm
> involved with both). Considering RWD's reliance on media queries, there may
> be more to come.
>
> Therefore, authors need to DRY up the actual media queries from markup and
> CSS, and give them short and meaningful names. That need is likely to
> increase over time, with RWD becoming more and more popular and with an
> ever-increasing device variance. Having a standard way to do that will ease
> code readability and authoring, and will result in slightly smaller files.
>
> At least one proposal have been made to address this issue [5], but perhaps
> this issue can be addressed in CSS, in a way similiar to CSS variables.
>
> If CSS variables were applicable to media query values, this could have
> resolved that issue, using a syntax such as:
>
>     :root{
>         var-wide: screen;
>      }
>     @media var(wide) {
>         /* Applicable style */
>      }
> and
>      <link href="wide.css" rel="stylesheet" media="var(wide)">
>
> Can variables be extended to cover this use-case as well? Or would it
> require a separate specification?

Variables are defined by custom properties, which are nothing more
than ordinary CSS properties.  Media Queries don't exist in a context
where they can access properties from some object, so CSS Variables
aren't useful for them.

We could possibly say that properties defined on the root element are
accessible across the stylesheet, but that might be weird.

~TJ

Received on Saturday, 25 May 2013 01:31:29 UTC