Highlight
Safari 15 重新设计了浏览器界面，macOS 上标签栏与地址栏合并为单行，iOS 上标签栏移至底部。网站可以通过
theme-colormeta 标签控制标签栏颜色，用 CSSaspect-ratio属性简化布局，用env(safe-area-inset-bottom)适配底部标签栏。
核心内容
Safari 15 是 Safari 视觉设计最大的一次更新。浏览器界面从”主导网页”转变为”让位给网页”。
macOS 上的标签栏不再占据独立的一行，而是与地址栏合并。整个浏览器界面压缩到一行，网页内容获得了更多垂直空间。iOS 上的标签栏移到了屏幕底部，用户单手就能操作。
这些变化对网页设计师有直接影响。
控制标签栏颜色
Safari 15 会从网页中提取颜色应用到标签栏背景。开发者可以主动控制这个颜色：
<head>
<!-- 基础主题色 -->
<meta name="theme-color" content="#0071e3">
<!-- 适配深色模式 -->
<meta name="theme-color"
content="#0071e3"
media="(prefers-color-scheme: light)">
<meta name="theme-color"
content="#000000"
media="(prefers-color-scheme: dark)">
</head>（02:50）
关键点：
theme-color放在 HTML head 中，Safari 页面加载时立即获取media属性是 HTML 规范的新增内容，Safari 15 首次支持- 不支持 media 属性的浏览器会取第一个
theme-color，所以把 fallback 放第一个 - 也可以用 JavaScript 动态修改
// 动态切换主题色
function enterTheaterMode() {
document.querySelector('meta[name="theme-color"]')
.setAttribute('content', '#000000');
}
function exitTheaterMode() {
document.querySelector('meta[name="theme-color"]')
.setAttribute('content', '#0071e3');
}（11:05）
适配 iOS 底部标签栏
iOS 15 的标签栏在屏幕底部，用户滚动时它会缩小为一条域名提示。网页底部的内容可能被遮挡。
用 CSS 环境变量处理：
.footer {
position: sticky;
bottom: 0;
padding: 1rem;
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}（14:21）
关键点：
env(safe-area-inset-bottom)的值会随标签栏展开/收起动态变化- Safari 自动重新布局页面
- 四个方向都有对应变量：
top、right、bottom、left - 可以在
calc()中使用
viewport-fit=cover 全屏体验
iPhone 横屏时，Safari 默认把网页内容缩进安全区域，避免被刘海和圆角遮挡。如果网站设计已经考虑了这些区域，可以用 viewport-fit=cover 让内容延伸到边缘：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">（16:03）
配合环境变量确保文字可读：
.header-text {
margin-left: env(safe-area-inset-left);
}
.paragraph {
margin-left: env(safe-area-inset-left);
margin-right: env(safe-area-inset-right);
}详细内容
CSS aspect-ratio 属性
以前要让一个 div 保持固定宽高比，需要用 padding hack 或 JavaScript。Safari 15 支持原生的 aspect-ratio：
/* 正方形 */
.card {
aspect-ratio: 1 / 1;
}
/* 简写 */
.card {
aspect-ratio: 1;
}
/* 16:9 视频 */
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
/* 黄金比例 */
.banner {
aspect-ratio: 1.618;
}（24:38）
关键点：
- 内容过多时，盒子默认会增长高度以避免溢出
- 要强制保持比例（允许溢出），加
min-height: 0 - 可以配合
overflow: scroll处理溢出内容 - 支持小数写法，如
aspect-ratio: 1.618
Flexbox gap
Safari 14.1 开始支持 Flexbox 的 gap 属性：
.navbar {
display: flex;
gap: 1rem;
}（29:22）
不再需要为子元素单独设置 margin 然后处理边缘元素的额外间距。
表单控件更新
iOS 15 重新设计了表单控件，外观更接近原生 UIKit：
<!-- 日期选择器 -->
<input type="date">
<!-- 时间选择器 -->
<input type="time">
<!-- 颜色选择器（带取色器） -->
<input type="color">（30:38）
颜色选择器新增三个面板和取色器（eyedropper）。如果网站覆盖了默认样式，自定义样式会正常应用。
页面标题优化
新标签栏中空间有限，页面标题的写法影响用户体验：
<!-- 不好：网站名在前 -->
<title>My Company - Products - Detail</title>
<!-- 好：内容标题在前 -->
<title>Detail - Products - My Company</title>（07:37）
用户同时打开多个标签时，前面的内容标题更容易区分。
Favicon 建议
- 提供高分辨率图标适配 Retina 屏幕
- 透明背景的 favicon 在新标签栏中效果更好
- 检查自动化工具生成的
theme-color，确保颜色与网站设计匹配
核心启发
1. 为网站设计沉浸式品牌体验
用 theme-color 让 Safari 标签栏与网站主色调一致，配合 viewport-fit=cover 让头图延伸到屏幕边缘。入口 API：<meta name="theme-color"> + viewport-fit=cover。
2. 构建响应式图片画廊
用 aspect-ratio 让图片卡片保持统一比例，配合 CSS Grid 实现瀑布流或网格布局。入口 API：aspect-ratio + display: grid。
3. 优化移动端底部导航
为 iOS 底部标签栏预留安全区域，用 env(safe-area-inset-bottom) 确保导航按钮不被遮挡。入口 API：padding-bottom: env(safe-area-inset-bottom)。
4. 实现视频网站的 Theater Mode
点击 Theater Mode 时用 JavaScript 切换 theme-color 为黑色，让标签栏融入暗色背景，提升观影沉浸感。入口 API：document.querySelector('meta').setAttribute('content', ...)。
5. 设计跨平台一致的表单
利用 Safari 15 的新表单控件样式，减少自定义样式代码。日期、时间、颜色选择器在 iOS 上自动获得原生体验。入口 API：<input type="date"> + <input type="color">。
关联 Session
- Explore Safari Web Extension improvements — Safari 扩展开发
- What’s new in Web Inspector — Safari 开发者工具
- Develop advanced web content — WebKit 新特性
评论
GitHub Issues · utterances