四月份已经到来，我们为您带来了最及时的版本 - Firefox 88。在这个版本中，您会发现许多不错的 CSS 添加，包括 :user-valid 和 :user-invalid 支持和 image-set() 支持，对正则表达式匹配索引的支持，为了增强安全性而删除对 FTP 协议的支持等等！

这篇文章只是提供了一些亮点，所有细节请查看以下内容：

• MDN 上针对开发者的 Firefox 88
• Firefox 88 终端用户版本说明

:user-valid 和 :user-invalid

有大量与 HTML 表单相关的伪类，允许我们为各种数据有效性状态指定样式，正如您在我们 UI 伪类 教程中看到的那样。Firefox 88 引入了两个新的伪类 - :user-valid 和 :user-invalid。

您可能在想：“我们已经有了 :valid 和 :invalid 用于为包含有效或无效数据的表单指定样式 - 这里有什么区别？”

:user-valid 和 :user-invalid 类似，但设计时更注重用户体验。它们实际上做着同样的事情 - 匹配包含有效或无效数据的表单输入 - 但 :user-valid 和 :user-invalid 只有在用户停止关注该元素后才会开始匹配（例如，通过 tab 键切换到下一个输入）。这是一个细微但有用的变化，我们现在将演示它。

以我们的 valid-invalid.html 示例为例。它使用以下 CSS 来提供明确的指示，说明哪些字段包含有效和无效数据

input:invalid {
  border: 2px solid red;
}

input:invalid + span::before {
  content: '✖';
  color: red;
}

input:valid + span::before {
  content: '✓';
  color: green;
}

当您尝试在“电子邮件地址”字段中输入数据时，就会出现问题 - 一旦您开始在该字段中输入电子邮件地址，无效样式就会出现，并且一直持续到输入的文本构成有效的电子邮件地址为止。这种体验可能有点让人不适，让用户认为他们做错了什么，而实际上没有。

现在考虑我们的 user-valid-invalid.html 示例。它包含几乎相同的 CSS，只是它使用更新的 :user-valid 和 :user-invalid 伪类

input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: '✖';
  color: red;
}

input:user-valid + span::before {
  content: '✓';
  color: green;
}

在这个示例中，有效/无效样式只在用户输入完值并移除了对输入框的焦点后才会出现，给了他们一个机会输入完整的价值，然后再收到反馈。好多了！

注意：在 Firefox 88 之前，可以使用专有的 :-moz-ui-invalid 和 :-moz-ui-valid 伪类来实现相同的效果。

image-set() 支持

image-set() 函数在 CSS 中提供了一种机制，允许浏览器从选项列表中为设备的分辨率选择最合适的图像，这类似于 HTML srcset 属性。例如，以下代码可用于提供多个 background-image 供选择

div {
  background-image: image-set(
    url("small-balloons.jpg") 1x,
    url("large-balloons.jpg") 2x);
}

您还可以使用 image-set() 作为 content 和 cursor 属性的值。因此，例如，您可以为生成的 content 提供多种分辨率

h2::before {
  content: image-set(
    url("small-icon.jpg") 1x,
    url("large-icon.jpg") 2x);
}

或自定义光标

div {
  cursor: image-set(
    url("custom-cursor-small.png") 1x,
    url("custom-cursor-large.png") 2x),
    auto;
}

outline 现在遵循 border-radius 形状

outline CSS 属性已更新，现在它遵循由 border-radius 创建的 outline 形状。看到 Firefox 修复了这个长期存在的问题，真是太好了。作为这项工作的一部分，非标准的 -moz-outline-radius 属性已被删除。

RegExp 匹配索引

Firefox 88 支持正则表达式的 **匹配索引** 功能，该功能使 indices 属性可用，该属性包含一个数组，用于存储每个匹配的捕获组的起始和结束位置。此功能通过 d 标志启用。

还有一个相应的 hasIndices 布尔属性，允许您检查正则表达式是否启用了此模式。

因此，例如

const regex1 = new RegExp('foo', 'd');
regex1.hasIndices // true
const test = regex1.exec('foo bar');
test // [ "foo" ]
test.indices // [ [ 0, 3 ] ]

有关更多有用信息，请参阅我们的 RegExp.prototype.exec() 页面，以及 V8 开发者博客上的 RegExp 匹配索引。

FTP 支持已禁用

从 Firefox 88 开始，FTP 支持已被禁用，并计划（目前）在 Firefox 90 版本中完全移除。解决此安全风险可以降低攻击的可能性，同时还删除对非加密协议的支持。

为了补充这一变化，扩展设置 browserSettings.ftpProtocolEnabled 已变为只读，现在 Web 扩展程序可以将其自身注册为 FTP 的 协议处理程序。