contain

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

* Some parts of this feature may have varying levels of support.

Experimental: Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

A propriedade contain permite que um autor indique que elemento e seus conteúdos são, na medida do possível, independente do resto da árvore do documento. Isso permite que o navegador recalcule o layout, estilo, pintura, tamanho ou alguma combinação deles para uma área limitada do DOM e não da página inteira.

css
/* Sem contenção de layout. */
contain: none;

/* Ativa a contenção para layout, estilo, pintura, e tamanho. */
contain: strict;

/* Ativa a contenção para layout, estilo, e pintura. */
contain: content;

/* Ativa a contenção para um elemento. */
contain: size;

/* Ativa a contenção de layout para um elemento. */
contain: layout;

/* Ativa a contenção de estilo para um elemento. */
contain: style;

/* Ativa a contenção de pintura para um elemento. */
contain: paint;

Esta propriedade é útil em páginas que contêm um monte de widgets que são todos independentes, uma vez que pode ser usado para impedir que as regras CSS de um widget mude outras coisas na página.

Initial valuenone
Aplica-se aall elements
Inheritednão
Computed valueas specified
Animation typeNot animatable

Sintaxe

Valores

none

Indica que o elemento processa como normal, sem contenção aplicada.

strict

Indica que todas as regras de contenção são aplicadas ao elemento. Isso equivale acontain: size layout style paint.

content

Indica que todas as regras de contenção, exceto size são aplicadas ao elemento. Isso equivale a contain: layout style paint.

size

Indica que o elemento pode ser dimensionado sem a necessidade de examinar seus dependentes para alterações de tamanho.

layout

Indica que nada fora do elemento pode afetar seu layout interno e vice-versa.

style

Indica que, para propriedades que podem ter efeitos em mais do que apenas um elemento e seus descendentes, esses efeitos não escape o elemento que contém.

paint

Indica que os descendentes do elemento não são exibidos fora de seus limites. Se um elemento estiver fora da tela ou de outra forma não visível, seus descendentes também são garantidos para não ser visível.

Sintaxe Formal

contain = 
none |
strict |
content |
[ [ size | inline-size ] || layout || style || paint ]

Especificações

Specification
CSS Containment Module Level 2
# contain-property

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contain
content
inline-size
layout
none
paint
size
strict
style

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.