Contención de CSS en Chrome 52

Resumen

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

Contención de CSS. Antes: el diseño tardaba 59.6 ms. Después: El diseño tarda 0.05 ms

Tiene algunos valores, lo que convierte su sintaxis en la siguiente:

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

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

La propiedad "contiene"

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 completa del DOM se considera “dentro del alcance” del trabajo de procesamiento, lo que puede significar que intentar una “vista” independiente en una app web puede resultar complicado: los cambios en una parte del DOM pueden afectar a otras partes y no hay forma de indicarle al navegador lo que debería estar dentro o fuera del alcance.

Por ejemplo, supongamos que parte de tu DOM se ve así:

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

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

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

Por último, agregarás un nuevo elemento a una vista, lo 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 se encuentra efectivamente 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 modificaron o no. Cuanto más grande sea el DOM, más trabajo de procesamiento requerirá, 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 realmente inteligentes al limitar el alcance de los estilos, el diseño y el trabajo de pintura automáticamente, lo que significa que todo se vuelve más rápido sin que tengas que hacer nada.

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

La contención de CSS es una propiedad nueva, con la palabra clave "contener", 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. Veamos cada uno con un poco más de detalle.

Diseño (contenido)

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

El diseño suele estar centrado en el documento, por lo que se escala 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 la contención aquí puede reducir potencialmente la cantidad de elementos a solo un puñado, en lugar de todo el documento, lo que ahorra al navegador un montón de trabajo innecesario y mejora significativamente el rendimiento.

Pintura (contenido: pintura)

La pintura de alcance es otro beneficio increíblemente útil de la contención. La contención de la pintura básicamente 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 absoluta y fija. Esto significa que los elementos secundarios se posicionan 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 apilado. Esto significa que elementos como z-index tendrán un efecto en el elemento y los elementos secundarios se apilarán según el nuevo contexto.
  • Se convierte en un nuevo contexto de formato. Esto significa que si tienes, por ejemplo, un elemento de nivel de bloque con contención de pintura, se tratará como un entorno de diseño nuevo e independiente. Esto significa que el diseño fuera del elemento generalmente no afectará a los elementos secundarios del elemento que lo contiene.

Tamaño (contiene: tamaño)

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

La contención del tamaño es realmente una medida con cinturones y llaves para garantizar que no dependas de los elementos secundarios para definir la talla, pero por sí sola no ofrece muchos beneficios de rendimiento.

Estilo (incluye: estilo)

Puede resultar difícil predecir cuáles serán los efectos del árbol del DOM del cambio de estilo de un elemento en el árbol. Un ejemplo de esto es en contadores CSS, en los que cambiar un contador en un elemento secundario puede afectar los valores de contador del mismo nombre que se usa en otras partes del documento. Si se establece contain: style, los cambios de estilo no se propagarán después del elemento que los contiene.

Para ser muy claros, lo que contain: style no proporciona es el estilo con alcance, como obtendrías en Shadow DOM. En este caso, la contención se trata simplemente de limitar las partes del árbol que se tienen en cuenta cuando se mutan 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. pero contiene 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 una contención estricta es excelente cuando se conoce el tamaño del elemento de antemano (o deseas reservar sus dimensiones), pero recuerda que si declaras una contención estricta sin dimensiones, debido a la contención de tamaño implícita, el elemento se puede representar como un cuadro de 0 por 0 píxeles.

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

De estos dos, contain: content es el que deberías usar de forma predeterminada. Debes tratar la contención estricta como una solución de emergencia cuando contain: content no sea lo suficientemente fuerte para tus necesidades.

Cuéntanos cómo te va.

La contención es una excelente manera de comenzar a indicarle al navegador lo que quieres que se mantenga aislado de tu página. Pruébalo en Chrome 52 o versiones posteriores, y cuéntanos cómo te va.