W3C home > Mailing lists > Public > www-style@w3.org > April 2015

Re: [css-variables][mediaqueries] Allow var() in media queries?

From: Glen Huang <curvedmark@gmail.com>
Date: Sun, 5 Apr 2015 10:24:48 +0800
Cc: www-style list <www-style@w3.org>
Message-Id: <6AFB42D4-71D5-49A8-8CF4-E24AABE01EF1@gmail.com>
To: Cameron McCormack <cam@mcc.id.au>
Ah, this indeed is undesirable.

But what about we add a new at rule:

```css
@initial {
	--page-width: 768px;
}
```

properties (custom or regular) specified in this at rule apply to a special (imaginative, can’t be queried) element that all elements and media queries inherit from. It can’t be specified in a @media rule:

```css
@media (min-width: var(--page-width)) {
	@initial { /* syntax error, ignored */
		--page-width: 768px;
	}
}
```

> On Apr 5, 2015, at 7:41 AM, Cameron McCormack <cam@mcc.id.au> wrote:
> 
> Glen Huang:
>> When you design the media query break points according to certain
>> element dimensions, being able to use variables in media queries can
>> be very helpful.
> 
> I agree it would be helpful, but a problem with this is that you can
> easily set up rules inside the @media that change what the @media
> condition evaluates to:
> 
>  :root {
>    --page-width: 768px;
>  }
> 
>  @media (min-width: var(--page-width)) {
>    :root {
>      --page-width: 120px;
>    }
>  }
> 
> So far CSS has avoided adding any new situations like this (the existing
> problem with :hover rules moving the element is one we are stuck with).
> 
> -- 
> Cameron McCormack ≝ http://mcc.id.au/
Received on Sunday, 5 April 2015 02:25:21 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:30 UTC