Steve Barnes' World of Happiness

Blog

The coolness of Safari 15 (and the end of the white flash).

Version 15 is a cool one for Safari users like me. I've heard ongoing opinionation from the personal tech and developer communities as it's been hurriedly refined over the summer after its striking interface changes were criticized, particularly the cramming of too many controls into a single row on the iPhone layouts. Rather than remaining heavy-handed, it looks like the Safari team rethought, refined, and turned many of the boldest changes into deactivatable options, which I think is best for everyone.

The most exciting change for me might be the most striking: the browser chrome's ability to change colour according to the site's specifications. Other browsers have made their interfaces customizable by letting the user pick a pre-designed theme, akin to snapping a decorative plastic plate over your handheld game console. But Safari's approach results in a totally different feel, and it's an interesting choice. "Striking" is right, but I had to chew on it before deciding I loved it.

Here's an example of a thrown-together web page taking advantage of this on an iPad. Rather than a dominating white or grey title bar, the page's lavender colour extends to the screen's upper edge, beneath the controls. Logically, this seems to imply that the browser's controls (including even tabs for other web sites) are "part" of this page, and I suppose that's what has kept other browser teams from implementing or thinking of it. Once I rationalized that, though, the entire web started to feel different. Web pages felt more like "an app" (which is certainly a reasonable term for many of today's web pages – apps written for browsers). If not that, at least it makes web sites feel more "privileged" about their role within the browser, as though they have temporary stewardship or custody of those controls and tabs. It's initially uncomfortable because it's a challenge to long-established convention, like a fiddler at a Victorian dinner party or something: you won't love it if you can't loosen up a little, but once you do, you might find yourself yearning for it again.

One pattern that seems almost prescribed is to colour the toolbar as one with the page's uppermost banner, creating the appearance of a tall "cap" on the entire site, like the top layer of a cake. If you're using Safari 15, you can see this on the WebKit blog – or if you're not, you can imagine what it would look like for the darkish blue to occupy that upper space. I think it's quite handsome. (It occurred to me that the line between this amalgamated banner and the proper page could be wavy, making that "cake layer" look more "iced." One idea among limitless ones, surely.)

The chrome colour must be a single solid colour, making this a deceptively simple implementation – you can't design a pattern to reside behind the browser controls – and that's actually something that makes this whole ability feel kind of fun, more like the earlier days of the web. Unlike some of today's fancier web standards, you have only to copy and paste one line of HTML to get it working. (But if you do want to get fancier, you can dynamically change this colour with JavaScript.)

One final little thing about Safari 15. I've tried loading a few web pages with different styles and colours, and I think that – at long last – the page content is not first rendered as a solid white rectangle before it loads, including on the Mac. We're well into the dark-golden era of dark mode as a standard, both on Apple platforms and the web generally, and Safari finally seems to act like it.