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.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

CSS 属性 content-visibility 控制元素是否渲染其内容，以及施加一组强局限，由此允许用户代理有机会在不需要时省略大片的布局和渲染工作。此属性使用户代理得以在不需要时跳过元素的渲染工作（包括布局和绘制）——由此使页面的初始加载明显变快。

备注： 对于设置了 content-visibility: auto 的任意元素，在其渲染工作开始或不再被跳过时将触发 contentvisibilityautostatechange 事件。此事件为应用代码在不需要时开始或停止渲染过程（如在 <canvas> 上绘画）提供了便利，进而节约了处理能力。

语法

css
/* 关键词值 */
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

元素跳过其内容。被跳过的内容必须不可被例如页内查找和 tab 键顺序导航等用户代理特性访问，亦不可被选中或获得焦点。此值类似于为内容赋予 display: none。

auto

元素启用布局局限、样式局限和绘制局限。若元素不与用户相关，则元素还跳过其内容。与 hidden 不同的是，被跳过的内容必须仍可照常被例如页内查找和 tab 键顺序导航等用户代理特性访问，且必须照常可获得焦点或被选中。

形式定义

初始值visible
适用元素可应用尺寸局限的元素
是否是继承属性否
计算值as specified
动画类型Discrete behavior except when animating to or from hidden is visible for the entire duration

形式语法

content-visibility = 
  visible  |
  auto     |
  hidden

无障碍考虑

content-visibility: auto 属性中的屏外内容仍在文档对象模型和无障碍树中。由此允许在改善页面性能时不负面影响无障碍性。

因为屏外内容的样式不被渲染，被特意用 display: none 或 visibility: hidden 隐藏的元素仍将出现在无障碍树中。若不想让元素出现在无障碍树中，请用 aria-hidden="true"。

示例

使用 auto 减少长页面的渲染开销

下列示例展示了使用 content-visibility: auto 跳过屏外章节的绘制和渲染。当某个章节（section）在视口外时，其内容绘制被跳过，直至章节靠近视口，由此有助于页面加载和交互。

HTML

html
<section>
  <!-- 每节的内容…… -->
</section>
<section>
  <!-- 每节的内容…… -->
</section>
<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">显示</button>
  <p>此内容初始时被隐藏，可点击按钮显示。</p>
</div>
<div class="visible">
  <button class="toggle">隐藏</button>
  <p>此内容初始时可见，可点击按钮隐藏。</p>
</div>

CSS

在有 visible 和 hidden 类的元素的直系子元素段落上设置了 content-visibility 属性。在此示例中，可通过 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") ? "显示" : "隐藏";
  div.classList.toggle("hidden");
  div.classList.toggle("visible");
};

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

结果

规范

Specification
CSS Containment Module Level 2
# content-visibility

浏览器兼容性

BCD tables only load in the browser

参见