Checking for CSS environment-variable support

Supporting Firefox when styling for mobile devices notches.

Firefox does not support environment variables for mobile device inset (notch) styling.

1
2
3
4
5
6
@media only screen and (max-device-width: 504px) and (orientation: landscape) {
    @supports (padding-left: env(safe-area-inset-left)) {
        padding-left: unquote('max(16px, env(safe-area-inset-left))');
        padding-right: unquote('max(16px, env(safe-area-inset-right))');
    }
}

Also related to Getting CSS Level 4 max() functions to work with Sass variables