此页面由 Cloud Translation API 翻译。

Chrome 106 的新变化

Pete LePage

Adriana Jara

以下是您需要知晓的相关信息：

新的 Intl API 可让您在设置数字格式时拥有更大的控制力。
弹出式窗口 API 提供了来源试用版，可让您轻松向用户显示重要内容。
我们将添加一些 CSS 功能来改进互操作性。
还有许多其他功能。

我是 Pete LePage，这是 Adriana Jara。我们来深入了解一下 Chrome 106 中面向开发者的新功能。

新的 Intl API

Intl API 有助于以本地化格式显示内容。

与其他 Intl API 一样，这会将负担转移到系统，因此您无需向每位用户分发或维护复杂的本地化代码。

API 知道货币符号的位置、如何设置日期和时间格式，或如何编译列表。

Chrome 106 添加了一系列新的数字格式功能。

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

需要显示价格范围？formatRange 会为您提供帮助。

创建一个新的 numberFormat 对象，提供 style 和其他选项，以及要显示的位数。

然后调用 formatRange() 以获取格式化字符串。

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

想要将数字舍入到最接近的 5 的倍数，精确到小数点后两位？没问题。

指定 minimumFractionDigits 和 roundingIncrement，然后调用 format()。

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

您甚至可以使用 trailingZeroDisplay 指示浏览器添加尾随零，这对价格非常有用。

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

如需了解详情，请参阅 MDN 上的国际数字格式文档。

当您只需将信息直接显示给用户时，Pop-Up API 可让您更轻松地构建界面。

popup 属性会自动将元素移至网站的顶层，并提供简单的控件来切换可见性。您再也不用担心元素的排列、堆叠、焦点或键盘互动。最重要的是，它无需任何 JavaScript。

只需使用以下代码段，该 API 便会负责在所有其他内容之上呈现元素，并处理用户输入和焦点管理。

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

默认情况下，用户可以使用 ESC 键或点击其他元素等手势关闭弹出式窗口。

开发者可以完全控制顶层的样式、位置和大小，还可以灵活修改默认行为。仅使用 CSS 和 HTML。

如需查看更多示例和 API 选项，请参阅 Jhey 的这篇文章。

注册参与来源测试，轻松向用户提供及时的信息。请与我们分享您的想法。

新的 CSS 功能

我们新增了两个 CSS 功能，旨在改进互操作性，希望能让您的工作更轻松。

长度单位家族又添新成员：ic 即将加入。ic 类似于 ch。但 ic 专门用于使用意符文字编写的文本，它基本上是根据这个字符 [指向某个位置]（表示水）的宽度或高度来衡量长度。

它是一种用于设置文本大小的单位，可让您限制宽度以提高可读性，并且无论文本大小如何，都能提供可预测的控制。

例如，如果您将容器的 max-width 设置为 10ic，则可以知道，无论字号如何，该容器最多只能包含 10 个全角字符。请参阅以下示例：

我们即将推出对 grid-template-columns 和 grid-template-rows 插值的 CSS 网格支持，原计划在 106 版中推出，但已推迟到 Chrome 107 版中推出，您仍可以在 Chrome Beta 版中试用。下面是 Bramus 的代码示例：

这个笔记

等等！

当然，还有许多其他功能。

我们将开始实施用户代理缩减计划的第五阶段。
我们即将废弃对 HTTP2 推送和永久配额类型的支持。
CSS 属性 hyphenate-character 现在无需前缀即可使用。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 106 中的其他变更，请访问以下链接。

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Adriana Jara，Chrome 107 发布后，我会立即为您介绍 Chrome 中的新变化！

Chrome 106 的新变化

新的 Intl API

弹出式窗口 API

新的 CSS 功能

等等！

深入阅读

订阅