仅探索 2022 年可以互操作的部分功能。
又是一年年底了,现在是时候看看浏览器带来的改进了,我们一起努力提高网络平台的互操作性。随着该计划的推出,您可以阅读我们在今年 3 月份发布的博文,了解我们的起步历程。
![得分显示 Chrome 和 Edge Dev 版在 71,Firefox Nightly 74,Safari 技术预览在 73 上。](https://web.developers.google.cn/static/blog/interop-2022-wrapup/image/scores-showing-chrome-ed-e0480390ad6a.png?authuser=0000&hl=uk)
年底的总体得分表明所有引擎都有很大的进步。
![得分显示 Chrome 和 Edge Dev 版在 90 版、Firefox Nightly 89 版、Safari 技术预览版 94 版。](https://web.developers.google.cn/static/blog/interop-2022-wrapup/image/scores-showing-chrome-ed-67b24fea086da.png?authuser=0000&hl=uk)
在本博文中,您将了解我们在 2022 年取得的进展。除了这些标题功能之外,所有引擎都做出了许多小幅改进。可能导致引擎之间出现不一致、导致您在开发过程中无法正常运行的小问题已得到解决。看到可跨浏览器使用的大型功能固然令人兴奋,但有时是一些小问题导致了最多的问题,因此看到改进后将有多么高兴。
级联层
借助级联层,您可以将选择器分组为多个层,从而管理级联。只有在所有平台都受支持时,才会有实用价值。现在,所有主要引擎都支持级联层,并且所有浏览器中的得分反映了功能的互操作性,在 Firefox 中仅剩几项测试要通过。
dialog 元素
dialog 元素支持创建模态和非模态对话框。这是 Web 中的一种常见模式,使用此元素可为您提供易用性和可访问性,您在创建自己的组件时就必须进行开发和测试。在构建对话框组件一文中,Adam Argyle 介绍了如何在此元素的基础上进行构建,以构建不同类型的对话框。
子网格
2022 年初,唯一支持 grid-template-rows
和 grid-template-columns
的 subgrid
值的浏览器是 Firefox。2022 年,Safari 已经开始支持此功能,Chrome 中的此功能正在开发中。我们即将错过实现互操作功能的年终截止日期,但已经快到了。
视口单位
视口单元是唯一一个在所有引擎上 100% 通过测试的功能。其中包括小视口和大视口的概念,这些概念会说明移动设备上的视口大小会随着设备界面元素的出现和消失而发生变化。要详细了解这些广告单元,请参阅大型、小型和动态视口单元一文。
浏览器支持
- 108
- 108
- 101
- 15.4
颜色 4
通过这种颜色工作集合,CSS 不仅可以指定更高清晰色域(例如 display p3、rec2020)中的颜色,还可以提供新的颜色函数,其中每个函数都有处理颜色的独特实用程序。新的颜色空间包括 lch()
、oklch()
、lab()
、oklab()
、display-p3
、rec2020
、a98-rgb
、prophoto-rgb
、xyz
、xyz-d50
、xzy-d65
:立即在启用此标志的情况下在 Canary 中试用这些颜色空间。这些更改也适用于渐变,让作者能够指定渐变所用的颜色空间。同一个标志还支持 color-mix()
,可让您在自己选择的空间中混合两种颜色。在 Safari 和 Firefox 中, color-mix() 函数也位于一个标记之后。更丰富的色彩、更美妙的色彩、更出色的渐变效果以及更出色的工具。
Interop 2023
很高兴您了解到,我们不打算在 2022 年底停止使用,Interop 2023 已顺利完成初始规划阶段。在新年里,我们将公布入选的功能,期待在新的一年能更轻松地开发 Web 应用。
主打图片:Ian Schneider。