Apple 在前端也很与时俱进！你知道吗？

在 6 月 11 日举行的 Apple 全球开发者大会（WWDC）上，Apple 揭开了其最新软件系列的面纱，其中包括 ios 18、watchOS 11、macOS 15、iPadOS 18、tvOS 18 以及 VisionOS 2 操作 系统。不仅如此，Apple 还发布了其 AI 套件 Apple Intelligence 。

在此次更新中，Safari 浏览器也迎来了全新的版本—— Safari 18，它也紧跟时代潮流带来了令人瞩目的 48 项全新 Web 功能，并对 174 个已知问题进行了修复。下面就来看看 Safari 18 的更新亮点！

WebXR 增强

• 对 visionOS 2 Beta 的支持：为visionOS 2 Beta 增加了对 WebXR 的支持，允许开发者为 Apple Vision Pro 用户创建完全沉浸式的Web体验。
• Transient-pointer输入模式：Safari for visionOS 2 Beta支持新的WebXR transient-pointer输入模式，使用户可以通过视线和手势进行自然交互。
• 手部跟踪：支持 WebXR 手部跟踪，允许开发者为用户的手部动画创建3D模型。

CSS 更新

• 视图转换API：引入了视图转换API，允许开发者在状态之间平滑地转换元素，并提供更灵活的页面动画。
• 样式查询：支持样式查询，使开发者能够定义可重用的样式组，并根据CSS自定义属性的值应用这些样式。
• 相对颜色语法：扩展了相对颜色语法，允许在定义新颜色时引用currentColor或系统颜色关键字。
• 显示属性的动画：引入了对 display 属性的过渡动画支持，结合 @starting-style 和 transition-behavior，允许开发者在元素状态间实现平滑的显示转换。
• 在visionOS上塑造交互区域：Safari in visionOS 2 Beta 允许开发者通过CSS clip-path 和SVG来定义和显示链接等交互元素的可见区域形状，增强用户体验。
• 背景滤镜：改进了背景滤镜 backdrop-filter 的实现，无需前缀，支持 SVG 滤镜函数，并增强了与其他浏览器的互操作性。
• Flexbox中的safe：增加了对 Flexbox 中 safe 关键字的支持，用于改进 flex 项目溢出时的布局处理。
• 内容可见性：支持 content-visibility 属性，允许开发者优化页面性能，通过延迟渲染屏幕外内容来加速页面加载。

Mac上的Web应用

• 直接打开链接：Mac上的Web应用支持直接打开与已添加Web应用范围匹配的链接，无需跳转浏览器。
• 扩展支持：Mac上的Web应用现支持Safari Web扩展和内容拦截器，为用户提供更多个性化选项。

Safari 扩展更新

• 移动设备管理：增加了对移动设备管理的支持，包括扩展启用状态、私人浏览状态和设备上的网站访问管理，使学校和企业能更方便地配置和管理iOS、iPadOS或macOS设备上的Safari应用扩展、内容拦截器和Web扩展。

空间媒体体验

• Fullscreen API：Safari 18 for visionOS 2 Beta 引入了 Fullscreen API，允许开发者在Web上创建与Apple Vision Pro上类似的空间照片和全景图体验。用户点击照片时，它们会弹出到浮动框架中，进一步点击则展开为完全沉浸式的体验。

HTML

• 内联预测文本：Safari 18 Beta 将 iOS、iPadOS、visionOS、macOS Sequoia 和 macOS Sonoma 上的内联预测文本功能带到了Web，允许在输入时预测并自动完成文本。开发人员可通过writingsuggestions属性控制此功能。
• 开关控件触觉反馈：iOS 18 Beta 的 WebKit for Safari 为<input type=checkbox switch>添加了触觉反馈，提升了iPhone上开关控件的用户体验。
• 日期和时间输入辅助功能：macOS 上的 WebKit for Safari 18 Beta 改进了对日期和时间输入字段类型的辅助功能支持，使<input type="date">、<input type="datetime-local">和<input type="time">元素与VoiceOver正常协作。
• ARIA属性扩展：增加了对ariaBrailleLabel和ariaBrailleRoleDescription元素反射属性的支持，允许通过 JavaScript API 直接获取和设置ARIA属性，为特定可访问性需求提供了更多选项。
• Safari Viewer无干扰视频观看：引入Viewer功能，提供无干扰的视频观看体验，当切换标签或窗口时自动进入画中画模式。
• visionOS沉浸式视频：Safari for visionOS 2 Beta 支持全屏视频停靠到当前环境，提供完全沉浸式的视频观看体验，并通过数字表冠调节沉浸感。
• 受管理的媒体源支持：为Managed Media Source (MMS )和 Media Source Extensions (MSE) 添加了 Workers支持，增强了跨站点媒体播放的稳定性和性能。

WebRTC

• WebRTC HEVC支持：WebKit for Safari 18 beta 增加了对 WebRTC HEVC RFC 7789 RTP Payload Format 的支持，为视频会议、视频流和高比特率媒体传输提供了新选择。

Passkeys

• 增加了对使用mediation=conditional进行web认证凭据创建的支持，支持网站自动将密码账户升级为passkeys。
• 支持跨相关来源使用 passkeys，允许网站在有限数量的共享凭证后端的域上使用相同的passkey。
• 增加了对 WebAuthn prf 扩展的支持，允许从passkey中检索对称密钥用于加密用户数据。

HTTPS

• 混合内容处理：通过在混合内容设置中自动升级被动子资源请求，增强了对所有图像、视频和音频的HTTPS支持，遵循混合内容级别 2。

JavaScript

• 在RegExp中增加了对Unicode 15.1.0字符的支持，总共支持149,813个字符。
• 在RegExp.prototype[Symbol.matchAll]中增加了对v标志的支持，提供了更强大的Unicode字符匹配能力。

Web API

• 增加了对URL.parse()的支持，这是一种新的URL解析方法，在解析失败时返回null而不是抛出异常。
• 增强了声明性Shadow Tree支持，通过向<template>元素添加shadowRootDelegatesFocus、shadowRootClonable、shadowRootSerializable IDL属性和getHTML()方法，使它们更加灵活和可序列化。
• hasUAVisualTransition：增加了对 PopStateEvent 的 hasUAVisualTransition 属性的支持，该属性指示用户代理是否对片段导航提供了视觉过渡效果。
• 模块脚本的子资源：支持模块脚本的子资源完整性，为外部托管的模块脚本提供了内容完整性的加密保证，增强了安全性。
• bytes() 方法：为 Request、Response、Blob 和 PushMessageData 对象添加了 bytes() 方法，允许开发者直接访问底层字节数据，而无需使用 arrayBuffer() 并将结果包装在 Uint8Array 中。
• 文本片段的特性检测：通过 document.fragmentDirective 提供了对文本片段特性的检测支持。虽然返回的 FragmentDirective 对象本身不提供任何功能，但它对于检测浏览器是否支持片段指令很有帮助。

Canvas

• willReadFrequently： 在 getContext() 方法中添加了 willReadFrequently 上下文属性，用于指示是否计划进行大量回读操作。这有助于优化在频繁调用 getImageData() 时的性能。
• currentcolor：扩展了 2D 画布对 currentcolor 的支持，使其可以在 color-mix() 或相对颜色语法中使用。在这些上下文中，currentcolor 将默认为 canvas 元素上的计算颜色属性值。

WebGL

增加了对以下 WebGL 扩展的支持：

• EXT_texture_mirror_clamp_to_edge
• WEBGL_render_shared_exponent
• WEBGL_stencil_texturing
• EXT_render_snorm
• OES_sample_variables
• OES_shader_multisample_interpolation

Web Inspector 更新

• 在 Web Inspector 的 CSS 源编辑器中增加了模糊搜索代码补全的支持，提高了开发者的调试效率。

WKWebView

• WebKit 在 iOS 18 beta、iPadOS 18 beta、visionOS 2 beta 和 macOS Sequoia beta 中添加了对两个新 API 的支持—— Writing Tools API 和用于控制自适应图像符号插入的 API。

Apple Pay

• WebKit for Safari 18 beta 增加了对 Apple Pay 资金转账的支持。

参考：https://webkit.org/blog/15443/news-from-wwdc24-webkit-in-safari-18-beta