Neste artigo nos dispomos a analisar os atributos de folhas de estilo em cascata, em sua terceira versão (CSS3), overflow-x e overflow-y. Estas são duas das novidades desta linguagem para definição de estilos em páginas web, que estamos comentando no Manual de CSS3.

Realmente, embora se tratem de dois atributos novos em CSS3, o conceito de overflow não resultará tão novo para os estudiosos das folhas de estilo, posto que já vem de versões anteriores. EM CSS2 se incorporou o atributo overflow que, como talvez você saiba, serve para indicar ao navegador o que fazer quando um conteúdo ultrapassa os limites de um container. No entanto, ambos atributos já estavam esquecidos do W3C há tempos, tanto é assim que navegadores tão antigos como Internet Explorer 6, têm uma implementação parcial de overflow-x e overflow-y , apesar de terem sido incluídos formalmente em CSS a partir da terceira versão da linguagem.

Como você terá podido experimentar, de maneira predeterminada, quando um conteúdo ultrapassa os limites das dimensões da camada onde está situado, o navegador o mostra igualmente. Em alguns casos, como você poderá ver em Internet Explorer (ao menos em versões antigas), ajusta as dimensões dessa camada container para que esse conteúdo possa ser visto no navegador. Em outros casos mostra igualmente o conteúdo, embora fora da área do container (sem modificar as dimensões do container, como fazem Firefox ou Chrome). Porém, esse comportamento não sempre é aquele que desejamos e para isso se utiliza o atributo overflow.

Pois bem, overflow-x e overflow-y servem para exatamente o mesmo que overflow, pero com a diferença de que permitem especificar os comportamentos do navegador por separado, quando surge um transbordamento de um conteúdo na horizontal e na vertical respectivamente.

Valores possíveis para overflow-x e overflow-y

Nestes dois novos atributos podemos colocar vários valores diferentes, que nos servirão para definir diferentes tipos de comportamentos ante o desbordo do conteúdo de uma camada. Tanto overflow-x como overflow-y compartilham o mesmo leque de valores possíveis, mas podemos especificá-los por separado, para a coordenada X e a Y. Desse modo, não há porque serem definidos os mesmos valores quando surgem transbordamentos na horizontal e na vertical.

• Visible: Isto faz com que o conteúdo que não cabia na camada se mostre igualmente no navegador. É o comportamento predeterminado.
• Hidden: Serve para dizer ao navegador que não mostre qualquer conteúdo que saia das dimensões especificadas no container.
• Scroll: Permite mostrar barras de rolagem para que o usuário possa fazer scroll sobre o conteúdo e ver áreas que ficariam fora do container. No caso de que se aplique este atributo, as barras de rolagem apareceriam sempre no container, independentemente de que o conteúdo ultrapasse o não as dimensões do container.
• Auto: Este valor indica que as barras de rolagem devem aparecer apenas no caso de que o conteúdo supere os limites do container. Ou seja, é o mesmo que scroll, mas não apareceriam sempre as barras de rolagem, senão somente quando necessárias.
• No-display: Este comportamento nos dias de hoje não está implementado nos navegadores, mas serviria para que, caso um conteúdo ultrapasse o limite atribuído ao container, a camada completa que a contém seja eliminada da página. O efeito seria o mesmo se tivéssemos colocado display:none no container (se é que havia conteúdo que saísse de suas dimensões, claro).
• No-content: Isto provocaria que qualquer conteúdo, que não coubesse nas dimensões do container, fosse eliminado como se tivéssemos colocado o atributo visibility:hidden. Ou seja, à diferença do atributo anterior, o que se elimina é o conteúdo e não container inteiro.

Como se pode comprovar, as opções são diversas e permitiriam bastantes combinações distintas para comportamentos em uma camada, definindo por separado o que deve ocorrer na horizontal e na vertical.

Vale a pena comentar um detalhe sobre o comportamento predeterminado destes atributos. Como se disse, no caso de que não se especifique nada em overflow-x ou overflow-y, seria como se tivéssemos aplicado o valor visível. No entanto, se definimos somente um deles, o outro já não teria visível como valor predeterminado, senão auto.

Podemos ver vários exemplos da combinação de vários valores de overflow-x e de overflow-y.