Visible (content-visibility: visible)

div in div in body

This content is always visible, and the browser will render it immediately.

Auto (content-visibility: auto)

div in section in div in body

This content will only be rendered when it comes into view (lazy loading).

Hidden (content-visibility: hidden)

article in div
footer in article in div

This content is hidden from rendering until explicitly made visible.

Normal (no content-visibility applied)

This div behaves like any regular element without the content-visibility property.

Visible (content-visibility: visible)

div in div in body

This content is always visible, and the browser will render it immediately.

Auto (content-visibility: auto)

div in section in div in body

This content will only be rendered when it comes into view (lazy loading).

Auto (CONTENT-VISIBILITY: AUTO)

div in MAIN in div in body

This content will only be rendered when it comes into view (lazy loading).

Hidden (content-visibility: hidden)

article in div
footer in article in div

This content is hidden from rendering until explicitly made visible.

Hidden (Content-Visibility: Hidden)

article in div
footer in article in div

This content is hidden from rendering until explicitly made visible.

Normal (no content-visibility applied)

This div behaves like any regular element without the content-visibility property.