[META] Consider implementing CSS Environment Variables Module Level 1 ( env() )
Categories
(Core :: CSS Parsing and Computation, enhancement, P3)
Tracking
()
People
(Reporter: heycam, Assigned: emilio)
References
(Depends on 1 open bug, Blocks 1 open bug, )
Details
(4 keywords, Whiteboard: [geckoview])
Attachments
(3 files)
![]() |
||
Updated•7 years ago
|
Comment 1•7 years ago
|
||
Updated•7 years ago
|
Reporter | ||
Comment 2•7 years ago
|
||
Updated•7 years ago
|
Assignee | ||
Comment 3•7 years ago
|
||
Assignee | ||
Comment 4•7 years ago
|
||
Assignee | ||
Updated•7 years ago
|
Assignee | ||
Comment 5•7 years ago
|
||
Comment 6•7 years ago
|
||
Assignee | ||
Comment 7•7 years ago
|
||
Comment 8•7 years ago
|
||
Comment 9•7 years ago
|
||
Comment 10•7 years ago
|
||
Comment 12•7 years ago
|
||
Assignee | ||
Comment 13•7 years ago
|
||
Comment 14•7 years ago
|
||
Comment 15•7 years ago
|
||
Comment 16•7 years ago
|
||
bugherder |
Updated•7 years ago
|
Updated•7 years ago
|
Comment 17•7 years ago
|
||
Comment 18•6 years ago
|
||
Comment 19•6 years ago
|
||
I've checked out the documentation on this, made sure the compat data is up to date, and added some more details and a simple example on the reference page:
https://developer.mozilla.org/en-US/docs/Web/CSS/env
Let me know if this looks OK. Thanks!
Also, a quick question — is there a way to define your own environment variables on a CSS document, or can you currently only use the user-agent-provided ones, i.e. the iOS values?
Assignee | ||
Comment 20•6 years ago
|
||
Thanks! Looks good, yeah. I'd maybe use the fallback in the examples like:
padding:
env(safe-area-inset-top, 0px)
env(safe-area-inset-right, 0px)
env(safe-area-inset-bottom, 0px)
env(safe-area-inset-left, 0px);
... Or maybe not, I don't know.
(In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #19)
Also, a quick question — is there a way to define your own environment variables on a CSS document, or can you currently only use the user-agent-provided ones, i.e. the iOS values?
Well, you can use custom properties for that, that's what they're for.
Comment 21•6 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #20)
Thanks! Looks good, yeah. I'd maybe use the fallback in the examples like:
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
... Or maybe not, I don't know.
This is a good point; I added them.
(In reply to Chris Mills (Mozilla, MDN editor) [:cmills] from comment #19)
Also, a quick question — is there a way to define your own environment variables on a CSS document, or can you currently only use the user-agent-provided ones, i.e. the iOS values?
Well, you can use custom properties for that, that's what they're for.
That's what I thought, but I played around with a few things and couldn't get it to work. What would work in this case?
I tried things like
:root { --bg-color: red }
p { color: env(--bg-color); }
Assignee | ||
Comment 22•6 years ago
|
||
var(--bg-color)
?
Description
•