Safari 17.2 正式发布，有史以来最大的 12 月份版本更新
Safari 17.2 正式发布，在 macOS Ventura 和 macOS Monterey 上可用。
Web 技术正在不断推进，既有大的新特性，也有小的微调。如今，与 2000 年代末的一年或两年更新一次相比，Web 开发人员期望 Web 浏览器每年更新多次——或者在此之前每两到五年更新一次。在过去几年中，您让我们知道您希望我们的更新更加频繁。作为回应，我们在两年多前改变了 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 技术可以更广泛地分布在一年中，并且更早地让用户使用。
Safari 17.2 是 Safari 有史以来最大的 12 月份 Web 技术版本，包含了 39 个新功能和 169 个修复。下面来看一下主要特性更新。
1.HTML
Exclusive accordions
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>
One time codes
Safari 以前通过其他技术提供支持，现在 iOS 17.2 和 iPadOS 17.2 版的 WKWebView 提供了输入字段提示收到一次性代码的功能。
<label for="onetimecode">Enter code:</label>
<input name="onetimecode" id="code" type="text" autocomplete="one-time-code" />
2.CSS
Nesting
Safari 16.5 支持 CSS 嵌套，但有一个注意事项。如果不使用 & 符号来确保每个嵌套行都以符号开头，则无法嵌套元素选择器。从 Safari 17.2 开始，这一限制不再必要。现在可以编写：
article {
h1 {
font-size: 1.8rem;
}
p {
font-size: 1.2rem;
}
}
如果您想继续使用 & 符号，可以继续使用。任何已使用 & 的代码将在未来长期保持可用。事实上， & 仍然是其他嵌套技术中的重要工具。如果你对“原生 CSS 嵌套”还不了解，可以参考这篇文章：现代CSS：原生 CSS 嵌套快速入门
New units
如果您曾经编写过 CSS，您肯定会使用 em 和 rem 单位来调整字体和布局的大小。其中，1em等于当前元素上计算出的 font-size 的值，而1rem 等于“root em”，即设置在根 <html> 元素上的字体大小。em 和 rem 的使用，使我们能够在页面的大部分区域中定义一致的大小，具有很大的灵活性和能力。同样，lh 单位随着 rlh 一起提供，用于行高和根行高。
Safari 17.2 通过添加对rcap、rex、ric和rch的支持，扩展了根单位的灵活性和能力。这些单位与设置在根<html>元素上的cap、ex、ic和ch大小相等。
什么是cap、ex、ic和ch？这些字符指字体中字形的不同测量值的强大单位。
CSS cap 是这些单位中最新的一种，现在也被添加到 Safari 17.2 中的 WebKit 中。1cap 的测量值等于第一个可用字体的上限高度。
ex 单位指的是字体的 x-height 。ch 单位等于字体中零字符的内联尺寸，内联尺寸是指水平书写模式下的宽度，或垂直书写模式下的高度。ic 单位代表中日韩文字（中文、日文、韩文及相关文字系统）中的 "表意字符"。与 ch 一样，ic 单位测量的是内联尺寸，在这种情况下，1ic 相当于一个字符的宽度或高度。(由于中日韩字体中的所有表意字符通常占用相同的空间，因此测量哪个字符并不重要）。
Motion Path and Shapes
WebKit 在 Safari 16.0 中首次提供了对 CSS Motion Path 的支持，为网络开发人员提供了沿任意形状的自定义路径为对象制作动画的能力。
Safari 17.2 新增了对以下功能的支持
offset-position：支持 circle() 和 ellipse() offset-position: normal ray()内的coord-box和<position>参数rect()和xywh()形状
Animation
Safari 17.2 新增了对 CSS 动画和过渡效果中 linear() 函数的支持。它允许你定义一个在一组点之间线性插值的缓函数。例如，linear(0, 0.25, 1) 将产生一个从 0 到 0.25 再到 1 的线性移动的缓函数。详细可以参考文章：2023 年 CSS 新特性大盘点
Math functions
Safari 17.2 还在 CSS 数学函数 rem()、mod() 和 round() 中添加了对混合百分比和长度参数的支持。
CSS 数学函数最初在 Safari 15.4 中发布。round() 函数根据所选的四舍五入策略返回四舍五入后的数字。rem()和mod()函数返回第一个参数除以第二个参数后的余数或模，类似于 JavaScript 的余数运算符。
body {
--rounding-interval: 8ric;
}
aside {
width: round(down, 100%, var(--rounding-interval));
}
Counters
今年 9 月，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 提供的自动编号进行操作。
应用案例：现代CSS：你了解的CSS 计数器
Mask border
多年来，-webkit-mask-box-image 提供了一种通过边框对元素边缘应用遮罩的方法。这一想法最初是由 WebKit 实现的，后来也出现在基于 Chromium 的浏览器中。现在，在 Safari 17.2 中，很荣幸地成为第一个取消此属性的浏览器，并正式将其命名为 mask-border。
mask-border 属性是六个属性的简写：
mask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-width
Custom Highlights
Safari 17.2 添加了对 Custom Highlights API 的支持。有一些伪元素可用于样式化 UA 提供的某些类型的高亮显示，如 ::selection。现在您可以在 JS 中为任意 Range 对象创建自己的高亮显示，并使用新的 CSS ::highlight() 伪元素对其进行样式设置，从而在不更改标记或 DOM 的情况下自定义高亮显示网页内容。
<style>
::highlight(search-results) {
background-color: rgb(53, 177, 53);
color: yellow;
padding: 10px;
}
</style>
<script>
const parentNode = document.getElementById("foo");
const range1 = new Range();
range1.setStart(parentNode, 10);
range1.setEnd(parentNode, 20);
const range2 = new Range();
range2.setStart(parentNode, 40);
range2.setEnd(parentNode, 60);
const highlight = new Highlight(range1, range2);
CSS.highlights.set("search-results", highlight);
</script>
3.Responsive images
Safari 17.2 添加了对 preloading responsive images 的支持。此代码要求浏览器从选项列表中评估哪种尺寸的图片适合使用，并预载该图片。
<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 属性相同。
4.JavaScript
Import attributes
Safari 17.2 添加了对 import 属性的支持。它提供了一种在模块导入语句中添加类型信息的方法，使您可以像这样导入 JSON 模块：
import json from "./foobar.json" with { type: "json" };
import("foobar.json", { with: { type: "json" } });
Number Format
Safari 17.2 新增了对 Intl.NumberFormat 的 FormatApproximately 操作的支持。Intl.NumberFormat 实例的 formatRange() 方法可根据此 Intl.NumberFormat 对象的地域和格式选项格式化数字范围。例如，美元货币的格式范围 formatRange(3, 5) 将显示为 "3.00 - 5.00 美元"。如果这两个数字非常接近，FormatApproximately 功能会在数字前面添加一个"~"符号，因此 formatRange(2.9, 3.1) 将表示为"~$3"，也就是近似 3 美元。
5.Web API
Fetch Priority
Safari 17.2 添加了对 Fetch Priority 的支持。它允许开发人员设置资源（如图像、脚本或样式表等链接资源）相对于其他资源的优先级。这可以通过 fetchpriority HTML 属性或通过 Fetch API 传递的选项来实现。支持的值有 height/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();
应用案例：WEB性能：利用Priority Hints和fetchpriority提升资源加载速度
Forms validation
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>
<script>
const form = document.getElementById("form");
form.addEventListener("keypress", () => form.reportValidity());
</script>
其它
更多特性及修复详见：https://webkit.org/blog/14787/webkit-features-in-safari-17-2/
大家都在看