Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for Safari, and learn how to incorporate the tab bar in your designs. We'll also take you through features like Live Text and accessibility best practices, explore the latest updates to CSS and Form Controls, and learn how to use the aspect-ratio property in CSS to create incredible websites.
That’s how you can create a feeling of your website or web app filling the whole window in Safari 15 on macOS and Safari for iPadOS and iOS 15. Next, let’s look at two other small adjustments that you can do to really take your website to the next level. Many of us have a lot of tabs open in our web browsers as we work. The new Safari provides an intuitive way to organize those tabs into groups. I really like this. I’ve organized my work projects into separate groups and named each whatever I want, and then I can put them away. Put way the things that I’m not working on, knowing that I can reload those tabs later on any device, since Tab Groups are synced across macOS, iOS and iPadOS. While Tab Groups give us the ability to declutter the tab bar, it still is possible to have a lot of tabs open in any one window. When there are a lot of tabs, the favicon becomes pretty important for easily identifying which tab is which. You’ll want to make sure you provide a great icon for your site, one that supports high-resolution devices. A favicon with a transparent background can look especially great.
By the way, a lot of teams use automated tooling to generate the different sizes and formats of icons to support a wide range of devices. Often, such tooling generates code that specifies a theme color along with the icon code for the HTML head. Or perhaps your CMS or your front-end framework is defining a theme color, and you didn’t realize it. Check and see. Test that color and see if it’s a good one for the design of your site, perhaps changing it to a better one. When most people look at the new tab bar, they’ll just see all their tabs on one line. As someone who makes websites, you’ll probably notice that when the site is loaded into a browser window, the tab for that site shows its domain name. And when a site is in a background tab, the web page title is what’s displayed, the text in the title tag in the HTML head. The space for the page title can be limited, so crafting a thoughtful pattern for your web page title is important. The quicker the title gets to the point, the easier it is for users to find the tab that they want. Some sites put the name of the website first and the name of the page second. Instead, put the content title first. That way, if someone has your site open in multiple tabs, it’s easier to tell which tab is which. The color of the tab bar, the favicon, and the page title are all parts of a site to design with intention. They don’t show up on the web page itself, but they deeply impact someone’s experience of your website or web app. To show you more on how to leverage the power of the theme-color meta tag, here’s Myles. Hi, I’m Myles. And I’m working on Dog Dog DC, which is a website where people can stream videos of their dogs during WWDC. Here, you can see Maggie’s stream in Safari. She looks so happy! I’ve started the stream out paused for now, but I’ll unpause it for just a little.
Good catch. And on the right side of Dog Dog DC, you can comment in real time to express just how good Maggie is.
Now, at the top of the Safari window, Safari 15 colors the tab bar black, which is actually the background color of my page. You can see the black color is used as the background of the center content area at the bottom. And that black color looks good up there in the tab bar. The whole window looks like it has a holistic, coherent design. You can also see in the tab bar that Safari is mentioning my page is Not Secure, which I expect because this is my development environment. Now, we’ve also got a floating blue bar at the top of the website that would look really great extended up into the tab bar. So if I go into my source code in the Editor over here...
I can override the black color that Safari automatically discovered to match this beautiful blue color.
I’ll add this one meta tag, which will extend that blue color up into the tab bar. Then I’ll reload and see what it looks like.
That looks pretty good, but we’ve designed Dog Dog DC to contain a gray newsletter bar at the top that’s horizontal, which actually interrupts the flow of color a little bit into the top tab bar. In order to get an uninterrupted canvas, let’s denote the newsletter bar another way rather than background color.
Hmm. I’ll keep playing around with it later. For now, I’ll just remove the newsletter bar.
Wow, that now looks great. The color is uninterrupted and really shines in Safari 15. And of course, the same effect works great on iPadOS too. All right. Now, I could sit here and watch Maggie all day, but what I really want to do is bring her front and center and dim out everything except her and the chat area, because I take those doggo comments seriously. So of course, I’m going to tap this Theater Mode button.
And, of course, I can’t forget to reset the element when exiting Theater Mode.
Let’s see what it looks like now.
Perfect. And there we go. That looks so much better. Now I can really focus on Maggie. Back to you, Jen. Dog Dog DC. I’m gonna make sure to visit that site once it’s online, Myles. Thanks. I really love how this opens up another way for web designers to impact people’s visceral experience of the web. Now let’s dive a bit deeper into what’s happening on iOS. You’ll notice the theme color is used here, too, at the top, wrapping around the sensor housing so the web page or web app fills the whole screen. You’ll also notice that we’ve moved the tab bar to the bottom of the screen. This puts it directly under the user’s thumb, making it easier for them to reach, especially if they’re using their phone one-handed. Swipe sideways on the tab bar to switch between the tabs. And swipe up to see a grid of all the tabs and to access Tab Groups. When a user scrolls the web page, the tab bar minimizes down to just the domain name at the very bottom to ensure people know where they are. When they pull the page back down, the expanded tab bar reappears. All of this means that the websites and web apps that you make are the shining star of the show. But what if you’ve built something important at the bottom of the page and now that gets covered up by the new tab bar? This is where you want to use environment variables in your CSS to ensure there’s enough padding or margin or a grid track or however you write your layout code. You can use an environment variable to make sure any UI or content that would be affected by the tab bar scoots out of the way. So what is an environment variable? It’s a dynamic measurement that’s provided by the browser. You can see here, the green is what’s called the safe area. When the tab bar is expanded at the bottom, the safe area starts above it. As the tab bar minimizes, the dimensions of the safe area change. env(safe-area-inset-bottom) is a measurement of however many pixels it is from the safe area to the bottom of the viewport. It’s a lot like the var function in CSS custom properties. Maybe you’ve used custom properties to turn all your colors into variables, for instance. Only instead of you defining this variable, the browser defines it. It’s providing information about the environment. And you can use that length measurement any place in your code, including inside a calc. Here, my footer is position: sticky with some padding to push my two links away from the edges of the footer. I defined a padding bottom of 1rem + env(safe-area-inset-bottom). In many contexts, that’ll be 1rem + 0. On iOS, it will be 1rem plus the distance that’s needed to clear the tab bar. There are four environment variables that provide a measurement from the edge of the safe area to the edge of the viewport: env(safe-area-inset-top), -right, -bottom, and -left. These environment variables don’t just work in Safari. They’re defined in a CSS specification and work across different browsers, devices, and operating systems. If you want to make vertical adjustments, you do need to take the action of using an environment variable. Safari won’t try to move content around by default. When an iPhone is rotated sideways, however, it works a bit differently. There’s also a safe area defined to avoid the sensor housing and the round edges of the screen. By default, Safari will automatically move web content in from the left and right edge and put it into the safe area. You might wonder why. Well, if instead, Safari extended every site to the left and right edge, content could be lost. Here, the text is covered up. And that’s--that’s bad for usability. To prevent data loss, Safari will scoot content into the safe area, including when a site is using a meta viewport tag with width=device-width, which is the meta tag that’s commonly used in responsive web design. But of course I’d like this design to look better. I’d like for my purple header and the photo to extend to the edges of the screen. I can signal to Safari that I want the browser to extend the content to the left and right edges by changing the meta viewport tag to viewport-fit=cover. Now I’m responsible to make sure that the layout works. I’ll use environment variables to ensure the content is fully visible. I can define a left margin of env(safe-area-inset-left) on the header text and on the paragraph text. For more information about safe area insets and environment variables, check out the article “Designing Websites for iPhone X” on the WebKit Blog, linked in the notes for this session. Let’s go out to Myles and see how environment variables work in action. Now let’s see what Dog Dog DC looks like in Safari on iPhone. Over here on my iPhone, we can see Maggie the same way we were seeing her before, but this time on a smaller device. But wait. It looks like there’s a problem. When the user scrolls the chat area, the input area overlaps the tab bar. Dog Dog DC is explicitly using vh units to size itself from top to bottom, explicitly taking exactly the size of the whole viewport, which it’s now sharing with the tab bar. As a user, I can scroll to minimize the tab bar, and that’s pretty easy. But as a developer, I want to make sure that my users have the best experience possible even when they scroll. Luckily, I can use safe area insets to move the input area up by the appropriate amount. All I have to do is add bottom padding and set it to safe-area-inset-bottom.
Then I just reload my web page.
I actually just used one of my favorite new features of Safari 15: pull to refresh. Hmm. That’s pretty close to what I want, but it looks like now it’s a little too high. Oh, I see the problem. I’ve given the input area bottom padding when it already has a bottom margin, and those two things stack vertically. So it looks like I should just update the existing margin to use the safe area inset instead. Let’s adjust these styles again and see what it looks like now.
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.