Skip to content

[mediaqueries] Add env expression support #9177

@zDaleZ

Description

@zDaleZ

So, it supports calc() now, but no env() support.
When Window Overlays Control 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions