四月即将来临，我们为你准备了一个最及时的版本--Firefox 88。在这个版本中，你会发现一堆漂亮的CSS添加，包括:user-valid 和:user-invalid 支持和image-set() 支持，支持正则表达式匹配索引，删除FTP协议支持以增强安全性，还有更多
这篇博文只是提供了一组亮点；要了解所有的细节，请查看以下内容。
:user-valid和:user-invalid
有大量的HTML表单相关的伪类，允许我们为各种数据有效性状态指定样式，你会在我们的UI伪类教程中看到。Firefox 88又引入了两个--:user-valid 和:user-invalid 。
你可能会想："我们已经有了:valid 和:invalid ，用于为包含有效或无效数据的表单设计样式，这里有什么区别呢？"
:user-valid 和 是相似的，但在设计上考虑到了更好的用户体验。它们有效地做了同样的事情--匹配包含有效或无效数据的表单输入--但 和 只在用户停止关注该元素后才开始匹配（例如，通过标签到下一个输入）。这是一个微妙但有用的变化，我们现在来演示一下。:user-invalid :user-valid :user-invalid
以我们的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中提供了一种机制，允许浏览器从一个选项列表中挑选最适合设备分辨率的图像，其方式类似于HTMLsrcset 属性。例如，可以用下面的方法提供多个background-image，供用户选择。
div {
background-image: image-set(
url("small-balloons.jpg") 1x,
url("large-balloons.jpg") 2x);
}
你也可以使用image-set() ，作为 content和 cursor属性的值。因此，例如，你可以为生成的内容提供多种分辨率。
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的CSS属性已被更新，所以它现在遵循由 border-radius.很高兴看到Firefox中包含了对这个长期存在的问题的修复。作为这项工作的一部分，非标准的 -moz-outline-radius属性已被删除。
正则匹配索引
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已被改为只读，网络扩展现在可以将自己注册为FTP的 协议处理程序。
The postNever too late for Firefox 88appeared first onMozilla Hacks - the Web developer blog.
