本文翻译自 Blog | WebKit

Web App

在新版 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

Vision Pro支持Safari了。

具有相同的WebKit引擎。归功于对 Web 标准的广泛支持，所有网站都可以在Vision Pro上无缝使用，

具体可以观看 WWDC23 Keynote 和Meet Safari for spatial computing，了解 Vision Pro 上的 Safari 的工作原理。

`<model>`标签

<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库。

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

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

新的 Medai Source API和多媒体类型

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

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 扩展等工具。

Feature Flags

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

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

新的Developer设置界面

新的tab设置界面

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

重新设计的Responsive Web Design Mode(响应式网页设计模式)

专注于 Mac 上任何宽度或高度的页面设计的响应能力。除了在View周围拖动调整大小外，还可以在响应式设计模式的顶部键入特定的视口大小。

模拟器

即使您未使用响应式设计模式, 也可以在模拟器的 Safari 中点击Develop>打开页面来打开任何页面。

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

WWDC2023-WebKit和Safari新功能