Interop 2024 年中更新

Rachel Andrew

今年下半年即将开始，不妨了解一下 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%。