Safari 17.0 中的 WebKit 功能

2023 年 9 月 18 日

作者：Jen Simmons 和 Safari / WebKit 团队

今天是 Safari 17.0 发布的日子。它现在可用于 iOS 17 和 iPadOS 17。

[9 月 26 日更新] 现在，Safari 17.0 已可用于 macOS Ventura、macOS Monterey 和 macOS Sonoma。Safari 17.0 也可用于 vision OS 模拟器，您可以通过下载支持 visionOS SDK 的 Xcode 15 最新测试版来测试您的网站。

如果您运行的是 macOS Ventura 或 macOS Monterey，可以通过前往“软件更新”并点击“更多信息”来更新 Safari。在 macOS Ventura 中，这表示  > 系统设置 > 通用 > 软件更新 > 更多信息，然后选择更新 Safari。要在您的 iPhone 或 iPad 上获取 Safari 17.0，请前往“设置”>“通用”>“软件更新”，然后轻点以更新到 iOS 17 或 iPadOS 17。

word cloud of all the features in Safari 17.0, which are all described in this article

HTML

新的 search 元素

尽管新的 Web 技术一直在 Web 标准中定义，但全新的 HTML 元素却很少出现。这只有在某个功能满足 极高 的实用性期望时才会发生。搜索是大多数网站的关键功能，因此现在有了一个新元素 — <search>。

到目前为止，搜索框通常是这样构建的

<div class="search-box" role="search">
  <form action="/search">
    <p><input type="search" name="q"> <input type="submit" value="Search!"></p>   
  </form>
</div>

请注意上面代码的第一行中存在 ARIA role="search"。如果没有 ARIA 搜索角色，搜索功能将无法正确地供所有用户访问 — 这个问题非常容易造成。

<search> 元素自动为网站或 Web 应用的搜索部分提供正确的可访问性语义。这与 HTML 的原则一致，使默认值可访问，而不是要求您记住采取操作以添加可访问性。<search> 元素还提供语义标记，用于将搜索表单的固有含义传达给各种计算上下文，从翻译算法到机器学习。

我们很高兴成为第一个推出这个新 <search> 元素的浏览器，它现在在 Safari 17.0 中得到支持。

<search>
  <form action="/search">
    <p><input type="search" name="q"> <input type="submit" value="Search!"></p>   
  </form>
</search>

没有 search 元素支持的浏览器会识别到存在一个元素，并识别其任何属性 — 包括角色、ID 和类。它将像一个通用元素一样运行，就像它是一个 <div>。因此，我们建议您目前在 <search> 元素上包含一个 ARIA 搜索角色。通过使用 <search role="search">，您将确保每个用户都能获得预期的体验。将来，当所有浏览器都支持时，您可以删除 ARIA 搜索角色。

同时，您今天可以放心地开始使用 <search>，远在您的受众中很大一部分人使用支持该功能的浏览器之前。

浮窗

Safari 17.0 增加了对 popover 属性的支持。它提供了一个内置于 Web 中的框架，用于显示覆盖层、弹出窗口、浮窗和对话框。

popover 属性有两种类型的值可供使用：

  • auto 浮窗，当您点击浮窗外部时会自动关闭；以及
  • manual 浮窗，不具有此自动关闭行为。

从一个按钮（可以是 <button> 或 <input type="button">）开始创建用于打开和关闭浮窗的 UI。然后，添加适当的 HTML 属性以创建所需的结果。

popovertarget 属性通过 ID 将按钮连接到浮窗内容。可选的 popovertargetaction 属性接受 show、hide 或 toggle 作为值。默认情况下，使用 toggle。

<button popovertarget="info-box" popovertargetaction="show">More info</button>

<article id="info-box" popover="auto">
  <h2>Additional Information</h2>
  <p>Here’s something I wanted to tell you.</p>
  <button popovertarget="info-box" popovertargetaction="hide">Close</button>
</article>

这只是您可能会觉得有用的一个 UI 模式。有许多可能的组合。在 HTML 中拥有浮窗机制可以快速完成工作，同时确保出色的可用性和完全的可访问性。

要超越简单的按钮触发，JavaScript API 通过 showPopover()、hidePopover() 和 togglePopover() 开启了更强大的可能性。

select 元素内的水平分隔线

Safari 17.0 在 macOS 上还增加了对 <select> 内部 <hr> 的支持，这是 WebKit 团队添加到 HTML Web 标准中的一项功能。这使得在不要求使用 JavaScript 的情况下更容易在项目之间创建视觉分隔线。

<select>
  <option value="pizza">Pizza</option>
  <option value="hamburger">Hamburger</option>
  <hr>
  <option value="sushi">Ice cream</option>
  <option value="pasta">Cake</option>
</select>

CSS

字体大小调整

在 Safari 16.4 中，我们发布了对 font-size-adjust 的初步支持，它允许您轻松地使不同字体的视觉大小保持一致 — 即使在所有可能的备用字体组合中也是如此。

font-size-adjust 的基本版本允许您告诉浏览器调整字母大小，使其 x 高度与 font-size 成特定比例。在 Safari 17.0 中，我们正在扩展支持，以包括 font-size-adjust 的更多高级功能，包括 from-font 值和双值语法。

双值语法允许您从调整 ex-height 切换到调整 cap-height、ch-width、ic-width 或 ic-height — 为更广泛的书写系统和设计选择提供支持。

Slide from WWDC23, showing where on various letters and characters the measurements ex-height, cap-height, ch-width, ic-width, and ic-height apply.
通过观看 WWDC23 的《CSS 新功能》来了解更多关于 `font-size-adjust` 如何工作的信息。

from-font 值允许您要求浏览器从指定的主字体中提取大小度量，并将该比例应用于所有字体，而不是使用数字值声明比例。

让我们看一个例子。在这里，font-size-adjust 告诉浏览器使 article 内部的所有字体与所使用主字体的 x 高度大小匹配。这意味着段落和代码中的所有文本在视觉上将显示为相同大小，无论从哪个堆栈应用了哪种字体，或者段落和代码字体在实际大小上有多么不同。

article { 
  font-family: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
  font-size: 1.4rem;
  font-size-adjust: from-font;
}
article code {
  font-family: "Courier New", monospace;
}

Safari 17.0 还增加了对 @font-face size-adjust 的支持，为您在定义字体使用时提供了一种规范视觉大小的方法。

文本转换

Safari 17.0 增加了对 text-transform: full-width 和 text-transform: full-size-kana 的支持。

full-width 值将文本中的所有字符转换为“全角” — 与中文、日文或韩文（CJK）等东亚文字中定义的字符宽度相匹配。这在排版垂直文本或希望在混合 CJK 与拉丁文或其他文字时提供大小一致性时特别有用。

full-size-kana 值将日文中小假名字符的大小转换为与它们的全角对应字符相似 — 这种技术有时用于使 ruby 文本在小尺寸下更清晰。

Safari 17.0 还增加了对声明多个 text-transform 值的支持，以便这些值可以组合使用。例如，text-transform: uppercase full-width 将把拉丁文字中的字符转换为全部大写字母并与字体中的 CJK 字符具有相同的宽度。

字体支持测试

为了扩展 Web 排版的可能性，Safari 17.0 增加了两个 特性查询，用于根据浏览器是否支持特定字体格式或技术来有条件地应用 CSS：@supports font-format() 和 @supports font-tech()。

字体格式特性查询测试对特定字体格式（如 opentype 和 woff2）的支持。 字体技术特性查询允许您测试对特定 OpenType 技术（如 COLRv0）的支持。

@supports not (font-tech(color-COLRv0) or font-tech(color-COLRv1)) {
  h1 {
    color: --text-color-for-non-color-fonts;
  }
}

Safari 17.0 还增加了对 @font-face { src: url() tech() } 的支持，这使得您可以轻松地告诉浏览器仅在其底层技术受支持时才下载和使用字体，同时提供替代字体文件作为备用。

@font-face {
    font-family: "My Cool Font";
    src: url("mycoolfont-COLRv0.otf") format(opentype) tech(color-COLRv0),
         url("mycoolfont-COLRv1.otf") format(opentype) tech(color-COLRv1),
         url("mycoolfont-outline.otf") format(opentype);
}

连字符

自 2011 年以来，Safari 一直支持带有 -webkit- 前缀的 hyphens 和 hyphenate-character 属性，现在它们已支持无前缀形式。

hyphens 属性允许您指定文本换行到多行时单词是否应使用连字符。默认值 hyphens:manual 会导致浏览器仅在手动指定的点处添加连字符。您可以改为要求浏览器根据算法自动插入连字符。请务必使用 lang 属性来标识所使用的语言，以便浏览器可以引用正确的连字符词典。

<html lang="en-US">
  <p>Content that will be hyphenated according to 
  the grammatical rules of U.S. English.<p>
</html>           

article {
  hyphens: auto;
}

hyphenate-character 属性允许您指定在单词中断时使用的字符（或字符串）。默认情况下，它设置为内容语言的排版约定。例如，在英语中，它设置为 -。但如果您需要更改它，可以进行更改。

计数器样式

Safari 17.0 增加了对 @counter-style 的支持。

a slide from WWDC23 of a Counter Styles example, where the code creates a list with emoji smiley faces as the list markers.
通过观看 WWDC23 的《CSS 新功能》来了解更多关于 CSS 计数器和计数器样式如何工作的信息。

CSS 计数器样式提供了一种机制，用于在 CSS 中更改计数器的语言或字符集 — 无论是对于有序/无序列表（使用 list-style-type）还是对于 CSS 计数器。

例如，我可以为塞尔维亚语定义一个计数系统，并用它来为有序列表编号。

@counter-style upper-serbian {
  system: alphabetic;
  symbols: 'А' 'Б' 'В' 'Г' 'Д' 'Ђ' 'Е' 'Ж' 'З' 'И' 'Ј' 'К' 'Л' 'Љ' 'М' 'Н' 'Њ' 'О' 'П' 'Р' 'С' 'Т' 'Ћ' 'У' 'Ф' 'Х' 'Ц' 'Ч' 'Џ' 'Ш';
}
ol { 
  list-style: upper-serbian; 
}

display contents

适用于 Safari 17.0 的 WebKit 修复了我们剩余的 display:contents 的可访问性问题。

样式设置为 display:contents 的元素的体验改进包括

  • 使 HTML 表格和表格组件可用于可访问性树。
  • 确保具有 ARIA 角色 grid、treegrid、table、row、gridcell、cell、columnheader、tree 和 treeitem 的元素在可访问性树中正确公开。
  • 确保 aria-checked 适用于具有 ARIA 角色 tree 和 treeitem 的元素。
  • 为列表返回正确的子角色，包括具有 ARIA 角色 directory 的元素。
  • 确保元素不缺少其子元素。
  • 使元素能够返回选定的可访问性子元素。
  • 计算依赖标签或标题的可访问名称。
  • 为链接和标题计算正确的辅助功能点击点。
  • 正确暴露具有 display:contents 列表项的列表。
  • 使 aria-checked 适用于 role="treeitem"。
  • 使 aria-activedescendant 正常工作。
  • 使 aria-grabbed 和 aria-dropeffect 正常工作。
  • 使 aria-flowto 正常工作。
  • 使 CSS speak-as、AXAccessKey、aria-owns 和 URL AX API 正常工作。

Safari 17.0 还修复了应用于 display: flex、grid、block 或 inline-block 的 HTML 表格和表格组件的可访问性问题。

媒体查询

Safari 17.0 完成了 WebKit 对 媒体查询级别 4 Web 标准的支持，增加了对四种新媒体查询的支持。

像其他媒体查询一样，overflow-block 和 overflow-inline 提供了一种根据用户设备的特性有条件地应用 CSS 的方式 — 在这种情况下，是设备如何处理溢出。例如，它能像计算机上的典型浏览器一样滚动页面吗？它会像电子书阅读器一样分页内容吗？或者它没有处理溢出的机制，比如数字广告牌？

update 媒体查询提供了一种根据设备的刷新率应用 CSS 的方式。例如，电子书阅读器屏幕通常刷新率较慢。打印页面根本没有刷新率。

我们还增加了对 scripting 媒体查询的支持。它允许您根据用户浏览器中是否启用了 JavaScript 支持来有条件地应用 CSS。

图像集

Safari 17.0 还改进了我们对 image-set() 的实现，作为我们对 Interop 2023 承诺的一部分，增强了与其他浏览器的互操作性。

image-set() 函数允许您在 CSS 中列出一组图像，并提供每张图像的信息，然后让浏览器从该组中选择最合适的图像使用。Safari 17.0 现在支持可选的 resolution 和 type 参数。

resolution 参数提供了一种声明每张图像分辨率信息的方式：1x、2x、600dpi 等。

type 参数提供了一种提供多种文件类型的方式 — 包括 Safari 17.0 新支持的 JPEG XL 和 HEIC 格式。浏览器将下载并使用它支持的第一个文件。

main {
  background-image: image-set(
    url("images/trees.jxl") type("image/jxl"),
    url("images/trees.avif") type("image/avif"),
    url("images/trees.jpeg") type("image/jpeg")
  );
}

容器查询

为了跟上容器查询 Web 标准的最新变化，Safari 17.0 在 CSSOM 中增加了对 containerName 和 containerQuery 的支持，并将 conditionText 更新为 CSSContainerRule 中前两者的连接。

更多 CSS

Safari 17.0 还增加了对 contain-intrinsic-size 的支持，它提供了一种在元素受 尺寸限制 时设置元素大小的方法。

为了增加 :has() 的实用性，WebKit 现在支持 :has(:buffering) 和 :has(:stalled)。这些扩展了根据媒体播放状态有条件地应用 CSS 的能力。Safari 17.0 还支持 :has(:defined)，允许您在存在已 定义 的自定义元素时应用样式。

JavaScript 和 Web API

存储

Safari 17.0 以及适用于 iOS 17、iPadOS 17 和 macOS 的 WebKit 现在完全支持 Storage API。

WebKit 也在更新存储配额政策。以前，一个源的起始存储限制为 1 GB。超出该限制时，后续的存储操作将在主屏幕 Web 应用程序中失败，或者提示用户在 Safari 中授予权限以增加配额。

现在，源配额是根据总磁盘空间计算的。这意味着一个源通常会获得更高的限制，并且用户将不再在 Safari 中收到权限提示。您可以使用 StorageManager.estimate() 来获取每个源的估计使用量和配额值。

由于每个源默认获得更高的存储限制，当所有源的总使用量大于某个值 — 即根据总磁盘空间计算的“总体配额”时，WebKit 将按源逐出数据。

当源的存储模式为持久化时，它将免于逐出。要检查您的源的存储模式，您可以使用 navigator.storage.persisted()。要请求将模式更改为持久化，您可以使用 navigator.storage.persist()。关键 bug 已修复，以确保存储模式值在会话之间保持不变。

阅读 存储策略更新 以获取更多详细信息以及示例代码。

离屏画布

当使用 Canvas 时，渲染、动画和用户交互通常发生在 Web 应用程序的主执行线程上。离屏画布 (Offscreen Canvas) 提供了一个可以在屏幕外渲染的画布，将 DOM 和 Canvas API 解耦，从而使 <canvas> 元素不再完全依赖于 DOM。渲染可以转移到工作线程上下文，允许您在单独的线程中运行任务，并避免在主线程上进行可能对用户体验产生负面影响的繁重工作。独立于 DOM 的操作和主线程的渲染结合，可以为用户提供显著更好的体验，尤其是在低功耗设备上。

Safari 16.4 已提供对离屏画布 2D 操作的支持。现在，Safari 17.0（适用于 macOS Sonoma、iPadOS 17 和 iOS 17）增加了对离屏画布中 WebGL 的支持，将这些优势带到了 3D 领域。

Canvas

Canvas 2D API 的 CanvasRenderingContext2D.drawImage() 方法支持将图像的不同源绘制到画布上。Safari 17.0 通过允许 SVGImageElement 作为 drawImage() 的图像源来增加对 SVG 的支持。

正则表达式

Safari 17.0 增加了 JavaScript 对正则表达式两项新功能的支持：带集合表示法 + 字符串属性的 RegExp v 标志 以及 RegExp 重复命名捕获组。

RegExp v 标志允许创建包含 Unicode 属性的正则表达式，包括一些多字符表情符号序列。它还允许在字符类和字符串集合上创建具有并集、交集和减法集合操作的正则表达式。

重复命名捕获组允许创建具有命名捕获的正则表达式，其中多个捕获组使用相同的名称。这使您能够创建具有直观组名的正则表达式，其中存在多种搜索模式。一个例子是创建一个正则表达式，可以搜索以多种方式编写的数据字符串，例如 M/D/Y 与 D-M-Y，同时无论匹配到哪种字符串格式，都使用捕获组名 month、day 和 year 提取匹配结果。

集合操作

另一个新的 JavaScript 功能增加了七个 Set 操作方法，包括 intersection() 和 union()，以及比较方法 difference()、isSubsetOf() 和 isSuperSetOf()。这些新方法共同使 Sets 成为强大的第一类对象。

const setA = new Set(["apples", "oranges", "grapes"]);
const setB = new Set(["bananas", "grapes", "apples"]);

// Union into single set
const union = setA.union(setB);

// Interection "apples" and "grapes"
const intersect = setA.intersection(setB);

// Difference "oranges"
const diff = setA.difference(setB);

另请查看新的 .symmetricDifference() 和 .isDisjointFrom() 方法，它们开启了一些有趣的比较可能性。

游戏手柄 API

适用于 Safari 17.0 的 WebKit 增加了对 Gamepad.prototype.vibrationActuator 的支持。它可以在游戏手柄上实现“双震动”触觉反馈。该 API 允许您检查游戏手柄是否支持“双震动”，以及控制触觉效果的持续时间和幅度。

const [gamepad] = navigator.getGamepads();
if (gamepad?.vibrationActuator?.canPlayEffectType("dual-rumble")) {
  const options = {
    duration: 1000, // 1 seconds
    startDelay: 0, // play now
    strongMagnitude: 0.5, // low-frequency vibration
    weakMagnitude: 0.2,  // high-frequency vibration
  };
  gamepad.vibrationActuator.playEffect("dual-rumble", options);
}

URL API

传统上，为了确保您可以解析 URL，您需要使用 try 序列。现在，您可以使用 URL.canParse(tentativeURL, optionalBase) 直接检测 URL 输入是否可以解析。该方法将返回 true 或 false。

此外，URLSearchParams 上的 has() 和 delete() 方法已扩展。has() 方法可以检测参数是否已设置。而 delete() 方法可以删除参数。到目前为止，您只能通过名称进行检查和删除。现在，这些方法已扩展，以便您可以检查和删除特定的名称-值对。

例如，在一个带有重复键的 URL 上，如 https://example.com/?currency=USD&currency=JPY，以前您只能检查 params.has('currency')。现在，可以执行 params.has('currency', 'JPY')。

请注意，在此次更新中，方法签名无法直接进行功能检测，因此它们可能会返回误报。在所有浏览器都支持这些更新之前，请务必运行测试以确认支持。例如

// These return true only when the updated API is supported!
function supportsUpdatedURLHasMethod() {
    const param = new URLSearchParams({ key: "value" });
    return param.has("key", "does not exist") === false;
}

function supportsUpdatedURLDeleteMethod() {
    const param = new URLSearchParams({ key: "value" });
    param.delete("key", "does not exist");
    return param.has("key");
}

Web Sockets

您现在可以在 WebSocket 构造函数中使用相对 URL（以及 HTTP(S) URL）— 这使得指向 WebSocket 端点变得更加容易，而无需将 URL 硬编码到您的 Web 应用程序中。例如，new WebSocket('/updates')。

更多 JavaScript 和 Web API

  • 支持 <link rel="modulepreload">。
  • 支持 焦点修复规则。
  • 支持 Ed25519 密码学。
  • 支持 customElements.getName 方法。
  • 将 Intl.Locale getter 方法名称重命名为以“get”为前缀。
  • 支持 FileSystemHandle 的 move() 方法默认开始覆盖目标。

图像和视频

JPEG XL

Safari 17.0 增加了对 JPEG XL 的支持。这种新的图像格式为在视觉质量和文件大小之间找到平衡提供了另一种现代选择。

JPEG XL 使用一种名为“模块化熵编码”的新压缩算法，允许在调整压缩比方面具有更大的灵活性。与 JPEG 类似，它支持渐进式加载，使其非常适合通过慢速连接提供的图像，因为用户在整个文件下载完成之前就开始看到图像。您可以将现有 JPEG 文件重新压缩为 JPEG XL，而不会损失任何质量或数据，同时将其大小平均减少 20%。或者从原始图像文件压缩，创建的文件比 JPEG 小多达 60%。

使用 <picture> 元素向 支持 JPEG XL 文件的浏览器提供文件，同时轻松地向不支持的浏览器提供回退格式。

<picture>
  <source srcset="images/sophie.jxl" type="image/jxl">
  <img src="images/sophie.jpg" alt="tiny brown puppy sleeping in the sun">
</picture>

WebKit 在 iOS 17、iPadOS 17、watchOS 10、macOS Sonoma、macOS Ventura 和 macOS Monterey 上为 Safari 17.0、Safari View Controller 和 WKWebView 提供 JPEG XL 支持。

HEIC

Safari 17.0 还增加了对 HEIC 图像的支持。一张 HEIC 照片的文件大小约为同等质量 JPEG 文件的一半。

HEIC 是 Apple 设备中用于存储相机拍摄的照片以及 iCloud 照片的图像格式。通过在 Safari、Safari View Controller 和 WKWebView 中支持 HEIC，您现在可以直接在浏览器中支持导入和编辑此类照片，而无需将其转换为其他格式。HEIC 也非常适合在应用程序内部使用 WKWebView 显示图像。

通过观看 WWDC23 的 《探索网络媒体格式》 来了解更多关于 JPEG XL 和 HEIC 的信息。

AV1

Safari 17.0 增加了对具有硬件解码支持的设备上的 AV1 视频支持，例如 iPhone 15 Pro 和 iPhone 15 Pro Max。

AV1 视频编解码器为通过网络传输视频提供了另一种选择，同时在华丽的质量和更小的文件大小之间找到了正确的平衡。硬件编码/解码提供了一种有效的方式来支持视频编解码器，而不会对电池寿命产生不期望的影响。

Web 渐进增强的特性使得以多种选项提供文件变得容易，并让用户的浏览器选择最适合他们的文件。

<video controls>
  <source src='dogs-in-AV1.mp4' 
          type='video/mp4 codecs="av01.0.19M.10.0.110.09.16.09.0, mp4a.40.5" '>
  <source src='dogs-in-HEVC.mp4' 
          type='video/mp4 codecs="hev1.2.4.L120.B0", mp4a.40.2" '>        
  <source src='dogs-in-VP9.webm' 
          type='video/webm codecs="vp9, vorbis" '>
</video>

在这个例子中，这三个选项使用 AV1、HEVC (H.265) 和 VP9 视频编解码器进行压缩，同时以两种视频文件格式交付：MP4 和 WebM。这是因为压缩视频是通过网络在一个具有自己文件格式的媒体容器中交付的，例如 MPEG-4、WebM、Ogg 或 QuickTime MOV。该容器同时包含视频流（以特定编解码器压缩）和音频流（以另一种编解码器压缩）。

作为开发者，您使用 source 元素链接到每个文件，列出文件类型，并指定所提供的编解码器 — 为浏览器提供决定开始流式传输哪个文件所需的信息。type 属性指定 容器的 MIME 类型，以及关于视频和音频各自如何压缩的 codec 信息。浏览器将使用它完全支持的第一个文件。

AV1 编解码器参数字符串不仅可以传达视频是用 AV1 压缩的，还可以传达视频的其他特性，包括色彩空间和动态范围。例如，您可以对使用 AV1 主配置文件、级别 6.2、主层、10 位 HDR 压缩的视频使用 av01.0.19M.10.0.110.09.16.09.0。这基本上是在问浏览器“您是否支持具有每颜色 10 位和 HDR 色彩空间的 AV1？如果是，这是为您准备的文件。” 您也可以使用更简单的版本 codecs="av01"，只问“嘿，您支持 AV1 吗？”

受管媒体源

在我们的设备上观看流媒体视频是一件非常棒的事情。但是，要在不下载任何不必要的数据和不耗尽电池电量的情况下获得最高质量的视频 — 每次您点击播放按钮时，都需要一套复杂的技术在幕后工作。

自适应比特率流媒体是一种在媒体数据格式之间即时切换的技术，旨在根据互联网连接速度和设备功能，确保提供最佳视频质量，即使这些条件发生变化。例如，当网络速度变慢时，自适应流媒体可以配置为从 4k 切换到高清分辨率，以优先考虑无延迟播放而不是更高的视觉质量。

多年来，许多网站都使用 媒体源扩展 (Media Source Extensions, MSE) 来处理自适应比特率流媒体。它是一个低级工具包，赋予网页更多控制权和更多管理缓冲和分辨率的责任。但 MSE 在管理缓冲级别、网络访问和媒体变体选择方面表现不佳。此外，它消耗大量电量，这在电池较小的移动设备上尤其令人头疼。

受管媒体源 (Managed Media Source) 是一种全新的、高效的解决方案，可满足流媒体视频的高级需求。它支持 MSE 的灵活性和功能，同时没有任何缺点。

适用于 Safari 17.0 的 WebKit 将新的受管媒体源 API 带到 iPad 和 Mac，支持 iPadOS 17、macOS Sonoma、macOS Ventura 和 macOS Monterey。受管媒体源也适用于运行 iOS 17.1 测试版的 iPhone。

请注意，只有存在 AirPlay 源替代方案或明确禁用远程播放时，才支持受管媒体源。

const videoSource1 = document.createElement('source');
videoSource1. type = 'video/mp4' ;
videoSource1.src = URL.createObjectURL(mediasource);
video.appendChild(videoSource1) ;
const videoSource2 = document.createElement('source');
videoSource2. type = 'application/x-mpegURL' ;
videoSource2.src = "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8";
video.appendChild(videoSource2);

通过观看 WWDC23 的 《探索网络媒体格式》 来了解所有关于受管媒体源 API 的信息。

媒体播放器统计信息叠加层

Video in a video player, with an overlay showing the stats for that video.

如果您已启用开发者功能，Safari 现在提供了一个媒体播放器统计信息叠加层，您可以在其中查看视频的技术细节 — 其源类型、大小、性能指标、分辨率、编解码器字符串和颜色配置。要显示叠加层，请在任何 <video> 元素上使用上下文菜单并选择“显示媒体统计信息”。现在，您可以一目了然地了解页面上媒体使用的确切编解码器和配置，并使用该信息帮助您编写代码，包括在 MediaCapabilities 中编写准确的查询。

更多视频和音频

Safari 17.0 在 macOS Sonoma 上增加了对 WebM 和 MPEG-4 容器中单通道或双通道 Opus 音频的支持。

WebKit 现在支持 iPadOS 17 上的 USB 摄像头。当 USB 摄像头连接到 iPad 时，它会包含在 enumerateDevices 的输出中，并且可以与内置摄像头一起通过 getUserMedia 选择。

WebRTC 的改进增加了对 InputDeviceInfo、入站 rtp trackIdentifier 统计字段、在 MediaTrackCapabilities 中公开 zoom 以及 getDisplayMedia 视频轨道克隆大小调整的支持。

适用于 Safari 17.0 的 WebKit 增加了对低功耗模式和通过将 HDR 视频色调映射到 SDR 来优化视频流的额外支持。

Safari 17.0 还增加了对软件编解码器的 WebCodecs temporal scalabilityMode 的支持，包括解析和错误处理。

Mac 上的 Web 应用

适用于 macOS Sonoma 的 Safari 17.0 现已推出。伴随它，Web 应用来到了 Mac。

A web app for WebKit Blog shown on macOS Sonoma. With three other web apps as Stage Manager windows off to the side. And four web app icons in the doc. Plus a push notification coming in from the WebKit web app.

您可以将网站 — 任何网站 — 添加到您的程序坞。在 Safari 中，前往“文件”>“添加到程序坞”，根据需要调整名称和图标，然后 Web 应用图标就会出现在您的程序坞中。

Mac 上的 Web 应用让您可以专注于您经常使用的网站，将其与您的其他浏览活动分开。与所有 Mac 应用一样，Web 应用与“调度中心”、“调度台”和 Command + Tab 等键盘快捷键配合得很好。Web 应用可以从程序坞、启动台和聚焦搜索中打开。Web 应用可与 iCloud 钥匙串以及已采用凭证提供商扩展 API 的第三方应用中的自动填充凭证配合使用。用户可以通过系统提示和“系统设置”的“隐私与安全性”部分，以与授予其他 Mac 应用相同的方式，授予 Web 应用使用其相机、麦克风和位置的权限。Mac 上的 Web 应用支持 Web 推送、徽章、Service Workers、Web 应用清单以及 WebKit 实现的所有常用 Web 标准，就像 iOS 和 iPadOS 上的 Web 应用一样。

当用户点击 Web 应用图标时，该网站总是作为 Web 应用在其自己的窗口中打开，即使该网站没有清单文件（或旧版 meta 标签）。这扩展了 Web 应用的实用性，让用户能够决定什么成为 Web 应用，并让他们相信这始终是他们可以选择的东西。

尽管 Mac 上的默认 Web 应用体验很棒，但作为 Web 应用开发者，您可以使用 Service Workers 等 Web 技术使其更好。通过提供 Web 应用清单，您可以自定义 Web 应用的呈现，包括显示模式、名称、主题颜色和起始 URL。通过观看 WWDC23 的 《Web 应用新功能》 了解详细信息。

当用户将网站添加到其程序坞时，Safari 会将网站的 Cookie 复制到 Web 应用。这样，如果有人在 Safari 中登录其帐户，他们将在 Web 应用中保持登录状态。这仅在身份验证状态存储在 Cookie 中时有效。Safari 不会复制任何其他类型的本地存储。用户将 Web 应用添加到程序坞后，不会共享任何其他网站数据，这对于隐私来说非常棒。

从 Safari View Controller 添加到主屏幕

iOS 17 和 iPadOS 17 上的 Safari View Controller 现在支持“添加到主屏幕”功能。在应用程序中点击使用 Safari View Controller 作为应用内浏览器的链接时，用户可以直接从那里将打开的网站添加到其主屏幕。就像从 iOS 和 iPadOS 上的 Safari（或任何其他实现了支持的浏览器）“添加到主屏幕”一样，如果网站有一个清单文件，其中 display 模式为 standalone 或 fullscreen，它将作为主屏幕 Web 应用打开。

Web 开发者工具

Safari 17.0 为我们的 Web 开发者工具体验带来了重大变化。请务必启用开发者功能，以访问 Web Inspector、开发菜单、功能标志、响应式设计模式、连接到 iOS/iPadOS/visionOS 模拟器的能力等等。

重新设计的开发菜单

在 macOS Sonoma、macOS Ventura 和 macOS Monterey 上的 Safari 17.0 中，经过完全重新设计的开发菜单使您更容易找到用于创建网站、Web 应用、其他应用内的 Web 内容、Web 扩展等的关键工具。

the new Safari 17 Develop menu, with far fewer items, showing icons for iPhone and iPad

设备和模拟器现在在“开发”菜单中更加突出，使其更容易一目了然地识别。在每个 iOS 或 iPadOS 设备的菜单中，应用图标使您更容易找到要检查的应用或 Web 内容。在 macOS Sonoma 上，您可以直接从 Safari 与 Apple TV 和 Vision Pro 配对以检查这些平台。

重新构思的功能标志

the Safari feature flag settings window with a list of technologies, some on, others off.

新的 功能标志 面板取代了之前“开发”菜单中的“实验性功能”部分，允许您搜索特定功能并轻松查看从默认状态切换的粗体功能。功能标志现在按主题组织：动画、CSS、HTML、JavaScript、媒体等。每个功能都明确分为四种状态之一：稳定、可测试、预览和开发者。

稳定代表最近在 Safari 中发布的功能，默认启用。这些功能可以关闭，以帮助您调试问题或测试渐进增强。稳定功能最终将从列表中删除。

可测试功能默认禁用。这些功能可能正在实现中，或者它们可能正在等待 Web 标准的更改。它们还有很长的路要走，但仍然足够有趣，值得测试。

预览适用于尚未在 Safari 中发布但更接近完成的功能。这些功能在 Safari 技术预览中默认启用，并已准备好供开发者试用。它们可能仍然存在错误，甚至可能随着 Web 标准的发展而发生重大变化。这是一个帮助查找错误和提交问题，并评论新技术的 Web 标准是否满足您需求的绝佳时机。

开发者功能不那么常见。此类别适用于添加到功能标志列表中的杂项功能，以便开发者可以将其打开和关闭进行测试。例如，新的开发者工具可能会出现在这里。

新的开发者设置面板

the new Safari Developer settings window, listing what can be toggled

Safari 17“设置”中的新“开发者”面板允许您切换适用于 Safari 中所有打开网站的开发者功能，例如“允许远程自动化”（可使用 WebDriver 自动控制 Safari）以及以前在“开发”菜单中的其他功能。

新的标签页特定设置叠加层

Web Inspector tab-specific settings overlay

之前“开发”菜单中的一些全局设置，例如禁用 JavaScript 或更改 WebRTC 行为，已移至 Web Inspector，现在它们仅限于受检查的标签页，允许您正常使用其他标签页和窗口。

重新设计的响应式网页设计模式

Redesigned Responsive Design Mode in Safari with configurable viewport size, scale, and simulator menu

响应式设计模式也已刷新，旨在关注页面设计在 Mac 上任何宽度或高度下的响应能力。您可以在响应式设计模式的顶部输入特定的视口大小，此外还可以拖动视图周围的调整大小手柄。

同样新增的功能是，可以直接从响应式设计模式中在模拟器中打开页面。

模拟器

即使您没有使用响应式设计模式，也可以直接从 “开发”>“使用以下方式打开页面” 菜单中，在模拟器中打开 Safari 中的任何页面。

使用模拟器是测试您在 iOS、iPadOS 和 visionOS 上创建的体验的绝佳方式 — 包括设备特定行为，如渲染字体大小、viewport meta 标签的效果、双击缩放，甚至 iOS 和 iPadOS 上的主屏幕 Web 应用。模拟器是免费的，并随 Mac App Store 中的 Xcode 一起提供。

macOS Sonoma with a simulated iPhone on screen, showing a website. The Develop menu is open, with the user selecting the website in that simulator.

如果您没有安装 Xcode，在“开发”>“使用以下方式打开页面”菜单中方便地提供了文档链接，以帮助您入门或添加更多设备和操作系统版本。

通过观看 WWDC23 的 《重新发现 Safari 开发者功能》，了解有关新的“开发”菜单、重新设计的“响应式网页设计模式”、如何轻松直接连接到真实设备、如何安装和使用模拟器等等的所有信息。

Web Inspector

我们还对 Web Inspector 进行了改进。在使用最小化源时，Web Inspector 中的漂亮打印可以帮助代码更容易阅读、设置断点和调试。Safari 17.0 的新功能是，支持更多 JavaScript 语法用于最小化脚本的漂亮打印，包括模板字符串、可选链、类中的私有变量和函数以及静态变量和函数。

Safari 17.0 中 Web Inspector 的更改还包括

  • 元素选项卡：添加了设置，以便在 Web Inspector 或元素选择模式下高亮显示元素时始终显示网格和弹性盒的标尺和元素叠加层。
  • 元素选项卡：在字体侧边栏中添加了变体轴的编辑控件。
  • 控制台选项卡：添加了显示控制台消息时间戳的设置。
  • 控制台选项卡：增加了查看 WeakRef 目标的支持。
  • 源代码选项卡：在检查和记录 JavaScript 对象时增加了对 ES2022 私有字段的支持。
  • 图形选项卡：增加了对 OffscreenCanvas 的支持。

通过观看 WWDC23 的 《Web Inspector 新功能》 来了解更多信息。

安全性

GPU 进程

去年，WebKit 在 iOS、iPadOS 和 watchOS 上引入了 GPU 进程支持。今年，我们将在 macOS Sonoma 上增加支持。这项更改将所有绘图（包括页面内容、2D Canvas 和 WebGL 渲染的绘图）移至“GPU 进程”中进行。这种新架构允许 WebKit 将强大的图形硬件和驱动程序访问与 WebContent 进程（与来自互联网的不可信内容交互的进程）隔离开来。新设计还允许 WebContent 进程沙盒完全阻止 IOKit 访问，从而提高了安全性。

WebKit API

WKWebsiteDataStore 和相关类中新增了接口，以进一步释放您的 WebKit 应用的潜力。新功能包括创建持久的网站数据存储、配置 Cookie 策略、自定义代理设置、请求所有导航的 HTTPS 升级，以及控制自动完成的内联预测状态。

浏览器更改

Safari 个人资料

Safari 17.0 增加了对个人资料的支持。历史记录、收藏夹、标签页组和网站数据（如 Cookie、缓存、Service Worker 和 Web 推送订阅）均按个人资料限定范围。用户可以单独管理每个个人资料的数据。

Safari 无痕浏览

在 Safari 17.0 中，“无痕浏览”通过增加对某些最先进跟踪技术的保护而变得更加私密。技术更改包括：

  • 阻止已知跟踪器和指纹识别。
  • 支持缓解将子域名映射到第三方 IP 地址的跟踪器。
  • 阻止链接中已知的跟踪查询参数。
  • 对可指纹识别的 Web API 添加噪声。
  • 阻止对已知跟踪器的请求时的控制台日志消息。
  • 支持阻止使用第三方 CNAME 伪装的跟踪器。
  • 支持直接响应广告的私人点击测量，类似于其在 应用内直接响应广告 中的工作方式。

编辑和实况文本

iOS 17、iPadOS 17 和 macOS Sonoma 提供了重新设计的文本编辑体验，在您键入时提供更准确的自动更正和内联预测。在 macOS Sonoma 上的 Safari 17.0 中，重新设计的文本光标现在使用系统强调色，就像 iOS 一样。CJK 标记文本也具有新的外观并匹配系统强调色。

Safari 17.0 还改进了 Range API 和 Selection API 的互操作性。它增加了对图像和视频中垂直文本识别的实况文本支持。

通过 Payment Request API 使用 Apple Pay

您现在可以通过设置 allow="payment" 属性来启用 Apple Pay 在第三方 iframe 中使用。此“权限策略”在 iframe 上启用 Payment Request API，允许您嵌入第三方支付处理器。如果使用此功能，请务必同时使用 X-Frames-Options HTTP 头，以防止您的网站被恶意网站嵌入。

身份验证

Safari 17.0 增加了对通行密钥 largeBlob 扩展的支持。网站可以使用额外的存储空间保存数据，这些数据可以在以后使用通行密钥登录时检索。这些保存的 Blob 会与通行密钥同步和共享。

我们还增加了对 iCloud 钥匙串中通行密钥的企业 WebAuthn 证明支持。受管设备可以在创建通行密钥时提供证明声明，使用通过 MDM 提供的证书。

网络

Safari 17.0 增加了对 HTTP Early Hints 和 preconnect 的支持。

锁定模式

锁定模式现在

  • 禁用 IndexedDB。
  • 禁用 File API 和 FileReader API。
  • 禁用对 <embed> 元素的支持。
  • 禁用 Web Speech (Speech Synthesis) API。
  • 禁用 WebLocks API。
  • 禁用对实验性 API 的支持。
  • 支持精选网络字体。

watchOS 上的 WebKit 现在也支持锁定模式。

Safari 扩展

Safari 17.0 现在允许您更精细地自定义扩展的运行位置。

首先，Safari 应用扩展现在与 Safari Web 扩展具有相同的按站点权限模型。这使用户能够控制他们与 Safari 中使用的每个扩展共享的浏览数据。

其次，作为额外的控制层，Safari 扩展可以在“无痕浏览”中关闭。访问浏览数据（如浏览历史或网页内容）的扩展在“无痕浏览”中默认关闭，但可以通过 Safari 设置中的单个开关允许。

第三，所有 Safari 扩展都可以按 Safari 个人资料单独打开或关闭。您可以想象这对于在相关个人资料中启用仅用于学校或工作的扩展非常有用，但在其他地方保持关闭。每个个人资料运行一个独立的扩展实例 — 这意味着有独特的存储区域、后台页面、Service Worker 等。但是，按站点权限在个人资料之间共享，因此扩展只需授予一次。如果您的扩展利用原生消息功能与宿主应用通信，则可以区分不同的个人资料，以确保您的扩展在不同个人资料中行为正确。

通过观看 WWDC23 的 《Safari 扩展新功能》 了解更多信息。

Bug 修复及更多

除了 65 多个新功能外，适用于 Safari 17.0 的 WebKit 还包含了大量用于完善现有功能的工作。

可访问性

  • 修复了 radio 角色 的 aria-owns 属性。（23630121）
  • 修复了来自多个 <label> 元素的不正确可访问名称。（24033482）
  • 修复了 HTML 菜单元素映射到 role=list 的问题。（55145117）
  • 修复了在使用 aria-activedescendant 设置网格内活动单元格时焦点移动的传递问题。（84439987）
  • 修复了 Web Inspector 中 input 显示错误角色 的问题。（103907008）
  • 修复了 input[type=date] 单个字段被宣布为“group”的问题。（104928713）
  • 修复了在某些网站上选择“使用 Apple 登录”时 VoiceOver 的问题。（105179300）
  • 修复了具有 popovertarget 属性的元素向辅助技术公开展开状态的问题。（105425310）
  • 修复了某些输入尽管已渲染但未被视为无效的问题。（105653691）
  • 修复了当 aria-invalid 为 false 时 aria-errormessage 不被公开的问题。（105813974）
  • 修复了表单控件采用祖先标签的可访问文本而不是其自身内部文本的问题。（106575817）
  • 修复了 VoiceOver 不读取文本字段中输入文本的问题。（107226275）
  • 修复了使用 aria-labelledby 引用的 slot 元素的标签。（107570512）
  • 修复了 aria-describedby 等效于 aria-description 并在两者都存在时覆盖它的问题。（108386295）
  • 修复了槽式元素在 <dialog> 或 aria-modal 内部时未暴露给可访问性的问题。（108704582）
  • 修复了网页上某些内容未在盲文显示器上显示的问题。（110758833）
  • 修复：当 HTML required 属性和 aria-required 都存在时，优先使用 HTML required 属性。（111370591）
  • 修复了无序列表的意外语音合成行为。（112085797）

Canvas

  • 修复了 createImageBitmap 使用 ImageData 时遵守预乘标志的问题。（89382358）
  • 修复了将 VideoFrames 绘制到画布时重绘的问题。（109100283）

CSS

  • 修复了 HTML 中缺少引号的 CSS @imports 被预加载扫描器错误隐藏的问题。（46031271）
  • 修复了使用子索引伪类匹配没有父元素的元素的问题。（91637426）
  • 修复了 @supports selector() 对所有 -webkit- 前缀伪元素都失败的 bug。（95683424）
  • 修复了 background-size 不接受无单位长度的问题。（97039770）
  • 修复了带有 currentcolor 的 text-shadow 和 box-shadow。（102542182）
  • 修复了 color() 函数错误解析缺失组件的问题。（104679823）
  • 修复了如果没有强调字符则不渲染 text-emphasis 标记的问题。（104688963）
  • 修复：改进了 image-set 兼容性。（105097744）
  • 修复了由 mask 和 background 简写设置的值不序列化为“initial”的问题。（105114588）
  • 修复了 :has() 支持 :buffering 和 :stalled 伪类失效的问题。（105163364）
  • 修复了 cssText 遵循 CSS OM 规范的问题。（105235157）
  • 修复了 font-feature-settings 和 font-variation-settings 按字母顺序排序其标签的问题。（105483635）
  • 修复了 transition-property: all 包含自定义属性的问题。（105556538）
  • 修复了 #x（例如 1x）被识别为分辨率计算单位类别的问题。（105700660）
  • 修复了使用 CSS @font-face 声明的某些字体的字体变体问题。（106635029）
  • 修复了将某些用户代理样式应用于 HTML 元素，而不是具有其他命名空间的元素的问题。（107162842）
  • 修复了 image-set 接受零分辨率并钳制 calc 表达式中使用的负分辨率的问题。（107167273）
  • 修复了 @supports 规则中未知函数解析的问题。（107397723）
  • 修复了在不可点击的 <area> 上不显示 cursor: pointer 的问题。（107591470）
  • 修复了 CSSStyleValue.parse 接受来自文档派生上下文的属性的问题。（108249093）
  • 修复了从文档元素中移除 :dir 内容属性后，:dir() 伪类失效的问题。（108480507）
  • 修复了 image-set() 的 type() 函数只接受一个字符串的问题。（108909363）
  • 修复了遵守列表项上的样式包含问题。（109582377）
  • 修复了滚动条立即正确获取更改样式的问题。（109674102）
  • 修复了 :has() 支持 :defined 伪类失效的问题。（109896689）
  • 修复了 cjk-earthly-branch 和 cjk-heavenly-stem 计数器样式具有 fixed 系统的问题。（110796633）
  • 修复了 <ray-size> 在 CSS Motion Path 的 ray() 中变为可选的问题。（110818689）
  • 修复了媒体查询中的负分辨率无效的问题。（110948170）
  • 修复了 text-overflow: ellipsis 使其与 overflow: clip 一起工作的问题。（111182654）
  • 修复了 cjk-earthly-branch 和 cjk-heavenly-stem 计数器样式回退到 cjk-decimal 的问题。（111208503）
  • 修复了 inline-flex 和 inline-grid boxes 停止传播下划线以与其他浏览器对齐的问题。（111228920）
  • 修复了容器查询中的容器单位针对祖先容器进行评估的问题。（111446508）
  • 修复了光标样式优先于系统默认值，尊重明确设置的光标类型的问题。（111469521）
  • 修复了容器单位在单位解析时考虑书写模式的问题。（111565488）
  • 修复了 @font-face { src: format() } 解析有效但不支持的关键字的问题。（112135869）
  • 修复了 -webkit-box-decoration-break: clone 与左右内边距导致内联内容意外换行的问题。（112197978）

DOM

  • 修复了 XML 序列化，使其首先序列化隐式 xmlns 属性并在生成前缀时使用小写“ns”的问题。（103234827）

编辑

  • 修复了 iframe 的网页翻译问题。（59693219）
  • 修复了从 getRangeAt 返回与选择同步的实时范围并按规范抛出错误的问题。（69015762）
  • 修复了选择 API 在阴影边界之间工作的问题。（89481826）
  • 修复了翻译乌克兰语网页时的问题。（100570016）
  • 修复了在双击事件期间以编程方式聚焦文本字段时显示软键盘的问题。（104600783）
  • 修复了当根可编辑元素是短语内容时，“insertParagraph”插入 <br> 的问题。（105438898）
  • 修复了“insertLineBreak”有时插入不间断空格而不是新行的问题。（105439065）
  • 修复了嵌套列表情况下从空列表项中跳出的问题。（111724381）

表单

  • 修复了禁用输入元素的 CSS 颜色调整问题。（99826522）
  • 修复了 input.validity 对部分完成的日期和时间报告 valid: true 的问题。（102984901）
  • 修复了即使在 AbortController.abort() 之后，条件通行密钥请求仍显示条件控件的问题。（104485543）
  • 修复了 <input pattern> 使用正则表达式 v 标志而不是 u 的问题。（105268069）
  • 修复了使用 name 属性在 <input type="search"> 上保存最近搜索的问题。（105369635）
  • 修复了 HTML maxlength 属性将字符串长度为 11 的表情符号视为长度 1 的问题。（105926915）
  • 修复了 HTMLOptionsCollection.length setter 使用 100,000 限制的问题。（105988871）
  • 修复了将多个 <select> 更改为单个时重置选择的问题。（106264081）
  • 修复了带有 tabindex 的 <summary> 元素的焦点问题。（106550778）
  • 修复了在链接到输入字段的标签元素中选择文本的问题。（108566491）
  • 修复了带有 overflow: hidden 的文本区域渲染过多列的问题。（109343502）
  • 修复了 HTMLOptionElement 文本 setter 不抛出异常的问题。（109740566）
  • 修复了在 JavaScript 更改颜色、日期或时间输入的值后，用户恢复该值时，更改事件不触发的问题。（109843791）

HTML

  • 修复了处理 sizes 属性末尾未闭合括号的问题。（107509739）
  • 修复了 HTMLPreloadScanner 不预加载不支持类型脚本的问题。（110905029）
  • 修复了在使用 shadow DOM 时浮窗错误地自动隐藏的问题。（112410375）

HTTP

  • 修复了尊重 Content-Type 标头以确定 MIME 类型的问题。（73343155）
  • 修复了带有“request-no-cors”防护的 Headers 对象中空头部值的问题。（105207779）
  • 修复了 Cross-Origin-Embedder-Policy 在缓存命中时错误地阻止 iframe 的问题。（107002434）
  • 修复了不透明响应的 vary 标头行为。（107769146）

JavaScript

  • 修复：Object.entries() 性能提高了 1.5 倍。（100783096）
  • 修复了 /p{Number}--]/v; 成为语法错误的问题。（109400589）
  • 修复：改进了 RegExp 后向字符类回溯。（111051833）
  • 修复了 String#charAt 在 DFG 中支持越界处理的问题。（111421698）

媒体

  • 修复了在 iOS 上调整 <audio> 元素的高度时，音频控件中添加了 top CSS 的问题。（99548840）
  • 修复了 Netflix.com 播放错误 S7381-1203。（103561991）
  • 修复了高速视频播放中的声音回声问题。（103940613）
  • 修复了 SourceBuffer.timestampOffset 在 WebM 内容中的行为问题。（105801920）
  • 修复了每当发生逐出时触发 bufferedchange 事件的问题。（106168510）
  • 修复了 MediaSource 时长更改算法未能正确更新时长的问题。（106858912）
  • 修复了 playing 事件提前触发的问题。（107041118）
  • 修复了使用带前缀的 WebKit EME API 的内容的视频播放失败问题。（107202864）
  • 修复了 Netflix.com 播放错误 S7361-1253。（108052652）
  • 修复了 Safari 中视频播放意外中断其他应用程序播放音频的问题。（108741963）
  • 修复了在画布中创建上下文之前附加 MediaStream 时 MediaRecorder 产生空块的问题。（109705910）
  • 修复了当 Safari 在某个标签页中启动摄像头和/或麦克风捕获时，在所有其他标签页中固定静音捕获的问题。(109896538)

渲染

  • 修复了 border-image-repeat: round 的渲染问题。(28213711)
  • 修复了 text-overflow: ellipsis 在从右到左模式下错误截断文本的问题。(29464657)
  • 修复了小数字体尺寸的渲染问题。(40829933)
  • 修复了 iOS 上 <option> 元素的 label 属性渲染问题。(53989128)
  • 修复了渲染 background-clip: text 和 transform: rotate(…) 时出现的像素伪影。(54325642)
  • 修复了在垂直书写模式下设置 overflow: hidden 和 text-overflow: ellipsis 时文本未能正确截断的问题。(94330690)
  • 修复了 CSS flexbox 在计算基线时使用初始滚动位置的问题。(100908615)
  • 修复了 translate 属性动画的错误绘制。(102064448)
  • 修复了当显示类型从 block 更改为 inline-block 时，静态定位的流外盒位置问题。(103637239)
  • 修复了 <details> 标记在从右到左模式下保持与从左到右模式相同的边距。(104275835)
  • 修复了当表格宽度由 JavaScript 而非 CSS 设置时，固定布局的表格表现得像自动布局的问题。(105310280)
  • 修复了 preserve-3d 应用于伪元素子级的问题。(105474987)
  • 修复了在多列布局中，边距错误地考虑强制换行前的情况。(105631038)
  • 修复了带有 clear 的浮动元素的放置问题。(105775276)
  • 修复了当 <body> 或根元素上设置了 content: paint 时，禁用 <body> 到根的传播。(105850374)
  • 修复了在块容器末尾具有 margin-trim: block-end 的自折叠子元素，其顶部偏移不正确的问题。(106524654)
  • 修复了忽略 <colgroup> 元素上 calc() 值的问题。(106692191)
  • 修复了由于阻止在非最终样式上绘制的机制导致的样式错误内容的闪烁问题。(106805458)
  • 修复了嵌套网格布局中的文本换行问题。(107002717)
  • 修复了在带有列 flex-direction 的 inline-flex 内部表格 flex-item 的宽度问题。(107029563)
  • 修复了向文本框添加文本时重新绘制的问题。(107038111)
  • 修复了当 text-align 不为 start 时，display: inline 内容的流外盒位置不正确的问题。(107271178)
  • 修复了当存在 text-indent 时，display: inline 内容的流外盒位置不正确的问题。(107280354)
  • 修复了当存在浮动元素时，display: inline 内容的流外盒位置不正确的问题。(107294351)
  • 修复了新定位的浮动框的重新绘制问题。(107318350)
  • 修复了带有浮动和 text-align 的流外内联内容的问题。(107321638)
  • 修复了渐变对象生成以实现线程安全。(107574124)
  • 修复了当 :after 具有负 z-index 时，transform-style: preserve-3d 阻止链接的问题。(107671388)
  • 修复了在内容更改时重新绘制 display: flex 中的 MathML 元素的问题。(107694159)
  • 修复了 line-height 不影响外围高度的问题。(107832246)
  • 修复了垂直书写模式下装饰框位置不正确的问题。(107916341)
  • 修复了存在表意文字基线时垂直定位不正确的问题。(107934783)
  • 修复了 contenteditable 中第一个字符后缺少下划线的问题。(107996603)
  • 修复了 flexbox 布局中复选框的渲染问题。(108026194)
  • 修复了当混合使用 <span> 和 <div> 时，即使设置了 overflow: hidden，-webkit-line-clamp 仍会重叠块的问题。(108116069)
  • 修复了由于子像素取整导致内容过早截断的问题。(108570251)
  • 修复了负 letter-spacing 破坏 -webkit-box-decoration-break: clone 的问题。(108701795)
  • 修复了带有 decoding="async" 的图片在放大时闪烁的问题。(108930635)
  • 修复了当内容具有 line-height: 0 时列表项重叠的问题。(108988226)
  • 修复了 alt 文本在垂直书写模式下水平渲染的问题。(109004347)
  • 修复了将 align="abscenter" 映射到 vertical-align: middle 的问题。(109081191)
  • 修复了复杂文本路径不渲染可见制表符字形的问题。(109171681)
  • 修复了存在侵入性浮动时 overflow: clip 的问题。(109293228)
  • 修复了打印时内容具有不可见溢出时的分段问题。(109320964)
  • 修复了错误地将滚动条厚度计入带有 overflow: auto 的文本区域的逻辑高度的问题。(109384976)
  • 修复了表格元素上的 bordercolor 属性不会创建可见边框的问题。(109436009)
  • 修复了具有自绘层级的内联级元素渲染重叠省略号的问题。(110408920)
  • 修复了列表项具有 flex 容器时的列表对齐问题。(111217986)
  • 修复了 canvas 在强制重新渲染之前不显示 CanvasRenderingContext2D.putImageData 结果的问题。(112901862)

Safari 扩展

  • 修复了当使用 func 参数时，脚本 API 不返回结果的问题。(100034937)
  • 修复了 WebNavigation 事件不再对扩展未被授予访问权限的网页触发的问题。(100191647)
  • 修复了 scripting.executeScript 返回类型的问题。(107044691)

存储

  • 修复了在数据存储被移除时移除 HTTP 凭据的问题。(106728064)

SVG

  • 修复了 SVG textLength 行为的问题。(32066826)
  • 修复了 shadow DOM 树中 SVG 片段的引用问题。(64094920)
  • 修复了 overflow="visible" 对 <use> 元素的尺寸没有影响的问题，除非其尺寸已指定。(98577733)
  • 修复了 SVG 文本在从右到左模式下混合字符的问题。(101695671)
  • 修复了标记属性允许任何 URI 的问题。(105483685)
  • 修复了文本转换在初始渲染时未开始的问题。(106485848)
  • 修复了 <marker orient="-1"> 正确定向的问题。(109312083)
  • 修复了 animateMotion 在 rotate: auto 或 rotate: auto-reverse 时正确累积的问题。(109489241)
  • 修复了嵌套使用相同 SVG 资源的问题。(109917889)
  • 修复了 SVG 元素的计算 display 属性。(109928375)
  • 修复了当 begin-value-list 中的值没有在 end-value-list 中找到匹配值时，不创建间隔的问题。(109935392)
  • 修复了 <tspan> 元素的 textLength 空格和块处理问题。(109981392)
  • 修复了 SVG <text> 元素从点到字符索引的映射问题。(110119702)
  • 修复了 feMorphology 的负半径处理问题。(110504653)

表格

  • 修复了当宽度为 max-content 时，table-layout: fixed 未被应用的问题。(105627723)
  • 修复了通过移除水平滚动条的高度来计算表格单元格子元素百分比高度的问题。(105627946)
  • 修复了带有滚动条的表格单元格替换子元素的百分比尺寸问题。(108459503)

Web 动画

  • 修复了重新计算关键帧样式的逻辑，以关联加速动画在动画过程中计算关键帧的变化。(87766485)
  • 修复了 transition-property: all 的处理，以区分匹配任何 CSS 属性或动画对象。(87785199)
  • 修复了当 font-weight 属性使用 bolder 或 lighter 时，关键帧需要重新计算的问题。(105098349)
  • 修复了 CSS 动画隐式关键帧的复合操作为“replace”的问题。(105099774)
  • 修复了当父元素更改为设置为 inherit 的自定义属性值时，关键帧需要重新计算的问题。(105099874)
  • 修复了 transition-property 的 all 值解析为关键字而非 CSS 属性的问题。(105556116)
  • 修复了公开 CSSKeyFramesRule.length 的问题。(105565920)

Web API

  • 修复了由于超出最大 canvas 内存限制导致的 Canvas 上下文分配失败问题。(48609162)
  • 修复了按下修饰键时触发意外 mousemove 事件的问题。(81287778)
  • 修复了添加到 <body> 后的 HTML 注释未包含在 document.body.innerHTML 中的问题。(95557786)
  • 修复了选择器序列化的问题。(97092572)
  • 修复了函数字符串序列化以匹配其他浏览器的问题。(97445158)
  • 修复了 screen.colorDepth 在 iOS 上报告不正确值的问题。(99871925)
  • 修复了 <link rel="preload"> 中 as 属性的有效值。(100161255)
  • 修复：改进了 GamePad 与 XBOX Cloud 的兼容性。(100337662)
  • 修复：改进了 Fetch API 互操作性。(100582566)
  • 修复了 fetch() 中切片 Blob 的 Content-Type。(101171705)
  • 修复了 Blob 范围请求。(103171187)
  • 修复：调整了文本输入 scrollWidth 和 scrollHeight 以包含填充和装饰添加的任何空白。(104332108)
  • 修复了 Shadow DOM 中带有 delegatesFocus 的 focus() 方法。(104927020)
  • 修复了 Range API 以树顺序构建和移动树的问题。(105154132)
  • 修复了传递给 GamepadHapticActuator.playEffect() 的大小值处理问题。(105175808)
  • 修复了 Gamepad.vibrationActuator.type 应为 dual-rumble。(105175859)
  • 修复了 location.href 在 URL 解析失败时抛出 SyntaxError 的问题。(105631453)
  • 修复了 iPad 和 Apple TV 的自然屏幕方向为横向优先的问题。(106062507)
  • 修复了跨域 iframe 的 postMessage。(106439413)
  • 修复了 Worklet.prototype.constructor。(106533500)
  • 修复了 innerHTML 序列化不对 javascript: URL 进行特殊处理的问题。(107362610)
  • 修复了在启用脚本时，<noembed>、<noframes> 和 <plaintext> 元素内部的 <、>、& 和不间断空格字符未被转义的问题。(107381507)
  • 修复了 CacheStorageManager 在没有路径时在当前工作目录中创建“salt”文件的问题。(107387306)
  • 修复了不再识别 SVG contentScriptType、contentStyleType 和 externalResourcesRequired 属性以及 XML xml:base 属性的问题。(107428878)
  • 修复了非 UTF-8 编码器正确发出 U+FFFD 代码点而不是代理代码点的问题。(107530253)
  • 修复了 document.applets 不再返回任何元素的问题。(107926196)
  • 修复了 data: URL 在所有地方表现一致的问题。(107982669)
  • 修复了 pointermove 事件中缺少 movementX 和 movementY 的问题。(108112600)
  • 修复了 visibilitychange 后 Wake Lock 权限被拒绝的问题。(108279602)
  • 修复了 <template> 内部的 <frameset> 被忽略的问题。(109081113)
  • 修复了 ResizeObserver 中 shadow 节点的节点深度计算问题。(109166329)
  • 修复了 WebSocket 的 binaryType setter 不会抛出异常的问题。(109192086)
  • 修复了在 macOS 全局 Window 对象上公开 DeviceMotionEvent 和 DeviceOrientationEvent 的问题。(109580299)
  • 修复了剩余页面高度永远不为 0 的问题。(109929893)
  • 修复了更改 documentElement 的 dir 属性不会更新匹配 :dir 伪类的子元素的问题。(109976294)
  • 修复：将基于 canvas 的 VideoFrame 颜色空间设置为 RGB。(110062111)
  • 修复了 window.stop() 异步触发 XMLHttpRequest 上的 abort 事件的问题。(110086856)
  • 修复了选择 OptGroup 标签不会取消选择已选项目的问题。(110088331)
  • 修复了启用多选的 <select> 未始终触发 onchange 事件的问题。(110274850)
  • 修复了 :nth-child 和 :nth-last-child 内 ID 的样式失效问题。(110451692)
  • 修复了来自 canvas 的 MediaStream (captureStream) 能够渲染到不同 canvas 的问题。(110696945)
  • 修复了 XMLHttpRequest.responseXML.characterSet。(110863647)
  • 修复了当存在重复帧名称时，window 命名 getter 行为正确的问题。(110864556)
  • 修复：将 mousemove 事件限制为每个渲染一帧。(110921187)
  • 修复了 Service Worker 重定向丢失哈希片段的问题。(111208014)
  • 修复了通过文件输入选择的相机 RAW 文件在更改时以 PNG 格式返回的问题。(111231838)
  • 修复了表情符号字符有时在文本样式中绘制不正确的问题。(111411175)
  • 修复了 HTMLTableSectionElement.insertRow(0) 和 HTMLTableRowElement.insertCell(0)。(111791597)
  • 停止将 <command> 解析为没有结束标签。(107416609)
  • 从 HTML 解析器中移除了对 <layer> 和 <nolayer> 的残留支持。(107554605)
  • 移除了 WebSocket 接口上已废弃的大写 URL 属性别名。(109151597)

Web 应用

  • 修复了传递 NotificationOptions.silent 的问题。(107424158)
  • 修复：开始使用原始目录用于 DOMCache 和 ServiceWorkerRegistrations。(107843591)
  • 修复了 Notifications API 默认静音为平台约定。(109390045)
  • 修复了 Web 推送通知在某些情况下不起作用的问题，通过在触发 activate 事件之前运行服务工作者。(109411104)
  • 修复了当通过 postMessage 发送块时服务工作者下载失败的问题。(109561888)
  • 修复了服务工作者被删除时触发 controllerchange 事件的问题。(109567316)

Web Inspector

  • 修复了在样式面板中通过 CSS 选择器进行 Tab 键切换时删除 CSS 声明的问题。(100492875)
  • 修复了在“源”选项卡中，当跳过带有虚假条件断点的函数时，“单步跳过”表现得像“恢复”的问题。(101604843)
  • 修复了盒模型指示边距已通过 margin-trim 修剪的问题。(103374677)
  • 修复了“检查元素”未高亮显示选定元素的问题。(105177739)
  • 修复了“元素”选项卡样式侧边栏中 color-mix CSS 的显示问题。(105732322)
  • 修复了在“元素”选项卡中首次尝试添加新 CSS 规则失败的问题。(106751396)
  • 修复了 Web Inspector 在悬停提示中不显示被忽略可访问性元素的辅助功能角色问题。(106771408)
  • 修复了在“控制台”选项卡中主框架导航期间发生的缺少控制台日志记录的问题。(106877298)
  • 修复了在启用“保留日志”时，“网络”选项卡中清除的项目重新出现的问题。(107639797)
  • 修复了“控制台”选项卡中的时间戳不正确的问题。(107660054)
  • 修复了在“控制台”选项卡中不可枚举属性显示为内部属性的问题。(108005425)
  • 修复了“控制台”选项卡中对象预览中内部属性未灰显的问题。(108007438)
  • 修复了私有符号在作用域链中被省略的问题。(108674026)
  • 修复了切换 Web Inspector 选项卡时“源”详细信息侧边栏宽度会重置的问题。(109253229)
  • 修复了 new URL("/") 的错误消息更明确的问题。(109253920)
  • 修复了显示为截断的本地存储编辑问题。(109473191)
  • 修复了当 XHR 请求与主资源具有相同 URL 时，“网络”选项卡中显示资源类型为 XHR 的问题。(110016863)
  • 修复了当颜色样本为只读时，不显示不正确提示的问题。(110409252)

WebGL

  • 修复了 OffscreenCanvas 丢失上下文事件的触发问题。(104198422)
  • 修复了 OffscreenCanvas 在 WebGL 中作为 TexImageSource 工作的问题。(106700463)

WebRTC

  • 修复了在摄像头开启时阻止显示器进入睡眠状态的问题。(100423979)
  • 修复了 HTMLMediaElement 的层上下文处理问题。(105795272)
  • 修复了当静音麦克风设备消失时，其轨道结束的问题。(108194510)
  • 修复了 iOS 上摄像头选择使用系统首选摄像头的问题。(109220107)
  • 修复了摄像头和麦克风都应具有 groupIds 的问题。(109355290)

反馈

我们乐于听取您的意见。在 X 上向 @webkit 发送回复，分享您对 Safari 17.0 的看法。您可以在 Mastodon 上找到我们：@jensimmons@front-end.social 和 @jondavis@mastodon.social。如果您遇到任何问题，欢迎您就 Safari UI 提供反馈，或就网络技术或 Web Inspector 提交 WebKit 错误报告。提交问题确实有所帮助。

下载最新的 Safari Technology Preview 以保持在网络平台的前沿并使用最新的 Web Inspector 功能。您还可以阅读 Safari 17.0 发行说明。