这是有史以来第一次，所有市场上主要的浏览器供应商和利益相关者齐心协力地解决浏览器兼容性问题。此前，互相为竞争关系的浏览器厂商常常在 Web 技术的兼容性上出现分歧，尤其是 IE 还活着的时候，前端一个页面三套代码的情况十分常见。

　　过去几年，随着监管机构在竞争问题上向苹果和谷歌施压，这些顶级浏览器制造商之间才开始频繁合作，而不是专注于搞自家浏览器的专属功能。2019 年谷歌和微软合作发起过一个名为 Compat 2021 的 Web 兼容性标准，该标准促进了 CSS grid 和 CSS flexbox 这两个技术的发展，Mozilla 参与了该计划的讨论，但苹果和其 WebKit 团队并未参与此计划 。

　　新的 Interop 2022 规范整体偏向于 15 个领域，其中 10 个领域是综合去年 CSS 2021 现状调查和 GitHub 投票得出的结论火狐动态，大多数前端开发人员认为这些领域在跨浏览器存在兼容性问题会特别难处理：

　　有了这个标准，网站可以创建一个“框架”层和一个“自定义”层火狐电竞，然后将所有第三方框架的 CSS 样式分配到框架层，在自定义层中编写自定义样式，而且自定义层的所有 CSS 样式，优先级都可以比框架层要高（无视选择器）。

　　早期火狐电竞，Web 开发使用 sRGB 颜色空间，通常以十六进制、rgb()、rgba()或hsl()格式表达色彩。但随着显示技术的发展，sRBG 不够用了，因此 Interop 2022 包括对三种扩展颜色空间（LAB、LCH、P3）的支持测试，以及两种通过函数在 CSS 中编写颜色的方法：color-mix和color-contrast：

　　color-mix(): 取两种颜色，并返回在指定颜色空间中按指定量混合它们的结果。

　　color-contrast()：从颜色列表中选择与指定单色具有最高对比度的颜色。

　　contain属性用于识别和测量特定容器的大小，然后根据该容器的大小应用不同的样式。有点像媒体查询 @media，但不是测量视窗大小，而是测量容纳内容的盒子的大小。

　　该 Dialog元素可以创建覆盖型的窗口，也就是对话框，比如::backdrop伪元素可以为一个模态框下方的背景设置样式。可在此博客了解对话框元素 。

　　这条是关于页面滚动的兼容性，Scroll snap 提供了控制界面滚动方式和内容显示方式的工具。CSS 中的scroll-behavior属性设置当滚动由导航或 CSSOM 滚动 API 触发时，滚动框会出现什么行为。overscroll-behaviorCSS 属性决定了浏览器在到达滚动区域的边界时会做什么。

　　Subgrid 可轻松将网格容器的后代元素放置在该网格上，在跨复杂布局排列项目时无需考虑 DOM 结构火狐电竞。

　　比如下面三个卡片组件的页眉和页脚都对齐了，即使每张卡片都有独立的网格（grid），这是因为每张卡片都是跨越父网格的三行项目，然后使用子网格 Subgrid 将这些行继承到每个卡片中。

　　新的视窗单位考虑包含标题栏的布局，引入了最大、最小和动态视窗单位，比如100svh指 100% 最小可能视窗高度，100lvh指 100% 最大可能视窗高度，100dvh指 100% 动态视窗高度——该值将随着用户滚动而改变。

　　浏览器中的特定错误可能不导致某些网站无法按预期渲染，或者一个浏览器可能与 Web 标准不同，从而导致网站或 Web 应用程序用户的体验，Interop 2022 旨在通过 Web 兼容性测量来捕获和解决这些问题。

　　以上是 10 个新的 Web 兼容性规范，此外还有 5 个从 Compat 2021 继承下来的规范标准：

　　从根本上讲，Interop 2022 是一个不断发展的指标，用于评估各大浏览器对上述 Web 标准的兼容程度。Interop 2022 仪表板 有一个评分系统，评估各大浏览器的整体兼容程度：

　　这玩意全年不断更新，还会实时显示各大浏览器的工程师修复错误、实现新功能和改进测试的进展，以及在每个标准的工程进度：

　　而 Apple 网络开发布道者 Jen Simmons 在 Interop 2022 的博客中说：“Apple 非常关心 Web 的健康，以及 Web 标准的可互操作（兼容性）实现。”这似乎跟大多数前端人员的实际想法有些出入...火狐电竞