New issue
Advanced search Search tips

Issue 811123 link

Starred by 2 users
Status: WontFix
Owner: ----
Closed: Apr 2018
Cc:
style-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac , Fuchsia
Pri: 3
Type: Feature



Sign in to add a comment

Media queries do not support CSS Custom Properties in calc()

Reported by shospoda...@gmail.com, Feb 11 2018 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3344.0 Safari/537.36

Steps to reproduce the problem:
1. Open the test demo https://codepen.io/malyw/pen/BJXGzv
2. Check the "Media queries with calc() and CSS Custom Properties: " section

What is the expected behavior?
calc() with CSS Custom Properties media queries are applied 

What went wrong?
No calc() and CSS Custom Properties media query is applied 

Did this work before? No 

Does this work in other browsers? No
 Recently Chrome the support of calc() in Media quesries: https://www.chromestatus.com/feature/5643732019838976
One of the main developer requests for this was the ability to use CSS Custom Properties in Media Queries: https://bugs.chromium.org/p/chromium/issues/detail?id=421909#c19
Unfortunately, the calc() support was shipped only for the <length> values

Chrome version: 66.0.3344.0  Channel: canary
OS Version: OS X 10.13.3
Flash Version:

Comment 1 by cnardi@chromium.org, Feb 12 2018 

Firefox (on Nightly) also acts the same way; so the 3 browsers that currently implement calc() in media queries do not support this behavior.

This might need to have spec text written, as custom properties are inherited through the cascade. I can't find any section in the spec that talks about this; likely as it was never considered.

Comment 2 by krajshree@chromium.org, Feb 12 2018

Labels: Needs-Triage-M66

Comment 3 by cnardi@chromium.org, Feb 12 2018

Labels: -Needs-Triage-M66 OS-Android OS-Chrome OS-Fuchsia OS-Linux OS-Windows
Status: Available (was: Unconfirmed)
Marking this available; perhaps if someone can find a section of the spec or go to the WG with this issue we can go ahead.

Comment 4 by cnardi@chromium.org, Feb 12 2018

Labels: -Type-Bug -Pri-2 Pri-3 Type-Feature

Comment 5 by cnardi@chromium.org, Apr 29 2018

Status: WontFix (was: Available)
Marking this as WontFix per https://drafts.csswg.org/css-env-1/ and https://github.com/w3c/csswg-drafts/issues/1693. The intro to the Environment Variables proposal draft states:

Because environment variables don’t depend on the value of anything drawn from a particular element, they can be used in places where there is no obvious element to draw from, such as in @media rules, where the var() function would not be valid.

env() would thus be able to be used in media queries, but per that text it seems like var() is explicitly designed to not be able to. I would suggest following https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ZS1mEwvN-5E and  bug 825890  for updates on env() in Chrome.
►

Sign in to add a comment