此页面由 Cloud Translation API 翻译。

Chrome 106 的新变化

Pete LePage

Adriana Jara

以下是您有必要知道的信息：

我们提供了一些新的国际性 API，以便您在设置数字格式时更好地进行控制。
我们已针对 Pop-up 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 增量，精确到小数点后两位吗？放心交给 Bard。

指定 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 个全宽字形。请参阅以下示例：

CSS 网格将支持 grid-template-columns 和 grid-template-rows 的插值。原先计划在 106 版中支持插值，但现在有所延迟，将在 Chrome 107 中推出。您仍然可以在 Chrome Beta 版中试用此功能。以下是 Bramus 的代码示例：

还有更多其他奖励！

当然还有许多其他功能。

我们将启动用户代理减少计划第五阶段。
我们即将弃用对 HTTP2 推送和永久性配额类型的支持。
CSS 属性 hyphenate-character 现在可用（无前缀）。

深入阅读

这里仅介绍一些重要的亮点。如需了解 Chrome 106 中的其他更改，请访问以下链接。

如需随时了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Adriana Jara

Chrome 106 的新变化

新的 Intl API

Pop-up API

CSS 新功能

还有更多其他奖励！

深入阅读

订阅