View in EnglishAlways switch to English

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.

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

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

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>  <button>显示</button>  <p>此内容初始时被隐藏，可点击按钮显示。</p></div><div>  <button>隐藏</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

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