CSS 中的新功能

♪ ♪

Jen：大家好 我是 Jen Simmons 一名 Apple 的 Safari 浏览器和 WebKit 的推广人员 今年对于 WebKit 来说 是非常棒的一年 我们已经发布了 140 多项新的网页技术 这些技术已经在今年 Safari 浏览器多个版本中上线 而且我们还有数十个 新的网页技术将在今年秋季推出 我们有太多内容要涵盖了 不可能一一介绍完 因此我们决定专注在 CSS 上 在本次讲座中 我们将介绍 CSS 中一些最令人兴奋的新功能 包括与布局相关的全新可能性 一整代色彩工具 充分利用现今惊人的显示技术 以及通过新的伪类 来解决棘手问题的高效方式 还有能够让你将字体排印 提升到一个新水平的 CSS 我将分享已经发布的内容、 将在 Safari 浏览器 17 中发布的内容 以及我们未来将要开发的一些内容 如果你想提前体验 请下载 Safari Technology Preview 你将在其中找到砖瓦布局 多年来 这一布局模式 一直在网页中非常受欢迎 它是一种将不同大小的内容 紧密排列的好方法 你可以使用 CSS 多列实现此布局 只要内容的顺序从第一列开始 然后向下延伸到视口下方 再返回第二列的顶部 再向下延伸 然后转到第三列 以此类推 如果这对你的项目有效 那很好 CSS 多列是一个在浏览器中 已经存在几十年的布局机制 但通常情况下 这种方式不太适用 相反的 设计师希望 内容能够在页面上自由流动 将每个项目放在 尽可能靠近顶部的列中 这在当用户滚动底部 加载更多内容时尤其需要 因此 网站必须使用 JavaScript 来实现这一点 但 JavaScript 布局速度 比 CSS 慢 并且更容易出错 编写起来更困难 布局确实应该属于 CSS 的范畴 几年前 我们提出了将砖瓦布局 作为 CSS Grid 一部分的建议 并在 Firefox 中 作为实验功能进行了实现 我们相信这个想法 也希望它能在网页上实现 所以现在它在 Safari Technology Preview 中默认使用 你可以在其中尝试 并告诉我们你的想法 帮助我们推进这个想法 这里有一个示例 我只用了很少的 CSS 来创建这个典型的砖瓦布局 display: grid 让我们开始 grid-template-columns 给我们灵活的列数 当有更多的空间时 它们会自动增加数量 然后通过 grid-template-rows: masonry 将项目按照砖瓦模式 排列在行方向上 只需一行代码 将这部分纳入 CSS Grid 使我们拥有极大的灵活性 你可以在一个维度上定义砖瓦布局 并使用 Grid 的强大功能在 另一个维度上做任何你想做的事情 例如使用 fr 单位 使列具有不同的大小 或者第一列使用固定宽度 而中间使用 fr 单位的自适应宽度 第三列使用最大最小值进行自适应 将砖瓦布局与 Grid 相结合 比流行的 JavaScript 库更强大 这一切仍在进行中 CSS 工作组还需要进一步讨论 浏览器制造商和其他人 共同商定前进的方向 包括确保其完全可访问的工作 一旦准备就绪 我们期待着 在 Safari 浏览器中推出砖瓦布局 现在有哪些功能 可以在浏览器中使用？ Margin trim. 新的 margin-trim 属性 使去除与包装器相邻元素的 边距变得简单 让我解释一下 想象一下 我们有一个标题和三个段落 它们都有上下边距 用于在标题和段落中提供空间 以及在此整体的 上方和下方提供空间 包装器上还应用了内边距 这是具有卡片类的文章元素 标题上方的边距和 包装器上方的上内边距相加 确定了框的顶部边缘与 第一行文本之间的空间 底部也是一样 最后一个段落下方的边距 与包装器的底部内边距相加 可能导致比预期更多的空白间隔 相反 我们希望 只在上方和下方有内边距 并不涉及任何其他边距 这将使得框周围的空间更加均匀 我们需要的是一种 消除与包装器相邻的 任何边距的方法 你可能尝试过 手动删除标题的上边距 和最后一个段落的下边距 你希望这样能有效果 但是意外的内容出现了 也许另一个实例以 h3 开头 而没有人编写该代码 或者有人在中间插入了 一个 h2 而且缺少顶部边距 Margin trim 给我们 提供了更好的解决方案 相反 你可以通过将 margin-trim: block 应用于包装器 准确地要求你想要的东西 我们已在 Safari 浏览器 16.4 中加入了对 margin-trim 的支持 你还可以使用 margin-trim: inline 来在内联方向上修剪边距 这就是 margin trim 它以更加稳健的方式 解决了一个常见的需求 自 2017 年 3 月 CSS Grid 的问世以来 CSS 布局 已经取得了六年多的发展 如今的布局方式相较于 十年前有了根本性的改进 与此同时 还有另一个方面的重大突破 被网页设计师和开发者所忽视： 那就是色彩的变革 世界充满了色彩 特别是在户外 动态范围、 饱和度以及各种微妙和可能性 I想象一下 这个图表代表了 人眼可能看到的每种颜色 将这些颜色的一个子集用线围起来 即是 sRGB 所能表示的颜色 sRGB 是网页上默认色彩空间 在很大程度上已经满足我们的需求 这肯定比我们 在 90 年代使用的要好 但是超越 sRGB 的限制 将是很不错的进步 而且还能传达更多的视觉光谱 P3 色彩就能实现这一点 Apple 自七年前开始 在我们的硬件和软件上 支持广色域 Display P3 首先是在 2015 年末的 iMac 上 然后是 iPad 以及从 iPhone 7 开始的 iPhone P3 色域能够显示 比 sRGB 多 50% 的颜色 现代设备上的显示效果令人惊艳 这些设备都支持具有广色域 P3 的 更亮的颜色和更深的饱和度 现在是时候让网页设计 充分利用这一点了 这是一个当你需要 有条件地指定 CSS 样式时 用于测试 色域支持的 CSS 媒体查询 具体根据 用户的硬件和软件能力而定 我们在 2016 年的 Safari 浏览器 10.0 中添加了 对色域媒体查询的支持 当涉及到选择颜色时 当然有许多方法可以实现； 比如有命名颜色和十六进制值 还有以红色、绿色和 蓝色为基准的 RGB 函数 表示色调、饱和度和亮度的 HSL 以及带有色调、 白度和黑度的 HWB 所有这些颜色模型 都能够创建相同的结果 所有这些模型 都受到 sRGB 色域的限制 如果使用这些颜色模型 无法表示仅存在于 P3 中的颜色 因此 在 CSS 中定义了四种新模型 LCH、OKLCH、LAB 和 OKLAB 这些模型能表示任何色域中的颜色 包括 Display P3 或者未来可能在 网页上出现的其他色域 每个模型都由三个值定义 在这四种模型中 “L”表示亮度 LCH 和 OKLCH 还需要色度值 表示颜色的强度 至于色调值是表示在色谱中的位置 LAB 和 OKLAB 分别声明了 A 轴的值表示颜色在 从绿色到红色的轴上的位置 以及 B 轴的值 表示从蓝色到黄色的程度 你可以使用相应的新函数 创建 LCH、OKLCH、 LAB 和 OKLAB 的颜色 如果浏览器已经支持 P3 色域 那么这些函数可以表示 P3 中 独有的颜色 以及 sRGB 中的颜色 我们在 Safari 浏览器 15.0 和 15.4 中添加了对这些函数的支持 感谢 2023 年的 Interop 项目 Chrome、Edge 和 Firefox 将在今年添加支持 你还可以使用 color() 函数 来定义颜色 并指定要使用的色域 color 函数接受 红色、绿色和蓝色的值 以及斜线后面的 alpha 值 但是 例如 100% 绿色 创建的颜色则取决于色域 早在 6 年多以前的 Safari 浏览器 10.1 中 我们首次在 CSS 中引入使用 该颜色函数创建 P3 颜色的能力 随着这些色域和颜色模型的出现 CSS 工作组利用它们的功能 定义了额外的工具 现在 这些网页标准已经足够成熟 我们今年可以发布这些工具 你是否曾经想过在 CSS 中定义 一个颜色 同时引用另一个颜色？ 在预处理器中 已经有类似的功能一段时间了 现在 相对颜色语法让你可以实现这一点 就像许多定义颜色的方式一样 你可以从颜色函数开始 这决定了使用哪种颜色模型 来创建新的颜色 接下来 指定要从哪种现有颜色开始 然后获取函数中的通道并进行操作 在第一个示例中 保持 R、G 和 B 通道不变 通过 / 0.7 指定该颜色的不透明度为 70% 第二个示例是在 LAB 模型中 我运行浏览器计算 L 除以 2 这将使亮度减半 颜色变暗 同时保持 A 和 B 通道不变 第三个示例是在 OKLCH 模型中 我保持 L 和 H 通道不变 并将 C (色度) 减少三分之一 从而减弱颜色的强度 相对颜色语法 可以快速定义整个调色板 在创建设计系统时非常方便

新的颜色模型 还改进了我们定义渐变色的方式 这是一个简单的线性渐变 从白色过渡到蓝色 多年来 这些渐变色一直是在 sRGB 色域下计算的 现在从 Safari 浏览器 16.2 开始 我们可以明确指定在 sRGB 中计算渐变色 我们也可以改变色域 sRGB-linear 类似于 sRGB 但在颜色之间 以更线性的方式进行过渡 但是你可能会注意到 这两个过渡都经历了紫色调的变化 如果切换到 OKLAB 模型 中间计算的颜色将更偏蓝色 这可能是我们更喜欢的效果 LCH 也能够产生 类似的效果 尽管并非完全相同 OKLCH 在黄色、 绿色和青蓝色之间进行渐变 LAB 更偏向紫色 如果我们喜欢这些效果 我们也可以使用 HSL 或 HWB 这取决于项目和 我们想要的设计效果 没有哪种是对或错的 也没有哪一种是最好的 这取决于具体情况 有很多新的选项来定义渐变 切换颜色空间会产生巨大影响 这同样适用于颜色变化的动画 颜色空间影响着中间过渡的插值 混合颜色时也是如此 是的 现在可以在 CSS 中混合颜色 从 Safari 浏览器 16.2 开始 有一个新的 color-mix 函数 你列出两种要混合的颜色 并指定要使用的颜色空间 浏览器会将它们混合在一起 你可能会从渐变的 中间位置看到这种紫蓝色 我们还可以用渐变效果 切换到我们所看到的 其他任何颜色空间中 它们都会产生不同的结果 默认情况下 color mix 会根据 一种颜色占比 50% 另一种颜色占比 50% 但你可以将其更改为任何比例 比如 80/20 或 30/70 你还可以将两个数字 设置为小于 100% 的总和 这样颜色就会半透明 在这里 我将白色设置为 30% 蓝色设置为 30% 使得混合后的颜色 具有 60% 的不透明度 你甚至可以使用 currentcolor 关键字 将当前文本颜色与其他颜色混合 在这种情况下 我将深绿色 链接颜色与 40% 的白色混合 以创建一个浅绿色 用于悬停时的颜色 这里有很多 P3 色域 新的颜色模型和函数 可以为渐变和动画 更改颜色空间的能力 通过修改现有颜色的通道或混合 来定义颜色的新方式 这里有很大的潜力 尤其是在充分利用颜色 为我们的网页设计提供支持时 还有一件需要了解的事情 那就是对于 P3 色彩的支持 不仅浏览器需要支持 CSS 或 JavaScript 中的某些功能 使其能够使用 P3 色彩 当然 用户的操作系统和 显示器也需要能够支持 此外 浏览器还需要支持 以 P3 色彩进行渲染 适用于在 DOM 的 不同区域的网页各个部分 在假设其在所有浏览器上 都能普遍适用之前 你应查看每个浏览器的详细信息 现在 让我向你介绍一下 Safari 浏览器 中的 P3 色彩 我们在 7 年前的 Safari 浏览器 10.0 中 推出了对 P3 色彩图像的支持 在 Safari 浏览器 10.1 我们添加对 大部分网页 P3 色彩的整体支持 在 Safari 浏览器 15.2 我们添加 对 Canvas 元素内部 P3 色彩支持 而在 Safari 浏览器 16.4 我们通过 drawingBufferColorSpace 支持 WebGL Canvas 中的 P3 色彩 至于开发者工具 在 Safari 浏览器 13.1 我们在 Web Inspector 添加了 一个颜色选择器 以方便查找 仅在 P3 中可用的颜色 或者将颜色从一个色彩模型 转换为另一个 Safari 浏览器 15.2 中 我们在 Web Inspector 图形选项里添加了对 P3 的支持 我们还有一些工作要做 首先是扩展对 WebGL Canvas 的支持 包括使用 unpackColorSpace 其次是在 SVG 滤镜中添加对 P3 的支持 因为关于网页标准还存在持续辩论 我们目前尚未完成这一部分 目前 如果应用了 SVG 滤镜 颜色会在每个浏览器中 转换为 sRGB 在重新思考网页颜色的时候 这真是令人兴奋的时刻 尤其是因为这些特性 很快将在各个浏览器中都可用 CSS 的进步不仅 改变了设计的可能性 也使设计的代码更加容易

:user-valid 和 :user-invalid 伪类选择器 为表单提供了 一种方式来进行样式设置 具体取决于用户是否正确填写字段 多年来 :valid 和 :invalid 伪类 一直被认为非常有用 我想为这个表单字段设置样式 以便在用户犯错时提醒他们 所以我尝试使用 :invalid 伪类来选择无效的输入 通过使用 :has input:invalid 我将目标设置为标签 再使用 ::before 伪元素 在前面插入一个“x” 这样交流不仅仅依赖于颜色 让我们看看结果 当有人开始输入这种字样 嗯 那不太好 只要用户开始输入这种字样 浏览器就会将其标记为无效 因为它还不是 一个有效的电子邮件地址 因为 :invalid 会在用户 有机会更正之前将输入标记为错误 开发人员一直在使用 JavaScript 来处理这个问题 :user-valid 和 :user-invalid 解决了这个问题 它们使用了更复杂的算法来确定 表单字段何时被视为有效或无效 我们将其发布在 Safari 浏览器 16.5 中 现在我们可以看到改进后的结果 如果输入正确 就不会有红色警告 如果有人填写了错误的字段 红色警告会在他们离开字段后出现 这时我们希望警告他们返回并修正 如你所见 当与 :has() 结合使用时 :user-invalid 特别强大

事实上 今年我们增强了 :has() 的功能 使其能够与更多的伪类一起使用 :has(:lang()) 可以根据 特定语言的存在 来设置页面上的任何样式 而 :has() 对媒体伪类的支持 可以根据音频和 视频播放的状态进行条件样式设置 :dir 伪类填补了 在支持语言方向时的一些空白 根据排版的语言不同 文本可以从左到右或从右到左流动 这通常被缩写为 LTR 和 RTL 现在 CSS 中有越来越多的逻辑属性 它们允许你 引用文本流的起始和结束 而不是左右 例如 使用 margin-inline-start 和 margin-inline-end 代替 margin-left 和 margin-right 可以轻松编写 适用于任何语言的 CSS 但并不是你的设计中的一切 都可以使用逻辑属性来处理 这就是新的 direction 伪类可以帮助的地方 这里 我有一个图标 我想根据文本的方向进行变换 当标题的方向为 LTR 时 我将以一种方式旋转 SVG 当标题为 RTL 时 我会将其以另一种方式旋转 这种方法比过去使用的 支持多种语言方向的技术简单的多 在 :valid 和 :invalid 伪类的基础上 还添加了 :has() 伪类 而且 :dir 伪类都使得 编写强大而简洁的代码更加容易 今年还带来了几个功能 使得你可以将字体排印的 细节完美地精炼出来 让我们先来看一下新的行高单位 在 CSS 中 我们有很多 不同类型的单位可以用来定义长度 有些单位相对于视口大小 比如 svh 和 lvh 还有些单位相对于包装器大小 比如 cqb 和 cqi 其他单位则相对于字体排印大小 一个 ex 单位 等于字体的 x 高度 一个 ch 单位 (代表字符) 匹配字体中零字符的内联尺寸 一个 ic 单位是 表意字符的内联尺寸 (适用于 CJK 文字) 内联尺寸在水平书写模式中是宽度 在垂直书写模式中是高度 这些单位在浏览器中 已经适用一段时间了 而现在还有一个单位 也是相对于字体排印大小： lh 单位 表示行高 以及 rlh 表示根元素的行高 这些单位让我们 可以将布局中的任何元素 与行之间的间距关联起来 例如 我在根 HTML 元素上设置行高为 1.4 然后我在 section 元素设置 2 倍 根元素行高的内边距 即白色卡片 然后我在标题和段落的块方向上 设置 1 倍根元素行高的外边距 现在文本 行与行之间的间距正好一样大 就像文本存在于空白间距内一样 这就建立起了字体排印中 被称为垂直韵律的概念 行高单位无法防止 打破垂直韵律的情况发生 但它们为网页带来了 一种非常简单的工具 使我们更接近解锁 这种长期存在的排版传统 让我们在类型和其周围的 空白之间建立起亲密的联系 在网页上 要将数字字体排印得 如传统排版那样精美 存在着许多挑战 其中一个问题与字体大小有关 如果你是网页设计师 你可能会仔细选择字体系列和字号 但你想要的字体可能无法下载 或者在用户的操作系统上不可用 因此 最佳做法是在 font-family 中声明一组字体堆栈 为浏览器提供备选方案 首先找到的可用字体将被使用 同样 特定大小的字体 在视觉上的呈现尺寸 是无法由网页开发者控制的 左侧是 SF Hello 右侧是 Baskerville 它们的排版大小完全相同 但是 SF Hello 看起来要大得多 因为它在行框内占据了更多的空间 它具有更大的 x 高度 这种差异是在创建字体文件时 作出的选择造成的 举例来说 我正在使用 font-size: 1.4rem 排版一篇文章 同时为文章内的代码 定义了一个简单的字体堆栈 你可以看到 代码的字体比段落文字小 特别是当你比较字母 F 时 这一点尤为明显 如果代码回退到等宽字体 那么它看起来会比段落文字大 我们能尝试调整代码字体大小 使其为文章字体大小的 120% 这样可能会使尺寸 在使用 Courier 时平衡 但是如果浏览器回退到等宽字体 那么代码最终会比段落文字更大 我们要的是应用到浏览器的方法 “请让这两种字体 看起来大小相同” 然后让它自行处理 这正是 font-size-adjust 能实现的 它调整字体的大小 以创建视觉一致性 我添加了一行 CSS 代码 --font-size-adjust: 0.47-- 现在我的排版代码 在视觉上与段落文本保持一致 即使是字体堆栈中 的两种字体也是如此 但是为什么是 0.47？ 这个数字代表什么意思？ 对于你在网页上 可能使用的任何拉丁字体 字体的大小和 x 高度之间存在一个比例 这个比例有点随意 但通常约为 50% 通过将 font-size-adjust: 0.47 应用于文章元素 我实际上应用到 浏览器调整文章内的每个字体： 段落字体、代码字体 无论使用哪种字体 无论来自哪个字体堆栈 所以每个字体的 x 高度 始终是指定字体大小的 47% 我选择了 0.47 因为这样可以 使 Iowan Old Style 的显示效果 与没有应用 font-size-adjust 的效果相同 我们在 Safari 浏览器 16.4 中 支持了 font-size-adjust 的这些基本功能 在 Safari 浏览器 17 中 我们正在添加对更高级功能的支持 如果你不必去找到 像 0.47 这样的神奇数字 来使每个字体都与主要字体匹配 那不是更好吗？ from-font 值使你可以 告诉浏览器让其自动解决这一切 同样在 Safari 浏览器 17 中 我们还添加了对双值语法的支持 它允许你指定在创建 尺寸一致性时应使用哪个度量标准 默认情况下是 ex-height 但你也可以使用 cap-height、 ch-width、ic-width 或 ic-height Safari 浏览器 17 还添加了 对 size-adjust 描述器的支持 它允许你在设置 @font-face 规则时 进行类似的调整 这就是 font-size-adjust 它让你对无法仅通过字体大小 来轻松控制的事物多了一些控制权 但即使有了新的行高单位 和调整类型的视觉大小的能力 仍有一些因素导致行框大小不均匀 我们正在研究 针对该问题的一些解决方案 文本框修剪就是其中之一 在某种程度上 文本框修剪 类似于边距修剪 它们都可以 让你修剪掉不需要的空白空间 但在这种情况下 是在文本框上进行修剪 你是否曾经在网页上 努力使某些内容在垂直方向上对齐？ 这个名称并没有垂直居中 也许我在中间画一条线会更清楚 文本在视觉上低于中心 这在网页上经常发生 这是为什么？ 实际上 文本框是垂直居中的 但字形位于此框的较低位置 字母上方和下方都有额外的空间 这是字体保留的 上方和下方的额外空间量并不相同 因为字体上方需要的空间多于下方 这扰乱了垂直居中 这个额外的空间非常重要 它为重音符号、元音符号等保留 但它可能会扰乱网页上的字体排印 文本框修剪为我们提供了 一种修剪掉这个额外空间的方法 同时仍然显示所有字形的全部内容 这不仅有助于垂直居中 请看这个例子 其中字体保留的 超过大写字母高度的额外空间 使得很难将 标题的顶部与图像的顶部对齐 通过修剪掉 额外的空间 对齐更容易了 这一切都还在不断改进中 属性名称已经从 leading-trim 更改为 text-box-trim 从 Safari Technology Preview 171 开始 你在屏幕上看到的代码 就是它的工作方式 但不要对这些细节过于依赖 我们预测它会不断改变 也许它会变成这样 请在 Safari Technology Preview 中 试试看 并告诉我们你的想法 来自像你这样的 网页设计师和开发者的早期反馈 是 CSS 变得更好的关键

与此同时 这是一种 在各种浏览器上有很好支持 并将很快引入 Safari 浏览器 17 的计数样式功能 你可能非常熟悉 HTML 中的有序列表 使用元素会自动为一系列项目编号 CSS 提供了一个 简单的机制来更改使用的编号系统 在这里 我正在应用 list-style: devanagari 有数十种不同的预定义编号系统 可以用一行 CSS 来应用 涵盖世界上的许多语言 但也并非所有语言都支持 那么塞尔维亚-克罗地亚语呢？ 如果我指定 list-style: upper-serbo-croatian 我只会得到默认的西阿拉伯数字 这就是计数样式的用途 我可以定义 一个类似于浏览器的编号系统 @counter-style 然后是我想要给它的名称 然后我定义样式的属性 在此情况下 将系统设置为 字母顺序并且列出符号 W3C 国际化工作组已经发布了 一个准备好的计数样式文档 涵盖了全球数百种文化 我们已增加了 WebKit 支持的语言数量 并在 CSS 工作组开展了讨论 以便所有浏览器 都能支持这些计数样式 但在此之前 你可以从该文档中复制代码片段 并粘贴到你的代码中 你还可以将列表计数器样式 设置为完全自定义的内容 我将此列表样式设置为 以二进制方式计数 最少四位数字 还有这个样式 可以循环使用一组表情符号 CSS 计数器还可用于对页面上其他 内容进行编号 而不仅限于列表 例如 每个章节开始的标题 请看这个示例 我有三个 H2 标题 每个标题只有一个单词 在 CSS 中 我通过声明 counter-reset 来创建一个计数器 我将其命名为“numbering” 并设置它从零开始计数 然后 使用 :before 伪元素 我应用在浏览器递增计数器 并将其显示在内容中 默认情况下 计数器使用 西方阿拉伯数字：1、2、3 但我们可以进行更改 就像之前一样 我可以将计数器的 样式设置成我想要的任何形式 这就是创建和样式化计数器的方法 但这还不是 我们今年所做的一切努力 为帮你将字体排印提升到更高水平 我们还有更多的内容 事实上 今年还会有 更多的 CSS 内容陆续发布 在 Safari 浏览器 16.2 中 我们还增加了对 Grid 和 Flexbox 的 最后基线对齐支持、 在 font-variant-alternates 中的 几个函数的支持 和 @font-feature-values 来进一步 支持 Open Type 字体的特性 Safari 浏览器 16.4 还增加了 对媒体查询范围语法的支持 以及布尔逻辑 @property 等等 Safari 浏览器 16.5 还增加了 对 CSS 嵌套的支持 而在 Safari 浏览器 17 中 我们还将添加 字体技术和字体格式的特性检测、 contain-intrinsic-size、 text-transform: full-width 和 full-size-kana 以及其他一些功能 我们想要向每一位向我们报告问题 在社交媒体上联系我们 或撰写博客文章的开发者 表示衷心的感谢 让我们了解 你迫切需要实现或改进的网页技术 我们会认真听取你的意见 并且你的反馈确实会很有帮助 请告诉我们你还需要什么 你可以在 WebKit 的 问题跟踪器 bugs.webkit.org 上 提交有关网页技术的 错误报告和功能请求 关于 Safari 浏览器接口 或 iOS、iPadOS 和 macOS 的任何问题 请在 feedbackassistant.apple.com 提交反馈 请确保你了解 Safari 浏览器支持的最新信息 因为我们经常收到开发者询问我们 是否可以实现某个已经发布的功能 Caniuse 是一个非常好的资源 可用于查找关于这方面的信息 你还可以在 webkit.org 上了解最新新闻 其中包括有关每个 Safari 浏览器版本的详细文章、 Safari Technology Preview 的发布说明、 Web Inspector 的更新等等 下载 Safari Technology Preview 以便了解后续的更新 它每两周左右更新一次 因此它具备 最新的 WebKit 增加功能 Safari Technology Preview 还包含 所有准备好的新功能 可以默认预览它们 或者你可以在 Safari 浏览器设置的 新功能标志面板中打开或关闭功能 从 Safari 浏览器 17 开始 你可以通过全新设计的 开发菜单进入设置界面 快速连接你的 Mac 上的 Web Inspector 到 你的 iPhone、iPad 或其他设备上的网站或网页 App 包括无线连接 或者在你手头没有设备的情况下 通过下载 免费的设备模拟器进行测试 并从开发菜单或者重新设计的 响应式网页设计模式中打开它们 你可以观看 WWDC23“重新发现 Safari 浏览器开发者功能” 以了解更多信息 网页 App 即将登陆 Mac 此外 我们还在一整年中不断改进 iPhone 和 iPad 上的网页 App “网页 App 的最新功能”讲座 介绍了所有相关内容 了解即将引入 Safari 浏览器和 WebKit 的新图片格式 包括 JPEG XL 并在“探索网页媒体格式”讲座中 了解有关最新 Managed Media Source API 的内容 今年在 WebKit 和 Safari 浏览器中 会发布的大量新网页技术 我们对此感到非常兴奋 希望你也同样如此 并且我们迫不及待地想看到 你用这些技术所创造的作品 感谢观看