Safari 17.5 中的 WebKit 功能

2024 年 5 月 13 日

作者：Jen Simmons

五月快乐！又到了发布 Safari 的时候了——这是我们 2024 年的第三次重大更新。距离 WWDC24 及其今年晚些时候发布的内容仅剩一个月，我们很高兴能将这 7 项新功能和 22 个错误修复带给您的用户。

CSS

Safari 17.5 中有几项令人兴奋的 CSS 新功能，包括 text-wrap: balance、light-dark() 颜色函数和 @starting-style，以及将功能查询与 @import 规则结合使用的能力。让我们看看如何使用它们。

文本自动换行平衡

在网络上，由于容器宽度灵活、内容长度不一致以及浏览器之间的差异，要避免文本自动换行导致最后一行只剩下几个单词，似乎是不可能的。

Very long text headline wrapping using the normal algorithm — which leaves a single word on the last line, all by itself

在手工排版时代，排版师会通过手动调整内容来煞费苦心地避免这种不良结果。几十年来，Web 开发人员尝试了一系列不同的技巧，以在 CSS、HTML、JavaScript 和内容管理系统中避免孤行。但都没有很好地解决问题。这些尝试通常感觉很笨拙、费力且脆弱。

为了解决这一问题以及其他令人沮丧的问题，CSS 工作组定义了三个新选项，可用于更改文本的自动换行方式。您可以使用 text-wrap 从默认换行切换到另一种样式。Safari 17.5 的 WebKit 增加了对这些新选项中第一个——平衡——的支持。

text-wrap: balance 规则要求浏览器“平衡”文本行，使它们的长度大致相同。

A very long headline wrapped using text-wrap: balance, so each of the three lines are the same length as each other — and none of them fill all the horizontal space available

您可以看到现在文本不再填充包含块——单词的右侧有很大的空间。这是预期的行为，也是您在决定何时使用 text-wrap: balance 时需要考虑的问题。

使用 text-wrap: balance 时，每行文本的确切断点可能在不同浏览器中略有不同。CSS Text level 4 网络标准允许每个浏览器引擎团队自行决定使用哪种算法来精确地平衡文本换行。

浏览器计算字符并平衡多行文本可能需要大量的计算资源，因此标准允许浏览器限制平衡的行数。Chromium 浏览器平衡 6 行或更少，Firefox 平衡 10 行或更少，而 Safari/WebKit 则平衡无限数量的行。

目前，如果文本周围有浮动元素或首字下沉，Safari 不会平衡文本。如果内容包含保留制表符或软连字符，Safari 会禁用平衡器。

文本自动换行速记属性和长记属性

text-wrap 属性实际上是两个长记属性的速记：text-wrap-style 和 text-wrap-mode。

text-wrap-mode 属性提供了一种机制来表达文本是否应该自动换行。

text-wrap-mode: wrap; /* initial value */
text-wrap-mode: nowrap;

wrap 值启用换行，而 nowrap 值禁用换行，就像 white-space 的值一样。（实际上，text-wrap-mode 是新引入的 white-space 长记属性。）WebKit 在 Safari 17.4 中增加了对 text-wrap-mode: wrap 和 nowrap 的支持。

text-wrap-style 属性选择如何换行。初始值为 auto — 沿用几十年来文本的换行方式。或者，您可以选择一个值来切换到另一种换行“样式”。

Safari 17.5 的 WebKit 增加了对 text-wrap-style: balance、stable 和 auto 的支持。

text-wrap-style: auto; /* initial value */
text-wrap-style: balance;
text-wrap-style: stable;

当然，text-wrap 速记属性是一种将 text-wrap-mode 和 text-wrap-style 组合在一起并同时声明它们的方式。如果您编写 text-wrap: balance，它与 text-wrap: wrap balance 相同，这意味着：“是的，请换行，当您换行时，请平衡文本”。

完整支持最终将包括三个属性和六个值。目前还没有任何浏览器完全支持所有这些，因此请务必查阅对 text-wrap、text-wrap-mode 和 text-wrap-style 属性以及 balance、pretty、stable、auto、wrap 和 nowrap 值的支持情况。

在不支持的浏览器中，balance、pretty 和 stable 值将简单地回退到 auto，因此渐进增强很容易实现。无论您的用户中有多少人尚未拥有支持这些值的浏览器，您现在都可以使用这些值。他们只会获得自动换行文本，就像您不使用 text-wrap 一样。同时，那些拥有支持的用户将获得额外的优化效果。

深色模式和 light-dark() 颜色函数

越来越多的用户期望网站和 Web 应用程序支持深色模式。自 Safari 12.1 以来，prefers-color-scheme 媒体查询使您能够编写如下代码

body {
  background: white;
  color: black;
}
@media (prefers-color-scheme: dark) {
  body {
    background: darkslategray;
    color: white;
  }
}

或者您可能已经使用变量一次性定义了浅色和深色模式的颜色，从而使其在任何地方都更容易使用。

:root {
  --background: white;
  --text: black;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: darkslategray;
    --text: white;
  }
}
body {
  background: var(--background);
  color: var(--text);
}

现在有了一个新选项 — light-dark() 函数。它使深色模式的颜色定义变得更加容易。

首先，使用 color-scheme 属性告知浏览器您正在提供浅色和深色模式的设计。这会促使浏览器在深色模式下切换默认的用户代理样式，例如确保表单控件以深色模式显示。这也是 light-dark() 正常工作所必需的。

:root {
  color-scheme: light dark;
}

然后，无论何时定义颜色，您都可以使用 light-dark() 函数来定义浅色模式的第一种颜色和深色模式的第二种颜色。

color: light-dark(black, white);
background-color: light-dark(white, darkslategray);

如果您愿意，仍然可以使用变量。也许您想这样组织您的代码。

:root {
  color-scheme: light dark;
  --background: light-dark(black, white);
  --text: light-dark(white, darkslategray);
}
body {
  background: var(--background);
  color: var(--text);
}

学习 light-dark() 时经常被问到的一个问题是“这只适用于颜色吗？”是的，此函数仅适用于颜色。请使用 prefers-color-scheme 媒体查询来定义其余依赖于颜色方案的样式。

起始样式

Safari 17.5 的 WebKit 增加了对 @starting-style 的支持。它允许您为特定元素定义起始值。这在元素框创建（或重新创建）时启用过渡是必需的。

.alert {
  transition: background-color 2s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

在上面的示例中，当元素添加到文档时，background-color 将从透明过渡到绿色。

许多开发人员都热衷于将 @starting-style 与 display: none 插值结合使用。为此，WebKit 还需要支持 display 属性的动画，而这尚未在 Safari 中发布。您今天可以在 Safari 技术预览版中测试此用例。

导入 CSS 的功能查询

Safari 17.5 的 WebKit 将 supports() 语法添加到了 @import 规则中。现在，您可以根据是否支持特定功能来有条件地导入 CSS 文件。

@import <url> supports(<feature>);

例如，您可以根据是否支持 CSS 嵌套来加载不同的样式表。

@import "nested-styles.css" supports(selector(&));
@import "unnested-styles.css" supports(not selector(&));

或者，当浏览器不支持 层叠层时，您可以加载某些 CSS 文件。（请注意，在不支持层叠层的浏览器中，任何带有 layer() 的 @import 规则都将自动被忽略。）

@import url("reset.css") layer(reset);
@import url("framework.css") layer(framework);
@import url("custom.css") layer(custom);

@import url("unlayered-fallback-styles.css") supports(not at-rule(@layer));

或者只是简单地测试一个功能。在这里，只有在子网格受支持的情况下，这些布局样式才会被加载。

@import url("layout.css") supports(grid-template-columns: subgrid);

WebCodecs

当 AV1 硬件解码器可用时，Safari 17.5 的 WebKit 为 WebCodecs 增加了对 AV1 的支持。

WebGL

Safari 17.5 的 WebKit 增加了对 WebGL 的 EXT_conservative_depth 和 NV_shader_noperspective_interpolation 支持。

WKWebView

WKWebView 增加了将 MarketplaceKit 错误记录到 JavaScript 控制台的功能。这将使错误更易于调试。

错误修复及更多

除了这些新功能之外，Safari 17.5 的 WebKit 还包括对现有功能的完善工作。

辅助功能

  • 修复了导致 VoiceOver 在某些文本字段中无法回显单词的错误。(122451549) (FB13592798)

动画

  • 修复了多个加速动画和方向更改时出现的闪烁问题。(117815004)

认证

  • 修复了通行密钥注册请求期间 excludeCredentials 属性被忽略的问题。(124405037)

CSS

  • 修复了隐式 @scope 的近距离计算问题。(124640124)
  • 修复了网格轨道大小调整算法的逻辑高度计算，以避免不必要的网格项更新。(124713418)
  • 修复了任何 @scope 限制导致元素超出范围的问题。(124956673)

表单

  • 修复了深色模式下原生文本字段不可见的问题。(123658326)
  • 修复了深色模式下原生 <select> 元素回退渲染的问题。(123845293)

媒体

  • 修复了当一个设置了 pointer-events: none 的视频元素放置在另一个元素上方时，该元素无法滚动的问题。(118936715)
  • 修复了 HTML5 <audio> 在后台播放时无法继续到下一个媒体活动的问题。(121268089) (FB13551577)
  • 修复了 iPhone 15 Pro 上 AV1 硬件解码问题。(121924090)
  • 修复了在网页浏览器中播放流媒体内容时，通过内置扬声器播放的音频失真问题。(122590884)
  • 修复了页面加载时 <audio> 和 <video> 无法触发 loadeddata 事件的问题。(124079735) (FB13675360)

渲染

  • 修复了在非覆盖和覆盖滚动条之间切换时，调整可滚动区域大小的问题。(117507268)
  • 通过避免异步图像解码，修复了首次在绘制背景上显示图层时出现的闪烁问题。(117533495)
  • 修复了 ruby 序列之前或之间断行的问题。(122663646)

Web API

  • 修复了当鼠标从 iframe 外部单击然后按住按钮移入 iframe 时，iframe 内的 mousemove 事件问题。(120540148) (FB13517196)

Web 应用

  • 修复了导致 Web Push 在 Web 应用或 Safari 未运行的情况下不显示通知的几个问题。(124075358)

Web 检查器

  • 修复了控制台选项卡中直到显示新控制台消息才出现信息和调试按钮的问题。(122923625)

WebRTC

  • 修复了 WebCodecs 无法正确使用 VP9 硬件解码器的问题。(123475343)
  • 修复了 Teams VA 中没有传入视频的问题。(124406255)
  • 修复了启用手电筒时摄像头偶尔暂停的问题。(124434403)

更新到 Safari 17.5

Safari 17.5 适用于 iOS 17.5、iPadOS 17.5、macOS Sonoma 14.5、macOS Ventura、macOS Monterey 和 visionOS 1.2。

如果您运行的是 macOS Ventura 或 macOS Monterey，您可以单独更新 Safari，而无需更新 macOS。在 macOS Ventura 上，前往  > 系统设置 > 通用 > 软件更新，然后点击“可用更新”下的“更多信息…”

要在 iPhone、iPad 或 Apple Vision Pro 上获取最新版本的 Safari，请前往“设置”>“通用”>“软件更新”，然后轻点以更新。

反馈

我们很高兴听到您的反馈。要分享您对 Safari 17.5 的看法，请在 Mastodon 上找到我们：@jensimmons@front-end.social 和 @jondavis@mastodon.social。或者在 X 上向 @webkit 发送回复。您也可以在 LinkedIn 上关注 WebKit。如果您遇到任何问题，欢迎您就 Safari UI 提供反馈，或就 Web 技术或 Web 检查器提交 WebKit 错误报告。提交问题确实会带来改变。

在 macOS 上下载最新的 Safari 技术预览版，以站在 Web 平台的最前沿并使用最新的 Web 检查器功能。

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