Safari 18.0 中的 WebKit 功能

链接
分类
文章开发科技2024-09-30 10:00:00
简介

隐藏干扰设置在此版本推出,经典风化特效。

相似条目

笔记

Beta

Safari 18.0 的 Web Inspector 新增 CSS 源代码编辑器的模糊搜索自动完成。同时支持通过 iPhone Mirroring 进行远程检查:Mac 上启用开发者工具后,可无线调试 iPhone 上的网页,设备会出现在 Develop 菜单中,方便跨设备测试与问题定位。

本文提到 macOS Sequoia 通过 Web App Manifest 的 scope 成员,可控制哪些链接直接在已添加到 Dock 的网页应用中打开,而非默认浏览器。开发者可借此限定 URL 范围,让同站点链接优先在网页应用内加载,实现更接近原生应用的体验。

Safari 18.0 实现 View Transitions API,支持通过 document.startViewTransition() 捕获页面状态并执行动画过渡。新增 view-transition-name 属性与 ::view-transition-old/new 伪元素,可自定义特定元素的进入/退出动画;:active-view-transition 伪类用于检测过渡状态,默认提供淡入淡出效果。

Safari 18.0 新增对 CSS 自定义属性的 Style Queries 支持,可在 @container style() 规则中根据父元素自定义属性值应用一组样式。例如当 --background 为 black 时,将标题与段落设为白色;支持通过容器查询名称改变引用目标,类似 Sass 混入的可复用样式分组。

Safari 18.0 是首个支持在 Relative Color Syntax 中引用 currentcolor 或系统颜色关键字的浏览器。通过 oklch(from currentcolor calc(L * 4) C H) 等写法,可基于当前文字颜色动态生成背景色,实现颜色间的关联计算。该特性减少了对设计系统变量的依赖,让颜色定义更灵活,同时兼容浅色/深色模式下的系统颜色。

本文详细介绍了作为Safari渲染引擎的WebKit在18.0版本中新增的53项Web平台特性、25项弃用以及209项问题修复。这些更新随Safari 18.0同步发布,覆盖CSS视图过渡、样式查询、WebXR沉浸式会话、Managed Media Source Workers支持等多项功能,并改进了与macOS、iOS等系统的集成。文章强调这些变化提升了网页性能、空间计算能力和开发者调试体验。

本文介绍 macOS Sequoia 的 iPhone Mirroring 功能,可在 Mac 上直接操作 iPhone。结合 Safari 远程检查,无需取出手机即可用 Web Inspector 无线调试 iOS 网站。需先通过 USB 授权,再开启“通过网络连接”,实现 Mac 屏幕上完成 iOS 网页测试与排错。

Safari 18.0 起,backdrop-filter 无需 -webkit- 前缀即可使用,同时修复了多项 bug 并提升了跨浏览器一致性。该属性可对元素后方内容应用模糊、饱和度、对比度等滤镜效果,适用于标题等需要突出前景的场景。自 2015 年起已在 Safari 中支持,现已成为可广泛使用的图形设计工具。

Safari 18.0 新增对 content-visibility 属性的支持。该属性可告知浏览器页面中可能初始位于屏幕外的部分,建议跳过其布局与渲染,从而加快首屏加载速度。它主要用于性能优化场景,开发者可据此控制内容的渲染时机。

Safari 18.0 在 visionOS 2 上新增 immersive-vr 会话支持,允许通过 WebGL 硬件加速在 Apple Vision Pro 上运行完全沉浸式 WebXR 体验。同时支持 transient-pointer 自然输入模式(视线+捏合)和手部追踪。Chess Garden 等演示展示了在空间计算环境中的交互可能性。

Safari 18.0 在 visionOS 2 中利用 Fullscreen API 实现空间照片与全景图的沉浸式浏览。开发者可在网页中嵌入图片,通过 requestFullscreen() 让图片弹出为浮动画框,再次点击可进一步扩展至环绕视野。使用 picture 元素可提供 HEIC 格式的回退方案,该 API 在其他支持浏览器中也会正常触发全屏。

本文中,Safari 18.0 为 ARIA 新增 ariaBrailleLabel 与 ariaBrailleRoleDescription 的元素反射属性,支持通过 JavaScript 直接读写盲文专用标签和角色描述。文章指出这些属性仅用于极少数场景,如教育网站需精确呈现盲文点阵,建议优先使用普通 aria-label 以获得更好体验。

Safari 18.0 扩展了声明式 Shadow DOM 支持,在 template 元素上新增 shadowRootDelegatesFocus、shadowRootClonable 和 shadowRootSerializable 属性,同时提供 getHTML 方法实现序列化。文章说明这些特性让开发者能更灵活地控制 Shadow Root 的焦点委托、可克隆与可序列化行为。

Safari 18.0 为 Managed Media Source 与 MSE 增加了 Web Worker 支持。文章指出此改进可在主线程繁忙(如直播评论场景)时仍保持视频流畅播放,并附有演示页面展示性能差异。

Safari 18.0 为 Passkeys 新增三项能力:支持 mediation=conditional 自动升级密码账号、跨关联域使用同一 Passkey,以及 WebAuthn prf 扩展用于获取对称加密密钥。文章强调这些更新进一步提升了登录便捷性与安全性。

Safari 18.0 新增 writingsuggestions 属性,允许开发者在文本输入框上关闭内联预测文本功能。默认值为 true,设置为 false 即可禁用系统根据上下文自动补全词语或句子的行为。该特性适用于需要精确控制输入体验的特定场景,开发者可针对不同表单字段灵活开关。

Safari 18.0是本文核心,集成了WebKit全部新特性,包括Distraction Control隐藏干扰元素、Video Viewer全窗播放、网页应用链接自动打开与扩展支持等用户功能。浏览器新增View Transitions API、Relative Color Syntax对currentcolor的支持,以及HEVC WebRTC等媒体能力。文章指出Safari 18.0在iOS 18、macOS Sequoia和visionOS 2上同步推出,重点优化了空间网页和无障碍体验。

该分类暂无内容

本文由 Jen Simmons 撰写,系统介绍了 Safari 18.0 的 53 项新特性。她在文中嵌入多个 CodePen 演示,展示 View Transitions、Relative Color Syntax、backdrop-filter 等功能的实际效果。

该分类暂无内容

iOS 18为Safari 18.0提供运行平台,支持Distraction Control、switch控件触觉反馈、writing suggestions属性禁用预测文本等新功能。文章提到iOS 18上的Safari可通过远程检查与Mac端Web Inspector无线调试,并实现被动混合内容自动升级为HTTPS。更新还改进了日期时间输入的VoiceOver支持和WebXR相关空间交互。

iPadOS 18与iOS 18同步为Safari 18.0提供基础,支持Distraction Control、网页应用扩展个性化以及CSS content-visibility等性能优化特性。文章指出iPadOS 18上的Safari可利用iPhone Mirroring进行远程调试,并增强了ARIA braille相关属性的JavaScript反射支持。更新重点覆盖平板场景下的视图过渡动画和媒体处理能力。

macOS Sequoia平台上的Safari 18.0新增iPhone Mirroring与Web Inspector无线调试结合的功能,允许开发者在Mac上直接测试iOS网页。文章还介绍了网页应用支持链接按scope自动打开、Safari扩展与内容拦截器个性化设置等改进。macOS Sequoia版本同步引入View Transitions、backdrop-filter无前缀支持等CSS特性。

visionOS 2为Safari 18.0带来空间网页核心能力,包括immersive-vr WebXR会话、transient-pointer手势输入、手部追踪以及空间照片/全景图的Fullscreen API支持。文章强调Safari可在Apple Vision Pro上实现视频停靠到Environment、交互区域clip-path形状适配等功能。更新还优化了WebGL扩展和Passkeys跨域使用体验。

本文报道 Apple 随 iOS 18、macOS Sequoia 与 visionOS 2 发布的 Safari 18.0,WebKit 引擎新增数十项 Web 平台特性。文章多次提及 Apple Vision Pro 的空间网页、空间照片及沉浸式视频体验均依赖这些更新实现。

本文中 Apple Vision Pro 搭载 visionOS 2,Safari 18.0 为其新增多项空间 Web 功能。支持 WebXR immersive-vr 会话与 transient-pointer 输入模式,可通过 WebGL 实现完全沉浸式体验,并提供手部追踪支持。空间照片与全景图可借助 Fullscreen API 弹出浮动框架并扩展为沉浸视图;CSS clip-path 还能定义可见交互区域形状。

可左右滑动查看

标题占位
https://example.com/path
描述占位
- · - · 添加于 - -