有關內容可見性的更多信息

CSS 的content-visibility屬性：性能提升與可訪問性挑戰

2020 年8 月，CSS 的content-visibility屬性開始在Chrome 瀏覽器中使用，Una Kravets 和Vladimir Levin 曾撰文介紹過它。為了充分發揮其性能優勢，需要將其與contain-intrinsic-size屬性結合使用，後者需要對頁面中大塊內容的高度進行預估。這其中最奇怪的部分在於，你需要對這些大塊內容的高度進行一個近似的猜測。

我之前曾提出疑問：僅僅猜測高度？如果猜測錯誤會怎樣？是否會影響性能？如果大屏幕和小屏幕之間的差異很大，是否（或應該）在不同的視口更改此值？

Jake Archibald 和Das Surma 最近製作了一個視頻，對這些問題進行了澄清。在視頻的7 分30 秒左右，你可以看到這有多麼令人困惑。 Jake 使用了一個大型HTML 規範頁面作為演示，並為大塊HTML 內容添加了包裝器，並應用了以下代碼：

 section {
  content-visibility: auto; /* 延遲繪製*/
  contain-intrinsic-size: 1px 5000px; /* 內容大小的猜測，寬度無關緊要*/
}

顯然， 5000px不是元素的高度，而是該元素內容的大小。這很重要，因為它會將父元素的高度增加到這個數值，除非父元素通過自身的高度屬性覆蓋它。其神奇之處在於瀏覽器只會繪製第一個section（視口高度很可能小於5000px），並推遲其餘部分的繪製。這有點像延遲加載，但作用於所有內容，而不僅僅是媒體。它假設下一個section 高度為5000px，但一旦其頂部可見，它就會被實際繪製，並確定正確的高度。因此，如果你的頁面只是大型塊狀內容堆疊在一起，使用一個非常大的數字應該可以正常工作。如果你的網站比這更複雜，那就自求多福吧。

這是一個很好的視頻，你應該看看：視頻鏈接

這又是另一個需要你向瀏覽器提供網站信息以便它能夠提升性能的例子。瀏覽器本身可以找出這些信息，但只有在執行了具有性能成本的操作之後才能做到。因此，你必須提前告訴它，從而避免某些類型的額外工作。對於響應式圖片，如果我們使用srcset屬性提供圖像並提前告訴瀏覽器它們的大小，包括一個包含CSS 行為信息的sizes屬性，它就可以提前進行計算，只下載最佳圖像。同樣，對於CSS 中的will-change屬性，我們可以在提前告訴瀏覽器我們將進行移動操作，以便它能夠進行預優化，否則它無法做到這一點。這是可以理解的，但有點令人厭煩。這就像我們需要一個stuff-you-need-to-know.manifest文件在瀏覽器執行任何其他操作之前提供給它——但這將是一個額外的請求！

可訪問性問題也很重要。 Steve Faulkner 對將content-visibility: auto應用於圖像和段落進行了測試：

內容在視覺上是隱藏的，但在JAWS 和NVDA 中，都會宣布隱藏的圖像，但元素的內容不會被宣布。這與圖像和段落元素的內容在瀏覽器輔助功能樹中的表示方式有關：圖像在輔助功能樹中以alt 文本作為輔助功能名稱顯示。段落元素的內容不在輔助功能樹中。

他指出，根據規範，以這種方式隱藏的內容不應提供給屏幕閱讀器。我可以理解這兩種情況，例如像display: none一樣隱藏所有內容，這意味著沒有任何內容在輔助功能樹中。或者，將所有內容都保留在輔助功能樹中。現在它處於一種中間狀態，你可能會在輔助功能樹中看到一堆孤立的圖像，除了它們的alt 文本之外沒有任何其他上下文。這是一個有趣的例子，說明新技術在推出時可能比你希望看到的更粗糙。

說到alt 文本，我們都知道當它們代表需要向無法看到它們的人描述的重要內容時，它們不應該是空的。 Dave 說它們應該像段落一樣：

我終於建立了最簡單的聯繫：alt 文本就像一個段落。文字圖片。我知道這很基本，但這有助於我理解如何編寫好的alt 文本以及我的代碼的源順序。

我不想在這裡過於負面！為設置具有content-visibility屬性的長滾動頁面而獲得的性能提升是巨大的，這太棒了。能夠用兩行代碼告訴瀏覽器哪些內容可以不繪製是很好的。

1. 我一直說“繪製”，但我不知道這是否真的是正確的術語，或者它是否意味著更具體的含義。規範中提到諸如“允許用戶代理在需要之前潛在地省略大量佈局和渲染工作”（強調我的）之類的內容。

以上是有關內容可見性的更多信息的詳細內容。更多資訊請關注PHP中文網其他相關文章！