Safari 17.2 中的 WebKit 功能

2023年12月11日

作者：Jen Simmons 和 Marcos Cáceres

网页技术不断向前发展，既有大型新功能，也有细微的调整。如今，Web 开发者期望 Web 浏览器每年更新多次，而不是像 2000 年代末那样每年更新一两次，或者更早之前那样每两到五年更新一次。在过去的几年里，您们让我们知道希望我们更频繁地发布更新。作为回应，我们在两年多前改变了 Safari 的版本编号方式。

在过去的 28 个月里，Safari 发布了 17 个新版本——15.0、15.1、15.2、15.3、15.4、15.5、15.6、16.0、16.1、16.2、16.3、16.4、16.5、16.6、17.0、17.1，以及今天的 Safari 17.2。这使得新的 Web 技术能够更广泛地分布在一年中推出，并更快地触达您的用户。

今天的版本包含了 39 项新功能和 169 项修复，是 Safari 有史以来最大的 12 月 Web 技术发布。让我们来看看其中有什么。

HTML

独占式手风琴

Safari 17.2 现在支持 <details> 元素上的 name 属性——这使得一些常用功能从需要 JavaScript 变成了 HTML 内置功能。如果您使用 name 属性为一系列 details 元素指定相同的名称，那么该系列中一次只会打开一个元素。

<details name="foobar" open>
  <summary>Item 1</summary>
  <p>Since this first item has an open attribute, it’s open by default.</p> 
</details>
<details name="foobar">
   <summary>Item 2</summary>
  <p>When you clicked this item, any other open item will automatically close.</p>
</details>
<details name="foobar">
   <summary>Item 3</summary>
  <p>Now, developers don’t have to write any JavaScript to get this behavior.</p> 
</details>

任何时候用户点击打开第二个项目时，第一个项目会自动关闭。这可能会带来更好的用户体验，但请务必确保它适合您的项目。考虑那些可能想要或需要比较不同项目的用户。思考是否会因为需要反复点击每个内容片段才能阅读它们而感到烦恼。这种模式在不恰当地使用时可能会令人沮丧——甚至难以访问。

这是一个比较差异的示例。请在支持此功能的浏览器中尝试。

一次性代码

之前通过其他技术在 Safari 中支持的，现在 WKWebView 在 iOS 17.2 和 iPadOS 17.2 中也提供了能够建议接收到的一次性代码的输入字段功能。

<label for="onetimecode">Enter code:</label>
<input name="onetimecode" id="onetimecode" type="text" autocomplete="one-time-code" />

CSS

嵌套

CSS 嵌套支持在 Safari 16.5 中推出，但有一个限制。您不能在不使用 &（或其他技术）的情况下嵌套元素选择器，以确保每个嵌套行都以符号开头。从 Safari 17.2 开始，这一限制不再必要。您现在可以这样编写：

article {
  h1 { 
    font-size: 1.8rem;
  }
  p {
    font-size: 1.2rem;  
  }
}

如果您想继续使用 &，您可以这样做。任何已经用 & 编写的代码将来仍会继续工作。事实上，& 仍然是其他嵌套技术的重要工具。在CSS 嵌套与层叠中了解更多。

新单位

如果您曾经编写过 CSS，那么您肯定使用过 em 和 rem 单位来设置排版和布局的大小。其中 1em 等于当前元素的 font-size 计算值，而 1rem 等于“根 em”，即根 <html> 元素上设置的字体大小。同时拥有 em 和 rem 使得我们在定义页面大部分区域的一致大小方面拥有很大的灵活性和能力。类似地，lh 单位与 rlh 一同发布，分别用于行高和根行高。

Safari 17.2 通过增加对 rcap、rex、ric 和 rch 的支持，扩展了根单位的灵活性和能力。这些单位等于根 <html> 元素上设置的 cap、ex、ic 和 ch 大小。

cap、ex、ic 和 ch 是什么？它们是强大的单位，指代字体中字形的不同测量值。

Diagram showing cap unit measuring from top to bottom of a capital letter A. The ex unit measures the height of a lowercase letter a. The ch unit is either the height or width of a 0. And the ic unit is either the height or width of the Chinese character for water.

CSS cap 是这些单位中最新的一个，现已在 Safari 17.2 中添加到 WebKit。1cap 的测量值等于第一个可用字体的 cap-height。

ex 单位指字体的 x-height。ch 单位等于字体中零字符的内联大小——在水平书写模式中，内联大小是宽度；在垂直书写模式中，是高度。ic 单位代表 CJK 脚本（中文、日文、韩文及相关书写系统）中的“表意字符”。与 ch 类似，ic 单位测量内联大小，在这种情况下，1ic 等于一个字符的宽度或高度。（由于 CJK 字体中所有表意字符通常占用相同的空间，因此测量哪个字符无关紧要。）

Safari 17.2 还添加了所有用于字体和根字体相对单位的类型化 OM 工厂函数，这些函数可用于从 JavaScript 构造 CSS 类型化值。

运动路径和形状

WebKit 首次在 Safari 16.0 中提供了对CSS 运动路径的支持，使 Web 开发者能够沿着任意形状的自定义路径为对象制作动画。

由于起步艰难和属性的反复更名，到 2022 年底，跨浏览器对 offset-* 属性的支持仍然极不均衡。Interop 2023 选择运动路径作为重点领域，吸引了三大浏览器引擎的注意力，以改进其实现。这一关注也导致了CSS 运动路径规范的许多变更。Safari 17.2 带来了 WebKit 匹配修订版 Web 标准所需的最后一批更新。

Safari 17.2 增加了对以下功能的支持：

  • 对 circle() 和 ellipse() 的 offset-position 支持
  • offset-position: normal
  • ray() 内部的 coord-box 和 <position> 参数
  • rect() 和 xywh() 形状

rect() 和 xywh() 形状也适用于 clip-path 和 shape-outside。如果您还记得，多年来我们一直能够为裁剪或移动内容定义形状。这些形状包括圆形、椭圆形、多边形和路径。现在，rect() 和 xywh() 形状都提供了快速定义矩形的方法。rect() 函数使用四个长度分别定义矩形顶部、右侧、底部和左侧边缘的位置，作为参照框顶部和左侧边缘的内嵌。而 xywh() 则借鉴了 SVG 中的 viewBox 属性，通过从参照框顶部和左侧边缘的偏移量以及指定的宽度和高度来定义矩形。

此外，为了提高实用性，offset-path 形状的大小现在是相对于包含块而不是元素本身来计算的，并且也考虑了包含块的 border-radius。

动画

Safari 17.2 增加了对 CSS 动画和过渡中 linear() 函数的支持。它允许您定义一个缓动函数，该函数在一组点之间线性插值。例如，linear(0, 0.25, 1) 生成一个缓动函数，它从 0 线性移动到 0.25，然后到 1。

Graph of linear easing, showing a straight line moving up to the right, hitting a point, and turning to a steeper angle, also straight.
多个点之间线性缓动的图示，来自 CSS Easing Functions Level 2 Web 标准。

数学函数

Safari 17.2 还增加了在 CSS 数学函数 rem()、mod()、round() 中混合百分比和长度参数的支持。

CSS 数学函数最初在 Safari 15.4 中推出。round() 函数根据所选的舍入策略返回一个舍入后的数字。而 rem() 和 mod() 函数返回第一个参数除以第二个参数后的余数或模数，类似于 JavaScript 的余数运算符。

能够将基于百分比的测量与其他类型的长度混合意味着，例如，您可以将宽度设置为 50% 并向上舍入到最近的 100px。或者在此演示中，将 100% 向下舍入到最近的 8ric。

body {
  --rounding-interval: 8ric;
}
aside {
  width: round(down, 100%, var(--rounding-interval));
}

试一试，调整窗口大小以查看效果。该框是流动的，但宽度会从 80ric 跳到 88ric 再到 96ric，依此类推，跳过中间的大小。

计数器

九月份，Safari 17.0 通过提供使用 @counter-style 设置计数器样式的功能，改进了 WebKit 对 CSS 计数器的支持。现在，在 Safari 17.2 中，WebKit 增加了对 counter-set 属性的支持，提供了在不创建新计数器的情况下更改计数中数字的功能。（counter-reset 的作用是创建新的计数器范围。）

Safari 17.2 还为 counter-set、counter-reset 和 counter-increment 属性添加了对 list-item 值的基本支持，允许操作 display: list-item 提供的自动编号。虽然 list-item 已在 counter() 和 counters() 中可用了一段时间，但现在您可以通过 counter-set: list-item X 和 counter-increment: list-item X（其中“X”是您选择的数字）来覆盖该值，而不仅仅是读取该值。

在 WWDC23 的CSS 新特性中了解更多关于 CSS 计数器的信息。

遮罩边框

多年来，-webkit-mask-box-image 提供了一种通过元素的边框对其边缘应用遮罩的方法。这个想法最初由 WebKit 实现，最终也进入了基于 Chromium 的浏览器。现在在 Safari 17.2 中，我们很荣幸成为第一个取消该属性前缀，并正式将其命名为mask-border的浏览器。

mask-border 属性是以下六个属性的缩写：

使用遮罩边框可以创建复杂的自定义边框边缘，并以独特的方式遮罩盒子边缘。

mask-border 的值与 border-image 的工作方式相同。

自定义高亮

Safari 17.2 增加了对 自定义高亮 API 的支持。有用于样式化某些 UA 提供的亮点（如 ::selection）的伪元素。现在，您可以为 JS 中任何任意的 Range 对象创建自己的亮点，并使用新的 CSS ::highlight() 伪元素对其进行样式设置，从而在不修改标记或 DOM 的情况下实现 Web 内容的自定义高亮显示。

高亮伪元素支持文本装饰，如加下划线和阴影，以及颜色和背景颜色的更改。

图像和视频

响应式图像

Safari 17.2 增加了对预加载响应式图像的支持。此代码要求浏览器从选项列表中评估哪种尺寸的图像是合适的，并预加载该图像。

<head>
  <title>Your page title</title>
  <!-- other items -->
  <link rel="preload" 
        as="image" 
        imagesrcset="flowers-small.jpg 400w, 
                     flowers-medium.jpg 800w, 
                     flowers-large.jpg 1200w,
                     flowers-extralarge.jpg 1500w" 
        imagesizes="50vw">
</head>

imagesrcset 和 imagesizes 属性的工作方式与常见的响应式图像技术中的 srcset 和 sizes 属性相同。

图像方向

在网页上渲染图像时，Safari 会在可用时使用图像文件中的 EXIF 元数据来确定图像的正确方向。此过程确保图像按其创建者的意图显示。

在早期版本中，这种自动方向行为在 ImageBitmapOptions 的 imageOrientation 属性中由术语 "none" 表示。在 Safari 17.2 中，为了更好地反映实际功能，此关键字已更改为 "from-image"。之前的术语 "none" 现已被视为已弃用。需要注意的是，此更改是为了清晰度而进行的重命名，并未引入新功能。

此外，目前正在讨论在 HTML 未来的更新中重新引入 "none" 并进行字面解释。然而，这项提议仍在考虑中，主要是由于可能存在向后兼容性问题。

SVG

Safari 17.2 增加了对 SVG <image crossorigin> 的支持，使得当具有 CORS 功能的跨域图像在 canvas 上绘制时能够进行回读。

Safari 17.2 还增加了对 animateTransform 缺少默认值 translate 的支持。

WebCodecs

Safari 17.2 为 WebCodecs 增加了对 H264 L1T2 的支持。WebKit 最初在 Safari 16.4 中提供了对视频 WebCodecs 的支持。它通过提供对视频流单个帧的低级访问，使 Web 开发者能够完全控制媒体的处理方式。这对于视频编辑、视频会议或其他实时视频处理应用程序特别有用。通过在 Safari 17.2 中添加 WebCodecs 对 H264 L1T2 的支持，开发者现在在向用户提供哪些格式方面拥有更大的灵活性。

媒体元素

之前仅作为 webkitPreservesPitch 提供，Safari 17.2 增加了对 HTMLMediaElement.preservesPitch 未加前缀版本的支持。此属性确定浏览器是否应调整音频的音高以补偿在 HTMLMediaElement.playbackRate 中进行的播放速率更改。

此外，Safari 17.2 还增加了对 'metadata' 轨道自动文本轨道选择的支持。

JavaScript

导入属性

Safari 17.2 增加了对 import 属性的支持。它提供了一种向模块 import 语句添加类型信息的方法，使您能够像这样导入 JSON 模块：

import json from "./foobar.json" with { type: "json" };
import("foobar.json", { with: { type: "json" } });

数字格式

Safari 17.2 增加了对 Intl.NumberFormat 的 FormatApproximately 操作的支持。Intl.NumberFormat 实例的 formatRange() 方法根据此 Intl.NumberFormat 对象的区域设置和格式选项格式化一系列数字。例如，USD 货币的格式范围如 formatRange(3, 5) 将显示为“$3.00 – $5.00”。如果这两个数字彼此非常接近，FormatApproximately 功能将在数字前面添加一个波浪号，因此 formatRange(2.9, 3.1) 将显示为“~$3”，即大约 3 美元。

Web API

Fetch 优先级

Safari 17.2 增加了对 Fetch 优先级的支持。它允许开发者设置资源（例如图像、脚本或链接资源，如样式表）相对于其他资源的优先级。这可以通过 fetchpriority HTML 属性或作为通过 Fetch API 传递的选项来完成。支持的值为“high”（高）、“low”（低）或“auto”（自动，默认）。例如：

<header>
  <!-- Prioritize this! -->
  <img fetchpriority="high" alt="I'm really important!" src="logo.png">
</header>
<main>...</main>
<footer>
  <!-- it's ok if this image loads later, it's below the fold -->
  <img fetchpriority="low" alt="I'm not very important" src="social.png">
</footer>

通过 Fetch API，您可以：

async function fetchHighPriorityData(){
  const response = await fetch("important/data.json", { priority: "high" });
  // process the high priority response data...
}
fetchHighPriorityData();

表单验证

Safari 17.2 增加了对验证错误中 title 模式属性的支持。设置后，当发生验证错误时，它会显示 title 属性的值。这仅在您提交表单或在您选择的事件上调用 reportValidity 时生效。

<form action="/login" id="form">
  <input 
    type="text" 
    name="username"
    placeholder="Username"
    pattern="[a-z]{1,10}"
    title="Must be shorter than 10 characters and lowercase only">
</form>

const form = document.getElementById("form");
form.addEventListener("keypress", () => form.reportValidity());
Password input field with error message in a bubble above, reading "Match the requested format: Must be shorter than 10 characters and lowercase only".

Canvas

Safari 17.2 增加了对 CanvasRenderingContext2D.prototype.reset() 的支持，该方法将 canvas 上下文重置为其默认状态（即将其清除为透明黑色，并将所有与 canvas 相关的内容重置为默认状态）。

DOM 事件

Safari 17.2 增加了对向禁用表单控件发送某些鼠标事件的支持。禁用的表单控件现在接收 mouseenter、mouseleave、mousemove、mouseover 和 mousewheel 事件。禁用的表单控件仍然不接收 click、mouseup 和 mousedown 事件。

Web 应用

登录 Cookie

当我们将 Web 应用引入 Mac 时，我们设计了“添加到程序坞”的体验，以便 macOS 将网站当前的 Cookie 复制到新的 Web 应用中。这样，如果有人在浏览器中登录了他们的账户，他们将在 Web 应用中保持登录状态。他们无需再次登录。

现在，同样的行为也适用于 iOS 17.2 和 iPadOS 17.2。无论用户是在 Safari、Safari View Controller 还是 iPhone 或 iPad 上的其他浏览器中，当他们点击“添加到主屏幕”并创建 Web 应用时，Cookie 都会被复制过去，包括登录状态信息。这仅在认证状态存储在 Cookie 中时才有效。其他类型的本地存储不会被复制。

用户将 Web 应用添加到主屏幕或程序坞后，不会共享其他网站数据，这对于隐私保护非常有利。

Web 应用图标

在 macOS 上，用户希望应用图标在各种尺寸下都清晰显示，范围从 16x16px 到 1024x1024px。通过 macOS Sonoma 上的 Safari 17.2，我们改进了 Web 应用图标的加载方式，解决了许多常见问题，例如图标出现模糊、边缘锯齿、缺少填充或加载失败。如果您为首选图标类型提供了多种尺寸变体，所有尺寸都会保存在 macOS 上，允许根据上下文显示最合适的尺寸。例如，最大的尺寸变体显示在访达的画廊视图和快速预览中，中等尺寸变体显示在程序坞和启动台中，而较小尺寸变体显示在聚焦中。

为了在 macOS 上提供最佳用户体验，请在 Web 应用清单中至少提供一个不透明、全出血的 maskable 方形图标，可以是 SVG（任意大小）或高分辨率位图（1024×1024）。如果 Web 应用清单未指定任何高分辨率全出血图标，Safari 可能会退回到 apple-touch-icon，如果它能改善用户体验。如果您通过网页上的链接元素指定了 apple-touch-icon，请不要根据用户代理检测省略这些链接元素。当您仅提供具有自定义形状的透明图标时，Safari 会自动调整图标与 macOS 标准系统背景之间的间距，以避免切线问题。

用户选项

现在，在 Mac 上的 Web 应用中，您可以通过前往“视图”>“显示状态栏”来启用状态栏。启用后，无论何时将鼠标悬停在链接上，URL 都会显示在 Web 应用窗口的左下角。

Mac 上的 Web 应用也新增了一项功能：用户只需单击一个按钮，即可轻松更改新 Web 应用窗口中默认加载的网页。导航到该页面，打开“设置”，然后点击“设为当前页”。

Settings panel for a web app. Showing the button to "Set to Current Page".

WebGL

Safari 17.2 增加了对两个新的 WebGL 扩展 EXT_blend_func_extended 和 WEBGL_clip_cull_distance 的支持。

隐私

Safari 17.2 增加了 Blob 分区功能。现在 Blob 会按顶级站点进行分区，以防止它们成为潜在的跨站点跟踪向量。

Web Inspector

包含颜色变量的调色板

如今，许多网站都使用 CSS 自定义属性来定义网站所用颜色的一组变量。但要记住变量名可能很困难，而且每次都去查找也很麻烦。

Color picker showing four rows of boxes at the bottom — each box holding a different color that's been defined in a CSS variable by the web developer.

颜色选择器（在“样式”侧边栏面板中点击内联颜色样本时显示）现在提供了一个调色板，其中包含所选元素的所有适用颜色变量。这使得可以轻松一览所有旨在重复使用的预定义颜色。点击“变量”调色板中的任何颜色样本即可使用相应的颜色变量。

动画

CSS 动画或过渡的进程由一个计时函数控制，该函数定义了加速、减速或播放平滑度等方面。Web Inspector 在“样式”侧边栏面板的 animation-timing-function 和 transition-timing-function CSS 属性旁边显示一个内联颜色样本。点击该样本会触发一个专门的编辑器，该编辑器提供给定计时函数值的效果预览以及用于调整特定参数的输入控件。

Web Inspector 已经提供了 cubic-bezier()、linear、ease-in、ease-out 和 ease-in-out 等计时函数值的预览和编辑功能。随着 Safari 中 steps() 计时函数的引入，Web Inspector 中现在也提供了专门的预览和编辑器。

Screenshot of animation timing function steps editor, in Web Inspector. A dropdown box that shows the shape of the timing function — it looks like a set of steps in a staircase.

像 animation-timing-function: steps(5) 这样的 CSS 声明告诉浏览器将动画时间分成五个等长的片段，并以离散的步骤播放，而不是平滑的进程，其效果类似于定格动画。steps() 计时函数的专门编辑器以阶梯状图示显示效果预览，并提供控制来调整步数和步进位置。

Interop 2023 及更多修复

Safari 17.2 的 WebKit 还包括大量错误修复和功能改进。其中许多修复是我们为改进Interop 2023 的 26 个重点领域所做贡献的一部分。

Interop 项目是 Apple、Bocoup、Igalia、Google、Microsoft 和 Mozilla 之间正在进行的合作，旨在关注一组特定的 Web 技术，并使它们在每个浏览器中都能完全相同地工作。在 2023 年初，所有三个主要浏览器引擎的发布版本中，通过选定自动化测试的比例不到 49%。现在，在预览版本中，超过 93% 的测试通过。

Current Interop 2023 scores: Chrome, 99%. Firefox, 95%. Safari 97%.Graph of Interop 2023 scores, starting at 59-81% and going up across the year to 93-99%.

今年秋季，作为 Interop 2023 的一部分，Chrome 中发布了 subgrid 和 CSS Masking，而 Firefox 中发布了 :has() 和 @property。自我们上次发布以来，Safari 大幅改进了我们对指针和鼠标事件的实现，为 Web Codecs 添加了更多编解码器支持，重新设计了 CSS 运动路径，并将 WebKit 工程工作的很大一部分用于修复分散在重点领域中的数十个剩余测试失败。

您可以通过查看 Interop 仪表板了解更多关于 Interop 2023 的成就。

已解决的问题

可访问性

  • 修复了解析 ARIA role 属性时忽略前导和尾随空格（包括换行符）的问题。(113923520)
  • 修复了表单地标在缺少标签时被错误暴露的问题。(115462091)
  • 修复了 role="treeitem" 元素的非组和非树项目子元素在动态更改后失效的问题。(115936550)
  • 修复了设置切换后，播放动画和暂停动画的动图上下文菜单项有时不出现的问题。(117215059)
  • 修复了当按钮位于影子根中时，VoiceOver 不播报按钮标签的问题。(118118138)

Apple Pay

  • 在 shippingContactEditingMode 中，enabled 已弃用，取而代之的是 available。(113159800)

自动填充

  • 修复了选择“建议新密码”后，“强密码”按钮被剪裁的问题。(113701243)

CSS

  • 修复了 @font-palette-values 的 font-family 描述符接受多个值的问题。(105975619)
  • 修复了 :has(:scope) 匹配问题。(106524140)
  • 修复了伪元素中容器单位的容器选择问题。(106739553)
  • 修复了带字体单位的容器查询在字体更改时失效的问题。(106739736)
  • 修复了 :nth-child() 在非主体位置时失效的问题。(106740353)
  • 修复了 :has(:host) 失效问题。(106768205)
  • 修复了 :has(:nth-child()) 失效及相关问题。(106768224)
  • 修复了导致作用域中断的 :has(:is(...)) 选择器失效的问题。(106768250)
  • 修复了在 @property 初始值中使用视口单位时，动态更新的处理问题。(108287215)
  • 修复了基线对齐的弹性项目也使用其回退对齐方式进行对齐的问题。(109496710)
  • 修复：更改为允许在 @font-face 和 @font-palette-values 中使用空的 font-family 名称。(109613703)
  • 修复了 offset-path 的 <basic-shape> 实现。(110565070)
  • 修复了 :user-invalid 和 :user-valid 与表单重置和提交的交互问题。(110677832)
  • 修复了 offset-path 的 <coord-box> 实现。(110938788)
  • 修复了 <position> 永远不会序列化为单个值的问题。(111750372)
  • 修复了 NaN 数值表示为 0 而非 Infinity 的问题。(111984451)
  • 修复了序列化 CSS 数学函数根节点的问题。(111984509)
  • 修复了 min() 和 max() 带一个参数时总是折叠为 calc() 的问题。(111986569)
  • 修复了使用 padding-block 或 padding-inline 的动画不覆盖已设置的填充样式的问题。(112023856)
  • 修复了 color-mix() 尊重 :visited 样式来解析“currentcolor”的问题。(112419198)
  • 修复了序列化时始终序列化隐式 & 和隐式嵌套规则的问题。(112900363)
  • 修复了 <hr> 元素的 width 属性设置为 0 或 0px 时能正确计算为 0px 的问题。(113087533)
  • 修复了 mod() 求值问题。(113213059)
  • 修复了当数字是步长的倍数时 round() 求值问题。(113233588)
  • 修复了 font-size-adjust 的 from-font 值计算问题。(113328110)
  • 修复了 color-mix() 中百分比的序列化问题。(113399146)
  • 修复了如果图像无效，border-image 将回退到 border 属性的问题。(113646392)
  • 修复了 <family-name> 禁用通用族的问题。(113746537)
  • 修复了为与 motion-path 一起使用的 ray() 设置包含块矩形时，对正在进行的布局的检查问题。(113780201)
  • 修复了当同时使用 scale 属性时，rotate 属性的动画问题。(113999490)
  • 修复了 <resolution> 不接受 @property 的负分辨率问题。(114235642)
  • 修复了 currentcolor 正确继承计算出的 :visited 样式的问题。(114254856)
  • 修复了嵌套子网格不参与封闭轨道尺寸计算的问题。(114271839)
  • 修复了 container-name 使用范围名称的问题。(114284428)
  • 修复了容器单位解析检查所选容器是否符合条件的问题。(114291153)
  • 修复了 scripting 媒体查询永远不匹配 initial-only 的问题。(114340361)
  • 修复了表单提交也会影响 :user-invalid 和 :user-valid 状态的问题。(114580382)
  • 修复了 ::part 伪元素的容器从原始元素树中选择的问题。(114626579)
  • 修复了颜色中 infinity 和 -infinity 的序列化问题。(114808320)
  • 修复了 lab, lch, oklab, oklch 组件被限制在适当范围的问题。(114808444)
  • 修复了 color-mix() 不序列化为旧版颜色语法的问题。(114949008)
  • 修复了通过使用其固有大小作为宽度来解析替换元素大小的问题。(115007278)
  • 修复了基本形状使用偏移运动路径的问题。(115068196)
  • 修复了网格不总是将第一个和最后一个基线对齐的项目放入不同的对齐上下文的问题。(115083708)
  • 修复了通过考虑第一/最后基线的备用对齐来确定非正交网格项的 columnAxisPosition 的问题。(115136343)
  • 修复了 :has(~ :is(.x ~ .y)) 在失效时考虑 :has 范围的所有同级元素的问题。(115205991)
  • 修复了输入元素上 :default 伪类更改失效的问题。(115236525)
  • 修复了 calc(clamp(1px, 1em, 1vh)) 折叠为 clamp(1px, 1em, 1vh) 的问题。(115240159)
  • 修复了带有 border-radius 的偏移路径内嵌形状。(115316728)
  • 修复了通过考虑第一个和最后一个基线对齐的网格项来确定网格基线的问题。(115441833)
  • 修复了 grid-area 计算样式的序列化问题。(115521493)
  • 修复了 circle() 或 ellipse() 中未指定时，不序列化 at <position> 的问题。(115866108)
  • 修复了 shape-outside 的序列化问题。(115938310)
  • 修复了 clip-path 和 offset-path 的序列化问题。(115953688)
  • 修复了 getComputedStyle() 返回 font-size-adjust: from-font 的解析值的问题。(116151111)
  • 修复了非正交子网格的 margin、border 和 padding 被考虑用于同一对齐上下文中的自对齐基线项目的问题。(116206243)
  • 修复了子网格的行开始外边距在外层网格中列大小调整后才解析的问题。(116369419)
  • 修复了累积非正交嵌套子网格的 margin、border 和 padding 之和，用于列轴上的第一个基线对齐的问题。(116443747)
  • 修复了 CSS 网格对具有非正交祖先的子网格项在列轴上的最后基线对齐的支持。(116484865)
  • 修复了在解析时验证 @property 的问题。(116803886)
  • 修复了当网格具有 aspect-ratio 和确定逻辑宽度时，计算网格行确定自由空间的问题。(117138268)
  • 修复了通过奇异变换的变换动画连续性问题。(117209302)
  • 修复了 @supports selector(:popover-open) 以反映禁用状态的问题。(117226626)
  • 修复了 CSS 网格合成列轴上网格项中心基线的问题。(117424263)
  • 修复了 CSS 高亮伪元素的序列化问题。(117864974)

DOM

  • 修复了处理后台缓存中网页计划任务的问题。(116349535)
  • 移除了非标准的 incremental 属性和 search 事件。(48937114)

字体

  • 修复了 COLRv0 字体渲染问题。(115721319)

HTML

  • 修复了 <input type="number"> 在输入小数时不返回正确值的问题。(107187010)
  • 修复了 Web 应用中在按下系统播放/暂停键时警报声音会重放的问题。播放短时长的 <audio> 源不再将页面注册为系统的“正在播放”应用程序。(114667001)
  • 修复了 <base> 元素的动态处理问题。(114756660)
  • 修复了 <base> 元素的 URL 编码问题。(114861187)
  • 修复了 SVG <image> 元素的 URL 编码问题。(114873373)
  • 修复了图像输入类型上空值属性不被忽略的问题。(114887143)
  • 修复了密码字段中 [dir=auto] 失效的问题。(115887776)

HTTP

  • 修复了当涉及客户端重定向时 COOP 头破坏前进和后退行为的问题。(104659192)

JavaScript

  • 修复了 for 循环语义中的一个边缘情况。(44730906)
  • 修复：优化了 Array#splice，如果结果数组完全不使用则跳过其创建。(113367762)
  • 修复：更新了 Intl.DateTimeFormat 以仅获取一次选项，与规范更改匹配。(113789192)
  • 修复：将 minimumFractionDigits 和 maximumFractionDigits 的限制从 20 增加到 100。(113869343)
  • 修复了优化 JIT 中四舍五入到最近整数的问题。(114208146)
  • 修复了全局和 eval 代码在函数声明试图遮蔽不可配置、不可写的全局属性时抛出 TypeError 的问题。(114215396)
  • 修复了 Intl.NumberFormat 和 Intl.PluralRules 的 roundingIncrement 以匹配规范更改。(114219889)

加载

  • 修复了导航到没有不透明路径的 about 方案 URL 的问题。(116238322)

媒体

  • 修复了 Safari 在进入全屏时会短暂地将 document.visibilityState 更改为 hidden 的问题。(104984915)
  • 修复了当视频元素第一个样本的呈现时间略大于 0 时，canplay 事件触发的问题。(105169372)
  • 修复了 RTCRtpSender maxFramerate 编码参数无效的问题。(112397603)
  • 修复了音频延迟曲线中 NaN 的处理问题。(114881060)
  • 修复了 WebCodecs 硬件编码器丢失帧的问题。(115252749)
  • 修复了带有事件监听器的音频元素未被垃圾回收的问题。(116346717) (FB13224538)
  • 修复了音频和视频 WebCodec 解码器和编码器的关闭算法以匹配规范更改的问题。(116346725)
  • 修复了当 srcObject 为视频流时的画中画问题。(116465668)
  • 修复了最大宽度或高度限制导致 getDisplayMedia 视频模糊的问题。(116810370)
  • 修复了 object-fit: fill 对使用 canvas 流 srcObject 的视频元素有效的问题。(116832514)
  • 修复了实时音频线程数量限制的问题。(116864442)

网络

  • 修复了导致 iWork 文档中嵌入视频失败的问题。(116493190)

渲染

  • 修复了 CSS 颜色方案更改时滚动条不更新的问题。(99567600)
  • 修复了 <colgroup> 元素上忽略 calc() 值的问题。(106692191)
  • 修复了脱离流的框不显示的问题。(112733052) (FB12722063)
  • 修复了脱离流的 <br> 不触发换行的问题。(113208050)
  • 修复了祖先子网格的间距添加到后代子网格的额外外边距层的问题。(114271857)
  • 修复了从其他应用（或标签页）切换到 Safari 时会闪烁黑屏的 Bug。(116530284)

Safari

  • 修复了通过 APNS 提供的网站通知会显示域名和 Safari 图标，与通过 Web Push 提供的网站通知外观一致的问题。(116612341)

Safari 扩展

  • 修复了动态 declarativeNetRequest 规则不会覆盖静态规则的问题。(107044339) (FB12074742)
  • 修复了 domains、requestDomains、excludedDomains 和 excludedRequestDomains declarativeNetRequest 值的行为，使其默认匹配子域名。(117592996)

滚动

  • 修复了点击和拖动重叠于具有 overflow: scroll 容器的复合定位后代的覆盖滚动条的问题。(89598421)
  • 修复了在 pointer-events: none 内部嵌套 pointer-events: auto 时的滚动问题。(110954175)
  • 修复了导致某些复杂网站在滚动时冻结的 Bug。(113318934)

Service Workers

  • 修复了 DOMCache 中导致 Service Worker fetch 错误的缓存未命中 Bug。(115740959) (FB13188943)

SVG

  • 修复了当 transform-box 不是 view-box 时，用于 SVG 的运动路径锚点。(108285569)
  • 修复了 paint-order 属性继承的问题。(114030037)
  • 修复了 SVG 遮罩作为 CSS mask-image 的遮罩资源工作的问题。(114465545)
  • 修复了当 CSS 引用过滤器更改时，重新绘制带有该过滤器的 SVG 元素的问题。(117047658)

文本

  • 修复了字体回退忽略私用区域 Unicode 码点的通用族的问题。(115901340) (FB13197885)

Web 动画

  • 修复了 color-scheme 支持离散动画的问题。(94615599)

Web API

  • 修复了 createPattern 对零高度图像返回 null 的问题。(104285727)
  • 修复：使 <script type language> 与 HTML 标准对齐。(109600797)
  • 修复了对于包含内部非 http(s): URL 的 blob: URL 返回不透明源的问题。(109781193)
  • 修复：如果可导航目标名称包含悬挂标记，则将其更改为 _blank。(110134016)
  • 修复了如果制表符大小为 <length> 且到下一个制表符停止点的距离小于 0.5ch 时，制表符停止点不正确的问题。(112043546)
  • 修复了 URL、pathname 和 search setter 错误地去除尾随空格的问题。(112433299)
  • 修复了自定义高亮文本装饰尊重优先级的问题。(112494779)
  • 修复了对具有浏览上下文的插件元素的可聚焦性处理问题。(112821601)
  • 修复：将嵌入隐藏转换为适当的布尔属性。(113051256)
  • 修复了解析选项中的边缘情况。(113826514)
  • 修复了 <a> 和 <area> 来源获取器对不可解析的 URL 返回空字符串的问题。(114078288)
  • 修复了 <a> 和 <area> 对不可解析 URL 的协议设置器问题。(114371380)
  • 修复了 URL 的协议设置器禁止将特殊 URL 更改为非特殊 URL 的问题。(114624048)
  • 修复了 Worker 和 SharedWorker 在解析错误时触发 Event 而不是 ErrorEvent 的问题。(114694487)
  • 修复了 adoptedStyleSheets.length 可设置，并改进了 ObservableArray 与规范的对齐。(114822538)
  • 修复了可能导致 DOM Document 对象之间相等性检查不正确的 Bug。(114857465)
  • 修复了为 WebAudio 创建 DelayNode 时检查 NaN 的问题。(115008784)
  • 修复了 element.querySelector(":has(:scope *)") 永远不匹配的问题。(115158183)
  • 修复了子节点的变动事件。(115527098)
  • 修复了鼠标事件处理，使得如果拖动操作是从已取消的 mousedown 事件开始的，则所有后续鼠标事件都发送到起始帧，直到拖动操作以相应的 mouseup 事件结束。(116668701)
  • 修复了复杂影子 DOM 中弹出元素的光影消失（light dismiss）计算被破坏的问题。(117214343)

Web 应用

  • 修复了退出并重新启动后页面缩放重置为 100% 的问题。(110298546) (FB12233006)
  • 修复了 Web 应用中 theme-color 未应用于标题栏的 Bug。(112980819)
  • 修复了有时登录页面意外地在 Safari 中而不是在 Web 应用中打开的问题。(113520837)
  • 修复了在通知送达 30 秒后点击通知无法打开 Web 应用的问题。(113757950)
  • 修复了重新启动 Web 应用后反复请求相机访问权限的问题。(114110664)
  • 修复了记住添加到程序坞的网页窗口大小的问题。(114534506)
  • 修复了开始下载后，屏幕上会保留一个空白窗口的问题。(115457207)
  • 修复了某些登录页面意外地在 Safari 中打开的问题。(115527738) (FB13171758)
  • 修复了 Web 应用清单中的 scope 成员未被遵守的 Bug。(116261588)
  • 修复了 Safari 中的自动填充设置在 Web 应用中不起作用的问题。(117671220)
  • 修复了 option+点击链接无法开始下载的问题。(117809013)
  • 修复了基于 JavaScript 的重定向到外部网站会导致出现空白窗口或当前窗口消失的问题。(117809066)
  • 修复了 Web 应用使用情况未在“屏幕使用时间”中反映的问题。(117809075)
  • 修复了阻止“忽略屏幕使用时间限制”在 Web 应用中起作用的问题。(117809075)

WebAssembly

  • 修复了使用 v128.any_true 时 WebAssembly SIMD 向量可能损坏的问题。(111050621)

Web Inspector

  • 修复：当 Web Inspector 过窄时，将详情侧边栏移到底部。(63567675) (FB7711657)
  • 修复了日志到控制台的具有多个同名私有字段的对象问题。(109215331)
  • 修复了搜索功能损坏的问题。(113714342)

WebDriver

  • 修复了分派的鼠标事件的 buttons 属性始终设置为零的问题。(116049187)

WebGL

  • 修复了 WebGL 中多级纹理会丢失级别的问题。(116362216)

WebRTC

  • 修复了视频会议应用中切换音频输入时长时间延迟的问题。(102724364)
  • 修复了使用 TransformStream 和 Simulcast 时的视频质量问题。(110395571)
  • 修复了 WebRTC UDP 流量使用已被 TCP 流量使用的接口的问题。(111000448)
  • 修复了 RTCDataChannel 使用 BinaryType 以与规范对齐的问题。(114559008)

更新至 Safari 17.2

Safari 17.2 适用于 iOS 17、iPadOS 17、macOS Sonoma、macOS Ventura 和 macOS Monterey。

如果您正在运行 macOS Ventura 或 macOS Monterey，您可以通过前往“软件更新”并点击“更多信息”来单独更新 Safari。在 macOS Ventura 上，路径是  > “系统设置” > “通用” > “软件更新” > “更多信息”。要在您的 iPhone 或 iPad 上获取最新版本的 Safari，请前往“设置”>“通用”>“软件更新”，然后轻点更新。

反馈

我们乐于听取您的意见。要分享您对 Safari 17.2 的看法，请在 Mastodon 上找到我们：@jensimmons@front-end.social 和 @jondavis@mastodon.social。或者在 X 上向 @webkit 发送回复。如果您遇到任何问题，欢迎您就 Safari UI 提供反馈，或就 Web 技术或 Web Inspector 提交 WebKit Bug 报告。提交问题确实会带来改变。

下载最新的Safari 技术预览版，以保持在 Web 平台的最前沿，并使用最新的 Web Inspector 功能。

您还可以在Safari 17.2 发行说明中找到此信息。