- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 13 Nov 2013 20:14:36 -0800
- 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