The CSS contain property allows developers to isolate a portion of the DOM, improving performance by limiting the scope of browser calculations like layout, style, and paint. By specifying values like layout, style, paint, and size, authors can tell the browser that changes within the contained element won't affect its surroundings, or vice versa. This allows the browser to optimize rendering and avoid unnecessary recalculations, leading to smoother and faster web experiences, particularly for complex or dynamic layouts. The content keyword offers the strongest form of containment, encompassing all the other values, while strict and size offer more granular control.
The Mozilla Developer Network (MDN) web documentation article titled "Contain – CSS Cascading Style Sheets" elaborates on the contain CSS property, a powerful tool for optimizing website performance by isolating specific elements from the rest of the document. This isolation limits the browser's calculations for layout, style, and paint, which can significantly improve rendering speed, especially in complex web applications. The contain property achieves this by declaring that an element's subtree (its descendants) are independent and their changes won't affect the layout, style, paint, or size calculations of the rest of the page, or vice-versa.
The article details the various values the contain property can accept, each offering different levels of isolation:
-
strict: This value provides the strongest level of containment. It encapsulates the element completely, meaning changes within the element will not trigger layout, paint, style, or size recalculations outside of it, nor will external changes affect it. It essentially treats the element as an entirely separate document.
-
content: This value signifies that the element's contents are independent in terms of layout, style, and paint. Changes within the contained element won't affect the layout or styling of the rest of the document, and vice-versa. Size containment, however, is not implied.
-
size: This value indicates that the element's dimensions are fixed and known beforehand. This allows the browser to allocate space for the element without needing to examine its descendants, which can expedite layout calculations. Crucially, size containment requires the element to have a specified size (e.g., through properties like width and height). Otherwise, it defaults to a size of 0, potentially hiding the content. This value does not isolate style, layout, or paint.
-
layout: This isolates the element's layout. Changes in the element's internal layout won't affect the layout of the surrounding elements, and external layout changes won't affect the contained element's internal layout.
-
style: This prevents style changes within the contained element from leaking out and affecting the styling of the parent document, and likewise, external style changes won't influence the element's internal styling. This particularly applies to style inheritance and counter incrementing. Note: As of the documentation's current state, style containment is still experimental and may not be fully supported by all browsers.
-
paint: This value ensures that the element's painting is contained within its boundaries. Any painting done within the element won't overflow outside its box, and painting from other elements won't bleed into the contained element. This is particularly useful for elements with effects like shadows or filters, preventing them from overlapping adjacent content.
The article also clarifies that multiple values can be combined, separated by spaces, to provide a composite containment effect. For example, contain: layout paint would isolate both layout and paint. Using the keyword contain: none explicitly disables containment, ensuring no isolation is applied.
Finally, the MDN documentation highlights important considerations for using the contain property effectively. It emphasizes the need for careful planning when implementing containment, especially with the size value, due to its potential to inadvertently hide content if dimensions are not explicitly defined. Overall, the article positions the contain property as a valuable tool for web developers aiming to optimize rendering performance, but it stresses the importance of understanding its nuances to avoid unexpected behavior.
Summary of Comments ( 16 )
https://news.ycombinator.com/item?id=42162368
Hacker News users discussed the usefulness of the
containCSS property, particularly for performance optimization by limiting the scope of layout, style, and paint calculations. Some highlighted its power in isolating components and improving rendering times, especially in complex web applications. Others pointed out the potential for misuse and the importance of understanding its various values (layout,style,paint,size, andcontent) to achieve desired effects. A few users mentioned specific use cases, like efficiently handling large lists or off-screen elements, and wished for wider adoption and better browser support for some of its features, like containment for subtree layout changes. Some expressed that containment is a powerful but often overlooked tool for optimizing web page performance.The Hacker News post titled "Contain – CSS Cascading Style Sheets – MDN" linking to the MDN documentation on the CSS
containproperty has a moderate number of comments discussing various aspects of the property and its usage.Several commenters highlight the performance benefits of
contain. One user emphasizes how crucial this property is for optimizing web performance, particularly in complex applications. They elaborate thatcontainallows developers to isolate specific parts of the DOM, thereby limiting the scope of reflows and repaints, leading to smoother interactions and faster rendering times. This sentiment is echoed by another comment which points out the significant impactcontaincan have on improving rendering performance, especially in situations with animations or transitions.Another thread discusses the nuances of the different values of the
containproperty (likesize,layout,style, andpaint). One user questions the practical applications ofstylecontainment, leading to a discussion about scenarios where preventing style bleed from a component is beneficial, such as in shadow DOM implementations or when dealing with third-party embedded content. The utility ofsizecontainment is also highlighted, specifically for scenarios where the size of a component is known beforehand, enabling the browser to perform layout calculations more efficiently.One commenter expresses surprise at not having known about this property sooner, suggesting that it's underutilized within the web development community. This comment sparks further discussion about the discoverability of useful CSS properties and the challenges developers face in keeping up with the evolving web standards.
A few comments dive into specific use cases for
contain. One user mentions using it to isolate a complex animation, preventing performance issues from affecting the rest of the page. Another explains howcontaincan be instrumental in optimizing the performance of virtualized lists, where only visible items need to be rendered.Finally, a commenter points to the MDN documentation itself as an excellent resource for understanding the intricacies of the
containproperty and its various values, underscoring the value of the original link shared in the Hacker News post. The commenter highlights the detailed explanations and examples provided in the documentation, which allows for a deeper understanding of its effects and proper implementation.