2024年09月16日，Safari 18.0 版本正式发布，该版本引入了一系列新功能，旨在提升用户的浏览体验和安全性。以下是对 Safari 18.0 Web 开发相关亮点的介绍：
View Transitions
WebKit 在 Safari 18 中增加了对 View Transitions API 的支持。它提供了一个优化的浏览器 API，用于将元素从一个状态动画到另一个状态。Safari 支持 CSS View Transitions Module Level 1 规范，该规范添加了新的 CSS 属性和伪元素，用于定义过渡动画，以及一个新的浏览器 API，用于启动过渡动画并响应不同的过渡状态。它的工作原理是捕获页面的当前（旧）状态，并对新状态应用动画过渡。默认情况下，浏览器在状态之间应用交叉淡入淡出效果。
调用 document.startViewTransition() 方法来启动捕获。你可以将一个回调函数作为第一个参数传递，以在旧捕获和新捕获之间进行 DOM 状态更改。该方法返回一个 ViewTransition 对象，其中包含可以用来跟踪视图过渡开始或结束的 Promise。
一旦捕获了状态，就会构建一个伪元素树，可以用 CSS 定位，允许你修改用于过渡的 CSS 动画。通过 ::view-transition-new(*) 和 ::view-transition-old(*) 选择器，可以修改从旧页面状态到新页面状态的动画。你还可以通过使用 CSS view-transition-name 属性命名特定元素，要求浏览器独立跟踪其状态更改。然后你可以使用伪元素为其自定义动画。
.page-view {
view-transition-name: page-view;
}
::view-transition-old(page-view) {
animation: 500ms ease-in-out transition-out-animation;
}
::view-transition-new(page-view) {
animation: 500ms ease-in-out transition-in-animation;
}
Style Queries
Safari 18.0 的 WebKit 在测试 CSS 自定义属性时添加了对 Style Queries 的支持。类似于开发人员可以使用 Sass 混合，Style Queries 可以用于定义一组可复用的样式。
在这里，如果 --background 自定义属性设置为黑色，那么将应用一些特定的样式，在这种情况下是将标题和段落文本颜色设置为白色。
@container style(--background: black) {
h2, h3, p {
color: white;
}
}
Animate "display"
Safari 18.0 新增了对显示属性过渡动画的支持。许多开发人员都很高兴能使用 @starting-style 以及 transition-behavior 和 display: none 插值。Safari 17.4 版 WebKit 添加了对 transition-behavior 的一般支持，包括 transition-behavior:allow-discrete。Safari 17.5 版 WebKit 增加了对 @starting-style 的支持，让您可以在创建（或重新创建）元素时为其过渡定义起始值。现在，在 Safari 18.0 版 WebKit 中，您可以同时使用这些功能来转换显示属性。
content-visibility
Safari 18.0 版 WebKit 添加了对 content-visibility 的支持。该属性可控制元素是否以有助于性能优化的方式呈现其内容。它可以让你告知浏览器，页面的某些部分最初可能会在屏幕外，并建议在布局和渲染时省略这些部分。这样可以加快页面加载速度。
URL.parse()
Safari 18.0 版 WebKit 添加了对 URL.parse() 的支持，这是一种解析 URL 的方法，当解析失败时会返回 null 而不是异常。
// Before
let url = null;
try {
url = new URL(input, base);
} catch(e) { }
// Now
const url = URL.parse(input, base);
更多参考：
https://webkit.org/blog/15865/webkit-features-in-safari-18-0/
1.关注FED实验室(前端开发实验室)获取更多前端热点资讯、技术实践、面试招聘等精彩内容。
2.扫描下面二维码，加小懒好友，进全栈开发交流群，一起学习和进步。
大家都在看
