DEV Community

Mario Nachbaur
Mario Nachbaur

Posted on • Edited on

78 21

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.

Alt Text

Excuse me, I'd like to TAP those buttons!

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


Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

Success!

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (4)

Collapse
 
nateous profile image
Nate

Thanks for the quick tip!

Collapse
 
marionauta profile image
Mario Nachbaur

My pleasure!

Collapse
 
girlsugames profile image
GirlsUGames

Nice snippets.

Collapse
 
jrakhimov profile image
Javokhir Rakhimov
Comment hidden by post author

Some comments have been hidden by the post's author - find out more

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay