Safari 15：新界面、主题颜色，以及…CSS-Tricks 客串！

在 apple.com 上有一个 33 分钟的视频（以及资源）详细介绍了我们在今年 WWDC 主题演讲中看到的即将推出的 Safari 更改。看看谁在那里有小小的客串

也许在 iOS 上的 Safari 15 中最显眼的是底部的 URL 地址栏！Dave 在我们的小型 Discord 观看派对中推测，这可能解决了 iOS 上 100vh 相关奇怪问题。但我真的不知道，我们必须等到它发布并可以体验它的时候才能知道。我猜测人们的期望是，为了我们能够自己制作固定底部 UI，我们会这样做

.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 */
}

在桌面端，最明显的视觉特性可能是 theme-color 元标签。

这甚至不是一项全新的 Apple 独有功能。这是与 Chrome 的 Android 应用 自 2014 年以来一直使用的相同 <meta> 标签，所以您可能已经在自己的网站上使用了它。新增的功能是它支持 media 查询。

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

很高兴看到 Safari 获取 aspect-ratio 以及新的花哨颜色系统，例如 lab() 和 lch()。JavaScript 中的顶级 await 非常棒，因为它使 条件导入 等模式更容易实现。

我认为所有这些都不会 让 Alex 满意。我们并没有在 iOS 上获得替代浏览器引擎或重大的 PWA 增强功能（这两者都非常棒）。但我对所有这些表示赞赏——它们都是好东西。虽然我认为 Google 通常比互联网上普遍的讨论认为的更重视隐私，但对比一下这两家公司最近发布的功能还是很有意义的。如果您允许我略微挑选一些内容，Google 正在开发 FLoC，这是一项专门为帮助目标广告而设计的技术。Apple 正在开发 私密中继，这是一项专门用于使网页浏览无法跟踪的技术。