Firefox 91 新功能

八月已经到来，这意味着 Firefox 91 也发布了！此版本添加了苏格兰语言环境，如果选中“增加对比度”设置，则会在 macOS 上自动启用高对比度模式。

私人浏览窗口具有 HTTPS 优先策略，并将自动尝试建立到网站的安全连接。如果网站不支持 HTTPS，连接将回退到 HTTP。

对于开发者，Firefox 91 支持 Visual Viewport API，并对 Intl.DateTimeFormat 对象添加了一些更多内容。

这篇博文仅提供一些亮点；有关所有详细信息，请查看以下内容

• MDN 上面向开发者的 Firefox 91
• Firefox 91 针对最终用户的版本说明

Visual Viewport API

早在 Firefox 63 中实现的 Visual Viewport API 在桌面版本的首选项 dom.visualviewport.enabled 后面。现在它不再受该首选项限制，并且默认情况下已启用，这意味着该 API 现在在所有主要浏览器中都受支持。

移动网络上有两个视窗：布局视窗和视觉视窗。布局视窗涵盖页面上的所有元素，而视觉视窗代表屏幕上实际可见的内容。如果屏幕上出现键盘，视觉视窗尺寸将缩小，但布局视窗将保持不变。

此 API 提供有关视觉视窗的尺寸、偏移量和缩放比例的信息，并允许您监听调整大小和滚动事件。您可以通过 visualViewport 属性访问它，该属性属于 window 接口。

在此简单示例中，监听 resize 事件，当用户放大时，隐藏布局中的元素，以避免界面混乱。

const elToHide = document.getElementById('to-hide');

var viewport = window.visualViewport;

function resizeHandler() {

   if (viewport.scale > 1.3)
     elToHide.style.display = "none";
   else
     elToHide.style.display = "block";
}

window.visualViewport.addEventListener('resize', resizeHandler);

Intl.DateTimeFormat 的新格式

对 Intl.DateTimeFormat 对象的几个更新包括用于格式化时区显示方式的新 timeZoneName 选项。这些选项包括本地化的 GMT 格式 shortOffset 和 longOffset，以及通用的非位置格式 shortGeneric 和 longGeneric。以下代码显示了 timeZoneName 的所有不同选项及其格式。

var date = Date.UTC(2021, 11, 17, 3, 0, 42);
const timezoneNames = ['short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', 'longGeneric']

for (const zoneName of timezoneNames) {

  // Do something with currentValue
  var formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: 'America/Los_Angeles',
    timeZoneName: zoneName,
  });

console.log(zoneName + ": " + formatter.format(date) );

}

// expected output:
// > "short: 12/16/2021, PST"
// > "long: 12/16/2021, Pacific Standard Time"
// > "shortOffset: 12/16/2021, GMT-8"
// > "longOffset: 12/16/2021, GMT-08:00"
// > "shortGeneric: 12/16/2021, PT"
// > "longGeneric: 12/16/2021, Pacific Time"

您现在可以使用新的 formatRange() 和 formatRangeToParts() 方法来格式化日期范围。前者返回两个 Date 对象 之间范围的本地化格式化字符串

const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

const startDate = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
const endDate = new Date(Date.UTC(2008, 0, 10, 11, 0, 0));

const dateTimeFormat = new Intl.DateTimeFormat('en', options1);
console.log(dateTimeFormat.formatRange(startDate, endDate));

// expected output: Wednesday, January 10, 2007 – Thursday, January 10, 2008

而后者返回一个数组，其中包含日期范围的特定于语言环境的部分

const startDate = new Date(Date.UTC(2007, 0, 10, 10, 0, 0)); // > 'Wed, 10 Jan 2007 10:00:00 GMT'
const endDate = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));   // > 'Wed, 10 Jan 2007 11:00:00 GMT'

const dateTimeFormat = new Intl.DateTimeFormat('en', {
  hour: 'numeric',
  minute: 'numeric'
});
const parts = dateTimeFormat.formatRangeToParts(startDate, endDate);

for (const part of parts) {

  console.log(part);

}

// expected output (in GMT timezone):
// Object { type: "hour", value: "2", source: "startRange" }
// Object { type: "literal", value: ":", source: "startRange" }
// Object { type: "minute", value: "00", source: "startRange" }
// Object { type: "literal", value: " – ", source: "shared" }
// Object { type: "hour", value: "3", source: "endRange" }
// Object { type: "literal", value: ":", source: "endRange" }
// Object { type: "minute", value: "00", source: "endRange" }
// Object { type: "literal", value: " ", source: "shared" }
// Object { type: "dayPeriod", value: "AM", source: "shared" }

保护 Gamepad API

对 Gamepad API 进行了几个更新，使其符合规范。现在它只能在安全上下文中（HTTPS）使用，并且受 功能策略：gamepad 保护。如果禁止访问游戏手柄，调用 Navigator.getGamepads() 将抛出错误，并且 gamepadconnected 和 gamepaddisconnected 事件不会触发。