在经历了一年活动减少的低迷期后，我们终于看到 Firefox 89焕然一新，它带来了一个简洁、更具极简主义风格的界面。

除了全新的外观，我们还获得了许多优秀的样式功能，包括用于媒体查询的force-colors 功能以及对字体显示的更好控制。备受期待的顶级 await JavaScript 模块关键字现已启用，以及PerformanceEventTiming 接口，这是对性能 API 套件的又一补充：89 确实一直在努力！

这篇博文仅提供了一些亮点；有关所有详细信息，请查看以下内容

• MDN 上的 Firefox 89 开发者版
• Firefox 89 最终用户版发布说明

forced-colors 媒体功能

forced-colors CSS 媒体功能检测用户代理是否限制网页上使用的调色板。例如，Windows 具有高对比度模式。如果启用，使用forced-colors: active 在 CSS 媒体查询中将应用嵌套的样式。

在此示例中，我们有一个.button 类，它声明了一个box-shadow 属性，为使用该类的任何 HTML 元素提供一个不错的阴影效果。

如果forced-colors 模式处于活动状态，则此阴影将不会呈现，因此，我们声明一个边框以弥补阴影丢失。

.button {
  border: 0;
  padding: 10px;
  box-shadow: -2px -2px 5px gray, 2px 2px 5px gray;
}

@media (forced-colors: active) {
  .button {
    /* Use a border instead, since box-shadow is forced to 'none' in forced-colors mode */
    border: 2px ButtonText solid;
  }
}

更好地控制显示的字体

Firefox 89 带来了line-gap-override、ascent-override 和descent-override CSS 属性。这些属性允许开发人员更好地控制字体显示方式。以下片段展示了在使用本地备用字体时这些属性的实用性。

@font-face {
  font-family: web-font;
  src: url("<https://example.com/font.woff>");
}

@font-face {
  font-family: local-font;
  src: local(Local Font);
  ascent-override: 90%;
  descent-override: 110%;
  line-gap-override: 120%;
}

这些新属性有助于减少字体加载时的布局偏移，因为开发人员可以更好地将本地字体的细微差别与网络字体相匹配。它们与size-adjust 属性一起工作，该属性目前在Firefox 89 中的偏好设置后面。

顶级 await

如果你在过去几年中一直在编写 JavaScript，你很可能已经熟悉了async 函数。现在await 关键字，通常限制在async 函数中使用，已经获得了独立性，可以单独使用。只要它停留在模块中即可。

简而言之，这意味着使用顶级 await 的子模块的 JavaScript 模块将在它们自身运行之前等待该子模块执行。同时不会阻止其他子模块加载。

这是一个使用>a href=”https://mdn.org.cn/en-US/docs/Web/API/Fetch_API”>Fetch API 并在export 语句中指定await 的非常小的模块示例。任何包含此模块的模块都将在运行任何代码之前等待 fetch 解析。

// fetch request
const colors = fetch('../data/colors.json')
  .then(response => response.json());

export default await colors;

PerformanceEventTiming

新外观不能不提性能。有大量的性能 API，这些 API 为开发人员提供了对其自身定制性能测试的粒度控制。现在 Firefox 89 中提供了PerformanceEventTiming 接口，它提供了各种事件的计时信息。它通过巧妙地提供有关用户触发事件何时开始以及何时结束的信息，为开发人员添加了另一个非常有用的功能。这是新版本中一个非常受欢迎的补充。