GitHub

Install it as an agent skill

npx skills@latest add vojtaholik/good-css

For Claude Code, Codex, Cursor and any other agent that reads skills. The source and the other ways to install are on GitHub.

Entry 06

Content clear of the notch

Use it on fixed headers, bottom bars, toasts and sheets in anything that should feel like an app on a phone. Add viewport-fit=cover to the viewport meta tag, then pad those elements by the safe-area insets.

Open
On a desktop every inset is 0px: the readouts say 0px, 0px and 16px, and only the sheet shows a sulphur band. Open it in its own tab on a phone with a notch or a home indicator. Wherever an inset is not 0px, a sulphur band of that size appears and the text stays clear of it.
Code CSS · 5 lines 
.app-header { padding-block-start: env(safe-area-inset-top, 0px); }

.bottom-bar { padding-block-end: env(safe-area-inset-bottom, 0px); }

.sheet { padding-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); }
Why it works, the rules and the credits 2 reasons · 3 rules · support · credits

Why it works

  1. By default the browser keeps the page inside the safe area and leaves the notch and home-indicator zones as bare background. viewport-fit=cover lets the page paint edge to edge.
  2. env(safe-area-inset-*) gives the size of each zone, so the content moves clear while the background still fills the screen.

Rules

  1. Without viewport-fit=cover every inset is 0px and the padding does nothing.
  2. Give env() a fallback of 0px wherever it sits inside calc().
  3. Normal page content needs none of this. The header's padding covers it.

Support

Chrome
69
Firefox
65
Safari
11.1

Credits

Borrowed from: Emil Kowalski, mobile-native skill

08 / 08 6 entries

Scroll and viewport

  1. 01 Carousel on native scroll
  2. 02 Scroll area between a fixed header and footer
  3. 03 Styles that apply only when a scroller overflows
  4. 04 Anchor targets that clear a sticky header
  5. 05 No rubber-band bounce on desktop
  6. 06 Content clear of the notch