We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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. 

/* 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
Midiaall
Computed valueas specified
Animation typediscrete
Canonical orderper grammar

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

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

Especificações

Especificação Status Comentário
CSS Containment Module Level 1 Candidata a Recomendação Initial definition

Compatibilidade do navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 52.0 Não suportado[1] ? 40 ?
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support 52.0 52.0 Não suportado[1] ? ? 40 ?

[1] This feature implemented behind the preference layout.css.contain.enabled, defaulting to false, currently only supporting the values none and paint (see bug 1170781). See bug 1150081 for the overall implementation status.

Etiquetas do documento e colaboradores

Colaboradores desta página: leandroruel
Última atualização por: leandroruel,