content-visibility

可用性受限

此功能不是基线功能，因为它在一些最广泛使用的浏览器中不起作用。

content-visibility CSS 属性控制元素是否渲染其内容，以及强制执行一组强大的包含规则，允许用户代理在需要之前省略大量布局和渲染工作。它使用户代理能够跳过元素的渲染工作（包括布局和绘制），直到它被需要——这使得初始页面加载速度更快。

注意：当元素的渲染工作开始或停止被跳过时，在设置了content-visibility: auto的任何元素上都会触发 contentvisibilityautostatechange 事件。这为应用程序代码提供了一种方便的方法来启动或停止渲染过程（例如，在 <canvas> 上绘制），从而节省处理能力。

试一试

语法

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

元素跳过其内容。跳过的内容不得对用户代理功能（如页面内查找、选项卡顺序导航等）可用，也不得可选择或可聚焦。这类似于为内容设置display: none。

auto

元素打开布局包含、样式包含和绘制包含。如果元素与用户无关，它也会跳过其内容。与hidden不同的是，跳过的内容仍然必须对用户代理功能（如页面内查找、选项卡顺序导航等）正常可用，并且必须像正常一样可聚焦和可选择。

描述

动画和转换 content-visibility

支持的浏览器 使用 离散动画类型 的变体来动画/转换content-visibility。

离散动画通常意味着属性将在动画进行到一半时在两个值之间切换。但是，在content-visibility的情况下，浏览器将在整个动画持续时间内在两个值之间切换以显示动画内容。例如

  • 当将content-visibility从hidden动画到visible时，该值将在动画持续时间的0%处切换到visible，以便在整个动画过程中可见。
  • 当将content-visibility从visible动画到hidden时，该值将在动画持续时间的100%处切换到hidden，以便在整个动画过程中可见。

此行为对于创建入口/退出动画非常有用，例如，您希望使用content-visibility: hidden从 DOM 中删除某些内容，但您希望有一个平滑的过渡（例如淡出），而不是立即消失。

当使用 CSS 过渡 对content-visibility进行动画处理时，需要在content-visibility上设置 transition-behavior: allow-discrete。这实际上启用了content-visibility过渡。

注意：当转换元素的content-visibility值时，您无需像@starting-style块中那样为转换属性提供一组起始值，就像转换display时一样。这是因为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超出视口时，内容的绘制将被跳过，直到该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的默认尺寸。在渲染一个section之后，即使它被滚动出视口，它也将保留其渲染的固有尺寸。

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

结果

动画content-visibility

在此示例中，我们有一个<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;以隐藏其内容。然后，我们设置@keyframe动画并将它们附加到类以显示和隐藏<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: 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>，以便在它在显示和隐藏状态之间切换时应用动画。

js
const divElem = document.querySelector("div");
const htmlElem = document.querySelector(":root");

htmlElem.addEventListener("click", showHide);
document.addEventListener("keydown", showHide);

function showHide() {
  if (divElem.classList[0] === "show") {
    divElem.classList.remove("show");
    divElem.classList.add("hide");
  } else {
    divElem.classList.remove("hide");
    divElem.classList.add("show");
  }
}

结果

渲染结果如下所示

规范

规范
CSS Containment模块级别2
# content-visibility

浏览器兼容性

BCD表格仅在浏览器中加载

另请参阅