Safari 15: New UI, Theme Colors, and... a CSS-Tricks Cameo!

Safari 15 Shakes Up the Web’s Most Personal Browser

Apple’s WWDC 2021 keynote touched on a slew of OS-level announcements, but the deeper dive into Safari 15 reveals a genuinely interesting shift for web developers. A 33-minute session on developer.apple.com digs into the changes, and eagle-eyed viewers might spot a familiar site in the presentation’s examples.

To declare overflow: scroll on the parent container.

.bottom-nav { 
  position: fixed; /* maybe sticky is better if part of overall page layout? */
  bottom: 100vh; /* fallback? */
  bottom: calc(100vh - env(safe-area-inset-bottom)); /* new thing */
}

The Meta Tag Gets a Makeover

On the desktop side, the biggest visual shift is how Safari now honors the theme-color meta tag. This isn’t new territory—Chrome for Android has supported it since 2014—so many sites may already be set. What’s new is support for media queries within the tag, letting you tailor the browser’s chrome to specific contexts.

The takeaway for developers: the code snippet below is how you’d enable adaptive theming.

<meta name="theme-color" 
      content="#ecd96f" 
      media="(prefers-color-scheme: light)">
<meta name="theme-color" 
      content="#0b3e05" 
      media="(prefers-color-scheme: dark)">

More Platform Parity, and a Look Ahead

Rounding out the update are solid additions like CSS aspect-ratio, the lab() and lch() color functions, and top-level await in JavaScript, which simplifies patterns like conditional imports.

Still, it’s not a complete platform victory. For critics pushing for alternative browser engines on iOS or substantial PWA upgrades, this release doesn’t fully deliver. The feature set does, however, point to a fresh divergence in priorities: Chrome’s recent work pushes technologies like FLoC, aimed at ad targeting, while Safari counters with Private Relay, which is designed to make browsing harder to track.