The content-visibility property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially skip large swathes of layout and rendering work until needed..section {
content-visibility: auto;
}.offscreen-panel {
content-visibility: hidden;
}visibleNo effect — the element's contents are laid out and rendered as normal.autoChanges the used value of the contain property to turn on layout, style, and paint containment. When the element is not relevant to the user (e.g. off-screen), it also skips its contents and turns on size containment.hiddenThe element skips its contents — they are not rendered and not accessible to find-in-page or focus, but remain in the DOM.CSS Containment Module Level 2Editor's DraftW3CMDN HTML JavaScriptCSS PHP Show all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
