Design for Safari 15
Design 入门 20m

为 Safari 15 设计

Design for Safari 15

2021年6月10日

在 Apple 官方观看视频

一句话判断

Safari 15 的标签栏改版和网站通知机制是这场 Session 的重点——如果你负责一个网站的 PWA 化或者 Safari 兼容，花 20 分钟看这场 Session 值得。

这场 Session 讲了什么

Safari 15 在 macOS 和 iOS 上都带来了视觉上的重大变化。macOS 上的标签栏从独立的一行变成了紧凑的地址栏内嵌模式（类似 Chrome 的 compact tab design），这让网页内容获得了更多的垂直空间。iOS 上的标签栏则移到了底部，方便单手操作。

Session 从设计角度讲解了网站应该如何适配这些变化。标签栏颜色现在会自动从网站的 meta theme-color 提取，所以设置正确的主题色变得比以往更重要。网站的自定义字体和 CSS 渐变也可以影响标签栏的视觉效果。

Web Push 通知在 Safari 15 上得到了增强。macOS 上的 Safari 现在支持标准的 Push API 和 Notification API，这意味着 PWA 可以像原生 app 一样发送推送通知，不需要通过 APNs 的旧方案。iOS 上暂时还不支持 Web Push。

值得深挖的点

theme-color 对 Safari UI 的影响

Safari 15 会从 <meta name="theme-color"> 中提取颜色，应用于标签栏、地址栏和系统切换器的背景色。如果你不设置这个 meta 标签，Safari 会自动从网页内容中采样，但结果往往不准确——比如一个以图片为主的页面可能会被采样出一个奇怪的颜色。建议在 HTML 的 <head> 中显式声明：

<meta name="theme-color" content="#FF5733">

Web Push 的权限模型差异

Safari 15 的 Web Push 使用标准的 PushManager.subscribe API，和 Chrome/Firefox 一致。但权限请求的时机仍然受 Apple 的严格管控：只能在用户主动交互（比如点击按钮）时请求权限，不能在页面加载时自动弹出。如果你的网站在 Chrome 上是自动弹权限的，在 Safari 上需要改成按钮触发。

代码片段

<!-- 为 Safari 15 配置标签栏主题 -->
<head>
    <!-- 标准主题色 -->
    <meta name="theme-color" content="#1a73e8">
    
    <!-- 深色模式下的主题色 -->
    <meta name="theme-color" 
          content="#1a73e8" 
          media="(prefers-color-scheme: light)">
    <meta name="theme-color" 
          content="#8ab4f8" 
          media="(prefers-color-scheme: dark)">
</head>
// Safari 15 Web Push 订阅
async function subscribeToPush() {
    // 检查浏览器是否支持 Push API
    if (!('PushManager' in window)) {
        console.log('当前浏览器不支持 Web Push');
        return;
    }
    
    // 请求通知权限（必须在用户交互中调用）
    const permission = await Notification.requestPermission();
    if (permission !== 'granted') return;
    
    // 订阅推送服务
    const registration = await navigator.serviceWorker.ready;
    const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: 'YOUR_VAPID_PUBLIC_KEY'
    });
    
    // 将订阅信息发送到你的服务器
    await fetch('/api/push/subscribe', {
        method: 'POST',
        body: JSON.stringify(subscription.toJSON())
    });
}
/* 适配 Safari 15 底部标签栏的安全区域 */
body {
    /* 底部标签栏占约 49px，避免内容被遮挡 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 为固定定位的底部元素预留空间 */
.bottom-bar {
    position: fixed;
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

最佳实践

网站要适配 Safari 15 的「自动主题色」行为，必须在每个页面设置 theme-color。如果你的网站有多个主题（比如用户可以切换深色/浅色），用 JavaScript 动态修改 meta[name="theme-color"] 的 content 属性，Safari 会实时响应这个变化。

如果你的网站需要 Web Push，现在就开始实现基于 service worker 的推送方案。Apple 虽然在 macOS 上支持了标准 Push API，但 iOS 上的时间表还不确定。建议用渐进增强的方式：检测 PushManager 是否存在，存在才展示推送功能入口。

还有什么值得关注

  • Safari 15 新增了 CSS color-mix() 函数的预览支持，可以动态混合两种颜色。
  • aspect-ratio CSS 属性现在在 Safari 中完全支持，布局时不再需要 padding hack。
  • lazy loading 属性在 <img> 和 <iframe> 上现在也被 Safari 15 支持，对页面加载性能有直接帮助。
WWDC 2021