We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

摘要

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 Candidate Recommendation Initial definition

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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,