Interop 2024 年中更新

今年下半年即将开始,不妨了解一下 Interop 2024 今年改进了网络互操作性。

年初, Chrome 的实验性浏览器支持得分为 83。

<ph type="x-smartling-placeholder">
</ph> 信息中心得分:65;调查:0;Chrome Canary:83;Edge Dev:82;Firefox 每夜:80;Safari 技术预览:79。
2024 年 2 月的 Interop 2024 信息中心。
。 <ph type="x-smartling-placeholder">
</ph> 信息中心得分:75;调查:5;Chrome Canary 版:90;Edge Dev:89;Firefox 每夜版:87;Safari 技术预览:88。
2024 年 6 月底发布的 2024 年 Interop 信息中心。

目前,该得分为 90,截至 2023 年,稳定版浏览器的得分为 85 Chrome 126 发布版本。实验互操作性总体得分提高了 10 分,此帖子分享了 得分。

弹出式窗口

Popover 于 2024 年 4 月被纳入 Baseline“Newly Available”中。弹出式窗口是 令人兴奋,因为您需要构建的很多界面功能,例如 包括菜单、提示、用于进行选择的叠加层和教学界面 弹出式窗口在推出弹出窗口之前,创建这类功能都需要 代码。用于确保多个元素不会同时打开或启用 当用户在元素外点击时为浅色关闭。您可能还会遇到 在使用 z-index 时遇到了困难,以确保界面元素始终位于其余组件之上 界面。

所有这些功能以及更多其他功能都在 Popover API, 从而节省开发时间, 并帮助打造性能更高、更易访问的界面。对于 以下代码将创建一个具有轻微关闭的弹出式窗口,该弹出式窗口将 其他弹出式窗口在打开时自动关闭。

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

浏览器支持

  • Chrome:114。 <ph type="x-smartling-placeholder">
  • 边缘:114。 <ph type="x-smartling-placeholder">
  • Firefox:125。 <ph type="x-smartling-placeholder">
  • Safari:17. <ph type="x-smartling-placeholder">

来源

如需了解详情,请参阅 Popover API 已纳入基准。很多 已经看到了 Popover 的优势。 Tokopedia 大幅缩减了 React 代码量 方法是利用该功能,对不支持的浏览器使用 polyfill。

使用 @property 的高级自定义属性

借助@property CSS 规则,您可以创建高级自定义属性 比标准自定义属性中的名称和值更详细。 设置允许的语法以定义此属性存储的数据类型, 例如颜色、数字或长度。然后设置该属性 以及一个初始值。

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

@property 规则目前可提高 Firefox 的实验得分, 在本月晚些时候推出 Firefox 128 时,提高了稳定的得分。它还加入 Baseline 新上线。

浏览器支持

  • Chrome:85。 <ph type="x-smartling-placeholder">
  • 边缘:85。 <ph type="x-smartling-placeholder">
  • Firefox:128。 <ph type="x-smartling-placeholder">
  • Safari:16.4. <ph type="x-smartling-placeholder">

来源

如需了解详情,请参阅 @property:为 CSS 变量赋予超能力

font-size-adjust 属性

借助 CSS font-size-adjust 属性,您可以修改小写的字体大小 这些字母是相对的这对于以下情况非常有用: 可能会发生字体回退的位置,因为这样有助于确保回退字体 特别是在字体较小的情况下

font-size-adjust 属性目前包含在实验得分中 但当新版本以 Chrome 127。它还加入了 Baseline 新上线计划。

浏览器支持

  • Chrome:127。 <ph type="x-smartling-placeholder">
  • 边缘:127。 <ph type="x-smartling-placeholder">
  • Firefox:3. <ph type="x-smartling-placeholder">
  • Safari:16.4. <ph type="x-smartling-placeholder">

来源

文本换行:余额

使用 text-wrap: balance 会指示浏览器找出最佳平衡点, 文本换行。这对于标题特别有用,可以防止 例如,将标题换行到第二行的一个字词。

Safari 最近已支持此功能,其他浏览器也在努力解决这一问题。 未通过测试,以确保此功能在所有浏览器中都能正常运行。

浏览器支持

  • Chrome:114。 <ph type="x-smartling-placeholder">
  • 边缘:114。 <ph type="x-smartling-placeholder">
  • Firefox:121。 <ph type="x-smartling-placeholder">
  • Safari:17.5。 <ph type="x-smartling-placeholder">

来源


除了这些重要的功能变得可互操作外,许多其他 做出了一些改进每个通过的测试都代表 不会遇到的互操作性问题我们很高兴看到 能在年底达到 100%。