Safari 17.0 正式发布，带来search元素、Set方法、字体适配、Web API等众多 Webkit 功能更新！
2023年9月19日，Safari 17.0 正式发布，在 iOS 17 和 iPadOS 17 上可以使用。
Safari 17.0 Beta 版本在 macOS Ventura、macOS Monterey 和 macOS Sonoma 上可用，正式版本将于 09 月 26 日发布。Safari 17.0 还可以在 vision OS 模拟器中使用，您可以通过下载支持 visionOS SDK 的 Xcode 15 的最新测试版来测试您的网站。
Webkit 新增的功能如下：
HTML 新特性： 新增对 popover属性的支持新增对 <search>元素的支持新增对 <model>元素的试验性支持JavaScript 新特性 新增对 Set.prototype方法的支持新增对 Set.prototype.difference的支持新增对 RegExp重复命名捕获组的支持新增对 RegExpv 标志的支持... Web API 新特性 新增对 Storage API 的全面支持 在 Offscreen Canvas 中添加对 WebGL 的支持，以便将这些优势应用到 3D 中 新增对多个 WebGL 应用程序接口的支持，包括 WEBGL_clip_cull_distance,EXT_disjoint_timer_query,EXT_disjoint_timer_query_webgl2,EXT_polygon_offset_clamp和 GPUExternalTexture新增对 Gamepad API 的支持， Gamepad.prototype.vibrationActuator新增对 URL API 的支持， 增加 URL.canParse(tentativeURL, optionalBase)，可以直接判断当前 URL 是否能解析... CSS 新特性 新增对 @counter-style的支持新增对 font-size-adjust双值语法和from-font值的支持新增对 text-transform: full-width和text-transform: full-size-kana的支持新增对 @supports font-format()和@supports font-tech()的支持，以更好地为字体支持提供判断完善对 Media Queries level 4 标准的支持，增加了对四种新媒体查询的支持。 改进了 image-set的兼容性... Image 新特性 新增对 HEIC/HEIF 图片的支持 新增对 JPEG XL 的支持
下面将对以上新特性具体介绍。
1.HTML 新特性
1.1.popover 属性
popover 属性为 Web 提供了一个内置框架，用于显示遮罩、弹出窗口、气泡和对话框。popover 属性的值有两种类型：
auto：自动弹出窗口，当你点击弹出窗口外部位置时，它会自动关闭manual: 手动弹出窗口，没有自动关闭行为
<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>
popovertarget 属性通过一个 id 属性将按钮与弹出内容连接起来。可选的 popovertargetaction 属性将show、hide、toggle 作为值，其中 toggle 为默认值。
这只是您可能会发现有用的一种 UI 模式。有很多可能的组合。在 HTML 中使用弹出窗口机制可以快速完成工作，同时确保极大的可用性和完全的可访问性。
为了超越简单的按钮触发器，JavaScript API 通过 showPopover()、hidePopover() 和 togglePopover() 提供了更大的可能性。
1.2.新的 <search> 元素
虽然网络标准中一直在定义新的网络技术，但很少出现全新的 HTML 元素。只有当某些东西满足了人们对实用性的极高期望时，才会出现这种情况。搜索是大多数网站的关键功能，因此现在出现了一个新元素 <search/>。
之前我们实现一个搜索框时，代码通常如下：
<div class="search-box" role="search">
<form action="/fwc/search" method="POST">
<div class="search-input">
<input type="search" name="query"/>
<input type="submit" value="搜索">
</div>
</form>
</div>
请注意，上面第一行代码中有包含 ARIA role="search"，它用于识别搜索功能，如果没有 ARIA 搜索角色，所有用户都无法正常访问搜索功能。
<search>元素会自动为网站或网络应用程序的搜索部分提供正确的无障碍语义。这符合 HTML 的原则，使默认设置成为可访问的，而不是要求您记住添加可访问性的操作。<search> 元素还提供了语义标记，用于将搜索表单的固有含义传达给从翻译算法到机器学习等各种计算环境。
Safari 是首款推出 <search> 元素的浏览器，17.0 版本现在已经支持。，上面的代码使用 <search> 替换如下：
<search role="search">
<form action="/fwc/search" method="POST">
<div class="search-input">
<input type="search" name="query"/>
<input type="submit" value="搜索">
</div>
</form>
</search>
在不支持 <search> 元素的浏览器会默认识别出有一个元素存在，并识别出它的任何属性，包括角色、ID 和类。它的行为就像一个通用元素，就像一个 <div>。因此，我们建议您暂时在 <search> 元素中加入 ARIA 搜索角色。通过使用 <search role="search">，以确保每个用户都能获得预期的体验。将来，当所有浏览器都支持时，您就可以放弃 ARIA 搜索角色了。
在此期间，您可以在其他浏览器支持 <search> 元素之前，放心地从今天开始使用 <search>。
2.JavaScript 新特性
2.1.新增七个新的 Set.prototype 方法
https://github.com/tc39/proposal-set-methods This is a proposal to add methods like union and intersection to JavaScript's built-in Set class. It is currently at stage 3.
Set.prototype.intersection(other)Set.prototype.union(other)Set.prototype.difference(other)Set.prototype.symmetricDifference(other)Set.prototype.isSubsetOf(other)Set.prototype.isSupersetOf(other)Set.prototype.isDisjointFrom(other)
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);
3.Web API 新特性
3.1.Gamepad API
Safari 17.0 版本 WebKit 添加了对 Gamepad.prototype.vibrationActuator 的支持。它可在游戏手柄上实现 "dual-rumble" 触觉反馈。通过该 API，您可以检查游戏手柄是否支持 "dual-rumble"，并控制触觉效果的持续时间和幅度。
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);
}
3.2.Storage API
iOS 17、iPadOS 17 和 macOS 的 Safari 17.0 和 WebKit 现在已全面支持 Storage API。
WebKit 还更新了存储配额策略。之前，存储限制为 1GB，当超过该限制时，之后的存储操作会在主屏幕 Web 应用程序中失败，或在 Safari 中提示用户允许增加配额。
现在，存储的限额是根据总磁盘空间计算的。这意味着通常会获得更高的限额，用户在 Safari 中也不会再收到权限提示。您可以使用 StorageManager.estimate() 获取每个起源的估计使用量和配额值。
默认情况下，每个源会获得更高的存储限制，当所有源的总使用量大于某个值（即根据总磁盘空间计算得出的 "总配额"）时，WebKit 将按源驱逐数据。
当一个源的存储模式为持久时，它就不会被驱逐。要检查源的存储模式，可以使用 navigator.storage.persistent()。要请求将模式更改为持久模式，可以使用 navigator.storage.persistent()。
3.3.URL API
传统方式，要确保能解析 URL，需要使用 try 处理。现在，您可以使用 URL.canParse(tentativeURL, optionalBase) 直接检测 URL 输入是否可以解析。该方法将返回 true 或 false。
此外，还扩展了 URLSearchParams 上的 has() 和 delete() 方法。使用 has() 方法可以检测参数是否已被设置。而 delete() 方法可以删除一个参数。在此之前，只能通过名称来检查和删除参数。现在，这些方法已得到扩展，可以检查和删除特定的名-值对。
例如，在具有重复关键字（如 https://example.com/?currency=USD¤cy=JPY）的 URL 上，以前只能检查 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");
}
4.CSS 新特性
4.1.font-size-adjust
在 Safari 16.4 中，我们提供了对字体大小调整的初始支持，它允许你轻松地使不同字体的视觉大小保持一致，甚至在所有可能的备用字体组合中也是如此。
字体大小调整的基本版本可以让浏览器调整字母的大小，使其 x-height 与字体大小成特定比例。在 Safari 17.0 中，我们扩大了对字体大小调整功能的支持，包括从字体值和双值语法。
双值语法可让您从调整 ex-height 切换到调整 cap-height、ch-width、ic-height 或 ic-height，从而为更广泛的书写系统和设计选择提供支持。
通过 from-font 值，您可以要求浏览器从指定的主字体中提取大小度量，并将该比例应用于所有字体，而不是用数字值来声明比例。
我们来看一个例子。在这里，font-size-adjust（调整字体大小）要求浏览器使文章中的所有字体都与所使用的主字体的 x-height 相匹配。这意味着，无论从哪个堆栈应用哪种字体，也无论段落和代码中的字体在实际大小上有多大差异，段落和代码中的所有文本在视觉上看起来都是一样大的。
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;
}
4.2.text-transform
Safari 17.0 新增了对 text-transform: full-width 和 text-transform: full-size-kana 的支持。
全宽值可将文本中的所有字符转换为 "全宽"，以匹配中文、日文或韩文（CJK）等东亚文字中定义的字符宽度。在排版竖排文本或将中日韩文字与拉丁文或其他文字混合使用时，该值尤其有用。
全尺寸假名值可将日语中的小假名字符的大小转换为与其对应的全尺寸字符的大小，这种技术有时用于使红宝石文本在小尺寸下更清晰易读。
Safari 17.0 还增加了对声明多个文本转换值的支持，以便将这些值组合起来。例如 text-transform: uppercase full-width 将把拉丁字体中的字符转换为全大写字母，宽度与字体中的中日韩字符相同。
4.3.@counter-style
CSS 计数器样式提供了一种在 CSS 中更改计数器语言或字符集的机制，既适用于有序/无序列表（使用 list-style-type），也适用于 CSS 计数器。
例如，我可以为塞尔维亚语定义计数系统，并用它来为有序列表编号。
@counter-style upper-serbian {
system: alphabetic;
symbols: 'А' 'Б' 'В' 'Г' 'Д' 'Ђ' 'Е' 'Ж' 'З' 'И' 'Ј' 'К' 'Л' 'Љ' 'М' 'Н' 'Њ' 'О' 'П' 'Р' 'С' 'Т' 'Ћ' 'У' 'Ф' 'Х' 'Ц' 'Ч' 'Џ' 'Ш';
}
ol {
list-style: upper-serbian;
}
5.Image 新特性
5.1.JPEG XL
Safari 17.0 新增了对 JPEG XL 的支持。这种新的图像格式为在视觉质量和文件大小之间找到适当平衡提供了另一种现代选择。
JPEG XL 使用一种名为 "Modular Entropy Coding"的新压缩算法，可更灵活地调整压缩比。与 JPEG 类似，它也支持渐进式加载，非常适合通过慢速连接提供图像，因为用户在下载整个文件之前就能开始看到图像。你还可以将现有的 JPEG 文件重新压缩成 JPEG XL，而不会损失任何质量或数据，同时还能将文件大小平均减少 20%。或者从原始图像文件进行压缩，创建一个比 JPEG 小 60% 的文件。
使用 <picture> 元素向支持 JPEG XL 的浏览器提供 JPEG XL 文件，同时轻松地向不支持 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>
5.2.HEIC
Safari 17.0 还增加了对 HEIC 图像的支持。HEIC 照片所占空间约为同等质量 JPEG 文件的一半。
HEIC 是一种图像格式，用于在 Apple 设备上存储相机拍摄的照片以及 iCloud 照片。有了 Safari、Safari View Controller 和 WKWebView 对 HEIC 的支持，你现在可以在浏览器中直接导入和编辑此类照片，而无需将它们转换成其他格式。在应用程序中使用 WKWebView 时，HEIC 也是显示图像的理想选择。
6.最后
此次 Safari 17.0 版本更新带来的很多功能的变化，具体可以查看官网了解全部信息。