为了结束一月,我们很自豪地向您发布 Firefox 85。在这个版本中,我们带来了对 CSS 中的 `:focus-visible` 伪类和相关开发者工具、`` 的支持,以及从 Firefox 中完全删除 Flash 支持。我们还想邀请您预览当前 Firefox Nightly 中两个激动人心的新 JavaScript 功能 - 顶层 `await` 和通过 `.at()` 方法进行相对索引。玩得开心!
这篇文章仅仅提供了一些亮点;有关所有详细信息,请查看以下内容
:focus-visible
之前通过专有的 `:-moz-focusring` 伪类在 Firefox 中支持的 `:focus-visible` 伪类,允许开发者在浏览器使用启发式方法确定应该在元素上显示焦点的情况下,对元素应用样式。
最明显的例子是,当您使用键盘聚焦一个元素(例如按钮或链接)时。设计人员经常希望去除难看的焦点环,通常使用类似 `:focus { outline: none }` 的方法来实现,但这会导致键盘用户出现问题,因为焦点环对于他们来说是一个必不可少的辅助功能。
`:focus-visible` 允许您只在使用键盘聚焦元素时,而不是点击元素时,应用焦点环替代样式。
例如,这个 HTML
<p><button>Test button</button></p>
<p><input type="text" value="Test input"></p>
<p><a href="#">Test link</a></p>
可以这样进行样式设置
/* remove the default focus outline only on browsers that support :focus-visible */
a:not(:focus-visible), button:not(:focus-visible), button:not(:focus-visible) {
outline: none;
}
/* Add a strong indication on browsers that support :focus-visible */
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 4px dashed orange;
}
作为另一个不错的补充,Firefox 开发者工具的页面检查器现在允许您在它的规则视图中切换 `:focus-visible` 样式。有关更多详细信息,请查看 查看通用伪类。
预加载
在之前几个版本中经历了多次错误启动之后,我们现在很自豪地宣布支持 ``,它允许开发者指示浏览器提前抢占式地获取和缓存高重要性资源。这确保它们更早地可用,并且不太可能阻塞页面渲染,从而提高性能。
这是通过在您的链接元素上包含 `rel="preload"` 以及一个包含正在预加载的资源类型的 `as` 属性来实现的,例如
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
您还可以包含一个包含资源 MIME 类型的 `type` 属性,以便浏览器能够快速查看有哪些资源可用,并忽略它不支持的资源。
<link rel="preload" href="video.mp4" as="video" type="video/mp4">
<link rel="preload" href="image.webp" as="image" type="image/webp">
有关更多信息,请查看 使用 rel=”preload” 预加载内容。
Flash 已死,万岁 Flash
Firefox 85 从浏览器中完全删除了 Flash 支持,并且无法将其重新打开。这是跨浏览器的协调行动,正如我们的 插件路线图 所示,这一行动已经计划了很久。
对于像我这样的人来说 - 对网络早期阶段的许多怀旧回忆,以及 Flash 带来的所有创造力、创新,以及纯粹的乐趣 - 这是一个苦乐参半的日子。说再见令人难过,但同时,这样做的好处是显而易见的。安息吧,亲爱的 Flash。
Nightly 预览
Gecko 中有一些即将推出的新功能,目前仅在我们的 Nightly 预览 中可用。我们认为您希望有机会尽早测试它们并提供反馈,因此请在下面的评论中告诉我们您的想法!
顶层 await
`async`/`await` 已经存在一段时间了,并且在 JavaScript 开发人员中很受欢迎,因为它允许我们更清晰、更有逻辑地编写基于 Promise 的异步代码。以下简单示例说明了在 异步函数 中使用 `await` 关键字 将返回值转换为已解析的 Promise 的概念。
async function hello() {
return greeting = await Promise.resolve("Hello");
};
hello().then(alert);
这里的问题是,`await` 最初只允许在异步函数中使用,而不允许在全局范围内使用。实验性的 顶层 await 提案 解决了这个问题,它允许使用全局 `await`。这在需要等待 JS 应用程序中模块加载的情况下有很多优势。查看提案以获取一些有用的示例。
你在指向什么()?
目前是 ECMAScript 阶段 3 草案提案,相对索引方法 `.at()` 已添加到 `Array`、`String` 和 `TypedArray` 实例中,以提供一种简单的方法以相对方式返回特定索引值。您可以使用正索引从位置 0 向前计数,或使用负值从最高索引位置向后计数。
例如,试试这些
let myString = 'Hello, how are you?';
myString.at(4);
myString.at(-3);
let myArray = [0, 10, 35, 70, 100, 300];
myArray.at(1);
myArray.at(-2);
WebExtensions
最后但并非最不重要的一点是,让我们看看 Fx 85 中我们的 WebExtensions 实现发生了哪些变化。
- 现在可以 禁用扩展的首页和新标签页覆盖,而无需禁用扩展本身。特别感谢 Erica Wright 完成了这项工作。
- 如果扩展 刚刚关闭了多个标签页,“撤销关闭标签页”功能现在会正常工作。
- `browsingData` API 现在在 Android 版 Firefox 上可用。
- 已修复扩展 在更新期间将权限更改为可选 时触发的某些错误。
- 当撤销然后授予开发者工具权限时,扩展页面现在会 自动在工具箱中启用。
最后,我们要提醒您有关 Project Fission 中即将进行的站点隔离更改。正如我们 之前提到过的那样,`drawWindow()` 方法作为这项工作的一部分即将被弃用。如果您使用此 API,建议您改用 `captureTab()` 方法。
关于 Chris Mills
Chris Mills 是 Mozilla 的高级技术作家,他撰写有关开放式 Web 应用程序、HTML/CSS/JavaScript、A11y、WebAssembly 等内容的文档和演示。他喜欢用 Web 技术进行修修补补,并在会议和大学偶尔发表技术演讲。他以前在 Opera 和 W3C 工作,喜欢演奏重金属鼓,喝好啤酒。他和他的妻子以及三个美丽的孩子住在英国曼彻斯特附近。
3 条评论