monks/contain

The contain CSS property indicates that an element and its contents are, as much as possible, independent from the rest of the document tree. Containment enables isolating a subsection of the DOM, providing performance benefits by limiting calculations of layout, style, paint, size, or any combination to a DOM subtree rather than the entire page. Containment can also be used to scope CSS counters and quotes.

Values

content

</>

pub const content: #(String, String)

: All containment rules except size are applied to the element. This is equivalent to contain: layout paint style.

inherit

</>

pub const inherit: #(String, String)

initial

</>

pub const initial: #(String, String)

inline_size

</>

pub const inline_size: #(String, String)

: Inline size containment is applied to the element. The inline size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with size.

layout

</>

pub const layout: #(String, String)

: The internal layout of the element is isolated from the rest of the page. This means nothing outside the element affects its internal layout, and vice versa.

none

</>

pub const none: #(String, String)

: The element renders as normal, with no containment applied.

paint

</>

pub const paint: #(String, String)

: Descendants of the element don’t display outside its bounds. If the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. If a descendant overflows the containing element’s bounds, then that descendant will be clipped to the containing element’s border-box.

raw

</>

pub fn raw(value: String) -> #(String, String)

Enter a raw string value for contain

revert

</>

pub const revert: #(String, String)

revert_layer

</>

pub const revert_layer: #(String, String)

size

</>

pub const size: #(String, String)

: Size containment is applied to the element in both the inline and block directions. The size of the element can be computed in isolation, ignoring the child elements. This value cannot be combined with inline-size.

strict

</>

pub const strict: #(String, String)

: All containment rules are applied to the element. This is equivalent to contain: size layout paint style.

style

</>

pub const style: #(String, String)

: For properties that can affect more than just an element and its descendants, the effects don’t escape the containing element. Counters and quotes are scoped to the element and its contents.

unset

</>

pub const unset: #(String, String)

var

</>

pub fn var(variable: String) -> #(String, String)

Enter a variable name to be used for contain. It will be wrapped in var() and have -- prepended.