CSS: content-visibility プロパティ

1. このページの目的

CSS: content-visibility プロパティ を試す。

改善したい。

もう少しレンダリングに時間の掛かる処理を一番下に置きたい。

2. 疑問点

3. 仕様

4. 参考

5. デモ

HTML

<div class="demo">Box1
    <img src="animal_happa_tanuki.png">
</div>

<div class="demo">Box2
     <img src="animal_happa_tanuki.png">
</div>

(省略、Box5 まで同じ)

<div class="demo">Box6
    <img src="animal_happa_kitsune.png">
</div>

CSS

.demo {
  (省略)
  content-visibility: auto;
  contain-intrinsic-size: 300px;
  (省略)
}
Box1
Box2
Box3
Box4
Box5
Box6