In this video from the most recent WWDC, Jen Simmons (Web Technologies Evangelist) and Myles Maxfield (Safari and WebKit Engineer) introduce Safari 15.
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.
Great to see that things like CSS aspect-ratio and Individual Transform Properties will ship with this release. Also nice that sites like CSS-Tricks and Resilient Web Design make a cameo in there.
I’ve quickly tested bram.us in Safari 15, and the top bar nicely takes over the set CSS background-color, without manually specifying any theme-color at all.
There’s no real need to set it, unless you want control over it of course. If you’re very eager you could even animate it 😅
interval loop in the contrast color sweet spot for Safari 126 to go through the color wheel with HSL 🙂
“`js
let scheme = document
.querySelector('meta[name="theme-color"]')
let hue = 0setInterval(() => {
scheme.setAttribute('content', `hsl(${hue+=5} 50% 30%)`)
}, 50)
“` pic.twitter.com/a9hx9s9Mo7— Adam Argyle (@argyleink) June 24, 2021
This nice example where the theme-color reflects the form’s error state als put a smile on my face:
I've been experimenting with theme-color in Safari TP.
In this demo the tab bar changes color when there are errors in the form or when the form has been submitted successfully.
CodePen: https://t.co/EHCk2d4is3 pic.twitter.com/sgFQpQKStX
— Manuel Matuzović (@mmatuzo) June 24, 2021
The new “A tab is also the address bar”-approach is pretty jumpy though, as shown in this video:
Everything is moving around 🥴
I mean it looks good, but it can be potentially confusing.
I don’t want to harp on something that others have worked hard on, but I hope the team could reconsider the placement of the URL input field.
Maybe something like what IE used to do? pic.twitter.com/EDNUoGl5Hu
— (@jkspn) June 8, 2021
Let’s hope Apple also considers this an issue before shipping Safari 15.