La propiedad CSS contain permite aislar subárboles del DOM para que el navegador pueda optimizar el renderizado independientemente del resto de la página.

Valores de contain

layout: el layout interno no afecta al exterior. style: los estilos no se escapan. paint: el elemento pinta dentro de sus bounds. size: el elemento necesita dimensiones explícitas.

content-visibility

content-visibility: auto combina containment con lazy rendering. Los elementos fuera de pantalla no se renderizan hasta que se acercan al viewport. Mejora drásticamente LCP en páginas largas.

Casos de uso

Listas virtuales, feeds de redes sociales, paneles de dashboard, secciones plegables. Cualquier contenido que pueda beneficiarse de renderizado perezoso.

Compatibilidad

Soporte universal en navegadores modernos. content-visibility necesita contain-intrinsic-size para evitar desplazamiento de layout (CLS).