Contención de CSS en Chrome 52

Paul Lewis

A modo de resumen

La nueva propiedad CSS Containment permite a los desarrolladores limitar el alcance del trabajo de diseño, pintura y diseño del navegador.

Tiene algunos valores, por lo que su sintaxis es la siguiente:

    contain: none | strict | content | [ size || layout || style || paint ]

Está disponible en Chrome 52 y versiones posteriores, y en Opera 40 y versiones posteriores (y tiene compatibilidad pública con Firefox), así que pruébala y cuéntanos cómo te fue.

La propiedad contain

Al crear una aplicación web, o incluso un sitio complejo, un desafío clave de rendimiento es limitar los efectos de los estilos, el diseño y la pintura. A menudo, la totalidad del DOM se considera “dentro del alcance” para el trabajo de procesamiento, lo que puede significar que intentar una “vista” independiente en una app web puede ser complicado: los cambios en una parte del DOM pueden afectar a otras partes, y no hay forma de decirle al navegador qué debe estar dentro o fuera del alcance.

Por ejemplo, supongamos que parte de tu DOM se ve de la siguiente manera:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
    </section>

    <section class="view">
      Contact
    </section>

Y agregas un elemento nuevo a una vista, que activará los estilos, el diseño y la pintura:

    <section class="view">
      Home
    </section>

    <section class="view">
      About
      <div class="newly-added-element">Check me out!</div>
    </section>

    <section class="view">
      Contact
    </section>

Sin embargo, en este caso, todo el DOM está dentro del alcance, lo que significa que los cálculos de estilo, diseño y pintura deberán considerar todos los elementos, independientemente de si se cambiaron o no. Cuanto más grande sea el DOM, más trabajo de procesamiento implicará, lo que significa que podrías hacer que tu app no responda a las entradas del usuario.

La buena noticia es que los navegadores modernos se están volviendo muy inteligentes a la hora de limitar el alcance de los estilos, el diseño y el trabajo de pintura de forma automática, lo que significa que las cosas se vuelven más rápidas sin que tengas que hacer nada.

Sin embargo, la noticia aún mejor es que existe una nueva propiedad de CSS que entrega los controles de alcance a los desarrolladores: la contención.

El aislamiento de CSS es una propiedad nueva, con la palabra clave contain, que admite cuatro valores:

• layout
• paint
• size
• style

Cada uno de estos valores te permite limitar la cantidad de trabajo de renderización que debe realizar el navegador. Analicemos cada uno con más detalle.

Diseño (contain: layout)

Nota: Este valor activa el confinamiento del diseño para el elemento. Esto garantiza que el elemento contenedor sea totalmente opaco para fines de diseño; nada externo puede afectar su diseño interno y viceversa. Especificación de contención

La contención de diseño es probablemente el mayor beneficio de la contención, junto con contain: paint.

Por lo general, el diseño se ajusta al alcance del documento, lo que hace que se ajuste proporcionalmente al tamaño de tu DOM. Por lo tanto, si cambias la propiedad left de un elemento, es posible que debas verificar cada elemento del DOM.

Habilitar el aislamiento aquí puede reducir potencialmente la cantidad de elementos a solo unos pocos, en lugar de todo el documento, lo que le ahorra al navegador una gran cantidad de trabajo innecesario y mejora significativamente el rendimiento.

Pintura (contiene: pintura)

Nota: Este valor activa el aislamiento de pintura para el elemento. Esto garantiza que los elementos secundarios del elemento contenedor no se muestren fuera de sus límites, de modo que, si un elemento está fuera de la pantalla o no es visible, se garantiza que sus elementos secundarios tampoco lo sean. Especificación de contención

La pintura de permisos es otro beneficio increíblemente útil de la contención. La contención de pintura, en esencia, recorta el elemento en cuestión, pero también tiene algunos otros efectos secundarios:

• Actúa como un bloque contenedor para elementos de posición fija y de posicionamiento absoluto. Esto significa que cualquier elemento secundario se posiciona según el elemento con contain: paint, no con ningún otro elemento superior, como, por ejemplo, el documento.
• Se convierte en un contexto de apilamiento. Esto significa que elementos como z-index tendrán un efecto en el elemento, y los elementos secundarios se apilarán según el contexto nuevo.
• Se convierte en un nuevo contexto de formato. Esto significa que, si tienes, por ejemplo, un elemento a nivel del bloque con contención de pintura, se tratará como un nuevo entorno de diseño independiente. Esto significa que, por lo general, el diseño fuera del elemento no afectará a los elementos secundarios del elemento contenedor.

Tamaño (incluye: tamaño)

Nota: El valor activa la contención de tamaño para el elemento. Esto garantiza que el elemento contenedor se pueda diseñar sin necesidad de examinar sus elementos secundarios. Especificación de contención

contain: size significa que los elementos secundarios no afectan el tamaño del elemento superior y que se usarán las dimensiones inferidas o declaradas. Por lo tanto, si configuraras contain: size, pero no especificaras las dimensiones del elemento (ya sea directamente o a través de propiedades flex), se renderizaría en 0 px por 0 px.

La contención de tamaño es realmente una medida de seguridad para garantizar que no dependas de los elementos secundarios para el tamaño, pero por sí sola no ofrece muchos beneficios de rendimiento.

Estilo (contain: style)

Nota: Este valor activa el aislamiento de estilo para el elemento. Esto garantiza que, para las propiedades que pueden tener efectos en más de un elemento y sus descendientes, esos efectos no escapen del elemento contenedor. Especificación de contención

Puede ser difícil predecir cuáles serán los efectos en el árbol del DOM de cambiar los estilos de un elemento en la parte superior del árbol. Un ejemplo de esto es en algo como los contadores de CSS, en los que cambiar un contador en un elemento secundario puede afectar los valores del contador del mismo nombre que se usan en otra parte del documento. Si estableces contain: style, los cambios de diseño no se propagarán más allá del elemento contenedor.

Para que quede muy claro, lo que contain: style no proporciona son los estilos con alcance, como los que obtienes de Shadow DOM. Aquí, la contención se trata solo de limitar las partes del árbol que se tienen en cuenta cuando se modifican los estilos, no cuando se declaran.

Contención estricta y de contenido

También puedes combinar palabras clave, como contain: layout paint, que aplicará solo esos comportamientos a un elemento. Sin embargo, contain también admite dos valores adicionales:

• contain: strict significa lo mismo que contain: size layout paint.
• contain: content significa lo mismo que contain: layout paint.

El uso de contención estricta es ideal cuando conoces el tamaño del elemento con anticipación (o deseas reservar sus dimensiones), pero ten en cuenta que, si declaras la contención estricta sin dimensiones, debido a la contención de tamaño implícita, el elemento puede renderizarse como un cuadro de 0 px por 0 px.

Por otro lado, la contención de contenido ofrece mejoras significativas en el alcance, pero no requiere que conozcas ni especifiques las dimensiones del elemento con anticipación.

De los dos, contain: content es el que debes usar de forma predeterminada. Debes tratar el aislamiento estricto como una salida de emergencia cuando contain: content no sea lo suficientemente sólido para tus necesidades.

Cuéntanos cómo te va

El aislamiento es una excelente manera de comenzar a indicarle al navegador lo que deseas mantener aislado dentro de tu página. Pruébala en Chrome 52 y versiones posteriores, y danos tu opinión.

Vínculos útiles

• Especificación de contención de CSS
• Contención en el estado de Chrome