From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/contain/index.html | 134 +++++++++++++++++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 files/pt-br/web/css/contain/index.html (limited to 'files/pt-br/web/css/contain/index.html') diff --git a/files/pt-br/web/css/contain/index.html b/files/pt-br/web/css/contain/index.html new file mode 100644 index 0000000000..dda6afe29e --- /dev/null +++ b/files/pt-br/web/css/contain/index.html @@ -0,0 +1,134 @@ +--- +title: contain +slug: Web/CSS/contain +translation_of: Web/CSS/contain +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

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.

+ +
{{cssinfo}}
+ +

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

+ +
{{csssyntax}}
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS Containment')}}{{Spec2('CSS Containment')}}Initial definition
+ +

Compatibilidade do navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(52.0)}}{{CompatNo}}[1]{{CompatUnknown}}40{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(52.0)}}{{CompatChrome(52.0)}}{{CompatNo}}[1]{{CompatUnknown}}{{CompatUnknown}}40{{CompatUnknown}}
+
+ +

[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.

-- cgit v1.2.3-54-g00ecf