本文翻译自 Blog | WebKit

Web App

图片[1]-WWDC2023-WebKit和Safari新功能-五八三
Web App即将登陆 MacOS Sonoma，只需点击“File > Add to Dock”，根据需要调整名称和图标，Web App图标就会出现在 Dock 中。

Web App功能

Web App让您专注于您一直使用的网站，像一个普通Mac App一样。
Web App可与Stage Manager, Mission Control, and keyboard shortcut（如 Command + Tab）配合使用。
Web App可以从程序坞、快速启动板和 Spotlight 搜索中打开。
用户可以给Web App授予摄像头、麦克风和位置的权限。
Web App支持 Web 推送、badging和 WebKit 实现的所有常用 Web 标准，就像 iOS 和 iPadOS 上的 Web App一样。
支持自定义 Web App的显示方式，包括显示模式、名称、主题颜色和起始 URL。具体可以看 What’s new in Web Apps 。
当 Web App添加到 Dock 时，Safari 浏览器会拷贝Cookie到Web App。这样，如果有人在 Safari 中登录了他们的帐户，他们将在 Web App保持登录状态。

仅当身份验证状态存储在 Cookie 时，此操作才有效。Safari 不会复制任何其他类型的本地存储。用户将 Web App添加到 Dock 后，不会共享其他网站数据。

Web for Vision Pro

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

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

我们正在合作开发两种技术，以使空间计算中的Web更加强大: <model> element和WebXR。

`<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 将把这些体验提升到一个新的水平，提供完整的立体视图和环境照明。
您可以在 iOS、iPadOS 和 macOS 上的 Safari 中试用，方法是打开其feature flag并导航到此demo page。

WebXR

WebXR提供在Web上创建完全身临其境的体验的技术。WebXR基于WebGL，支持许多流行的WebGL库。

Vision Pro 上的 Safari 目前提供对 WebXR 的可测试支持。WebKit 支持 WebXR 中的immersive-vr会话类型。

访问 immersiveweb.dev 开发人员页面，了解有关更多信息，并找到最适合您的项目的框架。

新的 Medai Source API

图像

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 带来了新的媒体源 API。它提供了一种高能效的解决方案，可满足流媒体视频高级需求。

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

要了解有关 JPEG XL、HEIC 和媒体源 API 的更多信息，请访问 WWDC23 上的探索 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标签

macOS 上的 Safari 17 增加了<hr>在<select>内部的支持，这是 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 中更改计数器语言或字符集的机制 — 适用于列表样式类型的有序/无序列表和 CSS 计数器。

@counter-style upper-serbian {
  system: alphabetic;
  symbols: 'А' 'Б' 'В' 'Г' 'Д' 'Ђ' 'Е' 'Ж' 'З' 'И' 'Ј' 'К' 'Л' 'Љ' 'М' 'Н' 'Њ' 'О' 'П' 'Р' 'С' 'Т' 'Ћ' 'У' 'Ф' 'Х' 'Ц' 'Ч' 'Џ' 'Ш';
}
ol { 
  list-style: upper-serbian; 
}

font size adjust(字体大小调整)

在 Safari 16.4 中，我们提供了对字体大小调整的初始支持，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;
}