Chrome 106 的新变化

Pete LePage
Adriana Jara

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

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

新的国际 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 的新变化！