Highlight
WebKit 团队在过去一年修复了超过 1100 个底层问题，同时 Safari 27 带来 CSS Grid Lanes 瀑布流布局、可深度定制的
<select>元素、跨平台的<model>3D 模型标签，以及无需 Xcode 的 Safari Web Extension 打包工具。
核心内容
从「卷新特性」到「还技术债」
前端开发者都遇到过这种场景：代码在 Chrome 里跑得好好的，一到 Safari 就出问题。可能是 SVG 渐变渲染错位，可能是 emoji 输入变成乱码，也可能是 min() 函数在 sizes 属性里不生效。
WebKit 团队今年把重心从「堆新特性」转向了「修老问题」。（01:06）他们修复了超过 1100 个功能改进和 bug，创下团队纪录。
一个典型例子是 emoji 输入乱码。（02:05）老旧网站用 String.fromCharCode() 处理键盘输入，这个方法只能处理 16 位以内的 Unicode 码点。而大量 emoji 需要 17 位，截断后变成了完全不同的字符。WebKit 的解决方案很务实：当用户输入超过 16 位的字符时，引擎不再发送数字码点，直接以文本形式传递。不用改网站代码，问题就解决了。
block-in-inline 布局重写
块级元素嵌套在行内元素里的情况在网页中无处不在，而处理这种布局的代码已经二十多年没动过，变得难以维护。（03:54）团队用新的架构从头重写，修复了一批长期存在的布局问题。对开发者来说，最直观的感受就是某些以前需要写 hack 的排版场景，现在能正常工作了。
SVG 2 标准化推进
SVG 规范长期缺乏维护，不同浏览器对同一属性的解释各不相同。（04:48）WebKit 工程师直接参与复活并领导了 SVG 工作组，推动 SVG 2 规范明确化。比如径向渐变的 fx 和 fy 属性默认值，以前各浏览器理解不同，现在规范写死了，Safari 27 也做了相应更新。到目前为止，SVG 相关改进已经超过 75 项。
详细内容
CSS Grid Lanes：纯 CSS 瀑布流
以前做 Pinterest 风格的瀑布流布局，要么用 JavaScript 计算每列高度，要么依赖第三方库。（09:06）CSS Grid Lanes 让这件事变成了几行 CSS。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 16px;
}关键点：
grid-template-rows: masonry启用瀑布流模式，元素按列自动排列- 支持横排和竖排两种方向
- 可以用
flow-tolerance微调元素流动时的容差，优化键盘 Tab 导航体验 - Safari 26.4 已实装，其他浏览器尚未支持
WebKit 团队做了一个交互式演示网站 gridlanes.webkit.org，可以在线调整参数并实时看到效果。
Customizable Select：原生下拉框终于能定制了
<select> 元素的可定制性差是前端社区的老大难问题。（10:06）为了做出好看的 UI，开发者不得不放弃原生控件，用 div 模拟，代价是失去无障碍支持和移动端原生体验。
Safari 27 引入了 appearance: base-select，在保留原生控件行为的同时开放视觉定制：
select {
appearance: base-select;
}
select::picker {
appearance: base-select;
}关键点：
appearance: base-select让<select>继承更多 CSS 属性，包括字体、文字颜色、背景色::picker伪元素控制下拉菜单面板样式::checkmark和::picker-icon分别控制选中标记和展开图标- 可以在
<option>内部添加额外的 HTML，比如副标题、图片 - 下拉菜单内部可以用 Grid 或 Flexbox 任意排版
<select>
<option>
<img src="icon-red.png" alt="">
<span>红色</span>
<span class="sub">#FF0000</span>
</option>
</select>这个方案的核心 trade-off 是：保留原生控件的交互逻辑和无障碍树，只开放视觉层定制。你不需要自己处理键盘导航和屏幕阅读器适配，移动端也能继续唤起原生 Picker。
<model> 元素：3D 模型成为一等公民
去年 <model> 元素随 visionOS 首次亮相，今年 Safari 27 把它带到了 iOS、iPadOS 和 macOS。（11:24）它和 <img>、<video>、<audio> 一样，是处理媒体文件的原生 HTML 元素。
<model src="product.usdz" alt="3D 产品模型">
<img src="product.jpg" alt="产品图片">
</model>关键点：
- 支持
<source>标签提供多种格式备选 environmentmap属性可指定自定义环境光照stagemode属性设置默认交互行为- 可以用 JavaScript 操作模型，比如旋转、缩放
- 在 iOS 和 iPadOS 上，可以把
<model>包在<a rel="ar">中，让用户把模型投射到现实空间
Immersive API：网页直接进入 visionOS 沉浸空间
visionOS 27 进一步扩展了 <model> 的能力，支持沉浸式网站环境。（12:50）用户访问你的网站，点击按钮就能进入一个由你提供的 3D 环境。
const model = document.getElementById('theater-model');
// 类似 Fullscreen API 的设计
await model.requestImmersive();关键点：
- API 设计与 Fullscreen API 一致，学习成本低
- 必须由用户手势触发
- 适合场景：游戏预览、虚拟看房、剧院座位预览、产品展示
- 仅在 visionOS 27 的 Safari 中生效
Safari Web Extension Packager：跨平台打包
以前给 Safari 做扩展必须用 Xcode 在 Mac 上打包。（13:41）现在有了 Safari Web Extension Packager，任何操作系统、任何浏览器都能完成打包，通过 App Store Connect 分发给 Safari 用户。
# 不再需要 Xcode，不再需要 Mac
# 在任何平台上用 packager 工具打包扩展
# 上传到 App Store Connect 即可关键点：
- 扩展本身仍是标准 HTML/CSS/JavaScript，一套代码跨浏览器
- 打包和分发流程不再依赖 Apple 生态工具链
- 调试 Safari 特有 API 仍需 Mac + Safari Technology Preview
核心启发
1. 用 CSS Grid Lanes 替代 JS 瀑布流
做什么： 把现有项目中的瀑布流布局从 JavaScript 计算迁移到纯 CSS。
为什么值得做： 减少运行时计算，布局由浏览器引擎处理，性能更好，代码更简洁。flow-tolerance 还能优化键盘导航体验。
怎么开始： 在支持 Safari 26.4+ 的场景下，把 display: grid 加上 grid-template-rows: masonry，用 @supports 做降级。
2. 用 appearance: base-select 替换自定义下拉组件
做什么： 把项目中用 div 模拟的下拉选择器改回原生 <select>。
为什么值得做： 获得原生无障碍支持、移动端原生 Picker、更少的 JavaScript 代码。视觉定制能力已经足够覆盖大多数设计需求。
怎么开始： 给 <select> 和 ::picker 加上 appearance: base-select，用 ::checkmark 和 ::picker-icon 调整细节。
3. 在电商网站中嵌入 3D 产品预览
做什么： 给商品详情页加上 <model> 标签展示 3D 模型。
为什么值得做： 用户可以在网页上直接旋转查看产品，在 iOS/iPadOS 上还能一键投射到现实空间。不需要引入 Three.js 等重型库。
怎么开始： 准备 USDZ 格式的 3D 模型，用 <model src="product.usdz"> 嵌入，提供 2D 图片作为降级。
4. 为 visionOS 用户构建沉浸式网页体验
做什么： 给支持 3D 展示的网站添加 Immersive API，让 visionOS 用户进入全沉浸环境。
为什么值得做： 这是目前最轻量的 Web 到 3D 沉浸的入口，API 设计简单，不需要 WebXR 的复杂配置。
怎么开始： 给 <model> 元素绑定点击事件，调用 requestImmersive()，做好特性检测和降级。
5. 把浏览器扩展带到 Safari
做什么： 如果你已有 Chrome/Firefox 扩展，现在可以零成本增加 Safari 支持。
为什么值得做： Safari 用户基数庞大，以前被 Xcode 门槛挡在外面。现在打包流程完全跨平台。
怎么开始： 用 Safari Web Extension Packager 打包现有扩展，通过 App Store Connect 提交。
关联 Session
- Rediscover the HTML Select Element — 深入讲解
appearance: base-select的完整用法和最佳实践 - Get started with HTML Model Element — 3D 模型制作、优化和 JavaScript 操作
- Explore immersive website environments in visionOS — Immersive API 的完整实现指南
- Create web extensions for Safari — 从零构建 Safari 扩展并使用 App Store Connect 分发
- Learn CSS Grid Lanes — CSS Grid Lanes 的完整教程和高级用法
评论
GitHub Issues · utterances