【CSS Modules】content-visibilityプロパティの使い方
content-visibilityプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
content-visibilityプロパティは、ウェブページの要素が持つコンテンツのレンダリング動作を制御し、ページの読み込み速度やスクロールパフォーマンスを向上させることを目的としたプロパティです。ブラウザに対し、特定の要素のコンテンツが表示されるべきかどうか、または表示される可能性がない場合にレンダリング作業をスキップしてもよいかどうかのヒントを与えます。
このプロパティには主に三つの値があります。visibleは、要素のコンテンツを通常通りにレンダリングし、表示します。hiddenは、要素のコンテンツはレンダリングせず非表示にしますが、レイアウト上は要素が存在するかのようにスペースを確保します。最も重要な値であるautoは、要素が現在のビューポート（表示領域）の外にある場合、ブラウザがその要素のコンテンツのレンダリングを完全にスキップすることを許可します。これにより、ユーザーが実際に見ていない部分の処理を減らし、CPUやGPUといったシステムリソースの消費を抑えることで、特に複雑な構造や大量のコンテンツを持つページにおいて、初期ロード時間を短縮し、スクロール時の応答性を大幅に改善する効果が期待できます。
content-visibility: autoが設定された要素がビューポート内にスクロールされてきた際には、ブラウザは直ちにコンテンツのレンダリングを開始し、ユーザーに表示します。しかし、このプロパティを使用する際には注意点があります。auto値が設定された要素は、レンダリングがスキップされている間、ブラウザはその内容物の本来のサイズ（高さや幅）を知ることができません。そのため、要素がビューポートに入ってきた際に急なレイアウトシフト（コンテンツの飛び跳ね）が発生し、ユーザーエクスペリエンスを損なう可能性があります。この問題を避けるため、通常はcontain-intrinsic-sizeプロパティと組み合わせて使用することが推奨されます。contain-intrinsic-sizeは、レンダリングをスキップしている要素に、あたかも内容物があるかのように仮のサイズを与えることで、レイアウトシフトを防ぎつつパフォーマンス向上を実現します。
構文(syntax)
1.target-element { 2 content-visibility: auto; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません