CSS Env Variables For Today’s Edge Screen Devices

Anyone who owns a smartphone will have noticed that for some time that a rush began to produce mobile devices without mechanical components. Removing any external physical buttons to allow the device screen to take advantage of all the available space. This is leading us to have devices completely based on gestures that can only be operated through the screen.

As a result, web technologies must also constantly adapt to hardware evolution, in order to provide developers new (sometimes very creative) ways to ensure a pleasant user experience.

The iPhone X case

Credit: themockup.club

Apple’s iPhone X was the first commercial mobile device without any physical or touch buttons and with the rounded notch. It was really innovative, but it introduced a lot of new paradigms and rules for web development and design. In subsequent years, many other devices followed this technical adaption expanding the potential issues relating to edge screens.

The WebKit team proposed new CSS specifications to provide alternative ways to handle these kinds of devices and released a small guide to illustrate how to adapt our websites or PWA. Specifically aimed at the new era of gesture-only interactions with our mobile devices.

The new screens with notches introduced a kind of “safe area” for content showed on the page, like the safe area that you must follow when making a video or the trim area when you make a print. In this case, the content outside the designed area may interfere with the OS’s user interface and causing bad experiences.

The problems now are that we don’t know the size of the safe area that may be different between each device, and we can’t add extra-padding when our users are not using such edge-to-edge screens. So, what can we do to prevent this bad issue? The answer is… trust the browser.

Right now, not many companies have fixed their sites or web app to avoid a bad user experience on those type of devices. Sometimes, important UI components are placed right under an OS overlapping element that prevents the direct interaction with the component itself, resulting in something really weird and so ’90.

Here are some example taken from Safari mobile browser on the iPhone X. Although these examples are true in every new iPhone since Apple removed the home button from any of their mobile devices:

Microsoft.com

Airbnb

Yahoo

CSS Tricks

Environment variables

Modern browsers have now exposed their private (user-agent) variables called environment variables defined based on the device’s hardware, operating system, and other things. With the latest specification, you can now get those variable values inside your CSS and use them to fix your design on devices that have a notch or overlapping OS UI elements.

At the moment, you can only use the pre-defined user-agent variables but, in the future, we’ll be able to define our own custom read-only environment variables.

By default, browsers will follow a standard behavior if no custom directives are provided by the developer, but the result may not be optimal for all the designs. In fact, designers must start to think and design with this kind of rules in mind in order to provide better experience possible to their users.

If you open this live demo from safari on iPhone X you will be able to see the default behavior on the landscape for yourself.

There are some key differences from the standard custom properties (sometimes called cascading variables):

  1. They can be used as any value to any property or @ rule.
  2. They are defined once, globally, and can never be changed
  3. They can be defined by either the user agent or the style-sheet author (not yet defined)
  4. They can be used with the env() function, not var()

Here is the full syntax:

env( <variable_name>, <fallback_value>? )

The variable name is the symbol string used to recall the variable while the fallback is not mandatory, and it represents the value used if the variable doesn’t exist. Right now there are four variables we can use and each of them has a specifically defined type.

Variable Name Type
safe-area-inset-top length
safe-area-inset-right length
safe-area-inset-bottom length
safe-area-inset-left length

 

credit: webkit.org

The safe area will automatically adjust following the screen orientation, this means that if we rotate the device the safe-area-inset-bottom will be always at the bottom. You will notice that in landscape mode the safe-area-inset-left is not 0 because of the notch, this is not true in portrait mode where the value of these variables will be 0.

Let’s try to fix it

Let’s start using them in our CSS. Each variable can be used in any property that accepts a length value, this means that we can use them for padding, margins etc.. and even @media! First of all, we must tell the browser we want to define a custom behavior and then use these variables. To do this we need to define the viewport-fit=cover for the viewport meta tag.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Now we are able to get the environment variables by using the env() function to retrieve the value, we can use an interactive element stuck to the bottom of the screen as an example. Here we have a basic code snippet that doesn’t use the environment variables that show the issue mentioned above.

.Button.Sticky {
  position: sticky;
  bottom: 0;
  padding: 16px 32px;
}

We can’t simply replace the padding values with the variables because their value can be 0 based on the device orientation, resulting in odd visual effects. Since not all the browsers can read these variables the property will be discarded on those browsers and our element will not have the padding at all. Let’s start using the calc() function to sum the custom padding to the variable value:

.Button.Sticky {
  position: sticky;
  bottom: 0;
  padding:
    16px
    32px
    calc( env(safe-area-inset-bottom) + 32px )
    32px;
}

If the variable exists and his value is not 0 our final bottom padding will be very huge resulting in something like this:

We can try to fix this issue by reducing the bottom padding, but if the variable doesn’t exist or it resolves to 0 we’ll have a weird and not harmonic button with a bottom padding smaller than others. Really weird. At the moment we can try to find the correct compromise defining padding that will be acceptable in both situations.

The future

To really solve the above issue, we want to specify that our padding should be the default padding or the safe area inset, whichever is greater. This can be achieved with the brand-new CSS functions min() andmax() which will be available starting in Safari Technology Preview 41 and the iOS 11.2 beta and other browsers will follow. Both functions take an arbitrary number of arguments and return the minimum or maximum. They can be used inside of our calc() function, or nested inside each other, and both functions allow calc()-like math inside of them. Our snippet will be then something like this:

.Button.Sticky {
  position: sticky;
  bottom: 0;
  padding:
    16px
    32px
    max(32px, env(safe-area-inset-bottom))
    32px;
}

 

Progressive Enhancement

Since not all of these new super cool stuff is supported everywhere we must care about the progressive enhancement ensuring that our element will have the correct padding even on those browsers that aren’t already updated. Here is the full code snippet using the @support media features to detect if we can use these features:

@supports (padding: max(0px)) and (padding: env(safe-area-inset-bottom)) {
  .Button.Sticky {
    position: sticky;
    bottom: 0;
    padding:
      16px
      32px
      max(32px, env(safe-area-inset-bottom))
      32px;
  }
}

Browser Support

Right now each Chrome, Safari, and Firefox (from 65) have introduced the support to the environment variables so you can use them on almost all mobile devices running iOS and Android (using any chromium based browser), but only Safari implemented the min() and max() functions.

You can check the full support matrix for Environment Variables below –


Data on support for the css-env-function feature across the major browsers from caniuse.com

SHARE ON
CSS Env Variables For Today’s Edge Screen Devices
Posted in CSS

You May Also Like

Leave a Reply

Your email address will not be published.