W3C home > Mailing lists > Public > www-style@w3.org > November 2013

Re: Media Query Variables

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 13 Nov 2013 20:14:36 -0800
Message-ID: <CAAWBYDCLCKjGdLVdd=kC7Lfzq1tGa0uFPXSFZp=TawqZcfRe4w@mail.gmail.com>
To: Bruno Racineux <bruno@hexanet.net>
Cc: Henrik Andersson <henke@henke37.cjb.net>, Yoav Weiss <yoav@yoav.ws>, Andy Davies <dajdavies@gmail.com>, www-style <www-style@w3.org>
On Wed, Nov 13, 2013 at 4:11 PM, Bruno Racineux <bruno@hexanet.net> wrote:
> Do you guys have a consensus on the best way to implement this?
> From what I read, the meta approach is out, right?
>
> MQ vars would also be very relevant to the RespImg discussion.
>
> What about a simple way like this:
>
> <style>
>  @media { small: (max-width: 20em); large: (min-width: 40em); }
> </style>
> <link rel="stylesheet" media="screen and (small)" />
> <link rel="stylesheet" media="print and (large)" />
>
>
> It centralizes and tokenizes MQs in the <head> to mix and match them later.
>
>
> The @media keywords become custom vars like 'monochrome' or 'color'.

My current thought is something like:

<style>
@custom-media "small" (max-width: 20em);
@custom-media "large" (min-width: 40em);
</style>
<link rel=stylesheet media="('small')" >
<link rel=stylesheet media="('small')" >

Note the use of quotes - using strings as the name avoids any possible
collision with future MQs we define.

Another possibility would be to use a reserved prefix, like Custom
Properties use.  It seems a little weird to use "var-", but honestly
it might be easiest to learn like that.

~TJ
Received on Thursday, 14 November 2013 04:15:23 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:36 UTC