现在，没有什么比推出一个很棒的全新 Firefox 版本更适合告别新年的第一个月了。对于我们许多人来说，现在是冬天，这意味着更多时间待在家里，安装 Firefox 65 版本，并查看我们包含在其中的许多很棒的新浏览器和 Web 平台功能。除非你更愿意穿上厚重的外套，然后到外面去清理车道（或者对于我们的一些澳大利亚朋友来说，去海滩）。

DevTools 的美好一天

Firefox 65 包含多个值得注意的 DevTools 改进。亮点如下

CSS Flexbox 检查器

在 Mozilla，我们认为，Web 平台的新功能通常最好通过直观、可视化的工具来理解。这就是为什么我们的 DevTools 团队在过去几年里一直在收集来自该领域的反馈，并优先考虑创新的新工具，以允许 Web 开发人员和设计师检查、编辑、理解和调整 UI 功能。这种动力导致了 CSS Grid 检查器、字体编辑器 和 形状路径编辑器 的发布。

Firefox 65 将这些功能与一个新朋友——CSS Flexbox 检查器——结合在一起，它允许你轻松地可视化你的 flex 容器和项目在页面上的位置，以及它们之间有多少可用空间、每个 flex 项目的默认大小和最终大小、它们被缩小或放大的程度等等。

更改面板

当你使用这些工具调整完网站界面后，我们新的更改面板会跟踪和汇总你在当前会话中所做的所有 CSS 修改，以便你可以弄清楚做了哪些操作来解决特定问题，并可以将你的修复程序复制粘贴回代码编辑器。

高级颜色对比度

我们还添加了高级颜色对比度显示。在使用 辅助功能检查器 的辅助功能选择器时，将鼠标悬停在元素的文本内容上会显示其颜色对比度，即使其背景很复杂（例如渐变或详细图像），在这种情况下，它会显示一系列颜色对比度值，以及一个 WCAG 等级。

JavaScript 调试改进

Firefox 65 还提供了一些很酷的 JavaScript 调试改进

• 在显示堆栈跟踪（例如在控制台日志中或使用 JavaScript 调试器）时，对框架方法的调用默认情况下会被识别并折叠，这使得更容易找到你的代码。
• 与原生终端相同，你现在可以使用反向搜索来查找 JavaScript 控制台历史记录中的条目（F9（Windows/Linux）或 Ctrl + R（macOS），然后键入搜索词，然后按 Ctrl + R/Ctrl + S 在结果之间切换）。
• JavaScript 控制台的 $0 快捷方式（引用页面上当前检查的元素）现在具有自动完成功能，例如，你可以键入 $0.te 以获得 $0.textContent 的建议，以引用文本内容。

了解更多信息

• 你可以在 Firefox 65 for developers 的 DevTools 部分 中详细了解这些功能，并阅读其他增量改进的信息。
• 如果你想了解更多关于 Firefox DevTools 的创建方式，请查看 Victoria Wang 的 Designing the Flexbox Inspector 文章。

CSS 平台改进

Gecko 在 65 中添加了许多 CSS 功能。以下是亮点描述。

CSS 环境变量

现在支持 CSS 环境变量，可以通过样式表中的 env() 访问。这些变量可以在属性值或描述符的任何部分使用，并且在全局范围内作用于特定文档，而自定义属性的作用域是它们声明的元素。

body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}

steps() 动画时序函数

我们添加了 steps() CSS 动画时序函数，以及相关的 jump-* 关键字。这使你能够轻松地创建以一系列等距步骤跳跃的动画，而不是平滑的动画。

例如，我们之前可能像这样为 DOM 节点添加了一个平滑的动画

.smooth {
  animation: move-across 2s infinite alternate linear;
}

现在我们可以使动画以 5 个相等的步骤跳跃，如下所示

.stepped {
  animation: move-across 2s infinite alternate steps(5, jump-end);
}

注意：steps() 函数以前称为 frames()，但一些细节发生了变化，CSS 工作组 决定将其重命名为不那么令人困惑的名称。

break-* 属性

添加了新的 break-before、break-after 和 break-inside CSS 属性，现在已过时的 page-break-* 属性已成为它们的别名。这些属性是 CSS 分割 规范的一部分，并设置页面、列或区域中断如何在生成的框之前、之后或内部进行。

例如，要阻止在列表或段落内部发生页面中断

ol, ul, p {
  break-inside: avoid;
}

JavaScript/API

Firefox 65 为 JavaScript/API 带来了许多更新。

可读流

现在默认情况下启用了 可读流，允许开发人员在数据从网络（例如来自 fetch() 请求）到达时逐块处理数据。

你可以在 GitHub 上找到许多 ReadableStream 演示。

相对时间格式

Intl.RelativeTimeFormat 构造函数允许你输出描述本地化相对时间的字符串，以便在 Web 应用程序中更轻松地进行人类可读的时间引用。

几个例子，以满足你的胃口

let rtf1 = new Intl.RelativeTimeFormat('en', { style: 'narrow' });
console.log(rtf1.format(2, 'day')); // expected output: "in 2 days"

let rtf2 = new Intl.RelativeTimeFormat('es', { style: 'narrow' });
console.log(rtf2.format(2, 'day')); // expected output: "dentro de 2 días"

存储访问 API

存储访问 API 已默认启用，为嵌入式跨域内容提供了一种机制，使其能够请求访问它通常只有在第一方上下文中才能访问的客户端存储机制。此 API 包含几个简单的函数，hasStorageAccess() 和 requestStorageAccess()，它们分别检查和请求存储访问权限。例如

document.requestStorageAccess().then(
  () => { console.log('access granted') },
  () => { console.log('access denied') }
);

其他值得一提的

• 已添加 globalThis 关键字，用于 在任何上下文中访问全局对象。这避免了需要使用 window、self、global 或 this 的组合，具体取决于脚本执行的位置（例如网页、工作线程或 Node.js）。
• FetchEvent 对象的 replacesClientId 和 resultingClientId 属性现在已实现——允许你监控导航的来源和目的地。
• 你现在可以为应用于文档的脚本设置引用策略（例如，通过 <script> 元素上的 referrerpolicy 属性）。
• 最后，为了避免弹出式窗口垃圾邮件，Window.open() 现在可能每个用户交互事件只能调用一次。

媒体：支持 WebP 和 AV1，以及其他改进

终于，Firefox 65 现在支持 WebP 图像格式。WebP 提供无损和有损压缩模式，通常会生成比具有相同图像质量的等效 JPEG 或 PNG 文件小 25-34% 的文件。文件越小，页面加载速度越快，性能越好，这显然是一件好事。

并非所有浏览器都支持 WebP。你可以在 HTML 中使用 <picture> 元素 来提供 WebP 和传统图像格式，将最终选择权留给用户的浏览器。你也可以在服务器端检测 WebP 支持，并根据情况提供图像，因为支持的浏览器在请求图像时会发送 Accept: image/webp 标头。

图像很棒，但是视频呢？Mozilla 以及行业合作伙伴一直在开发下一代 AV1 视频编解码器，该编解码器现在在 Windows 版 Firefox 65 中得到支持。AV1 在压缩效率方面几乎是 H.264 的两倍，而且与 H.264 不同，它是完全开放且免版税的。对其他操作系统的支持将在将来的版本中启用。

其他添加

• 从 65 版本开始，Firefox 终于支持 MediaRecorder 的 pause 和 resume 事件。
• 对于创建 WebGL 内容的开发者，Firefox 65 支持 BPTC 和 RGTC 纹理压缩扩展。

Firefox 内部

我们还更新了 Firefox 本身的几个方面

• 现在支持在 iOS 和 macOS 设备之间使用 Handoff。
• 内容阻止的首选项已完全重新设计，为用户提供了更强大、更明显的控制权，使 Firefox 能够更好地保护他们免受第三方跟踪。
• about:performance 仪表盘现在报告标签和扩展使用的内存。
• WebSockets 已通过 HTTP/2 实现。
• 最后，对于 Windows 管理员，Firefox 现在除了传统的自解压 EXE 外，还以 MSI 包的形式提供。

WebExtensions 改进

我们还添加了一些有用的 WebExtensions API 功能！

• Tabs API 现在允许扩展控制当前标签关闭时哪个标签获得焦点。您可以在 Piro 的博客 上阅读更多关于此功能的动机，他在其中讨论了它在 Tree Style Tab 扩展中的应用。

互操作性

网络通常包含冲突的、非标准的或未充分指定的标记，我们有责任确保在其他浏览器中工作的页面也能在 Firefox 中工作。

为此，Firefox 65

• 支持更多非标准 -webkit-appearance CSS 属性的值。
• 在遇到 user-select CSS 属性嵌套、阴影或内容可编辑上下文中时，行为与其他浏览器相同。
• 当删除 src 属性时，会清除 <iframe> 的内容，与 Safari 和 Chrome 的行为一致。

进一步阅读

• 有关上述新增功能以及其他细微改动的更多详细信息，请参见 MDN 上的 面向开发者的 Firefox 65，以及官方的 Firefox 65 版本说明。
• 您可能还对 Firefox 65 网站兼容性 说明感兴趣。