Re: [csswg-drafts] [css-env] Adding custom env() variables (#2627)

Hello,

**@tomhodgins**: 
I'm really interresting about your breakpoint solution. I tried your great codepen link. I also find the Houdini project with the JSON in CSS feature. Then, in this solution, we got two things.
1 - JSON in CSS with ability to access their first level property in this form : --breakpoint("narrow")
2 - @supports (min-width: 300px) inerpretation as a media query.

But...
1 - If JSON in CSS var level 1 access becomes a CSS spec, i will say Ok. But for now, it's not a CSS solution, but a JS hack.
2 - @supports's role is to test if some features are supported or not. Conceptually, it's not ilogic to consider that if window width is 200px, and html width is 100% of it, then min-width: 300px should return false. But it suppose to grow up the concept of "supported feature" in a way that will become confused. "_Is supported to assign 300px to min-width css property_" is not the same that "_is html able to get 300px width_", and should always return true if browser supports min-width CSS property written in pixels.

So
It's an elegant JS hack, and maybe i will use it (waiting for another solution). But it's not, and probably never will become, a valid CSS solution.

------
For variables media queries breakpoints, we can imagine two simple possibilities.
1 - media queries should tolerate css variables defined on ":root", or in another new specific selector to avoid confusion.
2 -  media queries should works with env(), then we have to be able to define custom env(--constant-var).

I think the first solution may be reasonable (and then may needs another ticket if not already existing). But it's only my point of view.

-- 
GitHub Notification of comment by flavi1
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2627#issuecomment-624626678 using your GitHub account

Received on Wednesday, 6 May 2020 12:43:59 UTC