现在快到 3 月底了，我们发布了一个新版本的 Firefox，它将为您的浏览器带来一些有趣的新功能。本月，我们在 DevTools 中添加了一些非常棒的功能，例如 `prefers-color-scheme` 媒体查询模拟和切换 `:target` 伪类；还有一些对可编辑 DOM 元素非常有用的补充，例如 `beforeinput` 事件和 `getTargetRanges()` 方法；以及一些很棒的安全性、隐私和 macOS 屏幕阅读器支持更新。

这篇博文只提供了一些亮点，要了解所有细节，请查看以下内容

• 面向开发者的 Firefox 87，在 MDN 上
• Firefox 87 终端用户发行说明

开发者工具

这次在开发者工具中，我们首先更新了 页面检查器，允许模拟 prefers-color-scheme 媒体查询，而无需更改操作系统来触发明暗模式。

打开 DevTools，您将在右上角看到一组新的按钮

按下这些按钮后，它们分别启用明暗模式。选择其中一个按钮会取消选择另一个按钮。如果两个按钮都没有选择，则模拟器不会设置首选项，浏览器将使用操作系统设置的默认功能值进行渲染。

另一个值得一提的不错之处是，页面检查器的 CSS 面板现在可以用来切换当前选中元素的 :target 伪类，除了已经可用的其他几个伪类（:hover，:active 等）。

要了解更多信息，请查看 查看常见伪类。

更好地控制用户输入：beforeinput 和 getTargetRanges()

现在默认情况下启用了 beforeinput 事件和 getTargetRanges() 方法。它们允许 Web 应用程序在浏览器修改 DOM 树之前覆盖文本编辑行为，从而提供对文本输入的更多控制，以提高性能。

全局 `beforeinput` 事件在元素的值更改之前立即发送到 <input> 元素（或其 contenteditable 属性设置为 `true` 的任何元素）。InputEvent 接口的 `getTargetRanges()` 方法返回一个静态范围数组，如果未取消 input 事件，这些范围将受到 DOM 更改的影响。

例如，假设我们有一个简单的评论系统，用户可以使用 `contenteditable` 容器实时编辑他们的评论，但我们不希望他们编辑评论者的姓名或其他有价值的元数据？一些示例标记可能如下所示

<p contenteditable>
  <span>Mr Bungle:</span>
  This is my comment; isn't it good!
  <em>-- 09/16/21, 09.24</em>
</p>

使用 `beforeinput` 和 `getTargetRanges()`，现在这变得非常简单

const editable = document.querySelector('[contenteditable]');

editable.addEventListener('beforeinput', e => {
  const targetRanges = e.getTargetRanges();
  if(targetRanges[0].startContainer.parentElement.tagName === 'SPAN' ||
     targetRanges[0].startContainer.parentElement.tagName === 'EM') {
    e.preventDefault();
  };
})

在这里，我们对 `beforeinput` 事件做出响应，以便每次尝试更改文本时，我们都会获得受更改影响的目标范围，找出它是否在 `<span>` 或 `<em>` 元素内，如果是，则运行 `preventDefault()` 来阻止编辑发生。瞧！在可编辑文本中的不可编辑文本区域。当然，这可以用其他方法处理，但要跳出这个简单的例子，想想您现在对文本输入的控制所拥有的巨大潜力。

安全和隐私

Firefox 87 带来了一些宝贵的安全和隐私更改。

Referrer-Policy 更改

首先，默认的 Referrer-Policy 已更改为 strict-origin-when-cross-origin（从 `no-referrer-when-downgrade` 开始），降低了在跨域请求中泄漏敏感信息的风险。本质上，这意味着默认情况下，路径和查询字符串信息不再包含在 HTTP Referrers 中。

您可以在 Firefox 87 默认修剪 HTTP Referrers 以保护用户隐私 中了解更多关于此更改的信息。

SmartBlock

我们还希望将我们的新 SmartBlock 功能介绍给读者。SmartBlock 为 Firefox 阻止的跟踪脚本提供替身（例如，在隐私浏览模式下），绕过了当那些跟踪脚本被阻止且不存在时，网站经常遇到的加载失败或无法正常工作的问题。

提供的替身脚本的行为与原始脚本足够接近，它们允许依赖它们的网站正常加载和运行。最棒的是，这些替身脚本与 Firefox 捆绑在一起。根本不需要与第三方进行任何通信，因此发生任何跟踪的可能性大大降低，受影响的网站甚至可能比以前加载更快。

在 Introducing SmartBlock 中了解有关 SmartBlock 的更多信息

macOS 上的 VoiceOver 支持

Firefox 87 为我们带来了 macOS 上的 VoiceOver 屏幕阅读器支持！您不再需要切换到 Chrome 或 Safari 来进行重要的可访问性测试。

现在就试一试吧，让我们知道您的想法。