Safari 27.0 的 WebKit 新功能
内容提要
Safari 27.0 发布，新增83项功能并修复844个问题。主要亮点包括：Safari MCP服务器支持编码代理直接控制浏览器、可定制select元素、滚动锚定、HTML model元素支持3D模型、visionOS沉浸式环境、重写ES模块加载器以修复顶层await，以及BigInt Math、import defer等JavaScript新特性，并包含大量CSS、SVG、WebGPU和WebRTC改进。
延伸解读
Safari MCP：编码代理直接控制浏览器
Safari 27.0 引入的 MCP 服务器允许编码代理（如 Claude Code、Codex）直接控制浏览器窗口，访问 DOM、网络请求、截图和控制台输出。这能帮助代理自动验证代码渲染、测试表单状态、比较样式布局、检查可访问性问题以及分析性能。MCP 服务器完全在本地运行，不进行网络调用，也不访问个人数据，捕获的数据直接发送给代理而非 Apple。开发者需在 Safari 设置中启用远程自动化。
可定制 select 元素：无需 JavaScript 的完全样式化
Safari 27.0 支持通过 appearance: base-select 完全自定义 <select> 元素，无需 JavaScript 或大量 div。新的 UA 默认样式提供了开箱即用的外观，包括圆角、阴影、触摸友好的行高、悬停状态和图标，并支持深色模式、强制颜色模式等。新增的 ::picker-icon 和 ::checkmark 伪元素以及 <selectedcontent> 元素让开发者能精细控制下拉菜单的各个部分，同时保留原生表单控件的键盘导航、屏幕阅读器支持和表单提交等特性。
滚动锚定：自动防止内容跳动
Safari 27.0 新增滚动锚定支持，当页面在用户阅读位置上方动态插入内容（如图片、广告或评论）时，浏览器会自动调整滚动位置，保持用户当前阅读的内容不动，避免页面突然跳动。该功能默认启用，开发者无需任何操作。如需禁用，可使用 overflow-anchor: none。这解决了长期以来因内容注入导致的用户体验问题。
ES 模块加载器重写：修复顶层 await 问题
Safari 27.0 完全重写了 ECMAScript 模块加载器，采用原生 C++ 实现并符合 ECMAScript 规范，取代了基于已废弃的 2016 WHATWG Loader 提案的旧实现。新加载器修复了模块执行顺序和初始化问题，确保导入不会在导出完全求值前访问它们，从而解决了顶层 await 在 Safari 中长期存在的跨浏览器兼容性问题。该重写已通过 test262 和 Web 平台测试验证。
Q&A
Safari 27.0 的 Safari MCP 服务器是什么？它有什么作用？
Safari MCP 服务器是 Safari 27.0 新增的功能，允许编码代理（如 Claude Code、Codex）直接控制浏览器窗口，查看代码渲染效果。代理可以访问 DOM、网络请求、截图和控制台输出，从而自动验证表单状态、比较样式布局、测试无障碍问题、分析性能等。该服务器完全在本地运行，不进行网络调用，也不访问个人数据。
Safari 27.0 中可定制 select 元素如何实现？有哪些新特性？
通过 CSS 的 appearance: base-select 启用可定制 select，它会切换到新的 UA 默认样式并启用 HTML 新能力。新增伪元素如 ::picker-icon 和 ::checkmark，允许在 <option> 内插入 HTML 元素，并使用 <selectedcontent> 调整选中项显示内容。它保留了原生表单控件的键盘导航、屏幕阅读器支持和表单提交等特性。
Safari 27.0 的滚动锚定功能解决了什么问题？开发者需要做什么？
滚动锚定解决了页面在用户阅读时动态插入内容（如图片、广告、评论）导致内容突然下移、用户失去阅读位置的问题。Safari 27.0 会自动调整滚动位置，保持内容原位。开发者无需任何操作即可启用，该功能由 overflow-anchor CSS 属性控制，默认为 auto，如需禁用可设为 none。
Safari 27.0 对 ES 模块加载器进行了哪些重写？修复了什么问题？
Safari 27.0 用原生 C++ 完全重写了 ECMAScript 模块加载器，符合 ECMAScript 规范，取代了基于已废弃的 2016 WHATWG Loader 提案的旧实现。重写修复了模块执行顺序和初始化问题，避免导入在导出完全求值前访问它们，并解决了顶层 await 的跨浏览器兼容性问题。新加载器通过了 test262 和 Web 平台测试验证。
Safari 27.0 新增的 HTML model 元素是什么？如何使用？
HTML <model> 元素用于在网页中嵌入 3D 模型，类似于 video、audio 和 img。它支持多个源文件（如 USDZ 和 GLB 格式）并提供回退图像。可以添加 environmentmap 属性自定义光照，或 stagemode 设置交互行为。通过 JavaScript 可以进一步控制模型。该元素现已在 iOS、iPadOS 和 macOS 的 Safari 中可用。
Safari 27.0 在 JavaScript 方面有哪些新特性？
Safari 27.0 新增了 BigInt Math 支持，提供 BigInt.abs、sign、sqrt、cbrt、pow、min、max 等静态方法，避免精度损失。还支持 import defer，允许延迟模块求值直到首次访问命名空间属性。此外，重写了 ES 模块加载器以修复顶层 await 问题。
