以下是您有必要知道的信息:
- 我们提供了一些新的国际性 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
当您只需要将信息呈现给用户时,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 开发者工具的新变化 (106)
- Chrome 106 弃用和移除
- 针对 Chrome 106 的 ChromeStatus.com 更新
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需随时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Adriana Jara