CSS 內容顯示屬性現已成為新版基準

發布日期:2024 年 10 月 30 日

2024 年初,「與下一個顯示主題互動 (INP) 做為 Core Web Vitals」指標的指標,有助提升轉譯效能。INP 的部分重點在於,在使用者與網頁互動「後」,瀏覽器需要多久的時間才能繪製下一個影格。維持網站的 INP 偏低,使用者就會覺得網站能盡可能快速且順暢地回應互動。

同樣重要的是,在網頁載入時,需要進行的轉譯作業,可能會延遲互動作業的開始時間。因此,您應該設法減少網頁生命週期中這個關鍵階段的工作量。CSS content-visibility 屬性是達成這項目標的一種方式,我們很高興在此宣布,這項屬性自 2024 年 9 月起已成為新基準

content-visibility 是 CSS 屬性,可指示使用者代理程式延遲元素的算繪,直到元素接近可視區域為止。對於含有許多 DOM 元素的網頁,這項做法可能會有所助益,因為這表示網頁的初始載入作業會啟動較少的轉譯工作。相反地,這項工作會在使用者需要查看之前執行。

以圖表代表網路結果的圖表
在我們的文章示範中,將 content-visibility: auto 套用至分塊內容區域,可使初始載入作業效能提升 7 倍。繼續閱讀以瞭解詳情。

如要為畫面外元素啟用這項最佳化功能,請在網站的 CSS 中為這些元素套用 content-visibility: auto 規則:

.render-me-later {
  content-visibility: auto;
}

content-visibility 會根據 CSS 容器中為 contain 屬性定義的部分行為運作。CSS 封存的目標是為 DOM 樹狀結構的部分提供隔離功能。這可讓轉譯作業的範圍限定在 DOM 樹狀結構的特定部分,因此只會針對 DOM 樹狀結構的子集無效化及重做版面配置。在應用此屬性以提升轉譯效能時,您必須對 contain 屬性的各種值以及如何有效使用這些值相當熟悉。

content-visibility: auto 套用至元素後,元素會自動採用 contain 屬性提供的部分屬性。結果是,受影響的元素一開始會以 0px 的高度進行轉譯,實際上表示這些元素「不會」轉譯。

不過,這會產生一些副作用。舉例來說,當使用者捲動至先前未算繪的元素時,網頁的捲軸可能會移位並改變高度,以便在使用者看到這些元素時,讓元素即時算繪。如要避免發生這種情況,請套用 contain-intrinsic-size 屬性

由於 content-visibility 最近才提供基準新資源,因此對於瀏覽器尚未更新為使用新屬性的使用者,您可能有一些疑慮。content-visibility 是 CSS 屬性,因此您不必過度擔心!支援的瀏覽器會使用,不支援的則不會。也就是說,除了支援 content-visibility 的瀏覽器可帶來的效能優勢之外,網頁的運作方式也幾乎相同。

content-visibility 具有「附加性」優點,而如果可用於減少網頁載入期間的轉譯工作量,建議您使用這項功能,確保網頁能在最需要時獲得最多的處理能力。這項實用功能現已納入 Baseline 新功能,歡迎您盡情使用,讓使用者在必要時能享有這項功能避免的轉譯工作。