このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
content-visibility
Baseline 2024 *Newly available
Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
content-visibility はCSS のプロパティで、要素がそのコンテンツをレンダリングするかどうかを制御するとともに、強力な抑制のセットを強制することで、必要になるまでユーザーエージェントが大量のレイアウトとレンダリングの作業を省略できるようにします。基本的に、ユーザーエージェントは、レイアウトやペイントなどの要素のレンダリング作業を必要になるまでスキップできるため、最初のページの読み込みがはるかに高速になります。
メモ:contentvisibilityautostatechange イベントは、content-visibility: auto が設定されている要素で、そのレンダリング作業が始まるか、またはスキップされなくなったときに発行されます。これは、アプリのコードがレンダリング処理（例えば<canvas> に描画する）を不要なときに開始または停止する便利な方法を提供し、処理能力を節約します。
試してみましょう
content-visibility: visible;content-visibility: hidden;<section> <div> <div> <span>これは内側の div です</span> </div> </div></section>.container { width: 140px; height: 140px; border: 3px solid rgb(64, 28, 163); background-color: rgb(135, 136, 184); display: flex; align-items: center; justify-content: center;}.child { border: 3px solid rgb(64, 28, 163); background-color: wheat; color: black; width: 80%; height: 80%; display: flex; align-items: center; justify-content: center;}構文
/* キーワード値 */content-visibility: visible;content-visibility: hidden;content-visibility: auto;/* グローバル値 */content-visibility: inherit;content-visibility: initial;content-visibility: revert;content-visibility: revert-layer;content-visibility: unset;値
visible効果なし。要素のコンテンツは通常通りにレイアウトおよび描画されます。
hidden要素はそのコンテンツを読み飛ばします。読み飛ばされたコンテンツは、ページ内検索やタブ順序ナビゲーションなどのユーザーエージェント機能でアクセス可能になることはなく、また選択可能やフォーカス可能にもなりません。これは、コンテンツに
display: noneを設定することに似ています。autoこの要素の、レイアウト抑制、スタイル抑制、描画抑制をオンにします。要素がユーザーに関連していない場合、その内容の読み飛ばしも行われます。 hidden の場合とは異なり、読み飛ばされたコンテンツは、ページ内検索やタブ順序ナビゲーションなどのユーザーエージェント機能で通常通り利用可能となり、通常通りフォーカスや選択が可能になります。
解説
content-visibility のアニメーションとトランジション
対応しているブラウザーはcontent-visibility を離散アニメーション型のバリエーションでアニメーション/トランジションさせます。
離散アニメーションは一般的に、アニメーションの 50% でプロパティが 2 つの値の間を反転することを意味しています。しかし、content-visibility の場合、ブラウザーはアニメーションの間中、 2 つの値を反転させてアニメーションコンテンツを表示させます。例えば、このようになります。
content-visibilityをhiddenからvisibleにアニメーションさせる場合、アニメーション時間の0%でvisibleに値が切り替わるので、その間ずっと表示されます。content-visibilityをvisibleからhiddenにアニメーションさせる場合、アニメーション時間の100%でhiddenに値が反転するので、その間ずっと表示されます。
この動作は、望みどおりに出現・消滅アニメーションを生成する場合、例えば、content-visibility: hidden で DOM から何かコンテンツを除去したいが、すぐに消えてしまうのではなく、（フェードアウトのように）スムーズに遷移させたい場合に有益です。
content-visibility をCSS トランジションでアニメーションさせる場合、content-visibility にtransition-behavior: allow-discrete を設定する必要があります。これにより、content-visibility のトランジションが有効になります。
メモ:要素のcontent-visibility 値をトランジションさせるとき、display をトランジションさせるときのように、@starting-style ブロックを使用して、トランジションするプロパティの開始値の集合を提供する必要はありません。これはcontent-visibility がdisplay のように要素を DOM から隠すのではなく、要素のコンテンツのレンダリングをスキップするだけだからです。
公式定義
| 初期値 | visible |
|---|---|
| 適用対象 | elements for which size containment can apply |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | Discrete behavior except when animating to or fromhidden is visible for the entire duration |
形式文法
content-visibility =
visible|
auto|
hidden
アクセシビリティ
content-visibility: auto プロパティ内にあるオフスクリーンコンテンツは、ドキュメントオブジェクトモデルとアクセシビリティツリー内に残ります。これにより、アクセシビリティに悪影響を与えることなく、content-visibility: auto でページのパフォーマンスを改善することができます。
オフスクリーンコンテンツのスタイルはレンダリングされないので、display: none やvisibility: hidden で意図的に非表示にした要素はアクセシビリティツリーに現れます。要素をアクセシビリティツリーに現れたくない場合は、aria-hidden="true" を使用してください。
例
auto を使用して長いページのレンダリングコストを削減
次の例では、content-visibility: auto を使用して、オフスクリーンセクションの描画をスキップしています。セクション`がビューポートの外にある場合、セクションがビューポートに近づくまでコンテンツの描画はスキップされます。この章はページの読み込みと対話することの両方に役立ちます。
HTML
<section> <!-- 各節の内容… --></section><section> <!-- 各節の内容… --></section><section> <!-- 各節の内容… --></section><!-- … -->CSS
contain-intrinsic-size プロパティは、それぞれのsection 要素の高さと幅に 500px の既定値を追加します。節がレンダリングされた後、ビューポートの外にスクロールされても、レンダリングされた内在サイズを保持します。
section { content-visibility: auto; contain-intrinsic-size: auto 500px;}hidden を使用して手動で可視性を管理
次の例では、JavaScript でコンテンツの可視性を管理する方法を示します。display: none; の代わりにcontent-visibility: hidden; を使用することで、非表示時のコンテンツの描画状態が保持され、描画が高速になります。
HTML
<div> <button>表示</button> <p> このコンテンツは初期状態では非表示になっており、ボタンをクリックすることで表示させることができます。 </p></div><div> <button>非表示</button> <p> このコンテンツは初期状態では表示されており、ボタンをクリックすることで非表示にすることができます。 </p></div>CSS
content-visibility プロパティは、visible クラスとhidden クラスを持つ要素の直接の子である段落に設定します。この例では、親 div 要素の CSS クラスに応じて、段落内のコンテンツを表示させたり非表示にしたりすることができます。
コンテンツのサイズを表すためにcontain-intrinsic-size プロパティを記載しています。これは、コンテンツを非表示にしたときのレイアウトのずれを縮小するのに役立ちます。
p { contain-intrinsic-size: 0 1.1em; border: dotted 2px;}.hidden > p { content-visibility: hidden;}.visible > p { content-visibility: visible;}JavaScript
const handleClick = (event) => { const button = event.target; const div = button.parentElement; button.textContent = div.classList.contains("visible") ? "表示" : "非表示"; div.classList.toggle("hidden"); div.classList.toggle("visible");};document.querySelectorAll("button.toggle").forEach((button) => { button.addEventListener("click", handleClick);});結果
content-visibility のアニメーション
この例では、<div> 要素があり、そのコンテンツはクリックや任意のキーを押すことで表示・非表示を切り替えることができます。
HTML
<p> Click anywhere on the screen or press any key to toggle the <code><div></code> content between hidden and showing.</p><div> This is a <code><div></code> element that animates between <code>content-visibility: hidden;</code>and <code>content-visibility: visible;</code>. We've also animated the text color to create a smooth animation effect.</div>CSS
CSS では、最初に<div> にcontent-visibility: hidden; を設定し、そのコンテンツを隠します。次に@keyframes アニメーションを設定し、<div> を表示させたり非表示にしたりするためのクラスに取り付けて、content-visibility とcolor をアニメーション化することで、コンテンツが表示/非表示になる滑らかなアニメーション効果が得られます。
div { font-size: 1.6rem; padding: 20px; border: 3px solid red; border-radius: 20px; width: 480px; content-visibility: hidden;}/* アニメーションクラス */.show { animation: show 0.7s ease-in forwards;}.hide { animation: hide 0.7s ease-out forwards;}/* アニメーションのキーフレーム */@keyframes show { 0% { content-visibility: hidden; color: rgb(0 0 0 / 0%); } 100% { content-visibility: visible; color: rgb(0 0 0 / 100%); }}@keyframes hide { 0% { content-visibility: visible; color: rgb(0 0 0 / 100%); } 100% { content-visibility: hidden; color: rgb(0 0 0 / 0%); }}JavaScript
最後に、JavaScript を使用して.show クラスと.hide クラスを<div> に適用し、表示状態と非表示状態の切り替えに応じてアニメーションを適用します。
const divElem = document.querySelector("div");const htmlElem = document.querySelector(":root");htmlElem.addEventListener("click", showHide);document.addEventListener("keydown", showHide);function showHide() { if (divElem.classList.contains("show")) { divElem.classList.remove("show"); divElem.classList.add("hide"); } else { divElem.classList.remove("hide"); divElem.classList.add("show"); }}結果
表示結果は次のようになります。
仕様書
| Specification |
|---|
| CSS Containment Module Level 2 # content-visibility |