史上首次！蘋果/谷歌/微軟/火狐合力解決Web兼容性問題

文?| 羅奇奇

出品 | OSC開源社區(qū)（ID：oschina2013）

瀏覽器制造商 Apple、Google、Microsoft 和 Mozilla ，以及軟件公司 Bocoup 和 Igalia 正在合力制定一項名為?Interop 2022?的 Web 兼容性規(guī)范，以使 Web 技術(shù)和代碼在不同的設(shè)備和瀏覽器中有統(tǒng)一的渲染效果（利好前端開發(fā)）。

這是有史以來第一次，所有市場上主要的瀏覽器供應(yīng)商和利益相關(guān)者齊心協(xié)力地解決瀏覽器兼容性問題。此前，互相為競爭關(guān)系的瀏覽器廠商常常在 Web 技術(shù)的兼容性上出現(xiàn)分歧，尤其是 IE 還活著的時候，前端一個頁面三套代碼的情況十分常見。

過去幾年，隨著監(jiān)管機構(gòu)在競爭問題上向蘋果和谷歌施壓，這些頂級瀏覽器制造商之間才開始頻繁合作，而不是專注于搞自家瀏覽器的專屬功能。2019 年谷歌和微軟合作發(fā)起過一個名為 Compat 2021 的 Web 兼容性標準，該標準促進了 CSS grid ?和 CSS flexbox ?這兩個技術(shù)的發(fā)展，Mozilla 參與了該計劃的討論，但蘋果和其 WebKit 團隊并未參與此計劃 。

新的 Interop 2022 規(guī)范整體偏向于 15 個領(lǐng)域，其中 10 個領(lǐng)域是綜合去年 CSS 2021 現(xiàn)狀調(diào)查和 GitHub 投票得出的結(jié)論，大多數(shù)前端開發(fā)人員認為這些領(lǐng)域在跨瀏覽器存在兼容性問題會特別難處理：

• Cascade Layers（級聯(lián)層）

有了這個標準，網(wǎng)站可以創(chuàng)建一個“框架”層和一個“自定義”層，然后將所有第三方框架的 CSS 樣式分配到框架層，在自定義層中編寫自定義樣式，而且自定義層的所有 CSS 樣式，優(yōu)先級都可以比框架層要高（無視選擇器）。

• Color Spaces and Functions（色彩空間/函數(shù)）

早期，Web 開發(fā)使用 sRGB 顏色空間，通常以十六進制、rgb()、rgba()或hsl()?格式表達色彩。但隨著顯示技術(shù)的發(fā)展，sRBG 不夠用了，因此 Interop 2022 包括對三種擴展顏色空間（LAB、LCH、P3）的支持測試，以及兩種通過函數(shù)在 CSS 中編寫顏色的方法：color-mix?和?color-contrast：

color-mix(): 取兩種顏色，并返回在指定顏色空間中按指定量混合它們的結(jié)果。

color-contrast()：從顏色列表中選擇與指定單色具有最高對比度的顏色。

• ?Containment（CSS?contain?屬性）

contain?屬性用于識別和測量特定容器的大小，然后根據(jù)該容器的大小應(yīng)用不同的樣式。有點像媒體查詢 @media，但不是測量視窗大小，而是測量容納內(nèi)容的盒子的大小。

• Dialog Element（對話框元素）

該?Dialog元素可以創(chuàng)建覆蓋型的窗口，也就是對話框，比如?::backdrop?偽元素可以為一個模態(tài)框下方的背景設(shè)置樣式。可在此博客了解對話框元素?。

• Form Fixes（表單修復(fù)）

關(guān)于表單的一些操作性，包括?appearance?屬性、、禁用表單控件

上的事件，以及輸入元素、表單提交和表單驗證的錯誤處理等。

• Scrolling （滾動控件）

這條是關(guān)于頁面滾動的兼容性，Scroll snap 提供了控制界面滾動方式和內(nèi)容顯示方式的工具。CSS 中的?scroll-behavior?屬性設(shè)置當滾動由導(dǎo)航或 CSSOM 滾動 API 觸發(fā)時，滾動框會出現(xiàn)什么行為。overscroll-behaviorCSS 屬性決定了瀏覽器在到達滾動區(qū)域的邊界時會做什么。

• Subgrid（子網(wǎng)格）

Subgrid 可輕松將網(wǎng)格容器的后代元素放置在該網(wǎng)格上，在跨復(fù)雜布局排列項目時無需考慮 DOM 結(jié)構(gòu)。

比如下面三個卡片組件的頁眉和頁腳都對齊了，即使每張卡片都有獨立的網(wǎng)格（grid），這是因為每張卡片都是跨越父網(wǎng)格的三行項目，然后使用子網(wǎng)格 Subgrid 將這些行繼承到每個卡片中。

• Typography and Encodings（字體設(shè)計和編碼）

排版和編碼包含一系列影響 Web 排版的測試，包括 font-variant-alternates, font-variant-position, ic 單元和 CJK（中日韓）文本編碼。字體功能是優(yōu)化排版的強大屬性，但前提是跨瀏覽器兼容。

• Viewport Units（視窗單位）

新的視窗單位考慮包含標題欄的布局，引入了最大、最小和動態(tài)視窗單位，比如 ?100svh?指 ?100% 最小可能視窗高度，100lvh?指 100% 最大可能視窗高度，100dvh?指 100% 動態(tài)視窗高度——該值將隨著用戶滾動而改變。

同理，svw、?lvw、 和?dvw?用于寬度單位。

• Web Compat（Web ?兼容）

瀏覽器中的特定錯誤可能不導(dǎo)致某些網(wǎng)站無法按預(yù)期渲染，或者一個瀏覽器可能與 Web 標準不同，從而導(dǎo)致網(wǎng)站或 Web 應(yīng)用程序用戶的體驗，Interop 2022 旨在通過 Web 兼容性測量來捕獲和解決這些問題。

以上是 10 個新的 Web 兼容性規(guī)范，此外還有 5 個從 Compat 2021 繼承下來的規(guī)范標準：

• Aspect Ratio（屏幕縱橫比）

• Flexbox（彈性盒模型）

• Grid（網(wǎng)格）

• Sticky Positioning（粘滯定位）

• Transforms（變換盒模型）

這部分規(guī)范已經(jīng)非常常用，在此不展開介紹 。

從根本上講，Interop 2022 是一個不斷發(fā)展的指標，用于評估各大瀏覽器對上述 Web 標準的兼容程度。Interop 2022 儀表板?有一個評分系統(tǒng)，評估各大瀏覽器的整體兼容程度：

這玩意全年不斷更新，還會實時顯示各大瀏覽器的工程師修復(fù)錯誤、實現(xiàn)新功能和改進測試的進展，以及在每個標準的工程進度：

題外話

而 Apple 網(wǎng)絡(luò)開發(fā)布道者 Jen Simmons 在 Interop 2022 的博客中說：“Apple 非常關(guān)心 Web 的健康，以及 Web 標準的可互操作（兼容性）實現(xiàn)。”這似乎跟大多數(shù)前端人員的實際想法有些出入...

???H5-Dooring，讓H5制作更簡單