La containpropiedad en CSS indica al navegador que el elemento y sus descendientes se consideran independientes del árbol del documento tanto como sea posible. Esto potencialmente proporciona beneficios de rendimiento con cálculos de diseño, estilo, pintura, tamaño o cualquier combinación para un área limitada del DOM y no para toda la página.
La propiedad tiene cinco valores estándar y dos valores abreviados que combinan variaciones de los valores estándar. Cada valor tiene unos beneficios únicos y compartidos según el contexto del elemento que los aplica.
El uso típico de esta propiedad es un elemento que contiene contenido de algún tipo. Considere un widget que procesa los datos entrantes que cambia el diseño y las imágenes de los descendientes del elemento. Otro elemento a considerar es uno que contiene los resultados de datos de terceros, como un banner publicitario, donde los beneficios de la contención nos permiten des-priorizar pintar cierto contenido, cómo manejar el tamaño del contenido que se recibe o determinar si el contenido incluso debería ser visible. Un sitio mayormente estático, por otro lado, recibirá pocos beneficios aparte del primer diseño y pintura en la pantalla al cargar la página.
Sintaxis
div ( contain: none | strict | content | ( size || layout || style || paint ); )div ( contain: none; /* no containment on element */ contain: layout; /* influences how element relates to other elements in the document */ contain: paint; /* influences how element is painted to screen */ contain: size; /* influences how element affects size calculations for the page */ contain: style; /* is considered at-risk for removal from spec */
contain: content; /* combines layout and paint */ contain: strict; /* combines layout, paint, and size */ )Valores de propiedad
Diseño
El layoutvalor de contención informa al navegador que ninguno de los descendientes del elemento afecta a otros elementos de la página, ni esos otros elementos tienen ningún efecto sobre los descendientes del elemento contenido. Esto permite que el navegador reduzca potencialmente el número de cálculos necesarios al crear el diseño de página.
Otro beneficio es que si el elemento contenido está fuera de la pantalla u oscurecido de alguna manera, entonces el navegador puede retrasar o cambiar los cálculos relacionados a una prioridad más baja. Un ejemplo de esto es un elemento contenido que no está a la vista al final de un elemento de bloque y el comienzo de ese elemento de bloque es visible.
Un elemento con layoutcontención se convierte en una caja contenedora para descendientes posicionados, como elementos con posicionamiento absoluto. El elemento recibe un nuevo contexto de apilamiento en relación con la página y z-indese puede utilizar la propiedad x. Aunque, las propiedades direccionales, como topo left, no se aplican.
Aunque los descendientes del elemento contenido pueden no influir en otros elementos de la página, aún pueden influir en su elemento ancestro contenido. Por ejemplo, un descendiente puede hacer que el elemento contenido cambie de tamaño como reacción a los cambios. En ese caso, el elemento contenido todavía puede influir potencialmente en otros elementos de la página, pero los descendientes todavía no participarán en esos cálculos.
La siguiente demostración proporciona una explicación simple de lo que sucede cuando layoutse aplica la contención. Al hacer clic en cada uno de los cuadros superiores, se aplica la contención y las flechas rojas cambiarán de apariencia. La apariencia de las flechas rojas sugiere si los descendientes del cuadro afectan a los otros cuadros de la página durante los cálculos de diseño.
Pintura
El paintvalor de contención informa al navegador que ninguno de los descendientes del elemento se pintará fuera del cuadro de borde del elemento. Si un elemento descendiente se coloca para que una parte de su cuadro delimitador sea recortada por el elemento contenido, border-boxesa parte no se pintará. Si un elemento descendiente se coloca completamente fuera del elemento contenido, border-boxentonces no se pinta en absoluto. Esto es similar a aplicar overflow: hidden;al elemento, pero sin los beneficios de omitir o reducir los cálculos necesarios.
Otro beneficio es que si el elemento contenido no es visible de alguna manera dentro de la ventana gráfica, entonces puede omitir los descendientes del elemento al realizar cálculos de pintura. Un ejemplo de esto es un elemento que se coloca fuera de la página a la izquierda de la ventana gráfica. Si el elemento contenido no es visible, entonces es una garantía de que su contenido no será visible. Por lo tanto, no es necesario que participen en los cálculos de pintura.
Un elemento con la paintcontención también se convierte en una caja contenedora para los descendientes posicionados, como los elementos con posicionamiento absoluto. El elemento también recibe un nuevo contexto de apilamiento en relación con la página y z-indexse puede utilizar la propiedad. Aunque, las propiedades direccionales, como topo left, no se aplican.
Un elemento de desplazamiento puede obtener beneficios adicionales al colocar sus descendientes en una nueva capa de pintura que puede ayudar con el rendimiento del desplazamiento. Normalmente, los elementos de desplazamiento pueden causar repintados constantes a medida que los descendientes aparecen y desaparecen durante el desplazamiento. Un elemento de desplazamiento con la contención de pintura puede omitir este repintado constante de descendientes de desplazamiento.
La siguiente demostración proporciona una explicación simple de lo que sucede cuando paintse aplica la contención. Haga clic en cualquier lugar para alternar la contención en el cuadro violeta. Cuando se aplica la contención, algunas de las cajas verdes cambian de apariencia. La apariencia de las cajas verdes muestra cómo están pintadas o no.
Tamaño
El sizevalor de contención informa al navegador que ninguno de los descendientes debe tenerse en cuenta al realizar cálculos de diseño para la página. El elemento contenido debe tener heighty widthpropiedades aplicadas, o colapsará a cero píxeles cuadrados. Solo se debe considerar el elemento en sí para los cálculos de diseño de página, ya que los descendientes no pueden influir en el tamaño del elemento. Los descendientes del elemento contenido se omiten por completo en dichos cálculos; como si no tuviera descendientes en absoluto.
Para obtener todos los beneficios de la optimización, la sizecontención se suele aplicar con otros tipos de contención.
Un elemento con la sizecontención recibe un nuevo contexto de apilamiento en relación con la página y z-indexse puede utilizar la propiedad. Aunque, las propiedades direccionales, como topo left, no se aplican.
La siguiente demostración proporciona una explicación simple de lo que sucede cuando sizese aplica la contención. Haga clic en cualquier lugar para alternar la contención en el cuadro violeta. Cuando se aplica la contención, el cuadro púrpura cambia de tamaño. De forma predeterminada, la altura del cuadro violeta está definida por sus hijos, pero con la contención se debe definir la altura. Una vez que se aplica la contención, los descendientes ya no participan en los cálculos de diseño relacionados con el tamaño.
Estilo
El stylevalor de contención informa al navegador que algunas propiedades CSS, como los contadores y las comillas, se aplicarán al elemento contenido.
Las propiedades counter-incrementy counter-setdeben tener un alcance en el subárbol del elemento contenido. Si se extiende fuera del elemento contenido, se crea un nuevo contador.
Los valores de la propiedad de contenido open-quote, close-quote, no-open-quote, y no-close-quotedeben estar al alcance de sub-árbol del elemento contenido.
Este valor de contención se considera en riesgo de ser eliminado de la especificación.
Contenido
El contentvalor de contención es una combinación de los valores de contención de diseño y pintura. Este es el equivalente a aplicar la contención de esta manera:
div ( contain: layout paint; )Todos los beneficios potenciales descritos anteriormente para cada valor estarían disponibles para el elemento contenido. Esta contención se consideraría relativamente segura para aplicarse ampliamente a múltiples elementos de la página.
Estricto
El strictvalor de contención es una combinación de los layout, painty sizelos valores de contención. Este es el equivalente a aplicar la contención de esta manera:
div ( contain: layout paint size; )Todos los beneficios potenciales descritos anteriormente para cada valor estarían disponibles para el elemento contenido.
Como el "más estricto" de los valores de contención, este valor debe utilizarse con una cuidadosa consideración. Esto se debe a los requisitos de dimensión que impone al elemento contenido. Con estos requisitos, este valor de contención ofrece los mayores beneficios potenciales de rendimiento de la contención.
Soporte de navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 52 | 69 | No | 79 | No |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 81 | No |