Week 192 was posted by Charanjit Chana on 2021-06-28.
If you would like to know more and see some examples of what the changes coming to Safari in MacOS Monterray might mean for you, I highly recommend watching the Design for Safari 15 developer video from WWDC.
By giving you the option to blend the lines between where the browser ends and your website begins, the Safari team have given us all another job to do but the execution is pretty good. It's actually powered by a meta tag that has existed for some time:
<meta name="theme-color" content="#FF2222">
I've set the theme-colour property on a few projects in the past but as an iPhone user I've never really seen the impact it can have. Now with the Safari Technology Preview, I've been able to see the real impact of making a choice.
Turns out I only have the theme set for @1thingaweeek which fits the theme of the site pretty well. Thought this might look a little more out of place but looks OK to me.
View on twitter
For this blog, it means the browser bar at the top takes on a colour that complements the theme. For my own portfolio site, it chooses my background colour. It works out quite well but means the subtle gradient I've applied causes a break in colour on the right.
For my portfolio @ http://charanj.it it did a really good job of picking the right colour but because of the subtle gradient I use I might explicitly set a colour and/or rework the position of the gradient.
View on twitter
Manuel Matuzović has put forward an interesting idea where you can use the feature to highlight form validation issues.
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.
View on twitter
I highly recommend watching the video above. There are some great tips about using environmental variables as well as covering the changes to Safari's layout.
Overall, I think the changes are pretty good. It makes the browser feel bigger, but without using it day to day, I'm not sure how jarring the experience might be. The theme-colour feature seems smart enough itself, but I've seen Safari Technology Preview and give it a go now.
Tags: browsers, development, safari, web, wwdc