Firefox 70 今天发布，包括 Lockwise 的安全密码生成和新的 Firefox 隐私保护报告等很棒的新功能；您可以在 Firefox 70 版本说明 中阅读完整详细信息。

除了令人惊叹的 用户功能和保护 外，我们在这个版本中还为开发人员添加了许多很酷的功能。这些包括 DevTools 中的 DOM 突变断点和不活动的 CSS 规则指示器、几个新的 CSS 文本属性、二值 display 语法和 JS 数字分隔符。在本文中，我们将更深入地了解其中一些亮点！

有关所有详细信息，请查看以下内容

• 面向开发人员的 Firefox 70
• Firefox 70 的网站兼容性

请注意，新的 Mozilla 开发人员 YouTube 频道 将包含涵盖下面提到的许多功能的视频。何不订阅，以便在视频发布后立即观看？

HTML 表单和安全密码

为了启用安全密码的生成（如上所述），我们更新了 HTML <input> 元素；任何类型为密码的 <input> 元素都将在上下文菜单中提供一个选项来生成安全密码，然后可以将其存储在 Lockwise 中。

例如，请看以下内容

<input type=”password”>

然后，您将在 Firefox UI 中能够像这样生成安全密码：

此外，任何设置了 autocomplete=”new-password” 的 type="password" 字段都将具有一个自动完成 UI 来在上下文中生成新密码。

注意：建议在密码更改和注册表单上使用 autocomplete=”new-password”，作为向密码管理器发出的强烈信号，表明字段需要一个新密码，而不是现有的密码。

CSS

让我们将注意力转向 Firefox 70 中的新 CSS 功能。

用于设置下划线的新选项！

Firefox 70 引入了与文本装饰/下划线相关的三个新属性

• text-decoration-thickness：设置通过文本装饰添加的线条的粗细。
• text-underline-offset：设置文本装饰与其所设置的文本之间的距离。请记住，这仅对下划线有效。
• text-decoration-skip-ink：设置在下划线和上划线与下降字母和上升字母交叉时是否绘制它们。默认值 auto 导致它们仅在不与字形交叉的地方绘制。要允许下划线与字形交叉，请将值设置为 none。

因此，例如，以下代码

h1 {
  text-decoration: underline red;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

将为您提供这种效果

二词 display 值

多年来，简陋的 display 属性一直只接受一个值，无论我们说的是简单的显示选择，例如 block、inline 或 none，还是更新的显示模式，例如 flex 或 grid。

但是，正如 Rachel 解释的那样，页面上的方框具有外部显示类型，它决定了方框在页面上相对于其他方框的布局方式，以及内部显示类型，它决定了方框子元素的行为方式。浏览器已经这样做了一段时间，但它只是最近才被指定。新的二词值集允许您显式指定外部和内部显示值。

在支持的浏览器中（截至撰写本文时仅为 Firefox），我们所熟知的单词值将映射到新的二词值，例如

• display: flex; 等同于 display: block flex;
• display: inline-flex; 等同于 display: inline flex;

Rachel 将在即将发布的博客文章中详细解释这一点。现在，请关注此空间！

JavaScript

现在让我们继续讨论 JavaScript。

数字分隔符

数字分隔符 现在在 JavaScript 中受支持 - 下划线现在可用作大型数字中的分隔符，使其更易读。例如

let myNumber = 1_000_000_000_000;
console.log(myNumber); // Logs 1000000000000

let myHex = 0xA0_B0_C0
console.log(myHex); // Logs 10531008

数字分隔符可用于任何类型的数字字面量，包括 BigInt。

Intl 改进

我们改进了 JavaScript i18n（国际化），从实现 Intl.RelativeTimeFormat.formatToParts() 方法开始。这是 Intl.RelativeTimeFormat.format() 的特殊版本，它返回一个对象数组，每个对象代表值的一部分，而不是返回本地化时间值的字符串。

const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

rtf.format(-2, "day"); // Returns "2 days ago"

rtf.formatToParts(-2, "day");
/*
Returns

[
​  { type: "integer", value: "2", unit: "day" },
​  { type: "literal", value: " days ago" }
​]
*/

这很有用，因为它允许您轻松地将数字值从字符串中分离出来，例如。

此外，Intl.NumberFormat.format() 和 Intl.NumberFormat.formatToParts() 现在接受 BigInt 值。

性能改进

由于我们的新基线解释器，JavaScript 速度总体上提高了！您可以通过阅读 基线解释器：Firefox 70 中更快的 JS 解释器 了解更多信息。

开发人员工具

Firefox 70 开发人员工具中正在发生很多很棒的新事物。让我们看看它们是什么！

规则面板中的不活动 CSS 规则指示器

规则视图 中的不活动 CSS 属性现在呈灰色，并在它们旁边显示了一个信息图标。这些属性在技术上是有效的，但不会对元素产生任何影响。当您将鼠标悬停在信息图标上时，您将看到一条关于为什么 CSS 未应用的有用消息，包括有关如何解决问题的提示以及一个“了解更多信息”链接以获取更多信息。

例如，在这种情况下，我们的 grid-auto-columns 属性处于非活动状态，因为我们试图将其应用于不是网格容器的元素

在这种情况下，我们的 flex 属性处于非活动状态，因为我们试图将其应用于不是 flex 项目的元素。（它的父元素不是 flex 容器。）

要解决第二个问题，我们可以进入检查器，找到元素的父元素（在这种情况下为 <div>），并对其应用 display: flex;

我们的修复程序显示在 更改面板 中，您可以从那里将其复制并粘贴到我们的代码库中。搞定！

在调试器中暂停 DOM 突变

在复杂的动态 Web 应用程序中，当您遇到问题时，有时很难确定哪个脚本更改了页面并导致了问题。DOM 突变断点（也称为 DOM 更改断点）允许您暂停添加、删除或更改特定元素的脚本。

尝试检查页面上的任何元素。当您在 HTML 检查器中/ctrl + 单击它时，您将看到一个新的上下文菜单项“中断于…”，其中包含以下子项

• 子树修改
• 属性修改
• 节点移除

设置 DOM 突变断点后，您将在调试器右侧窗格的“DOM 突变断点”下看到它；您也会在那里看到报告的断点。

有关更多详细信息，请参阅 中断 DOM 突变。如果您发现它们对您的工作很有用，您可能会发现 事件侦听器断点 和 XHR 断点 也很有用！

颜色选择器中的颜色对比度信息！

在 CSS 规则视图 中，您可以使用 颜色选择器 点击前景颜色，以确定它们与背景颜色的对比度是否符合辅助功能指南。

辅助功能检查器：键盘检查

辅助功能检查器 的 检查问题 下拉菜单现在包含键盘辅助功能检查

选择此选项会导致 Firefox 遍历辅助功能树中的每个节点，并突出显示所有存在键盘辅助功能问题的节点

将鼠标悬停或点击每个项目，都会显示有关问题的信息，以及“了解更多”链接，以获取有关如何解决问题的更多详细信息。

现在就尝试一下，在您附近的网页上！

Web 套接字检查器

在 Firefox DevEdition 中，网络监视器 现在具有一个新的“消息”面板，该面板在您监视 Web 套接字连接（即 101 响应）时出现。这可用于检查通过连接发送和接收的 Web 套接字帧。

阅读 Firefox 的新 WebSocket 检查器 以了解更多信息。请注意，此功能最初计划在 Firefox 70 正式版中推出，但我们还需要修复一些错误，因此预计它将在 Firefox 71 中发布！目前，您可以在 DevEdition 中使用它 - 请分享您的建设性反馈！