contain: las cuatro garantías y qué compra cada una

contain es la propiedad peor explicada del CSS moderno porque casi siempre se presenta como un interruptor de rendimiento, y no lo es. Es un contrato: le prometes al motor que cierta información no cruza la frontera de este elemento, y a cambio el motor puede saltarse trabajo que de otro modo tendría que hacer por si acaso. Cada valor es una promesa distinta, con un precio distinto, y usar el equivocado no es “menos óptimo”: es romper el layout.

Las cuatro garantías

layout: la geometría de dentro no afecta a la de fuera

La promesa: el layout interno del elemento es independiente del layout externo, y viceversa. Nada de lo que ocurra dentro puede cambiar la posición o el tamaño de nada de fuera, salvo a través del tamaño del propio elemento.

Lo que el motor se ahorra: puede calcular el layout del subárbol de forma aislada, y —más importante— cuando algo cambia dentro, la invalidación no se propaga hacia los lados. Sin containment, un cambio en un elemento puede obligar a recalcular a sus hermanos y a sus tíos, porque el motor no puede descartar que exista una interacción. Con contain: layout, sabe que no la hay.

Lo que te cuesta: el elemento pasa a establecer un contexto de formato independiente, y eso arrastra tres efectos que hay que conocer porque son cambios de comportamiento, no de rendimiento:

• Se convierte en bloque contenedor de sus descendientes posicionados de forma absoluta o fija. Un hijo con position: fixed dentro deja de anclarse a la ventana y pasa a anclarse a él.
• Crea un contexto de apilamiento, así que el z-index de sus descendientes queda encerrado dentro.
• Los flotantes y los márgenes de dentro no interactúan con los de fuera.

Ese primer efecto es el que rompe cosas de verdad. Una cabecera fija dentro de un contenedor con contain: layout deja de ser fija respecto a la pantalla. Es el mismo mecanismo que hace que transform rompa a position: fixed, y produce el mismo desconcierto.

paint: nada se dibuja fuera de los límites

La promesa: ningún descendiente pinta fuera de la caja de relleno del elemento. Lo que sobresale, se recorta.

Lo que el motor se ahorra: si el elemento está fuera de la pantalla, el motor puede garantizar que todos sus descendientes también lo están y saltarse su pintado por completo. Sin esa garantía tendría que considerar que un hijo con position: absolute y coordenadas negativas pudiera estar visible.

Lo que te cuesta: el recorte es real. Un menú desplegable, un tooltip o una sombra que sobresalgan del contenedor desaparecen. Además, paint también crea contexto de apilamiento y bloque contenedor para posicionados, igual que layout.

size: el tamaño no depende del contenido

La promesa: el tamaño del elemento se puede calcular sin mirar a sus hijos. El motor lo dimensiona como si estuviera vacío.

Lo que el motor se ahorra: puede calcular la geometría de todo lo que rodea al elemento sin haber calculado su contenido. Y cuando el contenido cambia, la invalidación no sube: el padre no necesita recalcularse porque su hijo no puede cambiar de tamaño por dentro.

Lo que te cuesta: muchísimo, y por eso es la que casi nunca se usa sola. Si el elemento no tiene un tamaño especificado, colapsa a cero. Un div con contain: size y sin altura declarada desaparece aunque tenga contenido.

Por eso existe inline-size, que contiene solo la dimensión en línea. El ancho se calcula sin mirar el contenido, pero la altura sigue creciendo con él. Es el modo seguro de la contención de tamaño, y es exactamente lo que activa container-type: inline-size para las container queries: un contenedor tiene que poder resolver su ancho sin consultar a sus hijos, porque si no habría una dependencia circular —los hijos consultan el ancho del contenedor que depende de los hijos—.

style: los contadores no escapan

La promesa: las propiedades que pueden tener efectos fuera del elemento y sus descendientes no los tienen. En la práctica esto significa los contadores CSS y las comillas.

Lo que el motor se ahorra: poco, comparado con las otras. Sin contención de estilo, incrementar un contador dentro de un subárbol puede afectar a la numeración de elementos posteriores en cualquier parte del documento, así que el motor debe reconsiderarlos.

Lo que te cuesta: los contadores de dentro dejan de participar en la numeración global. Si estabas numerando secciones a lo largo del documento, cada elemento contenido empieza de cero.

Es la garantía menos útil de las cuatro y la que menos se usa por separado. Va incluida en los atajos.

Los atajos y qué elegir

content es el que se usa el noventa por ciento de las veces: da las garantías útiles sin el riesgo de que el elemento colapse. strict solo tiene sentido cuando el elemento tiene un tamaño fijo garantizado.

En la práctica, los tres casos que aparecen de verdad:

Elementos repetidos e independientes en una lista larga. Filas de una tabla, tarjetas de un catálogo, mensajes de un chat. Cada uno es autónomo y no interactúa con sus hermanos.

.fila {
  contain: content;
}

Un contenedor cuyo contenido cambia con frecuencia. Un panel de registro, un widget que se actualiza cada segundo, una vista con datos en vivo. Aquí la ganancia es que la invalidación no sale del panel.

.panel-vivo {
  contain: layout paint;
}

Un contenedor de tamaño conocido con contenido pesado. Aquí sí compensa strict, siempre con el tamaño declarado:

.miniatura {
  contain: strict;
  inline-size: 240px;
  block-size: 160px;
}

Los efectos secundarios son la parte importante

Si de esta lección solo retienes una cosa, que sea que contain: layout y contain: paint cambian el comportamiento del layout, no solo su velocidad. La lista, para tenerla a mano:

Los dos primeros son, a efectos de posicionamiento, equivalentes a haber puesto un transform en el elemento. Si añades contain: content a las tarjetas de un catálogo y de repente un menú desplegable se recorta o un elemento fijo deja de serlo, no es un bug del navegador: es la garantía que has firmado.