2020年末ごろからで出てきた新しいプロパティ「content-visibility」をご紹介します。
2021年現在、chromeはもちろんのことEdgeとoperaには対応されています。

content-visibilityってなに？

content-visibilityはchromeの新しいプロパティです。
CSSの中でページの読込パフォーマンス向上のための最も影響があるプロパティだと
言われています。

このプロパティを設定しておくことでページ内に表示されるコンテンツが
ユーザーにとって必要になるまでスキップすることが可能です。

具体的にはレイアウトや画像などのレンダリングをスキップすることで、新規ユーザーでも
サイトの読み込みが格段に速くなります。

なおかつコンテンツとのインタラクション（相互反応）も速くなるためとっても優秀なプロパティです。
CSSで入れておいて損はないのでは？

content-visibilityの値

content-visibilityには以下の種類があります。

section {
   content-visibility: visible;
   content-visibility: hidden;
   content-visibility: auto;
   content-visibility: initial;
   content-visibility: unset;
}

それぞれを説明していきます。

◆visible

設定することとで、content-visibilityプロパティの効力は発揮されません。コンテンツは通常どおりにレイアウトおよびレンダリングされます。

◆hidden

指定したコンテンツをスキップします。
hiddenを設定することで、ページ内で検索されたりアクセスされたり
フォーカスされることが可能になってはいけません。
display: hidden;やvisuality:hidden;と似ています。

ただ、display:none;と異なるところはレンダリングにかけるコストが
異なることです。通常display:none;にすると、非表示にするためのレンダリングコストがかかります。
一方、content-visibility: hidden;にするとレンダリング状態を保持しながら要素を非表示にすることができるためかかるコストが削減できます。

◆auto

指定したコンテンツやレイアウト、スタイルを封じ込めます。
非表示というわけではなく、ページ内検索等でも検索できます。
もちろんフォーカスも可能です。
基本的にはこのautoを設定しておきましょう。

autoを使用することでランディングページや長くなってしまうページの
レンダリングコストを削減することができます。

◆initial

初期値に設定します。
PCとSPでCSS分けるときなどに使用する可能性が高いですね。

◆unset

設定を解除します。
こちらもPCとSPでCSS分けるときなどに使用する可能性が高いですね。

content-visibilityと一緒に設定したい「contain-intrinsic-size」

content-visibilityを設定する際に、「contain-intrinsic-size」を設定しておきましょう。

これは、レンダリングを行う際に指定したコンテンツの高さをあらかじめ予測させておく必要があります。
例えば、セクションタグに「content-visibility: auto;」を設定した場合にこのコンテンツの高さを指定しておきます。これは予測レベルでOkです。
指定した高さでコンテンツが切られるわけではありません。

具体的な指定方法としては以下となります。

section {
  content-visibility: auto;
  contain-intrinsic-size: 1000px;
}

こうすることでレンダリングされたコンテンツの代わりにプレースホルダーサイズとして機能することができるのです！

すごく便利なCSSプロパティですよね。
みなさんもぜひつかってみてくだい。

• blog,
• code,
• web