Firefox 75:四月的远大志向

即使在隔离时期,我们的工程团队也努力适应、保持专注并努力工作,为您带来又一个令人兴奋的新版Firefox。在开发人员工具方面,您会找到控制台中的即时评估、WebSockets的事件断点,以及其他许多功能。在网络平台方面,新增的功能包括图像的HTML延迟加载、CSS min()max()clamp()函数、公共静态类字段以及对Web动画API支持的补充。

请照例阅读重点内容或从以下文章中找到所有新增内容的完整列表:

开发人员工具补充

我们首先来看看75最有趣的开发人员工具。

控制台表达式即时评估

屏幕快照显示了具有控制台表达式即时评估的Web控制台

控制台中的评估表达式是探索应用程序状态、查询DOM或试用JavaScript API的快速方法。现在,Firefox的多行控制台模式已经变得更友好、更像IDE,可用于更轻松地为更长的代码制作原型。

新的即时评估会在您键入时显示当前表达式的结果预览,类似于Quokka.js 这样的编辑器。只要在Web控制台中键入的表达式没有副作用,就会在您键入时显示结果预览。

为了使预览尽可能无缝,进行了大量改进。结果中DOM节点的元素为突出显示。代码内自动填写功能根据结果类型推荐方法和属性。另外,您可以预览错误以更快地修复表达式。

更好地检查和测量

面积测量现可调整大小

显示DevTools中的面积测量工具的屏幕快照,可让您快速在页面上绘制矩形以测量特定区域的高度、宽度和对角线长度。

使用DevTools中的可选面积测量工具,您可以在页面上快速绘制矩形以测量特定区域的高度、宽度和对角线长度。您可以在“可用工具箱按钮”下的设置中启用该工具。感谢Sebastian Zartner [:sebo],这些矩形现在有调整大小的句柄,方便您精确地调整。

使用XPath查找DOM元素

XPath查询通常用于自动化工具中,以告知软件要查找并与之交互的元素。您现在可以在Inspector的HTML搜索中将XPath用于DOM元素,这也是归功于sebo。这使得在实际站点上测试表达式和微调查询变得更加容易。

WebSocket的事件断点

最近的每个DevTools版本都对WebSocket检查功能进行了改进。这次,由于才华横溢的Chujun Lu的贡献,调试方面得到了一个不错的补充。

现在,您可以在执行WebSocket事件处理程序时选择暂停或记录。使用调试器中新添加的事件监听器断点。选择“记录”选项时,将记录事件数据和执行的处理程序,但执行不会暂停。

WebSocket Inspector的新消息还包括:由于Outvi V的长期贡献,消息过滤器现支持正则表达式。

网络添加

Firefox 75的“网络”面板中进行了大量质量和性能方面的工作。此版本中在不增加CPU负担的情况下大幅提升了发出快速请求的速度。

在界面方面,贡献者Florens Verschelde推进了在列之间添加边框以提高可读性的建议和设计。注意设计变得与DevTools的整体外观更加一致了。感谢贡献者Vitalii,过滤器按钮也更加清晰易读,状态之间的对比度得到了改善。

“请求阻止”面板可帮助您测试匹配请求失败时站点的恢复能力。现在,它允许带有“*”的通配符模式。感谢Duncan Dean所做的贡献。

Developer Edition(开发人员版)中DevTools功能抢先体验

Developer Edition是Firefox的预发布渠道,可以抢先体验各种工具和平台功能。该版本的默认设置中还为开发人员开启了更多的功能。我们喜欢将新功能快速引入到Developer Edition,以便收集反馈信息,重点包括以下内容。

调试器 & 控制台异步堆栈跟踪

现代JavaScript代码在很大程度上取决于在其他异步操作(如事件、承诺以及超时)之上堆叠async/await。由于与JavaScript引擎集成得好,现已可以捕捉到异步执行过程,以提供更完整的画面。

调试器中的异步调用堆栈使您可以单步调试事件、超时以及依照时间执行的基于承诺的函数调用。控制台的异步堆栈使查找错误的根本原因变得更为容易。

Web平台更新

我们来探讨一下Firefox 75在网络平台更新方面提供的功能。

图像的HTML延迟加载

延迟加载是通过将资源标识为非阻塞(非关键)资源、以仅在需要时加载而不是立即加载来提高性能的常见策略。图像是要在网络应用中延迟加载的最常见资产之一。

为了简化图像延迟加载,我们在HTML <img>元素上引入了对加载属性的支持。将值设置为lazy会指示浏览器推迟加载屏幕外的图像,直到用户滚动到附近为止。唯一可能的其他值为eager,如您所想,这是默认值。

<img src="image.jpg" loading="lazy" alt="..." />

您可以通过检查其布尔complete属性的值来确定给定图像是否已完成加载。

注意:当所有立即加载的内容都已加载时,会触发load事件。到那时,有一定可能(或者很可能)在即将加载的可视视口中有一些延迟加载的图像。

注意:Chrome还为<iframe>内容延迟加载提供了实验性支持,但还没有列入标准;我们正在等它标准化。

CSS min()max()clamp()

本月新增了一些令人兴奋的CSS新功能!我们对三个非常实用的CSS函数新增了支持,这几个CSS函数彼此密切相关,但目的不同:

  • min() — 接受一个或多个可能值或计算结果以供选择,并确保所有情况下使用的值都是可能值中最小的。这为响应式设计提供了一系列值以及最大允许值。
  • max() — 接受一个或多个可能值或计算结果以供选择,并确保所有情况下使用的值都是可能值中最大的。这为响应式设计提供了一系列值以及最小允许值。
  • clamp() — 接受三个值或计算结果:最小值、首选值和最大值。如果计算值低于最小值或高于最大值,则将使用最小值或最大值。如果计算值介于两者之间,则将使用首选值。这样,属性值就可以适应分配给它的元素或页面的变更,同时保持在最小值和最大值之间。

这些函数对于响应式设计非常实用,可用于进行您之前使用min-widthwidthmax-width、多个media queries、甚至JavaScript的组合进行的操作,并且可以节省大量时间、减少大量代码。

CSS min()max()clamp()的实际运行情况

我们来学习以下示例:

html {
  font-family: sans-serif;
}
 
body {
  margin:0 auto;
  width: min(1000px, calc(70% + 100px));
}
 
h1 {
  letter-spacing:2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem)
}
 
p {
  line-height:1.5;
  font-size: max(1.2rem, 1.2vw);
}

在这里,正文宽度设置为min(1000px, calc(70% + 100px)),这意味着在更宽的视口中,正文内容将为1000px宽。在较窄的视口中,正文内容将为视口宽度的70%加<100px(直到此计算结果变为1000px或更高)!

顶层标题的字体大小设置为clamp(1.8rem, 2.5vw, 2.8rem)。因此,最小值为1.8rem,最大值为2.8rem。在这两个值之间,将使用2.5vw的理想值,因此如计算出2.5vw大于1.8rem,但小于2.8rem,您将看到标题文本随视口宽度增大和缩小。

段落字体大小设置为max(1.2rem, 1.2vw),这意味着它的最小值为1.2rem。但是,当code>1.2vw的计算值大于1.2rem的计算值时,它将开始增长。

您可以在我们的

<

h4>CSS min()max()clamp()简单示例中查看实际运行情况。

JavaScript语言功能

75中新添了一些有趣的JavaScript。

首先,我们现在有了公共静态类字段。如果您希望一个字段在每个类中仅出现在一次,而不是在您创建的每个类实例中都出现时,就可以使用这些选项。对于缓存、固定配置或不需要在实例之间复制的任何其他数据而言尤其实用。基本语法如下所示:

class ClassWithStaticField {
  static staticField = 'static field'
}
 
console.log(ClassWithStaticField.staticField)
// expected output: "static field"​

另外,我们通过添加Intl.Locale——一个代表Unicode语言环境标识符的标准内置构造函数——进一步增强了国际化(i18n)功能。例如,您可以创建一个韩语语言环境对象,如下所示:

const korean = new Intl.Locale('ko', {
  script:'Kore', region:'KR', hourCycle: 'h24', calendar: 'gregory'
});

然后返回对象的属性,如您所预期:

console.log(korean.hourCycle, japanese.hourCycle);
// expected output: "h24" "h12"

表单添加

在Firefox 75中,我们添加了一些实用的特定于表单的API:

  • HTMLFormElement接口具有一个新方法,即requestSubmit()。与旧的(仍然可用)submit()方法不同,requestSubmit()的行为就像单击了指定的提交按钮一样,而不仅仅是将表单数据发送给收件人。因此,在提交数据之前,会发送submit事件,并检查表单的有效性。
  • submit事件现在由类型为SubmitEvent的对象、而不是简单的Event表示。SubmitEvent包括一个新的submitter属性,它返回被调用以触发表单提交的Element。利用此事件,您可以将可识别出使用了哪个提交按钮或链接来提交表单的处理程序用于提交事件。

Web Animations API增强功能

在75中,我们添加了许多新的Web Animations API功能,使此规范更加有趣和实用。

从关键帧推算

从现在开始,您可以仅为动画设置开始或结束状态(即单个关键帧)。然后,如果浏览器具备相应能力,就可以推断动画的另一端。以这个简单的动画为例,关键帧对象看起来像这样:

let rotate360 = [
  { transform: 'rotate(360deg)' }
];

我们仅指定了动画的结束状态,就可以默示开始状态了。

自动删除填充动画

可以在同一元素上触发大量动画。如果元素为不确定的(即,向前填充),则可能会导致动画列表过大,从而造成内存泄漏。因此,我们实施了Web动画规范中自动取消覆盖前向填充动画的部分,除非开发人员明确指定保留动画。

您可以在我们简单的替换不确定动画演示中看到相关的实际运行情况。相关的JavaScript功能如下:

  • animation.commitStyles() — 运行此方法以将动画的最终样式状态提交给要动画化的元素,即使该动画已被删除也是如此。它将以样式属性内的属性形式将最终样式状态写入正在动画化的元素。
  • animation.onremove — 允许您运行在动画被删除时(即处于活动替换状态)触发的事件处理程序。
  • animation.persist() —当您明确希望保留动画时,调用persist()
  • animation.replaceState — 返回动画的替换状态。如果已删除动画,则将为active;如果已调用persist(),则将为persisted

时间轴

Animation.timeline getter、Document.timelineDocumentTimelineAnimationTimeline功能现在为默认启用,这意味着您现在可以访问动画的时间轴信息。此功能对于返回时间值以进行同步非常实用。

默认情况下,动画的时间轴和文档的时间轴相同。

获取活动动画

最后,Document.getAnimations()Element.getAnimations()方法现在为默认启用。您可以分别将它们用于返回整个文档或特定元素上所有活动动画的数组。

ARIA注释

在Firefox 75(Linux和Windows版本)上,我们新添了对一组新的辅助功能的支持,这些新功能统称为ARIA批注,将在即将发布的WAI-ARIA 1.3版规范中发布。这些功能使在Web文档中创建可访问注释成为可能。典型的用例包括编辑建议(即,在可编辑文档中进行添加和/或删除)和评论(例如,与正在审核的文档的一部分相关的编辑评论)。

目前还没有针对ARIA注释的屏幕阅读器支持,但是我们很快就能使用这些新角色和其他属性。有关示例和更多支持详细信息,请阅读MDN上的ARIA注释

浏览器扩展

两个新的browserSettings已添加到WebExtensions API: zoomFullPage来放大页面上的文本,还添加了zoomSiteSpecific,可确定缩放是仅应用于活动选项卡还是同一网站的所有选项卡。

总结

就是这样了。我们为Firefox 75提供了有趣的新功能;赶快了解一下,从中寻找乐趣吧!和之前一样,欢迎您随时提供反馈并在评论中提出问题。

This post is also available in: 繁體中文 (繁体中文) English (英语) Español (西班牙语)

About Chris Mills

Chris Mills is a senior tech writer at Mozilla, where he writes docs and demos about open web apps, HTML/CSS/JavaScript, A11y, WebAssembly, and more. He loves tinkering around with web technologies, and gives occasional tech talks at conferences and universities. He used to work for Opera and W3C, and enjoys playing heavy metal drums and drinking good beer. He lives near Manchester, UK, with his good lady and three beautiful children.

More articles by Chris Mills…