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

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

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

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

　　Cascade Layers(級(jí)聯(lián)層)

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

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

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

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

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

　　Containment(CSS contain 屬性)

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

　　Dialog Element(對(duì)話框元素)

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

　　Form Fixes(表單修復(fù))

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

　　上的事件，以及輸入元素、表單提交和表單驗(yàn)證的錯(cuò)誤處理等。

　　Scrolling (滾動(dòng)控件)

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

　　Subgrid(子網(wǎng)格)

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

　　比如下面三個(gè)卡片組件的頁(yè)眉和頁(yè)腳都對(duì)齊了，即使每張卡片都有獨(dú)立的網(wǎng)格(grid)，這是因?yàn)槊繌埧ㄆ际强缭礁妇W(wǎng)格的三行項(xiàng)目，然后使用子網(wǎng)格 Subgrid 將這些行繼承到每個(gè)卡片中。

　　Typography and Encodings(字體設(shè)計(jì)和編碼)

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

　　Viewport Units(視窗單位)

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

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

　　Web Compat(Web 兼容)

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

　　以上是 10 個(gè)新的 Web 兼容性規(guī)范，此外還有 5 個(gè)從 Compat 2021 繼承下來(lái)的規(guī)范標(biāo)準(zhǔn)：

　　Aspect Ratio(屏幕縱橫比)

　　Flexbox(彈性盒模型)

　　Grid(網(wǎng)格)

　　Sticky Positioning(粘滯定位)

　　Transforms(變換盒模型)

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

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

　　這玩意全年不斷更新，還會(huì)實(shí)時(shí)顯示各大瀏覽器的工程師修復(fù)錯(cuò)誤、實(shí)現(xiàn)新功能和改進(jìn)測(cè)試的進(jìn)展，以及在每個(gè)標(biāo)準(zhǔn)的工程進(jìn)度：

　　題外話

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