这个 CSS 模块描述了 contains 属性,它表明元素的子树独立于页面的其余部分。这使得用户代理在使用良好时可以进行大量优化。
{ /* No layout containment. */ contain: none; /* Turn on size containment for an element. */ contain: size; /* Turn on layout containment for an element. */ contain: layout; /* Turn on style containment for an element. */ contain: style; /* Turn on paint containment for an element. */ contain: paint; /* Turn on containment for layout, paint, and size. */ contain: strict; /* Turn on containment for layout, and paint. */ contain: content; }
这个 contain 属性的主要目的是隔离指定内容的样式、布局和渲染。开发人员可以使用这个 contain 属性来限制指定的DOM元素和它的子元素同页面上其它内容的联系;我们可以把它看做一个iframe。跟iframe很相似,它能建立起一个边界,产生一个新的根布局;保证了它和它的子元素的DOM变化不会触发父元素重新布局、渲染等。
none
This value indicates that the property has no effect. The element renders as normal, with no containment effects applied.
strict
This value computes to size layout paint, and thus turns on all forms of containment for the element. In other words, it behaves the same as contain: size layout paint;. .
content
This value computes to layout paint, and thus turns on all forms of containment except size containment for the element. In other words, it behaves the same as contain:layout paint;. .
Note: contain: content is reasonably "safe" to apply widely; its effects are fairly minor in practice, and most content won’t run afoul of its restrictions. However, because it doesn’t apply size containment, the element can still respond to the size of its contents, which can cause layout-invalidation to percolate further up the tree than desired. Use contain: strict when possible, to gain as much containment as you can.
size
The value turns on size containment for the element. This ensures that the containment box can be laid out without needing to examine its descendants.
layout
This value turns on layout containment for the element. This ensures that the containment box is totally opaque for layout purposes; nothing outside can affect its internal layout, and vice versa.
paint
This value turns on paint containment for the element. This ensures that the descendants of the containment box don’t display outside its bounds, so if an element is off-screen or otherwise not visible, its descendants are also guaranteed to be not visible.
浏览器兼容性问题: