A containpropriedade em CSS indica ao navegador que o elemento e seus descendentes são considerados independentes da árvore do documento tanto quanto possível. Isso potencialmente fornece benefícios de desempenho com cálculos de layout, estilo, pintura, tamanho ou qualquer combinação para uma área limitada do DOM e não para a página inteira.
A propriedade tem cinco valores padrão e dois valores abreviados que combinam variações dos valores padrão. Cada valor tem alguns benefícios únicos e compartilhados, dependendo do contexto do elemento que os aplica.
O uso típico dessa propriedade é um elemento que contém conteúdo de algum tipo. Considere um widget que renderiza os dados de entrada que mudam o layout e os visuais dos descendentes do elemento. Outro elemento a considerar é aquele que contém os resultados de dados de terceiros, como um anúncio de banner, onde os benefícios da contenção nos permitem tirar a prioridade da pintura de determinado conteúdo, como lidar com o dimensionamento do conteúdo recebido ou determinar se o conteúdo deve até ser visível. Um site principalmente estático, por outro lado, receberá poucos benefícios além do primeiro layout e pintura na tela no carregamento da página.
Sintaxe
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 propriedade
Layout
O layoutvalor de contenção informa ao navegador que nenhum dos descendentes do elemento afetam outros elementos na página, nem esses outros elementos têm qualquer efeito sobre os descendentes do elemento contido. Isso permite que o navegador reduza potencialmente o número de cálculos necessários ao criar o layout da página
Outro benefício é que se o elemento contido estiver fora da tela ou obscurecido de alguma forma, o navegador pode atrasar ou mudar os cálculos relacionados para uma prioridade mais baixa. Um exemplo disso é um elemento contido que não está à vista no final de um elemento de bloco e o início desse elemento de bloco é visível.
Um elemento com layoutcontenção torna-se uma caixa de contenção para descendentes posicionados - como elementos com posicionamento absoluto. O elemento recebe um novo contexto de empilhamento em relação à página e a z-indepropriedade x pode ser usada. Embora as propriedades direcionais, como topou left, não se apliquem.
Mesmo que os descendentes do elemento contido não possam influenciar outros elementos na página, eles ainda podem influenciar seu elemento ancestral contido. Por exemplo, um descendente pode fazer com que o elemento contido seja redimensionado em reação às mudanças. Nesse caso, o elemento contido ainda pode influenciar potencialmente outros elementos na página, mas os descendentes ainda não estarão envolvidos nesses cálculos.
A demonstração a seguir fornece uma explicação simples sobre o que acontece quando a layoutcontenção é aplicada. Ao clicar em cada uma das caixas superiores, a contenção é aplicada e as setas vermelhas mudam de aparência. A aparência das setas vermelhas sugere se os descendentes da caixa afetam as outras caixas na página durante os cálculos de layout.
Pintar
O paintvalor de contenção informa ao navegador que nenhum dos descendentes do elemento será pintado fora da caixa de borda do elemento. Se um elemento descendente for posicionado para que uma parte de sua caixa delimitadora seja cortada pelo elemento contido border-box, essa parte não deve ser pintada. Se um elemento descendente estiver posicionado totalmente fora do elemento contido border-box, ele não será pintado. Isso é semelhante a aplicar overflow: hidden;ao elemento, mas sem os benefícios de pular ou reduzir os cálculos necessários.
Outro benefício é que, se o elemento contido não estiver visível de alguma forma na janela de visualização, ele poderá ignorar os descendentes do elemento ao realizar cálculos de pintura. Um exemplo disso é um elemento colocado fora da página à esquerda da janela de visualização. Se o elemento contido não estiver visível, é uma garantia de que seu conteúdo não será visível. Portanto, eles não precisam estar envolvidos nos cálculos da pintura.
Um elemento com a paintcontenção também se torna uma caixa de contenção para descendentes posicionados - como elementos com posicionamento absoluto. O elemento também recebe um novo contexto de empilhamento em relação à página e a z-indexpropriedade pode ser usada. Embora as propriedades direcionais, como topou left, não se apliquem.
Um elemento de rolagem pode obter benefícios adicionais ao ter seus descendentes colocados em uma nova camada de tinta que pode ajudar no desempenho de rolagem. Normalmente, os elementos de rolagem podem causar redesenho constantes conforme os descendentes aparecem e desaparecem durante a rolagem. Um elemento de rolagem com a contenção de tinta pode potencialmente ignorar essa repintura constante de descendentes de rolagem.
A demonstração a seguir fornece uma explicação simples sobre o que acontece quando a paintcontenção é aplicada. Clique em qualquer lugar para alternar a contenção na caixa roxa. Quando a contenção é aplicada, algumas das caixas verdes mudam de aparência. A aparência das caixas verdes mostra como estão pintadas ou não pintadas.
Tamanho
O sizevalor de contenção informa ao navegador que nenhum dos descendentes precisa ser considerado ao realizar cálculos de layout para a página. O elemento contido deve ter as propriedades heighte widthaplicadas, ou será reduzido a zero pixels quadrados. Apenas o próprio elemento precisa ser considerado para cálculos de layout de página, pois os descendentes não podem influenciar o tamanho do elemento. Os descendentes do elemento contido são completamente ignorados em tais cálculos; como se não tivesse descendentes.
Para obter todos os benefícios da otimização, a sizecontenção geralmente é aplicada com outros tipos de contenção.
Um elemento com a sizecontenção recebe um novo contexto de empilhamento em relação à página e a z-indexpropriedade pode ser utilizada. Embora as propriedades direcionais, como topou left, não se apliquem.
A demonstração a seguir fornece uma explicação simples sobre o que acontece quando a sizecontenção é aplicada. Clique em qualquer lugar para alternar a contenção na caixa roxa. Quando a contenção é aplicada, a caixa roxa muda de tamanho. Por padrão, a altura da caixa roxa é definida por seus filhos, mas com a contenção a altura deve ser definida. Depois que a contenção é aplicada, os descendentes não estão mais envolvidos nos cálculos de layout relacionados ao tamanho.
Estilo
O stylevalor de contenção informa ao navegador que algumas propriedades CSS, como contadores e aspas, terão como escopo o elemento contido.
As propriedades counter-incremente counter-setdevem ter como escopo a subárvore do elemento contido. Se estendido para fora do elemento contido, um novo contador é criado.
Os valores da propriedade de conteúdo de open-quote, close-quote, no-open-quote, e no-close-quotedeve ser delimitado para sub-árvore do elemento contido.
Este valor de contenção é considerado em risco de ser removido da especificação.
Contente
O contentvalor de contenção é uma combinação dos valores de contenção de layout e tinta. Isso é o equivalente a aplicar contenção desta maneira:
div ( contain: layout paint; )Todos os benefícios potenciais descritos acima para cada valor estariam então disponíveis para o elemento contido. Essa restrição seria considerada relativamente segura para ser amplamente aplicada a vários elementos na página.
Estrito
O strictvalor de contenção é uma combinação das layout, painte sizeos valores de contenção. Isso é o equivalente a aplicar contenção desta maneira:
div ( contain: layout paint size; )Todos os benefícios potenciais descritos acima para cada valor estariam então disponíveis para o elemento contido.
Por ser o “mais estrito” dos valores de contenção, esse valor deve ser usado com consideração cuidadosa. Isso se deve aos requisitos de dimensão que ele impõe ao elemento contido. Com esses requisitos, esse valor de contenção oferece os benefícios de desempenho mais potenciais da contenção.
Suporte de navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 52 | 69 | Não | 79 | Não |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Não |