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

This is a very interesting discussion! I believe being able to set our own environment variables that can be used inside MQ is very exciting. I find this to be especially powerful if we can override those values depending on the window. Perhaps one could use javascript to, for example, measure the width that the browser is giving all scrollbars and pass that to CSS as an environmental variable `--scrollbar-width`, which is updated on every window resize. Then we could do something like this:

```
@media ( env(--scrollbar-width): 15px ){
  ...
}
```

There are definitely other ways to do this that don't require MQs or environmental variables at all, easily being implemented with normal custom properties and `calc()`. However I do wonder if this could be a new and powerful way to pass data from js to css that affects the whole window and not specific elements. For example, an environmental variable that holds all current url params and allows us to set conditional styles depending of said params with MQs. Granted, could also be done with classes defined by js but its still food for thought.

I guess this dynamically changing environment variables should only be possible with js, since doing so from CSS could bring some infinite loop problems like for example:

```
@env {
  --my-env: 10px;
}

@media ( env(--my-env): 10px ){
  @env {
    --my-env: 5px;
  }
}
```
This is definitely something to think about. Maybe this is all out of the scope of css and actually better off being done another way from js, instead of trying to make MQs act like js if statements.

---------------------------------

On another note, how would the syntax work for using these environment variables in media queries? Will I only be able to query for the exact value? Or would there be any ranges possible? Something like:

```
@media ( min-env(--my-env): 0px ) and ( max-env(--my-env): 20px ) {
  ...
}
``` 

I guess this would bring its own set of complexities. I imagine this wouldn't be possible unless we can define the `syntax` for the env, like Houdini's `@property`.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 16 May 2023 19:47:16 UTC