- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 7 Apr 2015 17:30:55 -0700
- To: Glen Huang <curvedmark@gmail.com>
- Cc: www-style list <www-style@w3.org>
On Sat, Apr 4, 2015 at 12:59 AM, Glen Huang <curvedmark@gmail.com> wrote:
> Does this do what I think it does?
>
> ```css
> :root {
> --page-width: 768px;
> }
> @media (min-width: var(--page-width)) {}
> ```
>
> If not, is it because media queries don’t inherit properties from the :root element? If that’s the case, can we add a selector to select a special element that the :root element and media queries will all inherit from?
>
> 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.
The var() function, when used on an element, just replaces itself with
the value of the given custom property on the same element. @media
rules aren't referring to any element, so they don't have any
properties at all, let alone custom properties.
You could let it refer to the value of the custom properties on the
root, as you suggest, but as Cameron says, it makes it way too easy to
get into bad loop situations.
What you want are just Custom Media Queries
<http://dev.w3.org/csswg/mediaqueries/#custom-mq>. That way you could
define something like:
@custom-media --large-page (width >= 768px);
@custom-media --small-page (width < 768px);
@media (--large-page) { ... }
~TJ
Received on Wednesday, 8 April 2015 00:31:42 UTC