史上首次！苹果、谷歌、微软、Mozilla 达成共识，让Web开发者更轻松

这个星球上的几个浏览器制造商苹果、谷歌、微软和 Mozilla ，前几天他们凑在一起，加上软件咨询公司 Bocoup 和 Igalia 两家，准备共同努力，使Web设计技术在不同平台上能更一致的方式运行。

 

这个组织的名字叫 Interop 2022，并发起了业界评估标准 ，用来评估不同浏览器供应商实施相同的Web标准，以消除网页在不同浏览器的展现差异。

 

目前Interop 2022对四种网络浏览器（Safari、Chrome、Edge、Firefox）的稳定兼容性估计得分如下：

 

Chrome 和 Edge 都是基于同一个 Chromium 内核，所以结果是一样的，而Safari 最低，50分。

 

Firefox 的级联层非常出色，为 93%，但对话框元素处理， Chrome 和 Edge 为 94%，Firefox 为 12%，Safari 为 10%。

 

时光推进到今日，IE都已经死去多年，余下的这4种浏览器仍在以不同的方式处理Web技术。这会引发前端人士的一句经典名言：“啥时候标准不是标准？当它是一个Web开发标准时。”

 

当涉及到开发时，尤其是前端开发人员试图跨平台、产品和浏览器创建一致的 Web 界面时，它就变成了一个比较痛苦的点。

 

似乎浏览器开发人员终于良心发现，对页面开发和渲染有了越来越深刻的理解，因此发起了新的标准化组织，向冬奥看齐——一起向未来。

 

“有史以来第一次，所有主流浏览器供应商和其他利益相关者齐心协力解决 Web 开发人员发现的较严重的浏览器兼容性问题”。谷歌的Rachel Andrew、Philip Jägenstedt和Robert Nyman几个人在周四都在博客上记载了这一Web开发的历史事件。

 

其实在此之前，已经有一个类似的Web技术兼容性检查组织，称为Compat 2021，它始于 2019 年。Compat 2021专注于五个Web开发痛点——CSS Flexbox、CSS Grid、position: sticky和aspect-ratio的CSS 转换等，但那个组织里没有苹果加入或者说没有 WebKit 团队。

 

微软 Edge 首席软件工程经理Daniel Libby 提道：“我们在 2021 年共同取得的进展快得让人难以至信。随着更多供应商的加入，还有更广泛的互操作性领域需要解决，我们迫不及待地想看看今年 Web 的发展程度， ”

 

该组织今年的工作将涉及 15 个重点领域，包括级联层、新视口单元、色彩空间和 CSS 颜色函数。还有三项未公开的命令扩展：

 

Web新指令：Edit、contenteditable 和 execCommand

指针和鼠标事件

视图测量

 

 

微软这样说道：

 

来自 Apple、Bocoup、Google、Igalia、Microsoft 和 Mozilla 的代表集体同意，[Compat 2021] 的名称并未准确反映其解决浏览器之间核心互操作性差距的意图。今年，微软再次高兴地宣布参与更贴切命名的 Interop 2022 之工作。

 

虽然 Microsoft 将主要专注于提供 CSS Subgrid 支持，但这只是 Interop 2022 将关注的十五个互操作性领域之一。其中包括开发人员长期受挫的领域，以及 Web 开发人员可以放心采用的经常请求的新功能。

 

谷歌同样对其参与持乐观态度，他们这样说：

 

多年以来，这些以 Compat 2021、Interop 2022 等形式开展的互操作性工作的目标是充分承认和解决开发人员多年来经历的痛点。这不是一家浏览器的努力，而是所有主要浏览器供应商和队友之间的紧密合作，以全面改进Web平台。

 

从本质上讲，我们的目标是让 Web 平台对开发人员来说更加可用和可靠，这样他们就可以花更多的时间来构建出色的 Web 体验，而不是花精力解决浏览器的不一致问题。

 

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

 

Cascade Layers（级联层）

 

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

 

Color Spaces and Functions（色彩空间/函数）

 

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

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

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

 

 Containment（CSS contain 属性）

 

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

 

Dialog Element（对话框元素）

 

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

 

Form Fixes（表单修复）

 

关于表单的一些操作性，包括 appearance 属性、、禁用表单控件<form>上的事件，以及输入元素、表单提交和表单验证的错误处理等。

 

Scrolling （滚动控件）

 

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

 

Subgrid（子网格）

 

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

 

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

 

Typography and Encodings（字体设计和编码）

 

排版和编码包含一系列影响 Web 排版的测试，包括 font-variant-alternates, font-variant-position, ic 单元和 CJK（中日韩）文本编码。字体功能是优化排版的强大属性，但前提是跨浏览器兼容。

 

Viewport Units（视窗单位）

 

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

 

同理，svw、 lvw、 和 dvw 用于宽度单位。

 

Web Compat（Web  兼容）

 

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

 

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

 

Aspect Ratio（屏幕纵横比）

Flexbox（弹性盒模型）

Grid（网格）

Sticky Positioning（粘滞定位）

Transforms（变换盒模型）

 

Interop 2022 是一个不断发展的指标，用于评估各大浏览器对上述 Web 标准的兼容程度。

 

Mozilla 表示： “希望我们能够迈向未来，在这个未来，我们知道如何使这些领域具有互操作性，为它们更新相关的网络标准，并通过测试来衡量它们，就像我们对重点领域所做的那样 。”

 

苹果负责Web Developer Experiences的经理 Jen Simmons 在 WebKit 博客上写道：“所有这些技术对于 Apple 和任何从事 WebKit 工作的人都很重要。我们深入参与了实现 Web 健康和标准的互操作性，这些我更感兴趣，欢迎更多Web标准化机构和 Interop 2022 的同事们让Web尽可能地具有互操作性，因为这是最适合用户的方式。”

苹果并未加速实施某些可能帮助开发人员创建 Web 应用程序以与原生 iOS 应用程序竞争的 Web API。当然，苹果并不是唯一在某些标准实施方面落后的公司，谷歌也是跌跌撞撞的晃荡，尤其是在用户隐私方面。