1. Web
  2. CSS
  3. content-visibility

content-visibility

Baseline 2024 *
新推出

自 2024 年 9 月起，此功能已可在最新裝置和瀏覽器版本上使用。此功能可能無法在舊裝置或瀏覽器上使用。

* 此特性的某些部分可能存在不同級別的支援。

content-visibility CSS 屬性控制元素是否渲染其內容，並強制執行一組嚴格的包含策略，允許使用者代理在內容需要時才執行大量的佈局和渲染工作。它允許使用者代理跳過元素的渲染工作（包括佈局和繪製），直到需要時才執行——這使得初始頁面載入速度更快。

注意：當設定了 content-visibility: auto 的元素的渲染工作開始或停止跳過時，contentvisibilityautostatechange 事件會在該元素上觸發。這為應用程式程式碼在不需要時開始或停止渲染過程（例如，在 <canvas> 上繪圖）提供了一種便捷的方式，從而節省處理能力。

試一試

content-visibility: visible;

content-visibility: hidden;

<section class="default-example" id="default-example">
  <div class="container" id="example-element">
    <div class="child">
      <span>This is an inner 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;
}

語法

css
/* Keyword values */
content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

/* Global values */
content-visibility: inherit;
content-visibility: initial;
content-visibility: revert;
content-visibility: revert-layer;
content-visibility: unset;

值

visible

無效果。元素的內容按正常方式佈局和渲染。這是預設值。

hidden

元素跳過其內容。跳過的內容不得被使用者代理功能（例如頁面查詢、Tab 鍵順序導航等）訪問，也不得被選中或聚焦。這類似於為內容設定 display: none。

auto

元素啟用佈局包含、樣式包含和繪製包含。如果元素與使用者無關，它還會跳過其內容。與 hidden 不同，跳過的內容必須仍可正常用於使用者代理功能，例如頁面查詢、Tab 鍵順序導航等，並且必須可正常聚焦和選擇。

描述

content-visibility 的動畫和過渡

支援的瀏覽器使用 離散動畫型別 的變體來動畫/過渡 content-visibility。

離散動畫通常意味著屬性將在動畫進行到 50% 時在兩個值之間翻轉。然而，對於 content-visibility，瀏覽器將在兩個值之間翻轉，以在整個動畫持續時間內顯示動畫內容。例如：

  • 當從 hidden 到 visible 動畫 content-visibility 時，該值將在動畫持續時間的 0% 翻轉為 visible，使其在整個過程中可見。
  • 當從 visible 到 hidden 動畫 content-visibility 時，該值將在動畫持續時間的 100% 翻轉為 hidden，使其在整個過程中可見。

此行為對於建立進入/退出動畫很有用，例如，您希望使用 content-visibility: hidden 從 DOM 中刪除某些內容，但您希望實現平滑過渡（例如淡出）而不是立即消失。

當使用 CSS 過渡 對 content-visibility 進行動畫處理時，需要在 content-visibility 上設定 transition-behavior: allow-discrete。這有效地啟用了 content-visibility 過渡。

注意：在過渡元素的 content-visibility 值時，您不需要像 過渡 display 那樣，使用 @starting-style 塊為過渡屬性提供一組起始值。這是因為 content-visibility 不像 display 那樣將元素從 DOM 中隱藏：它只是跳過渲染元素的內容。

正式定義

初始值visible
應用於可應用尺寸限制的元素
繼承性否
計算值同指定值
動畫型別離散行為，除非動畫到或從 hidden，否則在整個持續時間內都可見

正式語法

content-visibility = 
  visible  |
  auto     |
  hidden

無障礙

具有 content-visibility: auto 屬性的螢幕外內容仍保留在文件物件模型和可訪問性樹中。這允許在不負面影響可訪問性的情況下透過 content-visibility: auto 提高頁面效能。

由於不渲染螢幕外內容的樣式，使用 display: none 或 visibility: hidden 故意隱藏的元素仍將出現在可訪問性樹中。如果您不希望元素出現在可訪問性樹中，請使用 aria-hidden="true"。

示例

使用 auto 降低長頁面的渲染成本

以下示例展示了使用 content-visibility: auto 跳過螢幕外部分的繪製和渲染。當 section 位於視口之外時，內容的繪製將被跳過，直到該部分接近視口，這有助於頁面載入和互動。

HTML

html
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<section>
  <!-- Content for each section… -->
</section>
<!-- … -->

CSS

contain-intrinsic-size 屬性為每個 section 元素的高度和寬度添加了一個 500px 的預設大小。渲染後，即使滾動到視口之外，它也將保留其渲染的固有大小。

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

使用 hidden 管理可見性

以下示例展示瞭如何使用 JavaScript 管理內容可見性。使用 content-visibility: hidden; 而不是 display: none; 可以保留內容隱藏時的渲染狀態，並且渲染速度更快。

HTML

html
<div class="hidden">
  <button class="toggle">Show</button>
  <p>
    This content is initially hidden and can be shown by clicking the button.
  </p>
</div>
<div class="visible">
  <button class="toggle">Hide</button>
  <p>
    This content is initially visible and can be hidden by clicking the button.
  </p>
</div>

CSS

content-visibility 屬性設定在具有 visible 和 hidden 類元素的直接子段落上。在我們的示例中，我們可以根據父 div 元素的 CSS 類來顯示和隱藏段落中的內容。

包含 contain-intrinsic-size 屬性以表示內容大小。這有助於在內容隱藏時減少佈局偏移。

css
p {
  contain-intrinsic-size: 0 1.1em;
  border: dotted 2px;
}

.hidden > p {
  content-visibility: hidden;
}

.visible > p {
  content-visibility: visible;
}

JavaScript

js
const handleClick = (event) => {
  const button = event.target;
  const div = button.parentElement;
  button.textContent = div.classList.contains("visible") ? "Show" : "Hide";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

document.querySelectorAll("button.toggle").forEach((button) => {
  button.addEventListener("click", handleClick);
});

結果

內容可見性動畫

在此示例中，我們有一個 <div> 元素，其內容可以透過點選或按下任意鍵在顯示和隱藏之間切換。

HTML

html
<p>
  Click anywhere on the screen or press any key to toggle the
  <code>&lt;div&gt;</code> content between hidden and showing.
</p>

<div>
  This is a <code>&lt;div&gt;</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，以便在內容顯示/隱藏時獲得平滑的動畫效果。

css
div {
  font-size: 1.6rem;
  padding: 20px;
  border: 3px solid red;
  border-radius: 20px;
  width: 480px;

  content-visibility: hidden;
}

/* Animation classes */

.show {
  animation: show 0.7s ease-in forwards;
}

.hide {
  animation: hide 0.7s ease-out forwards;
}

/* Animation keyframes */

@keyframes show {
  0% {
    content-visibility: hidden;
    color: transparent;
  }

  100% {
    content-visibility: visible;
    color: black;
  }
}

@keyframes hide {
  0% {
    content-visibility: visible;
    color: black;
  }

  100% {
    content-visibility: hidden;
    color: transparent;
  }
}

JavaScript

最後，我們使用 JavaScript 將 .show 和 .hide 類適當地應用於 <div>，以便在它在顯示和隱藏狀態之間切換時應用動畫。

js
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");
  }
}

結果

渲染結果如下所示：

規範

規範
CSS 包含模組第 2 級
# content-visibility

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容問題
© . Content available under a Creative Commons license.