• Safari 15: New UI, Theme Colors, and… a CSS-Tricks Cameo!
  • Originally by Chris Coyier
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Hoarfroster
  • Reviewer:

Apple.com has a 33-minute video (and related resources) that covers in more detail the upcoming Safari changes we saw during this year’s WWDC keynote. See who has a little cameo:

Perhaps the most striking feature of Safari 15 for iOS is the URL bar at the bottom! Dave speculated during our little Discord Watch event that this might solve the weird issue of 100vh stuff on iOS. But I really don’t know, we’ll have to see when it comes out before we can try to use it. My guess is that in order for us to do our own fixed bottom UI thing, we need to write:

.bottom-nav { 
  position: fixed; /* Maybe sticky is better? * /
  bottom: 100vh; /* Backward compatibility? * /
  bottom: calc(100vh - env(safe-area-inset-bottom)); /* New stuff, OMG */
}
Copy the code

On the desktop, the most noticeable visual feature is probably the theme-color meta tag.

It’s not even something unique to the new Apple. This is exactly what Chrome’s Android apps have supported since 2014, so you’re probably already using it on your own sites. In addition, it supports media queries.

<meta name="theme-color" 
      content="#ecd96f" 
      media="(prefers-color-scheme: light)">
<meta name="theme-color" 
      content="#0b3e05" 
      media="(prefers-color-scheme: dark)">
Copy the code

It’s nice to see Safari getting aspic-ratio and new fancy color systems like Lab () and LCH (). Top-level await in JavaScript is great because it makes patterns like conditional imports easier.

I don’t think any of this will satisfy Alex (or see my translation await URL on nuggets). We didn’t completely get alternative browser engines or significant PWA enhancements on iOS (both of which are well worth a look), but I applaud all of this — it’s good stuff. While I do think Google generally values privacy more than your average Internet chatterbox would have you believe, it’s worth noting how each company compares its newly released features. If you’ll excuse the nitpicking, Google is working on FLoC, a technology very specifically designed to help with targeted advertising. Apple is developing Private Relay, a technology designed to make web browsing untraceable.

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.