2022年Web平臺(tái)的新動(dòng)態(tài)

以下文章來源于前端充電寶 ，作者CUGGZ

5月11-12日，谷歌舉辦了 2022 Google I/O  全球開發(fā)者大會(huì)。在大會(huì)上，Jake Archibald 和 Una Kravet 向我們介紹了 Web 平臺(tái)的最新動(dòng)態(tài)。下面就來看看 2022 年 Web 平臺(tái)有哪些新動(dòng)態(tài)吧！

本文將著眼于隱私和安全性、強(qiáng)大功能、UI 設(shè)計(jì)、性能和核心指標(biāo)以及一些新的 CSS 和 JavaScript 等方面的新功能,。



一、UI 功能
1. accent-color
現(xiàn)在都是 2022 年了，為什么設(shè)置下拉菜單和復(fù)選框的樣式仍然如此困難？CSS 的 accent-color 屬性就可以輕松解決這個(gè)問題。


使用該屬性，可以輕松更改以前難以訪問的表單控件的主題顏色，例如復(fù)選框、單選按鈕、范圍控件和進(jìn)度條等。


在一行 CSS 中，accent-color 使瀏覽器能夠根據(jù)開發(fā)人員設(shè)置的背景來確定前景色，并且還可以與 color-scheme 屬性一起為淺色和深色主題提供一些不錯(cuò)的自動(dòng)調(diào)整。使用下面的代碼片段，瀏覽器會(huì)自動(dòng)創(chuàng)建明暗模式，并為表單控件使用 magenta 強(qiáng)調(diào)色。



該屬性正在所有現(xiàn)代 Web 引擎中變得穩(wěn)定。這包括為 Chrome、Edge、Opera、Safari、Firefox。

2. <dialog>
HTML dialog 是一個(gè)全新的開箱即用的 HTML 對(duì)話框元素。


通過這個(gè)元素可以輕松創(chuàng)建一個(gè)對(duì)話框，例如警報(bào)或提示。當(dāng)將其添加到頁面時(shí)，它開始是隱藏的，當(dāng)使用 showModal 方法來展示它時(shí)，它會(huì)彈出來：

<dialog id="dialog">
  hello world!
</dialog>

<script>
  someBotton.onclick = () => {
    const dialog = document.getElementById('dialog');
    dialog.showModal();
  };
</script>


當(dāng)然，這是一個(gè)最簡(jiǎn)單的例子，我們可以通過 CSS 來為它設(shè)置任何想要的樣式，


它真正有用的部分是它處理可訪問性。它被稱為對(duì)話框?？梢苑乐规I盤焦點(diǎn)離開元素。它還會(huì)在一個(gè)特殊的頂層中彈出所有內(nèi)容的頂部，因此即使對(duì)話框元素是在某些嵌套組件結(jié)構(gòu)的深處創(chuàng)建的，它也可以填充視口，即使父元素隱藏了溢出隱藏或其他類型的隱藏。

如果在對(duì)話框的對(duì)話中有一個(gè)表單，提交該表單將自動(dòng)關(guān)閉框?qū)υ挷⑼ㄟ^對(duì)話框的返回值告訴我們單擊了哪個(gè)按鈕。


3. selectmenu
Open UI 社區(qū)組正在積極的研究如何解決更復(fù)雜和擴(kuò)展的表單控件。它們提出了一些實(shí)驗(yàn)性解決方案，例如 selectmenu 組件和pop-up屬性。


selectmenu 組件可以為下拉菜單提供更廣泛的樣式。下面是微軟的一個(gè)關(guān)于 selectmenu 組件的演示：



Open UI 也在考慮解決其他組件的體驗(yàn)，比如選項(xiàng)卡和錨定位等。

4. datetime-local
datetime-local 是一個(gè)跨瀏覽器功能，它是一種輸入（input）類型。


我們可以這樣來使用它，用戶可以選擇日期和時(shí)間：

<label>
  Start data &amp; time:
  <input type="datetime-local" />
</label>
這就是它在 PC端 的 Chrome 和 Android 端的 Chrome 上的外觀：



我們還可以設(shè)置驗(yàn)證約束，例如最小和最大日期。

5. COLRv1
COLRv1 是瀏覽器中的一種新的字體格式。它是 COLRv0 字體格式的演變，其添加了漸變、合成和混合，并改進(jìn)了內(nèi)部形狀重用，以獲得更清晰、更緊湊的字體文件，從而更有效地壓縮。


和該方法的替代方案bitmap相比，這種壓縮帶來了不錯(cuò)的性能提升：


COLRv1 字體往往更清晰，而且它們的縮放效果也更好。


這種新格式可以更輕松地在風(fēng)格上使用彩色字體和表情符號(hào)等圖標(biāo)來創(chuàng)建富有表現(xiàn)力的標(biāo)題和高性能界面。


例如，可以將它們呈現(xiàn)為彩色字體，而不是使用圖像作為圖標(biāo)。有一些新的實(shí)驗(yàn)性屬性，例如 font-palette和 override-colors，它們?yōu)橛脩籼峁┝耸褂?COLRv1 設(shè)置 Web 字體樣式的新方式。下面的例子就使用override-colors屬性來重新設(shè)置 Bungee 字體的樣式。


二、性能
1. bfcache
bfcache 意為往返緩存。它在 Firefox和 Safari 中已存在多年，現(xiàn)在 Chromium 中也支持了該功能。


在一個(gè)網(wǎng)頁上點(diǎn)擊一個(gè)鏈接到另一個(gè)頁面后，但前一頁會(huì)保留一段時(shí)間，在后臺(tái)凍結(jié)，這意味著如果按下返回，它會(huì)立即觸發(fā)。


并非所有頁面都會(huì)發(fā)生這種情況，只有不太可能導(dǎo)致問題的頁面才會(huì)發(fā)生這種情況。DevTools 可以告訴我們它是否適用于給定頁面，如果不適用，會(huì)給出相應(yīng)的理由。


2.  圖片懶加載
圖像是頁面的一部分，它會(huì)提前開始加載。一旦瀏覽器在源代碼中看到它們，就會(huì)提示下載。即使圖像被隱藏，即使它位于一個(gè)非常長(zhǎng)的頁面的底部，也會(huì)提前加載?，F(xiàn)在，一個(gè)簡(jiǎn)單的 loading 屬性就可以讓瀏覽器在開始下載時(shí)考慮圖像的可見性和位置。


它也適用于 iframe：

<img src="..." alt="..." loading="lazy" />
<iframe src="..." loading="lazy"></iframe>
如果將 loading="lazy" 放在頁面頂部的重要大圖上，它們的加載速度會(huì)變慢，所以要格外小心。如果將它添加到不太重要和屏幕外的圖像中時(shí)，它們不會(huì)爭(zhēng)奪帶寬，而更重要的東西（如樣式、腳本和更高優(yōu)先級(jí)的圖像）會(huì)優(yōu)先考慮。

現(xiàn)在它可以跨瀏覽器使用，并且可以在WordPress、Wix、Silverstripe、Drupal 等中使用。

3. aspect-ratio
如果我們?yōu)閳D像設(shè)置了height和width屬性，并將高度設(shè)置為自動(dòng)，它們將保持其縱橫比，在加載之前，這避免了布局的變化。CSS 新增的 aspect-ratio 屬性可以你為所有元素實(shí)現(xiàn)相同的效果，而不僅僅是圖像。



在 iframe、組件div、網(wǎng)格布局和元素上使用該屬性都可以得到一個(gè)固定的縱橫比。

.whatever {
  aspect-ratio: 16 / 9;
}
這對(duì)于嵌入的內(nèi)容、占位符或非HTML中的圖像（如 CSS 背景）特別有用。

4.  containment
containment是一個(gè)具有性能優(yōu)勢(shì)的 CSS 特性。該屬性讓開發(fā)人員可以告訴瀏覽器如何在屏幕上呈現(xiàn)內(nèi)容，并隔離 DOM 子樹。這反過來又使瀏覽器能夠延遲渲染大小、窗格和布局，以提高速度和效率。


containment 也是容器查詢的先決條件，下面會(huì)進(jìn)行介紹。

5. Priority Hints
在獲取內(nèi)容時(shí)，瀏覽器會(huì)盡可能地智能將阻止渲染的內(nèi)容獲得超高優(yōu)先級(jí)，然后，當(dāng)瀏覽器知道內(nèi)容在哪里時(shí)，它會(huì)為視口中的內(nèi)容賦予更高的優(yōu)先級(jí)。但是在某些情況下，瀏覽器沒有足夠的信息來做出正確的決定，比如兩個(gè)異步加載的腳本、兩個(gè)預(yù)加載的圖片、兩個(gè)iframe、兩個(gè)可見的圖像，其中一個(gè)更重要。



現(xiàn)在，我們可以使用最近在 Chrome 中支持的 Priority Hints 來更快地獲取圖片：


它是如何工作的呢？以上面中的代碼為例，fetch-priority 屬性可以讓我們?yōu)橥獠课募砑蛹虞d的優(yōu)先級(jí)：


6. size-adjust
size-adjust是一個(gè)用于網(wǎng)頁排版的實(shí)驗(yàn)性 CSS 屬性，通過減少累積布局偏移（CLS）來提高性能。







它是怎么做到的？字體有各種形狀和大小，即使是相同大小的字體也可能看起來完全不同。一種 16 號(hào)字體可能看起來比另一種大很多。這就是 size-adjusts 可以發(fā)揮作用的地方。使用 size-adjusts，用戶可以對(duì)字體大?。òū镜刈煮w）進(jìn)行視覺調(diào)整，以使它們?cè)谛螤钌峡雌饋砀咏胍鎿Q它的 Web 字體。由于 web 字體在下載后會(huì)替換本地字體，這減少了頁面的整體累積布局偏移。


7. SIMD
在過去的一年里，SIMD登陸了 Chromium 和 Firefox 的穩(wěn)定版本。SIMD 代表單指令多數(shù)據(jù)流，能夠復(fù)制多個(gè)操作數(shù)，并把它們打包在大型寄存器的一組指令集。它是一種并行運(yùn)行特定小操作的低等級(jí)方式，它是圖像、視頻和音頻進(jìn)程的 C++ 實(shí)現(xiàn)中的常見優(yōu)化。


直到現(xiàn)在，這些優(yōu)化在將這些程序編譯到 WebAssembly 時(shí)都丟失了?，F(xiàn)在，主流瀏覽器都已經(jīng)實(shí)現(xiàn)該功能，不過 Safari 尚不支持它。我們可以編譯 WebAssembly 兩次，創(chuàng)建一個(gè)使用 SIMD 的包和另一個(gè)不使用 SIMD 的包。這樣，Chrome 和 Firefox 將受益于更快的 WebAssembly，在 Safari 中也仍然可以正常工作。這就是在 Squoosh 上為加快圖像壓縮所做的工作。

8. Interaction to Next Paint
本節(jié)最后來看一個(gè)試驗(yàn)性的新性能指標(biāo)：Interaction to Next Paint（與下一次繪制的交互），它不僅考慮第一次交互，還考慮頁面上的所有交互。例如，它將測(cè)量用戶按下播放按鈕和看到暫停按鈕替換它之間的時(shí)間。



更具體地說，它記錄了從用戶交互到所有事件處理程序運(yùn)行后繪制下一幀的時(shí)間。該指標(biāo)還可以更好地捕捉用戶體驗(yàn)到的交互延遲，突出顯示 UI 響應(yīng)方式的任何意外的緩慢。

三、隱私和安全
1. CHIPS
我們的長(zhǎng)期項(xiàng)目之一是通過逐步淘汰第三方 cookie 和跨站點(diǎn)跟蹤來改善用戶隱私。其他瀏覽器已經(jīng)這樣做了，不過這產(chǎn)生了一些兼容性問題。因此，我們一直致力于開發(fā)有助于我們保持現(xiàn)有用戶友好功能的 API。


假設(shè)你的站點(diǎn)中嵌入了一個(gè)聊天應(yīng)用程序，它可以管理自己的登錄狀態(tài)。傳統(tǒng)上，這將通過允許嵌入式站點(diǎn)擁有自己的一組 cookie 來實(shí)現(xiàn)，而不管站點(diǎn)嵌入在何處。這就是即將消失的第三方 cookie 行為。這非常適合隱私，但它破壞了像這種嵌入式聊天這樣的合法有用的友好案例。如果聊天沒有自己的 cookie，它就不會(huì)記住用戶已登錄，并且每次都會(huì)退出。



那么我們能做些什么呢？如果有辦法保留cookie 的有用部分但刪除跨站點(diǎn)跟蹤部分怎么辦。為此，我們正在試驗(yàn)具有獨(dú)立分區(qū)狀態(tài)的 cookie。



這是設(shè)置 cookie 時(shí)傳遞的屬性，意味著該 cookie不會(huì)被阻止，但也不會(huì)被共享。


如果在聊天應(yīng)用程序嵌入 A 時(shí)設(shè)置了 cookie，那么它只有在站點(diǎn)嵌入 A 時(shí)才可用。當(dāng)聊天應(yīng)用程序嵌入到不同的站點(diǎn)時(shí)，它將有一個(gè)完全不同的 cookie jar，所以它不能用于跨站點(diǎn)跟蹤。但是，我們?nèi)匀豢梢员Ａ魰?huì)話。


2. Topics
廣告平臺(tái)目前使用跟蹤技術(shù)來投放相關(guān)廣告，但這些模式的大門已經(jīng)關(guān)閉。因此，我們正在研究如何讓平臺(tái)在不對(duì)隱私產(chǎn)生負(fù)面影響的情況下投放有意義的廣告。我們提出了一個(gè)實(shí)驗(yàn)性的Topics API。



它為頁面提供了瀏覽器認(rèn)為用戶感興趣的一些主題，這些主題可用于確定要展示的最佳廣告。只對(duì)外共享高級(jí)主題，而不是用戶的瀏覽歷史，并且不同站點(diǎn)為同一用戶獲取不同的主題，這使得它們作為跨站點(diǎn)標(biāo)識(shí)符并不是特別有用。


3.  User-Agent Client Hints
我們正在與其他瀏覽器一起采取措施減少 User Agent 字符串中自動(dòng)共享的數(shù)據(jù)量，這構(gòu)建用戶自定義體驗(yàn)非常重要。但使用 User Agent字符串來制定樣式?jīng)Q策或有條件地提供不同的內(nèi)容通常不是一個(gè)好主意。話雖如此，有時(shí)對(duì)于諸如 polyfills 或解決特別討厭的錯(cuò)誤之類的東西是必要的。


不使用 User Agent 字符串，而是查看 User-Agent Client Hints API，目前基于 Chromium 的瀏覽器支持該 API：


4. WebAuth
密碼是不是管理用戶帳戶的最安全方法呢？盡管我們還不是完全沒有密碼的世界，但有一些新興方法可以為密碼管理器提供更好的支持，從而使用戶體驗(yàn)無縫且更安全。


我們正在開發(fā) WebAuth 中的密碼，并作為 FIDO 聯(lián)盟的一部分進(jìn)行開發(fā)。這將允許注冊(cè)的憑據(jù)在 Android 設(shè)備之間同步，因此不必總是輸入密碼。要跨設(shè)備登錄，可以通過掃描二維碼將手機(jī)用作安全密鑰。


四、Web app 能力
1. Media Session API
我們希望 Web 具有類似 APP 的功能，以便可以創(chuàng)建豐富的跨平臺(tái)體驗(yàn)。例如，桌面和移動(dòng)設(shè)備上的大多數(shù)操作系統(tǒng)都具有某種媒體集成，它們會(huì)告訴我們正在播放的內(nèi)容，并提供對(duì)暫停、跳過和搜索的控制。


在某些情況下，這些控件出現(xiàn)在不同的設(shè)備上。從手機(jī)播放的歌曲，可以在手表上顯示媒體控件。Media Session API 可以讓我們通過 Web 完成所有這些操作，顯示 Windows、Mac OS、Android 和 iOS 上的媒體控件并對(duì)其做出反應(yīng)，包括智能手表等相關(guān)設(shè)備。


截至今年，瀏覽器支持非常好。


2. Window Controls Overlay
Window Controls Overlay 是一個(gè)操作系統(tǒng)的集成功能，這個(gè)功能要新得多。它目前是 Chromium 獨(dú)有的功能，但對(duì)于已安裝的 app 來說，它是一個(gè)不錯(cuò)的漸進(jìn)增強(qiáng)功能。


當(dāng)你在桌面上安裝 Web app 時(shí)，它會(huì)在一個(gè)窗口中打開，類似于這樣。


但是 Chrome 99 中的一項(xiàng)新功能可以使它更像這樣：


看起來可能很糟糕。但這允許我們將Web 內(nèi)容放在中間的那個(gè)區(qū)域，就像這樣：


可以使用 Web App Manifest 中的選項(xiàng)激活此功能，然后，我們將獲得 CSS 環(huán)境變量和一個(gè) API，以告訴所有窗口控件的位置，以便可以在它們周圍放置元素。

3. Navigation API
為了控制導(dǎo)航，瀏覽器有一些 API，比如 history.pushState 和 popstate事件來處理會(huì)話歷史。


我們對(duì)其進(jìn)行了重新設(shè)計(jì)，并將其稱為 Navigation API。這為我們提供了同源 session history 的當(dāng)前 Windows 視圖，除非我們攔截導(dǎo)航，這意味著不需要依賴鏈接上的點(diǎn)擊事件。這將使管理重新加載和遍歷 Web app 之間的狀態(tài)變得更加容易。


它現(xiàn)在正在 Chrome 中進(jìn)行原始試驗(yàn)，很快就會(huì)穩(wěn)定下來。







4. PageTransition API
PageTransition API 是一個(gè)使用 CSS 動(dòng)畫等熟悉的概念來簡(jiǎn)化在頁面和頁面狀態(tài)之間創(chuàng)建豐富動(dòng)畫轉(zhuǎn)換的 API。使用該 API 可以在狀態(tài)之間獲得平滑的自定義轉(zhuǎn)換。


5. Web App color scheme
Web App color scheme 是對(duì) Web App Manifest 的補(bǔ)充，它可以讓我們?yōu)闇\色和深色主題提供不同的顏色。


這類似于配色方案樣式，但它更適合網(wǎng)站的配色方案。它適用于 PWA 界面。這是一個(gè)看似很小的補(bǔ)充，但它對(duì)用戶體驗(yàn)產(chǎn)生了很大的影響。該功能目前正在 Chromium 中進(jìn)行原始試驗(yàn)。

6. Eyedropper API
Eyedropper API 是一種輸入（input）類型，是用于選擇顏色值的吸管。


目前僅在桌面端的 Chromium 中支持，因?yàn)樗且粋€(gè)相當(dāng)具體的桌面交互。通過快速的 API 調(diào)用就可以在用戶交互后激活吸管，然后用戶可以單擊某處并將捕獲顏色發(fā)送回 Web 應(yīng)用程序。它甚至可以在瀏覽器之外捕捉顏色，使其成為完全類似于應(yīng)用程序的體驗(yàn)。


7. Virtual Keyboard API
平板電腦或手機(jī)等設(shè)備通常具有用于輸入文本的虛擬鍵盤。與物理鍵盤不同，虛擬鍵盤會(huì)根據(jù)用戶的操作和需求出現(xiàn)和消失。


使用 Virtual Keyboard API，用戶可以通過 JavaScript 以編程方式訪問虛擬鍵盤，將有關(guān)鍵盤的信息傳遞到 CSS及其環(huán)境變量中，并為其設(shè)置樣式，并提供確定是否應(yīng)顯示虛擬鍵盤的策略。


五、原生功能
1. 結(jié)構(gòu)化克隆
可以使用 structuredClone 輕松實(shí)現(xiàn) JavaScript 值的深拷貝。它目前適用于所有主流瀏覽器。


它不僅更干凈，還可以克隆更多的東西，比如 blob、圖像位圖、類型化數(shù)組。它甚至可以克隆具有循環(huán)引用的對(duì)象結(jié)構(gòu)。

const clone = structuredClone(obj)
這不是 JavaScript 中的功能，它來自 HTML 規(guī)范。但它也在 Node.js 和 Deno 中實(shí)現(xiàn)。

2. createimageBitmap
下面來介紹如何將圖像 blob 轉(zhuǎn)換為可以在 Canvas 中顯示的內(nèi)容。使用以下方式就很容易導(dǎo)致內(nèi)存泄漏：


但是現(xiàn)在所有瀏覽器都支持 createimageBitmap API：


使用它，上面的代碼就變成了這樣：


不僅如此，我們還可以更好地控制圖像的加載方式。它對(duì)于為 2D canvas 和 WebGL 加載紋理非常有用。


3. JavaScript 功能

（1）頂層等待
現(xiàn)在可以像這樣在 JavaScript 模塊的頂層使用 await：


（2）私有屬性和方法
類現(xiàn)在可以擁有私有屬性和私有方法：


只要以#開頭的屬性和方法，就只有類內(nèi)部的代碼可以訪問它。

（3）array.at
array.at 方法可以通過索引從數(shù)組中獲取一個(gè)元素，如果傳入的值為負(fù)數(shù)，就會(huì)從元素后邊開始查找：


該方法也適用于字符串和類型化數(shù)組。所有這些現(xiàn)在都是跨瀏覽器的。

4. SharedArrayBuffer
SharedArrayBuffer 也是跨瀏覽器的。它 允許在頁面和 workers 之間共享內(nèi)存，內(nèi)存共享對(duì)于使用 WebAssembly 的多個(gè)線程來說非常重要，因?yàn)樗试S從 C++ 和 Rust 等移植代碼，而性能損失最小。!

該功能在2018年出現(xiàn)了一些非常糟糕的 CPU 錯(cuò)誤，瀏覽器出于安全原因不得不取消此功能。從那時(shí)起，瀏覽器一直在合作開發(fā)一種稱為跨域隔離的功能，這大大減少了這些 CPU 錯(cuò)誤的影響。所以現(xiàn)在，該功能已在所有引擎和平臺(tái)上安全恢復(fù)。

5. URLPattern
URLPattern 允許我們根據(jù)模式驗(yàn)證 URL，并提取部分。該功能去年年底在 Chromium 瀏覽器中發(fā)布。它還沒有出現(xiàn)在其他瀏覽器中，但是有一個(gè) polyfill，讓我們現(xiàn)在可以跨瀏覽器使用它。


6. WebCodecs API
WebCodecs API 實(shí)際上是一整套 API，可以對(duì)圖像和視頻解碼和圖像編碼進(jìn)行低級(jí)控制，從將幀從動(dòng)畫 GIF 中拉出，到對(duì) WebGL 生成的場(chǎng)景進(jìn)行編碼，再到 H.264 視頻，所有這些瀏覽器內(nèi)。


多年來，瀏覽器已經(jīng)內(nèi)置了圖像和視頻編解碼器，但這個(gè) API 讓我們可以對(duì)它們進(jìn)行低級(jí)控制。這是 Chromium 領(lǐng)先的功能，期待未來有更多的跨引擎支持。


7. CSS 功能
（1）級(jí)聯(lián)層
有時(shí)我們添加的選擇器只是為了打敗另一條規(guī)則的特異性，級(jí)聯(lián)層就解決了這個(gè)問題。



我們可以將導(dǎo)入的樣式放入圖層中：


也可以使用這些圖層塊對(duì)樣式進(jìn)行分組：


現(xiàn)在，默認(rèn)情況下，一個(gè)接一個(gè)出現(xiàn)的圖層可以覆蓋之前圖層的所有樣式，而不管選擇器的特異性（權(quán)重）如何。我們也可以預(yù)先定義圖層的順序。層中的樣式比層外的樣式具有更低的特異性，除非樣式被標(biāo)記為 !important。執(zhí)行此操作時(shí)，這些樣式會(huì)以相反的圖層順序應(yīng)用它。


（2）:has()
:has() 是 CSS 選擇的強(qiáng)大工具，可以用來檢查父級(jí)在其范圍內(nèi)的任何屬性，它被稱為父選擇器，用來檢查父級(jí)中是否包含某個(gè)子元素。



例如，使用

figure:has(figcaption) 時(shí)，figure 如何包含figcaption元素，就可以為子元素、父元素或者其他元素來設(shè)置樣式。

（3）容器查詢
我們可以使用媒體查詢創(chuàng)建響應(yīng)式設(shè)計(jì)，根據(jù)瀏覽器窗口的寬度更改應(yīng)用哪些樣式。但更寬的瀏覽器窗口并不總是意味著更寬的組件。使用媒體查詢來滿足這一點(diǎn)就很困難。容器查詢可以根據(jù)任何父容器的寬度、高度、樣式或狀態(tài)應(yīng)用樣式來解決這個(gè)問題，從而創(chuàng)建真正基于組件的響應(yīng)式界面。


使用容器查詢，每個(gè)組件都擁有自己的響應(yīng)信息，并且無論它位于 UI 中的哪個(gè)位置，都會(huì)做出相應(yīng)的響應(yīng)。

容器查詢的另一個(gè)很酷的事情是命名容器。如果有一個(gè)嵌套在一個(gè)父級(jí)中的子級(jí)，但它需要查詢另一個(gè)父級(jí)，就可以創(chuàng)建針對(duì)這種確切情況的容器規(guī)則。

六、總結(jié)
一年來，Web 已經(jīng)走過了漫長(zhǎng)的道路。我們一直在與瀏覽器供應(yīng)商會(huì)面并開展合作，以通過一項(xiàng)名為 Interop 2022 的計(jì)劃確保開發(fā)者的 Web 開發(fā)體驗(yàn)更加出色。我們的目標(biāo)是推出一些最需要的開發(fā)人員功能，并解決了一些最令人惱火的兼容性錯(cuò)誤。

2022 年，我們的目標(biāo)是專注于這 15 個(gè)關(guān)鍵領(lǐng)域，以確保行為在瀏覽器之間完全可互操作。


最終，我們希望開發(fā)者能夠在 Web 上構(gòu)建出色的體驗(yàn)，互操作性或?yàn)g覽器支持不應(yīng)成為障礙。有很多創(chuàng)新即將到來！

作者：CUGGZ



歡迎關(guān)注微信公眾號(hào) ：前端晚間課

更多文章，收錄于小程序-互聯(lián)網(wǎng)小兵