摘要

contain 属性允许开发者声明当前元素和它的内容尽可能的独立于 DOM 树的其他部分。这使得浏览器在重新计算布局、样式、绘图或它们的组合的时候,只会影响到有限的 DOM 区域,而不是整个页面。

语法

/* 无布局包含*/
contain: none;

/* 布局包含 layout、style、paint 和 size*/
contain: strict;

/* 布局包含layout、style 和 paint */
contain: content;

/* 布局包含 size */
contain: size;

/* 布局包含 layout */
contain: layout;

/* 布局包含 style */
contain: style;

/* 布局包含 paint */
contain: paint;

这个属性常用在包含大量独立的 widgets 小部件的页面,contain 属性可以防止某个小部件的 CSS 规则改变影响页面上的其他东西。

初始值none
适用元素all elements
是否是继承属性
适用媒体all
计算值as specified
Animation typediscrete
正规顺序per grammar

属性值

none
声明元素正常渲染,没有包含规则。
strict
声明所有的包含规则应用于这个元素。这样写等价于 contain: size layout style paint。
content
声明这个元素上有除了 size 外的所有包含规则。等价于 contain: layout style paint。
size
声明这个元素的尺寸会变化,不需要去检查它依赖关系中的尺寸变化。
layout
声明没有外部元素可以影响它内部的布局,反之亦然。
style
声明那些同时会影响这个元素和其子孙元素的属性,都在这个元素的包含范围内。
paint
声明这个元素的子孙节点不会在它边缘外显示。如果一个元素在视窗外或因其他原因导致不可见,则同样保证它的子孙节点不会被显示。

常规语法

none | strict | content | [ size || layout || style || paint ]

Specifications

Specification Status Comment
CSS Containment Module Level 1 Working Draft Initial definition

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 52.0 未实现[1] ? 40 ?
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support 未实现 52.0 未实现[1] ? ? 40 ? 52.0

[1] 该特性支持度在 layout.css.contain.enabled 之后,它的默认值为 false,目前仅支持 nonepaint ,详见 bug 1150081。更多实现状态可访问 bug 1150081

文档标签和贡献者

 此页面的贡献者: kmokidd, Gaohaoyang
 最后编辑者: kmokidd,