本文翻译自 Blog | WebKit

Web App

WWDC2023-WebKit和Safari新功能
在新版 MacOS Sonoma中点击File > Add to Dock，调整称号和图标，Web App图标就会出现在 Dock 中。

Web App功用

  • 像一个Mac App一样运用你的网站。

  • 与Stage Manager(舞台办理器), Mission Control, and keyboard shortcut（如 Command + Tab）合作运用。

  • 从程序坞、快速发动板和 Spotlight 查找中翻开。

  • 用户能够给Web App颁发摄像头、麦克风和方位的权限。

  • 支撑 Web 推送、badging和 WebKit 完成的一切常用 Web 规范。

  • 自定义显现方式，包含显现形式、称号、主题色彩和开始 URL。具体能够看 What’s new in Web Apps 。

  • 当添加到 Dock 时，Safari 浏览器会复制Cookie到Web App。如果有人在 Safari 中登录了他们的帐户，将在 Web App中保持登录状态。

仅当身份验证状态存储在 Cookie 时，此操作才有用。

不会共享其他网站的数据。

Web for Vision Pro

WWDC2023-WebKit和Safari新功能

Vision Pro支撑Safari了。

具有相同的WebKit引擎。归功于对 Web 规范的广泛支撑，一切网站都能够在Vision Pro上无缝运用，

具体能够观看 WWDC23 Keynote 和Meet Safari for spatial computing，了解 Vision Pro 上的 Safari 的作业原理。

<model>标签

WWDC2023-WebKit和Safari新功能
<model> 标签用于在网页中展现 3D 内容。就像 <img>和<video> 一样

<model src="asset/example-3d-model" width="400" height="300"></model>

支撑多种文件格局，一起为不支撑的浏览器供给fallback功用。

<model width="400" height="300" interactive>
    <source src="assets/example.usdz" type="model/vnd.usdz+zip">
    <source src="assets/example.glb" type="model/gltf-binary">
    <picture>
        <source src="fallback-version.mp4" type="video/mp4">
        <source src="fallback-version.webp" type="image/webp">
        <img src="fallback-version.gif"/>
    </picture>
</model>

interactive特点将启用用户交互，并答应用户旋转模型。

JavaScript API供给更多功用，包含对相机的拜访。

网页中嵌入丰厚的 3D 内容会翻开一个充满可能性的国际。例如，在线鞋店供给一切鞋子的型号。或者，一个室内规划网站供给家具模型，让人们虚拟地“放置”在家中。

Vision Pro 上的 Safari 将把这些体会提升到一个新的水平，供给完好的立体视图和环境照明。

如何运用: 翻开Safari的Feature flag并导航到此demo page。

WebXR

在Web上创立彻底感同身受的体会。WebXR基于WebGL，支撑许多流行的WebGL库。

WWDC2023-WebKit和Safari新功能

Vision Pro 上的 Safari 目前供给 WebXR 的testable支撑。WebKit 支撑 WebXR 的immersive-vr会话类型。

拜访 immersiveweb.dev 网站，了解有关更多信息，并找到最适合您项目的框架。

新的 Medai Source API和多媒体类型

WWDC2023-WebKit和Safari新功能

JPEG XL

Safari 17 将支撑 JPEG XL。

与JPEG相似，新的图画格局供给了在质量和文件巨细之间找到适当的平衡选项。

JPEG XL运用“Modular Entropy Coding”的新紧缩算法，答应更灵活的调整紧缩比。

支撑渐进式加载，十分适合经过慢速衔接供给的图画，由于用户在下载整个文件之前就能够看到图画。

将现有的 JPEG 文件从头紧缩到 JPEG XL 中，而不会丢掉任何数据，一起将其巨细均匀减小 20%。或者从原始图画文件紧缩以创立一个比 JPEG 小 60% 的文件！

运用 <picture> 元素向浏览器供给 JPEG XL 文件，一起为不支撑的浏览器供给fallback。

<picture>
  <source srcset="images/large/sophie.jxl" type="image/jxl">
  <img src="images/large/sophie.jpeg">
</picture>

HEIC

Safari 17 支撑 HEIC 图画。HEIC 是 iPhone 和 iPad 上存储相机拍摄的相片的文件格局。无需转换为另一种格局, 直接在浏览器中导入和编辑此类相片。HEIC 也是在Apo运用 WKWebView 显现图画的理想挑选。

image-set(图画集)

Safari 17 改进了 image-set（），提高了与其他浏览器的互操作性，增加了对可选resolution和type参数的支撑。该type参数为浏览器供给多种图画格局，包含 JPEG XL 和 HEIC。

.component {
  background-image: image-set(
    url("images/trees.jxl") type("image/jxl"),
    url("images/trees.avif") type("image/avif"),
    url("images/trees.jpeg") type("image/jpeg")
  );
}

视频

WebKit for Safari 17 带来了新的Media Source(媒体源) API。为流媒体视频供给了高能效的解决方案。

自适应比特率流式传输答应在媒体数据格局之间切换，依据用户的网络衔接速度和设备功用供给最佳视频质量。媒体源扩展 （MSE） 是用于自适应流式处理的工具包，为网页供给了更多的控制权和职责来办理缓冲和解析。

要了解有关 JPEG XL、HEIC 和媒体源 API 的更多信息，请拜访探索 Web 媒体格局。

Media player stats overlay

WWDC2023-WebKit和Safari新功能

WebKit 支撑Media player stats overlay，查看视频的详细信息 比方源类型、巨细、性能指标、分辨率、编解码器和色彩装备等。

.HTML弹出框

Safari 17 支撑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>

hr标签

Safari 17 增加了<select>内部<hr>的支撑，这是 WebKit 团队添加到 HTML 规范中的功用。愈加简单创立分隔符，无需运用 JavaScript了。

<select>
  <option value="pizza">Pizza</option>
  <option value="hamburger">Hamburger</option>
  <hr>
  <option value="sushi">Ice cream</option>
  <option value="pasta">Cake</option>
</select>

.CSS

Safari 17 支撑 CSS 计数器款式，@counter-style用于在 CSS 中更改计数器言语或字符集。

@counter-style upper-serbian {
  system: alphabetic;
  symbols: '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '';
}
ol { 
  list-style: upper-serbian; 
}

font size adjust(字体巨细调整)

font-size-adjust让不同字体的视觉巨细保持一致。

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;
}

Web Developer Tools

Safari 17 中，从头规划了Develop菜单, 更轻松地找到创立网站、Web App、其他 App、Web 扩展等工具。

WWDC2023-WebKit和Safari新功能

Feature Flags

WWDC2023-WebKit和Safari新功能

新的“Feature Flags”替代了“developer”菜单的“试验性功用”部分。现在按主题分为：动画，CSS，HTML，JavaScript，媒体等。

每个功用都明确有四种状态：稳定、可测验、预览和开发人员。

新的Developer设置界面

WWDC2023-WebKit和Safari新功能

新的tab设置界面

WWDC2023-WebKit和Safari新功能
“Developer”菜单的一些全局设置（如禁用 CSS 或更改 WebRTC 行为）已移至 Web 查看器，现在的作用域仅为tab，不影响其他tag和window。

从头规划的Responsive Web Design Mode(呼应式网页规划形式)

WWDC2023-WebKit和Safari新功能
专注于 Mac 上任何宽度或高度的页面规划的呼应才能。除了在View周围拖动调整巨细外，还能够在呼应式规划形式的顶部键入特定的视口巨细。

模拟器

WWDC2023-WebKit和Safari新功能
即便您未运用呼应式规划形式, 也能够在模拟器的 Safari 中点击Develop>翻开页面来翻开任何页面。

运用模拟器测验 iOS、iPadOS 和即将推出的 visionOS 上的网页体会。