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

大家好！我是 Jen Simmons！ 我来分享 WebKit 的最新动态， WebKit 是为 Safari 提供支持的 网页浏览器引擎。 WebKit 和 Safari 团队 今年一直非常忙碌。 我很高兴与大家分享 我们一直在做的工作， 以及它如何影响你们在 制作网站、Web 应用和网页内容时的工作。 我们已经发布了 大量新的 Web 技术， 包括 CSS Grid Lanes， Navigation API、 Largest Contentful Paint，以及更多。 Safari 27 的首个 beta 版 带来了超过 60 项新功能， 包括 Customizable Select、 img sizes=auto， 布局的 stretch 关键字，以及更多。 在本讲座的稍后部分， 我将带你了解 五个最令人兴奋的新功能。 请继续观看，了解 CSS Grid Lanes 的功能， 了解如何自定义 Select UI， 探索 Model Element 为 Web 带来的内容， 以及更多！

但首先，作为一名 Web 开发者， 你可能会觉得最令人兴奋的 是我的团队今年投入的时间 来提升 WebKit 的质量。 我从 Web 开发者那里听说 这很有挑战性， 当你不得不绕过 我们的浏览器引擎中的问题时。 你们期待更多。 我们听到了。 我们着手 大幅提升 现有 Web 平台功能的质量。 今年我们将重点放在这里， 而不是实现 大量全新的功能。 当我审视 我们迄今为止的成就时， 几个清晰的主题浮现出来。 我想分享每个主题的 一个简短故事。 首先，兼容性。 这项工作的很大一部分 重点关注直接影响用户的事项， 确保真实的网站 能为真实的用户正常工作。 你们的用户是我们的客户， 我们希望他们 拥有出色的体验。 我的团队收到了 一个关于特定网站的报告。 当用户输入表情符号时， 出现了完全错误的字符。 但为什么呢？ 通常，当用户按下一个键时， 浏览器会向网站 发送一个 Unicode 编号。 这个字母 A 的编号 使用 7 位数据。 有些网站希望 拦截键盘输入 并用 JavaScript 处理它。 几十年来，网站使用 .fromCharCode 方法 将这些编号 转回字符。 .fromCharCode 可以处理 16 位或更小的数据。 很长一段时间内，即使 Unicode 不断增长，这也足够了。 但后来出现了大量表情符号。 这些新字符 被分配了更大的编号。 这个需要 17 位。 在仍然使用 .fromCharCode 的网站上，那个编号被截断 为 16 位。 这映射到 一个完全不同的字符。 那么，我们该怎么办？ 试图让每个网站 停止使用 .fromCharCode？ 那是不现实的。 用户现在就想输入表情符号！ 于是我的同事们 采用了一个巧妙的解决方案。 现在当用户输入一个 超过 16 位码点的字符时， WebKit 根本不会将 编号发送给网站。 表情符号以文本形式到达。 没有编号，没有截断。 现在每个人都可以在 任何他们想要的网站上 输入"强忍泪水"表情符号。 这是我们为直接帮助用户 所做的众多改变之一。 但作为 Web 开发者， 你只是希望工作变得更轻松。 我的团队也在努力 重建 WebKit 的基础， 在相当多的领域。 有时我们不得不 从头开始以偿还技术债务。 这项深层工作 表面上不一定可见， 但它使建立在这些基础上的 一切变得更加可靠。 这里有一个例子：块级元素嵌套布局。 块元素经常 嵌套在内联元素中。 处理此类布局的代码 已经超过二十年了， 已经变得混乱 且难以维护。 因此我们用新的 架构方法从头重写。 你可能不会注意到， 但这项工作确实修复了一堆问题。 我的团队也在深入研究 在特定领域取得重大进展。 媒体和视频播放、滚动、 SVG、无障碍访问、WebRTC， 甚至 HTML 表格！ 这些领域 各需要不同的方法。 以 SVG 为例。 要取得真正的进展， 我们需要 Web 标准 拥有更多的清晰度和细节。 但当时没有活跃的 SVG 工作组。 于是，这就是我的队友们 加速进程的方式， 通过重振并领导 一项新的标准化工作。 例如，如果 一个 Web 开发者创建了一个 SVG， 带有径向渐变，但没有 明确定义其焦点， 使用 fx 和 fy 属性，会发生什么？ 在 SVG 1 中，描述 fx 和 fy 初始值的 规范文本令人困惑， 不同的浏览器 对其解释不同。 现在，SVG 2 消除了所有歧义。 初始值被清楚地定义。 我们正在 Safari 27 中更新 WebKit。 到目前为止，我们已经对 SVG 进行了超过 75 项改进， 还有更多工作要做。 我的团队正在做的 许多改进 是为了更好地与 Web 标准保持一致。 既是为了加强长期存在的 Web 技术的互操作性， 也是为了跟上 新功能的发展。 这里有个新东西： CSS random 函数。 你可以用它来生成随机值。 使用这段代码，宽度和高度 会获得随机长度。 你可以命名随机值以复用它们。 但最初，名称 是按实例作用域的。 每次调用 box 类时， 都会计算新的随机值。 我们在 Safari 26.2 中发布了 random 函数， 但随后开发者们认为 也许这可以做得更好。 在 CSS 工作组讨论之后， 这些名称被重新定义 为默认全局作用域。 现在所有这些盒子 都获得相同的随机大小。 我们在 Safari 26.5 中 更新了名称的作用域。 我们仍然是唯一支持它的浏览器， 所以有时间把它做得更好。 我们正在跟上 Anchor Positioning 等最新功能的变化 以及 View Transitions。 我们也在加强 旧有功能。 有数百项更新 以更好地与 Web 标准保持一致。 我们希望让你更轻松地创建 在每个浏览器中都能正常工作的网站。 第五个改进领域是： 集成。 大量改进确保独立的 功能能够正确地整合在一起。 2014 年，WebKit 发布了对 HTML 中 sizes 属性的支持， 实现了响应式图片。 2018 年，我们发布了对 CSS min() 和 max() 函数的支持。 但当时我们不知怎么遗漏了 在 sizes 内部实现对 min() 和 max() 的支持。

感谢提交问题的开发者们。 2020 年 clamp() 出现时，我们也没有做。 今年我们回过头来 在 Safari 26.4 中填补了这个空缺。 这些是我们 希望不断发现并修复的问题类型。 我们深切关心人们与 Web 交互时的体验， 在我们的平台上。 浏览器引擎非常庞大， 我们依靠来自开发者的 反馈和贡献 来帮助识别痛点 并指导我们的优先级。 App Store 中的数百万个应用 都利用了 Web 技术， 这些技术内置于 WebKit 和 JavaScriptCore 中， 包括适用于 iOS、iPadOS 的应用， macOS、visionOS，甚至 watchOS！ 我们关心 Web， 我们真诚希望我们的努力 能真正为你的成功做出贡献。 凭借这一专注，我们能够 解决超过 1100 项功能改进 以及自去年秋天以来的修复。 这对我们来说是一个记录。 我们希望你能在 最新版本的 Safari Technology Preview 或 Safari beta 中 测试你的项目。 如果你遇到问题， 请提交一个 issue。 我们知道还有更多工作要做。 我只介绍了我们质量工作的 几个例子。 有关所有详细信息， 请查看 Safari 发行说明。 质量改进是我的团队 今年工作的重要组成部分， 但这不是全部。 我们还发布了一些 真正令人兴奋的新功能。 在本节课的其余部分， 我将逐一介绍几个。

从 CSS Grid Lanes 开始， 它在 Safari 26.4 中发布。 使用它可以用纯 CSS 创建经典的瀑布流布局。 无需 JavaScript。 它可以处理你 之前可能从未考虑过的用例。 代码很简单，并包含 定义轨道的 CSS Grid 的全部功能。 是的，它在另一个方向也同样有效！

查看我们在 gridlanes.webkit.org 的 Grid Lanes 实用指南。 点击不同的配置 以体验其工作方式， 并探索众多演示。 使用 Safari Web Inspector 来 更好地理解和调整你的布局。 启用"顺序编号" 以显示项目的顺序。 这对调整 flowtolerance 以优化体验非常有帮助， 适用于通过键盘 Tab 键浏览内容的用户。 观看"了解 CSS Grid Lanes"， Brandon 将带你详细了解 如何创建这些布局。

Customizable Select 是另一个 即将推出的令人兴奋的 Web 功能。 Safari 27 对 元素进行了变革。 现在比以往任何时候都更容易 实现完全自定义的设计，以匹配 你的网站或 Web 应用， 并自动获得出色的无障碍访问功能！ 你可以先应用 appearance: base-select 在 CSS 中应用到 元素。 控件立即开始继承 更多 CSS，包括你的字体系列， 文字颜色和背景颜色。 同时，将 appearance: base-select 应用到新的 ::picker 伪元素。 这解锁了对当用户 点击控件时弹出的选项菜单 进行样式设置的功能。 其他全新的伪元素让你可以 定位控件的特定部分， 如 ::checkmark 和 ::picker-icon。 现在，你可以在 中 添加额外的 HTML。 比如描述详情的子文本， 或代表每个选项的图片。 同时利用使用真实 HTML 表单控件的优势， 及其无障碍性和健壮性。 使用 Grid 或 Flexbox 来布局选项， 或使用 CSS 中的任何内容，让它 看起来完全不像传统的下拉菜单。 Tim 将在他的课程 "重新发现 HTML Select 元素"中教你如何操作。

去年，我们在 visionOS 版 Safari 中发布了 ， 这是一个全新的 HTML 元素。 在 Safari 27 中， 将 登陆 iOS、iPadOS 和 macOS。 它与 、 和 一起加入处理媒体文件的 元素家族。 这次将 3D 模型带入 HTML。 通过在网站中添加模型， 你可以为用户提供 查看产品的方式， 在自己的空间中预览物体， 或者只是体验一段酷炫的体验。 标记的使用方式符合你的预期。 你可以保持简单， 或者就像其他媒体元素一样， 使用 链接到不同格式的 多个文件。 你还可以选择包含 一些属性，如 environmentmap， 为你的模型提供自定义照明。 或 stagemode，设置 默认交互行为。 用 JavaScript 操控你的模型以 开启广泛的可能性， 或将模型包裹在 中 让 iOS 和 iPadOS 上的用户 在自己的空间看到产品。 你可以在 developer.apple.com 上 找到更多关于制作和使用 3D 模型的内容。 developer.apple.com 那里有多年的文档、 视频和示例项目， 深入探讨了什么是可能的。 观看"开始使用 HTML Model 元素" 了解更多信息。 Aleksei 将解释 如何获取 3D 模型， 如何针对 Web 优化它， 以及在 JavaScript 中该做什么。

在 visionOS 27 中， 通过 沉浸式网站环境更进一步。 用户可以在 Safari 中访问你的网站， 点击打开沉浸式环境， 并进入你提供的模型中。 也许你制作了一款沉浸式视频游戏， 想给潜在客户 一种预览它的方式。 也许你的网站销售剧院门票。 你可以在任何平台上 向人们展示他们座位上的视角， 然后在 visionOS 中， 他们可以体验整个剧院。 有一个新的 Immersive API 用于操控模型。 它的工作方式与 Fullscreen API 一样。 了解所有相关信息， 观看"在 visionOS 中探索沉浸式网站环境"， Jean 将在其中向你展示 他是如何构建剧院的。

然后，还有 Web 扩展。 不久前，制作一个浏览器扩展 意味着要为每个浏览器创建 完全独立的项目， 使用不同的代码和不同的 API。 这就是为什么很多扩展 只在一个浏览器中有效。 事情在 2017 年开始改变， 当时 Mozilla 弃用了 对 Firefox 附加组件的支持， 并承诺 走向跨兼容的未来。 2020 年，Safari 14 发布了 对 Safari Web 扩展的支持。 然后在 2021 年， 我们主导了创建 W3C WebExtensions 社区组的工作， 并将这些想法 转化为官方 Web 标准。 今天，可互操作扩展未来的梦想 正在成为现实。 你可以使用单一代码库 创建一个扩展， 一套脚本，一个 manifest。 全都是可互操作的 HTML、 CSS 和 JavaScript， 就像 Web 的其他部分一样。 你只需要知道如何 打包和分发 你的扩展给每个浏览器的用户。 但如果你不使用 Xcode， 甚至没有 Mac， 你怎么能将你的扩展 分发给 Safari 用户？ 现在，你可以使用 Safari Web 扩展打包器。 它让你能够使用 App Store Connect 打包和分发你的扩展， 从任何网页浏览器， 在任何操作系统上。 今天，触达 Safari 用户 比以往任何时候都更容易。 你可以阅读文档， 在 developer.apple.com 上了解如何操作， 并观看"为 Safari 创建 Web 扩展"， Kiara 将指导你 如何从头开始构建一个 Web 扩展， 以及如何使用 App Store Connect。

最后，我想快速 介绍一下 MapKit JS。 这是一个你可以使用的工具， 在你的网站或 Web 应用上 嵌入交互式地图。 同时保护 你的用户隐私。 它适用于所有浏览器， 在任何操作系统上。 在 developer.apple.com 上 了解所有相关信息。

我的团队今年做了大量工作。 WebKit 充满了改进。 我真诚希望这些努力使你的工作 更令人满意、更成功、更轻松， 也许，更有趣！ 查看我们的网站 webkit.org， 我们在那里介绍 Safari 每次发布的 所有新功能。 在那里，你可以了解更多 关于 Safari 27 的内容， 观看其他关于 Web 技术的 WWDC 课程 以深入了解， 并在 bugs.webkit.org 提交问题。 我们很乐意听取你的意见，了解 我们还能做什么来支持你的工作， 为人们在 Web 上 创建可使用和享受的项目。 感谢观看！