Avoid notches in your PWA with just CSS

At work, I'm usually creating native mobile apps, both in Swift and React Native. But for a new project, we decided it was better to implement a progressive web app. I have experience in HTML, CSS & JavaScript, so I thought there won't be any problems.

All was going according to plan until we met a new enemy: The iPhone X.

Native background

In the native world, we have something called safe area, a "box" where we can put things inside and be sure they'll be outside of the notch and bottom areas.

This way it's easy to tell the app to place some component at the top of the screen, but move it a little to the bottom if there's a notch in the way.

For the PWA, the easiest way to avoid that stupid bottom bar is by adding some padding-bottom, but that would break all other devices. I thought to add a CSS class conditionally with JavaScript, but that seemed like a hack.

CSS Environment Variables

As you may know, we can now define and use custom CSS variables with var(--padding-bottom). The same way, browsers can also define their own. They're in the process of standardization, but Apple has created some of their own.

.navbar {
    padding-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

We define the bottom padding for browsers that don't yet support environment variables. If we were to omit the first rule, the second one is broken and nothing applies.

For browsers that do support them, we want the bottom padding to be equal to safe-area-inset-bottom, and fall back to 0 if the variable isn't set.

Similarly, there are also variables for the top, left and right screen edges.