今年下半年即将开始,不妨了解一下 Interop 2024 今年改进了网络互操作性。
起点
年初, Chrome 的实验性浏览器支持得分为 83。
![信息中心得分:65;调查:0;Chrome Canary:83;Edge Dev:82;Firefox 每夜:80;Safari 技术预览:79。](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-feb.png?hl=zh-cn)
![信息中心得分:75;调查:5;Chrome Canary 版:90;Edge Dev:89;Firefox 每夜版:87;Safari 技术预览:88。](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-june.png?hl=zh-cn)
目前,该得分为 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>
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<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 新上线。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
如需了解详情,请参阅 @property:为 CSS 变量赋予超能力。
font-size-adjust
属性
借助 CSS font-size-adjust
属性,您可以修改小写的字体大小
这些字母是相对的这对于以下情况非常有用:
可能会发生字体回退的位置,因为这样有助于确保回退字体
特别是在字体较小的情况下
font-size-adjust
属性目前包含在实验得分中
但当新版本以
Chrome 127。它还加入了 Baseline 新上线计划。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
文本换行:余额
使用 text-wrap: balance
会指示浏览器找出最佳平衡点,
文本换行。这对于标题特别有用,可以防止
例如,将标题换行到第二行的一个字词。
Safari 最近已支持此功能,其他浏览器也在努力解决这一问题。 未通过测试,以确保此功能在所有浏览器中都能正常运行。
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
除了这些重要的功能变得可互操作外,许多其他 做出了一些改进每个通过的测试都代表 不会遇到的互操作性问题我们很高兴看到 能在年底达到 100%。