Checking for CSS environment-variable support

Published on 2019-04-03 by Brad Bice

Supporting Firefox when styling for mobile devices notches.

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

@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))');
    }
}