Dan Jordan

Styling the Tab Bar in Safari 15

Safari 15 has brought with it a redesign of the tab bar. In macOS and iPadOS the tab bar and URL bar are all on the same line in a much more condensed design; in iOS the tab bar has moved to the bottom of the screen allowing users to switch between tabs with a swipe of their thumb.

The new tab bar will change colour depending on your design. Safari will try to match the background colour or the header colour of your site.

To choose the colour yourself, you can add a meta tag to the <head> of your site.

<meta name="theme-color" content="#2e3037" />

Safari allows you to choose different colours depending on a media attribute so you can have different a colour for users with dark mode enabled.

<meta
  name="theme-color"
  content="#ebe5ce"
  media="(prefers-color-scheme: light)"
/>

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

Caveats

iOS tab bar

The new tab bar in iOS is at the bottom of the screen hovering over the webpage and is likely to cover the UI of many web pages with static navigation. Developers can work around this by using env() in CSS.

env() is a way for the browser to provide you with values related to the current environment.

You'll need to tell the browser to use all available space with a viewport meta tag.

<meta name="viewport" content="viewport-fit=cover" />

Then you can use safe-area-inset-bottom to push your UI above the tab bar.

body {
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px));
}

There are four different safe-area-inset-x values and env() provides a second parameter for a fallback if the environment variable is not set.

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right, 20px) env(
      safe-area-inset-bottom
    ) env(safe-area-inset-left, 20px);
}

Further Reading