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. ~TJReceived on Thursday, 14 November 2013 04:15:23 UTC
This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:34 UTC