面向 Safari 浏览器 27 的 WebKit 新功能

一句话判断

Safari 终于原生支持 <select> 深度定制和 <model> 3D 渲染，Web 开发者不用再捏着鼻子写一堆 div 模拟表单和引入沉重的 Three.js 了。

这场 Session 讲了什么

今年 WebKit 团队的 KPI 明显从“卷新特性”转向了“还技术债”和“填补体验鸿沟”。他们修了 1100 多个底层 bug，重写了二十多年没动过的 block-in-inline 布局引擎，甚至为了兼容老旧网站的 .fromCharCode 16位截断问题，在引擎层做了 emoji 输入的 hack。

对前端和 visionOS 开发者来说，最实在的产出是表单和 3D 渲染的原生化解法。<select> 元素通过 appearance: base-select 开放了深度样式定制，<model> 标签则让 3D 模型和 visionOS 沉浸式环境（Immersive API）有了原生 HTML 级别的入口。同时，Safari Web Extension Packager 彻底解除了对 Mac 和 Xcode 的打包强依赖。

值得深挖的点

原生 `<select>` 定制 (Customizable Select)

<select> 一直是前端 UI 定制的噩梦。跨浏览器表现不一，导致大家都在用 div 加 JavaScript 模拟，直接丧失了原生无障碍（Accessibility）和移动端原生滚轮体验。Apple 这次没有选择完全放开 Shadow DOM，而是引入了 appearance: base-select 和一套新的伪元素。

这种设计的 trade-off 很明显：保留原生控件的交互逻辑和无障碍树，只开放视觉定制。好处是你不用再去处理复杂的键盘导航和屏幕阅读器适配，移动端依然能唤起原生的 Picker。坑在于，如果你试图把它魔改成完全不像下拉框的东西（比如多选标签云），原生行为可能会和你预期的 CSS 产生冲突。

`<model>` 元素与 Immersive API

在 visionOS 27 之前，Web 端展示 3D 模型只能靠 <canvas> 配合 Three.js 等重型库，性能损耗大，且无法与系统级的 AR Quick Look 无缝衔接。Apple 把 3D 模型提升为类似 <img> 的一等公民（first-class citizen），直接用 <model> 标签嵌入。

更狠的是配合 Immersive API。它的设计完全对标 Fullscreen API，只需调用 requestImmersive()，网页里的 3D 模型就能直接展开到 visionOS 的全沉浸空间中。这比 WebXR 轻量太多，Apple 的意图很明确：Web 应该作为 3D 资产和沉浸式体验的轻量级分发渠道，而不是用来写重度 3D 游戏。

代码片段

1. 深度定制原生 Select

场景：把原生下拉框改成带图标的现代 UI，同时保留移动端原生体验。

/* 启用基础定制模式 */
select {
  appearance: base-select;
}

/* 定制下拉按钮的样式 */
select::select-button {
  /* 移除默认边框，自定义背景 */
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px 12px;
}

/* 定制下拉面板 */
select::select-panel {
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

坑：appearance: base-select 会改变默认的 DOM 结构预期，不要用 JS 去强算它的高度，让浏览器自己处理。

2. 嵌入 3D 模型并进入沉浸式空间

场景：在 visionOS 网页中展示 3D 汽车模型，并允许用户进入全沉浸模式查看。

<!-- 嵌入 3D 模型，支持 AR Quick Look -->
<model id="car-model" src="car.usdz" alt="3D Car Model">
  <!-- 降级显示内容 -->
  <img src="car.jpg" alt="Car">
</model>

<button id="immersive-btn">进入沉浸式空间</button>

const model = document.getElementById('car-model');
const btn = document.getElementById('immersive-btn');

btn.addEventListener('click', async () => {
  // 检查是否支持沉浸式 API
  if (model.requestImmersive) {
    // 类似 requestFullscreen，将模型推入全沉浸环境
    await model.requestImmersive();
  }
});

坑：requestImmersive() 必须由用户手势（如 click）触发，且目前仅在 visionOS 27 的 Safari 中生效，记得做特性检测。

3. CSS Grid Lanes 实现瀑布流

场景：用纯 CSS 实现 Pinterest 风格的瀑布流布局，告别 JavaScript 计算。

.gallery {
  /* 启用 Grid Lanes (Masonry 布局) */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 16px;
}

.gallery-item {
  /* 元素会根据自身内容高度自动排列，不会出现大片空白 */
  break-inside: avoid;
}

坑：masonry 目前还在实验阶段，Safari 26.4+ 可用，生产环境务必在 @supports 中检查并提供 Flexbox 降级方案。

最佳实践

已有项目如果用了 Headless UI 或自研的 Select 组件，建议先在新表单中试用 appearance: base-select，验证无障碍阅读器的兼容性后再逐步替换。对于 3D 展示需求，果断抛弃网页内嵌 Canvas 的方案，改用 <model> 标签，这不仅能白嫖系统底层的 Metal 渲染优化，还能直接支持用户长按触发 AR Quick Look 把模型投射到现实桌面。

Web 扩展开发者现在可以使用 Safari Web Extension Packager 在 Windows 或 Linux 上直接打包提交 App Store Connect。但这不意味着你能脱离 Mac 开发，调试 Safari 特有的 API（如 safari.extension）和排查 WebKit 渲染差异，依然需要一台 Mac 跑 Safari Technology Preview。

还有什么值得关注

CSS random() 函数：可以在 CSS 中直接生成随机数，配合命名作用域可以避免每次重绘都重新计算，做随机粒子背景非常方便。
Emoji 17-bit 截断 Hack：WebKit 在引擎层拦截了超过 16-bit 的 emoji 输入，以替代文本形式发给网页，强行修复了老旧网站用 .fromCharCode 导致的乱码问题。
SVG 2 标准化推进：Apple 工程师直接参与了 SVG 工作组的规范制定，明确了径向渐变 fx/fy 的默认值，顺手在 Safari 27 里修了 75 个 SVG 渲染 bug。