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