Articles
Introdução ao CSS
`overflow` e `contain` Propriedades

`overflow` e `contain` Propriedades

Este artigo explica as propriedades overflow e contain.

Você pode aprender como descrever coisas como exibição de barras de rolagem e recorte com a propriedade overflow.

YouTube Video

HTML para Visualização

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

overflow e contain Propriedades

overflow

A propriedade CSS overflow é uma propriedade importante que controla como exibir o conteúdo de um elemento quando excede o tamanho da sua caixa. Ela é comumente usada para moldar o layout e a interface do usuário de páginas da web, ajudando a gerenciar a exibição de barras de rolagem, recortes e transbordo de elementos.

Noções básicas da propriedade overflow

A propriedade overflow possui quatro valores principais: visible, hidden, scroll e auto.

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible é o valor padrão, onde o conteúdo de um elemento transborda além do tamanho da caixa, mas ainda permanece visível. As partes transbordadas podem sobrepor outros elementos, mas barras de rolagem não são exibidas em particular.

Características:

  • O conteúdo é exibido sem limitações.
  • Nenhuma barra de rolagem é exibida.
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden é a configuração em que, se o conteúdo de um elemento exceder o tamanho da caixa, as partes que transbordam não serão exibidas. Nenhuma barra de rolagem é exibida, e o conteúdo transbordado não ficará visível.

Características:

  • Quando o conteúdo excede os limites do elemento, a parte excedente é escondida.
  • Nenhuma barra de rolagem é exibida.
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

Quando scroll é usado, as barras de rolagem são exibidas forçadamente se o conteúdo do elemento exceder a caixa. Mesmo que o conteúdo não transborde, as barras de rolagem são sempre exibidas.

Características:

  • As barras de rolagem são exibidas mesmo que o conteúdo se ajuste ao limite do elemento.
  • A rolagem é possível nas direções horizontal e vertical.
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto exibe barras de rolagem apenas quando o conteúdo transborda; se o conteúdo se ajusta à caixa do elemento, nenhuma barra de rolagem é exibida.

Características:

  • As barras de rolagem aparecem apenas quando o conteúdo transborda.
  • Cria automaticamente uma área rolável.
overflow-x e overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

A propriedade overflow também pode ser controlada individualmente para as direções horizontal (eixo x) e vertical (eixo y).

Dessa forma, você pode usar overflow-x e overflow-y para definir a exibição das barras de rolagem vertical e horizontal individualmente.

Considerações sobre Overflow

Ao usar a propriedade overflow, há alguns pontos com os quais você deve ter cuidado.

Efeitos no design devido à exibição de barras de rolagem

Usar scroll ou auto para exibir barras de rolagem pode prejudicar o design geral da página. Em particular, se os elementos estiverem posicionados à direita ou na borda inferior, as barras de rolagem podem torná-los menos visíveis.

Comportamento padrão do navegador

A forma como as barras de rolagem são exibidas e funcionam pode variar entre navegadores. Especialmente entre Windows e macOS, há diferenças nos estilos de exibição das barras de rolagem, o que pode fazer com que os designs não apareçam conforme planejado. É importante realizar testes entre navegadores (cross-browser).

Overflow de elementos filhos

Definir overflow: hidden em um elemento pai oculta os elementos filhos que excedem os limites do box do pai. Isso pode fazer com que pop-ups e janelas modais não sejam exibidos corretamente.

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

Na nova especificação do CSS, foi introduzido um valor chamado overflow: clip. Isso é semelhante ao hidden, mas não permite rolagem e apenas corta o conteúdo. Atualmente, ele é suportado por apenas alguns navegadores.

Características:

  • Se o conteúdo exceder os limites, essa parte será totalmente ocultada.
  • Nenhuma barra de rolagem é exibida.

Conclusão

A propriedade CSS overflow é uma ferramenta essencial para controlar a exibição de conteúdo no design web. Ao gerenciar situações onde o conteúdo excede os limites do box do elemento e ao aplicar barras de rolagem adequadas ou o corte do conteúdo, oferece aos usuários uma interface mais amigável. Além disso, usar overflow-x e overflow-y permite um controle mais detalhado. Com esse valor, as barras de rolagem são exibidas forçadamente quando o conteúdo do elemento excede os limites do box. Mesmo que o conteúdo não transborde, as barras de rolagem são sempre exibidas.

contain

Visão geral da propriedade contain

A propriedade CSS contain limita a influência que um elemento tem sobre outros elementos e sobre toda a página, otimizando o processo de renderização do navegador. Especificamente, ela restringe recalculações de layout (reflows) e repinturas (repaints) ao impedir que mudanças no estilo ou layout de um elemento afetem o conteúdo fora desse elemento.

Isso é importante para o desempenho de páginas da web e é particularmente eficaz para sites com layouts complexos ou grandes quantidades de conteúdo.

Valores para contain

A propriedade contain possui os seguintes valores:.

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout aplica restrições relacionadas ao layout. Ao usar este valor, o tamanho e a posição de um elemento não afetam outros elementos. Por exemplo, mesmo que um elemento seja redimensionado internamente, essa alteração não afeta o layout externo.

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint limita o impacto da pintura (desenho). Quando este valor é especificado, o desenho dentro do elemento não afeta mais os elementos externos, limitando assim o alcance dos cálculos de repintura.

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size garante que o tamanho do elemento não dependa de elementos externos. Especificamente, impede que o redimensionamento de elementos filhos afete o tamanho do elemento pai, melhorando assim a estabilidade do layout.

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style garante que o estilo de um elemento não afete elementos externos. Por exemplo, especificar contain: style; garante que mudanças de estilo naquele elemento não impactem outros elementos, reduzindo a gama de recalculações.

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content é um valor composto que aplica layout, paint, size e style. Usando isso, você pode garantir que o layout, o desenho, o tamanho e o estilo do elemento não tenham impacto algum sobre elementos externos.

Benefícios de desempenho

A principal razão para usar a propriedade contain é melhorar o desempenho das páginas da web. Em particular, é eficaz nas seguintes situações:.

  1. Otimização de reflows: Quando o tamanho ou o layout de um elemento muda, seu impacto pode ser limitado ao menor escopo possível. Isso reduz o escopo de reflows desnecessários (recalculações de layout) e alivia a carga no navegador.

  2. Redução de repinturas: Ao limitar a área de desenho, a parte que precisa ser repintada quando o estilo ou conteúdo de um elemento muda pode ser minimizada.

  3. Desenvolvimento baseado em componentes: Como cada componente ou módulo opera de forma independente de outros elementos, melhora o desempenho de cada componente, mesmo em aplicações web de grande escala.

Notas

Ao usar a propriedade contain, você deve ter em mente os seguintes pontos.

  1. Compreendendo o Escopo de Aplicação: A propriedade contain é útil para a otimização de desempenho, mas não deve ser aplicada a todos os elementos. É importante usá-la de forma apropriada nos locais adequados. Por exemplo, usá-la em elementos que mudam frequentemente ou em partes de uma estrutura DOM grande pode, na verdade, degradar o desempenho.

  2. Compatibilidade com Navegadores: A propriedade contain é uma funcionalidade relativamente nova do CSS e não é totalmente suportada em todos os navegadores. Ela é suportada nos principais navegadores (Chrome, Firefox, Edge, Safari), mas pode não ser aplicável em versões mais antigas.

Conclusão

A propriedade contain do CSS é uma ferramenta poderosa para otimizar o desempenho de páginas e aplicações web. Ao limitar o impacto que um elemento específico tem sobre os outros, ela reduz os custos de reflow e repaint, agilizando o processo geral de renderização. No entanto, é importante considerar cuidadosamente onde aplicá-la e usá-la de forma adequada.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Comparação entre Flexbox, Grid e Layouts em Colunas