En este artículo nos disponemos a analizar los atributos de hojas de estilo en cascada, en su tercera versión (CSS3), overflow-x y overflow-y. Estas son dos de las novedades de este lenguaje para definición de estilos en páginas web, que estamos comentando en el Manual de CSS3.

Realmente, aunque se trata de dos atributos nuevos en CSS3, el concepto de overflow no resultará tan novedoso para los estudiosos de las hojas de estilo, puesto que ya viene de versiones anteriores. En CSS2 se incorporó el atributo overflow que, como quizás sepas, sirve para indicar al navegador qué hacer cuando un contenido sobrepasa los límites de un contenedor. Sin embargo, ambos atributos ya estaban en el tintero del W3C desde hace tiempo, tanto es así que navegadores tan antiguos como Internet Explorer 6, tienen una implementación parcial de overflow-x y overflow-y , a pesar de haber sido incluidos formalmente en CSS a partir de la tercera versión del lenguaje.

Como habrás podido experimentar, de manera predeterminada, cuando un contenido sobrepasa los límites de las dimensiones de la capa donde está situado, el navegador lo muestra igualmente. En algunos casos, como podrás ver en Internet Explorer (al menos en versiones antiguas), ajusta las dimensiones de esa capa contenedora para que ese contenido se pueda ver en el navegador. En otros casos muestra igualmente el contenido, aunque fuera del área del contenedor (sin modificar las dimensiones del contenedor, como hace Firefox o Chrome). Pero ese comportamiento no es siempre el que deseamos y para ello se utiliza el atributo overflow.

Pues bien, overflow-x y overflow-y sirven para exactamente lo mismo que overflow, pero con la diferencia que permiten especificar los comportamientos del navegador por separado, cuando surge un desbordamiento de un contenido en la horizontal y en la vertical respectivamente.

Valores posibles para overflow-x y overflow-y

En estos dos nuevos atributos podemos colocar varios valores distintos, que nos servirán para definir diferentes tipos de comportamientos ante el desborde del contenido de una capa. Tanto overflow-x como overflow-y comparten el mismo abanico de valores posibles, pero los podemos especificar por separado, para la coordenada X y la Y. De ese modo, no tienen por qué definirse los mismos valores cuando surgen desbordamientos en la horizontal y en la vertical.

• Visible: Esto hace que el contenido que no cabía en la capa se muestre igualmente en el navegador. Es el comportamiento predeterminado.
• Hidden: Sirve para decirle al navegador que no muestre cualquier contenido que se salga de las dimensiones especificadas en el contenedor.
• Scroll: Permite mostrar unas barras de desplazamiento para que el usuario pueda hacer scroll sobre el contenido y ver áreas que quedarían fuera del contenedor. En el caso que se aplique este atributo, las barras de desplazamiento aparecerían siempre en el contenedor, independientemente de si el contenido sobrepasa o no las dimensiones del contenedor.
• Auto: Este valor indica que las barras de desplazamiento deben aparecer solo en el caso que el contenido supere los límites del contenedor. Es decir, es lo mismo que scroll, pero no aparecerían siempre las barras de desplazamiento, sino solamente cuando sean necesarias.
• No-display: Este comportamiento a día de hoy no está implementado en los navegadores, pero serviría para que, en caso que un contenido sobrepase el límite asignado al contenedor, la capa completa contenedora sea eliminada de la página. El efecto sería el mismo que si hubiésemos colocado display:none en el contenedor (si es que había contenido que saliese de sus dimensiones, claro).
• No-content: Esto provocaría que cualquier contenido, que no cupiese en las dimensiones del contenedor, fuera eliminado como si le hubiésemos colocado el atributo visibility:hidden. Osea, en diferencia del atributo anterior, lo que se elimina es el contenido y no el contenedor entero.

Como se puede comprobar, las opciones son diversas y permitirían bastantes combinaciones distintas para comportamientos en una capa, definiendo por separado lo que debe ocurrir en la horizontal y en la vertical.

Merece la pena comentar un detalle sobre el comportamiento predeterminado de estos atributos. Como se dijo, en caso que no se especifique nada en overflow-x u overflow-y, sería como si hubiésemos aplicado el valor visible. Sin embargo, si definimos solamente uno de ellos, el otro ya no tendría visible como valor predeterminado, sino auto.

Podemos ver varios ejemplos de la combinación de varios valores de overflow-x y de overflow-y.