Podcast do CSS - 034: Overflow
Quando o conteúdo ultrapassa o layout pai, há muitas opções para lidar com ele. Você pode rolar a tela para adicionar mais espaço, recortar as bordas excedentes, indicar o corte com reticências e muito mais. É especialmente importante considerar o transbordamento ao desenvolver aplicativos de telefone e vários tamanhos de tela.
Existem duas opções de corte no CSS: text-overflow ajudará com linhas individuais de texto e as propriedades overflow ajudarão a controlar o excesso no modelo de caixa.
Excesso de linha única com text-overflow
Use a propriedade text-overflow em qualquer elemento que contenha nós de texto, como um parágrafo, <p>. Ele especifica como o texto aparece quando não se encaixa no espaço disponível do elemento. Todo texto HTML visível em uma página está em nós de texto. Para usar text-overflow, você precisa de uma única linha de texto desencapsulada. Também é necessário definir overflow como hidden e ter um valor white-space que impeça o encapsulamento.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Como usar propriedades de estouro
As propriedades de sobrefluxo são definidas em um elemento para controlar o que acontece quando os filhos precisam de mais espaço do que o disponível. Isso pode ser intencional, como em um mapa interativo como o Google Maps, em que o usuário movimenta uma imagem grande cortada em um tamanho específico. Também pode não ser intencional, como em um aplicativo de chat em que o usuário digita uma mensagem longa que não cabe no balão de texto.
Você pode pensar no transbordamento em duas partes. O elemento pai tem um espaço firmemente restrito que não mudará. Pense nisso como uma janela. Os elementos filhos são conteúdos que precisam de mais espaço do pai. Pense nisso como o que você está olhando pela janela. O gerenciamento do estouro ajudará a orientar como a janela enquadra esse conteúdo.
Rolagem no eixo vertical e horizontal
A propriedade overflow-y controla o transbordamento físico ao longo do eixo vertical da janela de visualização do dispositivo, rolando para cima e para baixo.
Os controles da propriedade overflow-x ultrapassam o eixo horizontal da janela de visualização do dispositivo, rolando para a esquerda e para a direita.
Propriedades lógicas para direção de rolagem
As propriedades overflow-inline e overflow-block definem o estouro com base na direção do documento e no modo de escrita.
A abreviação overflow
A abreviação overflow define os estilos overflow-x e overflow-y em uma linha:
overflow: hidden scroll;
Se duas palavras-chave forem especificadas, a primeira vai ser aplicada a overflow-x e a segunda a overflow-y. Caso contrário, overflow-x e overflow-y usarão o mesmo valor.
Valores
Vamos analisar melhor os valores e as palavras-chave disponíveis para as propriedades overflow.
overflow: visible(padrão)- Sem definir a propriedade,
overflow: visibleé o valor padrão para a Web. Isso garante que o conteúdo nunca seja oculto acidentalmente e siga os princípios fundamentais de "nunca ocultar conteúdo" ou "layouts seguros de layouts precisos". overflow: hidden- Com o
overflow: hidden, o conteúdo é cortado na direção especificada, e nenhuma barra de rolagem é fornecida para mostrá-lo. overflow: scroll- O
overflow: scrollativa barras de rolagem que permitem aos usuários navegar pelo conteúdo. Mesmo que o conteúdo não esteja ultrapassando o limite, as barras de rolagem estarão presentes. Essa é uma ótima maneira de reduzir a mudança futura de layout caso um contêiner possa ser rolado no futuro com base, por exemplo, no redimensionamento, e preparar visualmente o usuário para áreas roláveis. overflow: clip- Assim como
overflow: hidden, o conteúdo comoverflow: clipé recortado na caixa de padding do elemento. A diferença entreclipehiddené que a palavra-chavecliptambém proíbe toda a rolagem, incluindo a rolagem programática. overflow: auto- Por fim, o valor mais usado,
overflow: auto. Isso respeita as preferências do usuário e mostra barras de rolagem, se necessário, mas as oculta por padrão, além de atribuir a responsabilidade pela rolagem ao usuário e ao navegador.
Rolagem e sobreposição
Muitos desses comportamentos de overflow introduzem uma barra de rolagem, mas há alguns comportamentos e propriedades específicos que podem ajudar você a controlar a rolagem no contêiner flutuante.
Rolagem e acessibilidade
É importante garantir que a área de rolagem aceite o foco para que o usuário do teclado possa usar a tecla Tab até chegar à caixa e usar as teclas de seta para rolar a tela.
Para que uma caixa de rolagem aceite o foco, adicione tabindex="0", um nome com o atributo aria-labelledby e um atributo role adequado. Exemplo:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>
O CSS pode ser usado para indicar que a caixa está em foco, usando a propriedade outline para dar uma indicação visual de que agora será possível rolar a tela.
Em Como usar CSS para aplicar a acessibilidade, Adrian Roselli demonstra como o CSS pode ajudar a evitar regressões de acessibilidade. Por exemplo, para ativar a rolagem e adicionar o indicador de foco apenas se os atributos corretos forem usados. As regras a seguir só tornarão a caixa rolável se ela tiver um atributo tabindex, aria-labelledby e role.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
Posicionamento da barra de rolagem no modelo de caixa
As barras de rolagem ocupam espaço na caixa de padding e podem competir por espaço se forem inline, e não overlaid. O módulo de modelo de caixa aborda mais essa possível fonte de mudança de layout.
root-scroller x implicit-scroller
Você pode notar que alguns controles de rolagem têm um comportamento de arrastar para atualizar e outros comportamentos especiais, especialmente ao desenvolver aplicativos híbridos e para dispositivos móveis. Esse comportamento de rolagem acontece no botão de rolagem raiz. Há apenas um botão de rolagem raiz em uma página. Por padrão, o documentElement é o botão de rolagem raiz da página. No entanto, ao alterar qual elemento é o botão de rolagem raiz, os comportamentos especiais podem ser aplicados a outros recursos que não o documentElement, e chamamos esse novo de rolagem raiz implícito.
Para criar um botão de rolagem raiz, você pode usar algo chamado promoção de rolagem, posicionando um contêiner como fixo, garantindo que ele cubra toda a janela de visualização e tenha um Z-index na parte superior com um botão de rolagem. Confira aqui a experiência de um botão de rolagem raiz vs. um botão de rolagem implícito aninhado.
em comparação com a rolagem de um botão de rolagem implícito sem comportamento de rolagem aprimorado.
comportamento de rolagem
scroll-behavior permite ativar a rolagem controlada pelo navegador para elementos. Isso permite que você especifique como a navegação na página, como .scrollTo() ou links, é tratada.
Isso é especialmente útil quando usado com prefers-reduced-motion para especificar o comportamento de rolagem com base na preferência do usuário.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
comportamento de rolagem esticada
Se você chegou ao fim de uma sobreposição modal, continuou rolando e a página por trás da sobreposição se moveu, isso significa que a rolagem está encadeada, ou borbulha no contêiner de rolagem pai. A propriedade overscroll-behavior permite evitar o vazamento de rolagem flutuante em um contêiner pai (chamado de encadeamento de rolagem).
Teste seu conhecimento
Teste seu conhecimento sobre estouro
O estouro de texto e de elemento são iguais?
A propriedade overflow aceita duas palavras-chave. A primeira é para qual eixo?
Que espaço no modelo de box as barras de rolagem consomem ao serem exibidas e inline?
overlay se sobrepõem ao padding e, no modo inline, são adicionadas ao padding.Para aproveitar o momento extra da rolagem em um botão de rolagem implícito aninhado, qual propriedade você usaria?
scroll-behaviorscroll-hintoverscroll-behaviorcontain vai capturar a rolagem.scroll-paddingoverscroll-effect