#VISIBILITY CODE#

To see the messages, turn on verbose logging. To help find them, Chromium will print console messages if you call one of these APIs for a subtree of an element with content-visibility:hidden.

#VISIBILITY CODE#

If you're using content-visibility to improve performance, audit your code to make sure these APIs are not getting called. The browser is only able to skip rendering work if you are also careful not to call any DOM API that forces some of rendering to occur on one of the skipped subtrees. This enables the rendering work to be done just in time to be seen by the user. Most of the rendering, such as styling and layout of the element's subtree are skipped.Īs the element approaches the viewport, the browser no longer adds the size containment and starts painting and hit-testing the element's content. The browser determines the size of the element without considering any of its contents, and it stops there. What does this mean? In short, if the element is off-screen its descendants are not rendered. If the element is off-screen (and not otherwise relevant to the user-relevant elements would be the ones that have focus or selection in their subtree), it also gains size containment (and it stops painting and hit-testing its contents). An element that has content-visibility: auto gains layout, style and paint containment. The content-visibility property accepts several values, but auto is the one that provides immediate performance improvements. content-visibility ensures that you get the largest performance gains the browser can provide with minimal effort from you as a developer. You can play around with the values to see what works best, or you can use another CSS property called content-visibility to apply the needed containment automatically. It may be hard to figure out which containment values to use, since browser optimizations may only kick in when an appropriate set is specified. Skipping rendering work with content-visibility # This allows us to potentially skip painting the descendants if the element is offscreen. Nothing can visibly overflow the element, and if an element is off-screen or otherwise not visible, its descendants will also not be visible.

paint: Paint containment ensures that the descendants of the containing box don't display outside its bounds.

This allows us to potentially skip style computation for the descendants if all we want is to compute styles on other elements.

style: Style containment ensures that properties which can have effects on more than just its descendants don't escape the element (e.g.

This allows us to potentially skip layout of the descendants if all we want to do is lay out other boxes.

layout: Layout containment means that the descendants do not affect the external layout of other boxes on the page.

This means we can potentially skip layout of the descendants if all we need is the size of the element.

size: Size containment on an element ensures that the element's box can be laid out without needing to examine its descendants.

There are four types of CSS containment, each a potential value for the contain CSS property, which can be combined together in a space-separated list of values: Knowing which bits of content (subtrees) contain isolated content means the browser can make optimization decisions for page rendering. The key and overarching goal of CSS containment is to enable rendering performance improvements of web content by providing predictable isolation of a DOM subtree from the rest of the page.īasically a developer can tell a browser what parts of the page are encapsulated as a set of content, allowing the browsers to reason about the content without needing to consider state outside of the subtree.

While content-visibility is only supported in Chromium 85 for now (and deemed 'worth prototyping' for Firefox), the Containment Spec is supported in most modern browsers. Browser support #Ĭontent-visibility relies on primitives within the the CSS Containment Spec. In our article demo, applying content-visibility: auto to chunked content areas gives a 7x rendering performance boost on initial load. It also allows for faster interactions with the on-screen content. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility property makes the initial user load much faster. content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance.

Hiding content with content-visibility: hidden.

Specifying the natural size of an element with contain-intrinsic-size.Skipping rendering work with content-visibility.

Visibility