There is 33 minutes video (and resources) on, which covers the upcoming Safari changes we’ve seen in WWDC’s keynote address in much more detail. See who has a small thumbnail there:

Perhaps the most notable thing about Safari 15 on iOS is URL bar at the bottom! Dave speculate in our small Disagreements viewing parties that this is likely to fix strange things 100vh stuff On an iOS device. But I really don’t know, we have to watch it when it comes, and we can play with it. I would guess the expectation is that we could do our own fixed-based interface stuff, we will do:

.bottom-nav { 
  position: fixed; /* maybe sticky is better if part of overall page layout? */
  bottom: 100vh; /* fallback? */
  bottom: calc(100vh - env(safe-area-inset-bottom)); /* new thing */

The most visible visual feature on the desktop is probably theme-color Meta tags.

This isn’t even just a brand new Apple thing. This is the same <meta> tag used by the Chrome Android app since 2014, so you may already be doing it on your own site. In addition, it supports media queries.

<meta name="theme-color" 
      media="(prefers-color-scheme: light)">
<meta name="theme-color" 
      media="(prefers-color-scheme: dark)">

It’s great to see Safari get aspect-ratio and new great color systems like lab() and lch() as well. Top level await JavaScript is great because it makes patterns conditional imports easier.

I don’t think all of this would do satisfies Alex. We didn’t get exactly alternative browser engines on iOS or significant PWA improvements (both of which would be really great to see). But I thank you for everything – it’s good stuff. While I believe that Google tends to take privacy more seriously than what a general Internet conversation should believe, it’s considerable to compare each company’s newly released features. If you’ll excuse a little cherrying, Google will work FLoC, a technology specifically designed to help with targeted advertising. Apple is working Private message, a technology that makes web browsing easy to track.


Please enter your comment!
Please enter your name here