[csswg-drafts] [mediaqueries] Add env expression support (#9177)

DellZHackintosh has just created a new issue for https://github.com/w3c/csswg-drafts:

== [mediaqueries] Add env expression support ==
So, it supports `calc()` now, but no `env()` support.
When `Window Overlays Controls` is enabled, the CSS below might useful:
```
#search {
    display: none;
}

@media (min-width: calc(100% + 250px - env(titlebar-area-x, 100%)) {
    /*If the free width of the title bar is longer than 250px, show the search box.*/
    #search {
        width: 250px;
        display: block;
    }
}
```
Or for the non-rectangular displays:
```
#sidebar {
    display: none;
}

@media (min-width: calc(env(safe-area-inset-left) + env(safe-area-inset-right + 800px)) {
    /*Ensure the width of safe area is enough*/
    #sidebar {
        display: block;
    }
}
```
Sum up my idea, it's necessary to add `env()` support for Media Queries, the `env()` is just the most useful thing for `calc()`. It's perfect only if both are supported.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9177 using your GitHub account


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

Received on Friday, 11 August 2023 05:41:43 UTC