content-visibility: auto 怎麼用：加上 contain-intrinsic-size 避免版面跳動
長文章、商品清單或儀表板有很多離開視窗的區塊時，content-visibility: auto 可以讓瀏覽器延後部分渲染工作。不過直接套上去後，若區塊沒有可用的預估尺寸，捲動時可能出現明顯的版面位移。
實務原則是：只套用在可獨立呈現、畫面外的大型重複區塊，並搭配 contain-intrinsic-size 保留合理空間。 它不是全站通用的效能開關，也不能取代圖片尺寸、資料載入狀態或真正的效能量測。
為什麼要同時指定預估尺寸
.feed-item { content-visibility: auto; contain-intrinsic-size: auto 28rem;}auto 28rem 的意思是：尚未正常渲染過的項目先以 28rem 高度參與版面；一旦瀏覽器曾完整算出該項目的尺寸，之後可記住實際 intrinsic size。這能減少畫面外內容第一次進入視窗時把後方內容推開的幅度。
不要照抄數字。先在目標 viewport 實測卡片高度，對高度差異大的項目採用較保守的預估，或改為讓圖片與文字區各自保留尺寸。若你的清單在 grid 或多欄 layout 中，固定預估尺寸也可能改變排版，必須逐一測試。
auto 和 hidden 的語意不同
content-visibility: auto 在元素與使用者不相關時，可略過其內容渲染；該內容仍留在 DOM 與 accessibility tree，搜尋頁面文字、tab navigation 等 user-agent 功能仍可使用。
hidden 則不是 lazy rendering 的替代品。它讓內容跳過渲染，且不應被 user-agent 功能取得，效果更接近把內容從互動流程移除。不要用 hidden 來藏一個仍需要被鍵盤或搜尋找到的段落。
先量測，再決定是否保留
對一篇只有幾個區塊的頁面，加 containment 未必有實際收益，反而增加維護條件。先在 DevTools Performance 面板或實機上比較：初始 render、捲動時的 layout、以及 CLS。這和 Skeleton 預留資料載入空間的目標相近，但兩者解決的時間點不同；可參考 Skeleton 與 Shimmer 的版面穩定做法。
檢查時至少確認：
- 項目離開與回到視窗時，沒有可見跳動。
- Tab 鍵仍能到達原本可互動的內容。
- 搜尋頁面文字與錨點跳轉符合預期。
- 低階裝置與支援範圍外的瀏覽器仍有可接受的正常版面。
content-visibility: auto 適合當你已找到「大量畫面外、可獨立呈現內容」這個瓶頸後的局部優化；先保留尺寸，才能不把渲染成本轉成讀者看得見的版面跳動。
參考資料：
回報錯字、失效連結，或告訴我你想看的延伸主題。