CSS contain Property

Description

The contain CSS property is used to optimize the rendering performance of a web page by hinting to the browser how an element and its contents should be treated for layout and rendering. It helps in isolating an element and its subtree from the rest of the page, allowing the browser to make rendering optimizations. This property can take values like none, strict, content, or size, each indicating a different level of containment. For instance, setting contain: layout instructs the browser to treat an element as an isolated layout context, potentially improving performance. contain is particularly useful in scenarios where you want to limit the scope of layout calculations, such as when dealing with dynamic content or complex web applications.

Initial value

none

Applies to

all elements

Inherited

no

Computed value

as specified

Animatable

no

JavaScript syntax

object.style.contain

Syntax

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

Values

• noneThis value indicates that the property has no effect. The element renders as normal, with no containment effects applied.
• strictThis value computes to size layout paint style, and thus turns on all forms of containment for the element.
• contentThis value computes to layout paint style, and thus turns on all forms of containment except size containment for the element.

Example

<div style="contain: paint">

  <p>This text will be clipped to the bounds of the box.</p>

</div>

<div>

  <p>This text will not be clipped to the bounds of the box.</p>

</div>

div {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  font-size: 20px;
}

Browser Support

The following table will show you the current browser support for the CSS contain property.

Desktop
79	52	69	39	15.4

Tablets / Mobile
52	79	41	15.4	6	52

Last updated by CSSPortal on: 31st December 2023