content-visibility

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used 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
适用元素elements for which size containment can apply
是否是继承属性否
计算值as specified
Animation typeDiscrete 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

参见