El podcast de CSS - 034: Desbordamiento
Cuando el contenido se extiende más allá de su elemento superior, hay muchas opciones para manejarlo. Puedes desplazarte para agregar espacio adicional, recortar los bordes, indicar el corte con puntos suspensivos y mucho más. Es especialmente importante tener en cuenta el desbordamiento cuando se desarrollan aplicaciones para teléfonos y varios tamaños de pantalla.
Existen dos opciones de recorte diferentes en CSS; text-overflow ayudará con las líneas individuales de texto, y las propiedades overflow ayudarán a controlar el desbordamiento en el modelo de cuadro.
Desbordamiento de una sola línea con text-overflow
Usa la propiedad text-overflow en cualquier elemento que contenga nodos de texto, por ejemplo, un párrafo, <p>. Especifica cómo aparece el texto cuando no cabe en el espacio disponible del elemento. Todo el texto HTML visible de una página se encuentra en nodos de texto. Para usar text-overflow, necesitas una sola línea de texto separada, por lo que también debes establecer overflow en hidden y tener un valor white-space que evite la unión.
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Usa propiedades de desbordamiento
Las propiedades de desbordamiento se establecen en un elemento para controlar lo que sucede cuando sus elementos secundarios necesitan más espacio del que tiene disponible. Esto puede ser intencional, como en un mapa interactivo como Google Maps, donde un usuario se desplaza lateralmente alrededor de una imagen grande recortada a un tamaño específico. También puede ser no intencional, como en una aplicación de chat, en la que el usuario escribe un mensaje largo que no cabe en el cuadro de texto.
Puedes considerar el desbordamiento en dos partes. El elemento superior tiene un espacio firmemente limitado que no cambiará. Puedes considerarlo como una ventana. Los elementos secundarios son contenido que requiere más espacio del elemento superior. Es como mirar por la ventana. Administrar el desbordamiento ayudará a orientar la forma en que la ventana enmarca este contenido.
Desplazamiento en el eje vertical y horizontal
La propiedad overflow-y controla el desbordamiento físico a lo largo del eje vertical del viewport del dispositivo (por lo tanto, se desplaza hacia arriba y hacia abajo).
Los controles de la propiedad overflow-x desbordan el eje horizontal del viewport del dispositivo, por lo que se desplaza hacia la izquierda y la derecha.
Propiedades lógicas para la dirección de desplazamiento
Las propiedades overflow-inline y overflow-block establecen el desbordamiento según la dirección del documento y el modo de escritura.
La abreviatura overflow
La abreviatura overflow establece los estilos overflow-x y overflow-y en una línea:
overflow: hidden scroll;
Si se especifican dos palabras clave, la primera se aplica a overflow-x y la segunda a overflow-y. De lo contrario, overflow-x y overflow-y usan el mismo valor.
Valores
Analicemos con más detalle los valores y las palabras clave disponibles para las propiedades de overflow.
overflow: visible(predeterminada)- Sin configurar la propiedad,
overflow: visiblees el valor predeterminado para la Web. Esto garantiza que el contenido nunca se oculte de forma accidental y siga los principios centrales de "nunca ocultar contenido" o "diseños seguros de diseños precisos". overflow: hidden- Con
overflow: hidden, el contenido se recorta en la dirección especificada y no se proporcionan barras de desplazamiento para mostrarlo. overflow: scrolloverflow: scrollhabilita las barras de desplazamiento para permitir que los usuarios se desplacen por el contenido. Incluso si el contenido no está desbordado, las barras de desplazamiento estarán presentes. Esta es una excelente manera de reducir el cambio de diseño en el futuro si es posible que un contenedor sea desplazable en el futuro, por ejemplo, según el cambio de tamaño, y preparar visualmente al usuario para las áreas desplazables.overflow: clip- Al igual que
overflow: hidden, el contenido conoverflow: clipse recorta en el cuadro de relleno del elemento. La diferencia entreclipyhiddenes que la palabra clavecliptambién prohíbe todo el desplazamiento, incluido el desplazamiento programático. overflow: auto- Por último, el valor más usado:
overflow: auto. Esto respeta las preferencias del usuario y muestra barras de desplazamiento si es necesario, pero las oculta de forma predeterminada y da la responsabilidad de desplazarse al usuario y al navegador.
Desplazamiento y desbordamiento
Muchos de estos comportamientos de overflow introducen una barra de desplazamiento, pero hay algunos comportamientos y propiedades de desplazamiento específicos que pueden ayudarte a controlar el desplazamiento en tu contenedor de desbordamiento.
Desplazamiento y accesibilidad
Es importante asegurarse de que el área desplazable pueda aceptar el foco, de modo que el usuario que usa el teclado pueda presionar Tab hasta llegar al cuadro, y luego usar las teclas de flecha para desplazarse.
Para permitir que un cuadro de desplazamiento acepte el enfoque, agrega tabindex="0", un nombre con el atributo aria-labelledby y un atributo role adecuado. Por ejemplo:
<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
content
</div>
Luego, se puede usar CSS para indicar que el cuadro está enfocado, usando la propiedad outline para dar una pista visual de que ahora se podrá desplazar.
En Cómo usar CSS para aplicar la accesibilidad, Adrian Roselli demuestra cómo CSS puede ayudar a prevenir las regresiones de accesibilidad. Por ejemplo, para activar el desplazamiento y agregar el indicador de enfoque solo si se usan los atributos correctos. Las siguientes reglas solo permitirán que el cuadro sea desplazable si tiene atributos tabindex, aria-labelledby y role.
[role][aria-labelledby][tabindex] {
overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
outline: .1em solid blue;
}
Posicionamiento de la barra de desplazamiento dentro del modelo de cuadro
Las barras de desplazamiento ocupan espacio dentro del cuadro de relleno y pueden competir por el espacio si son inline y no overlaid. El módulo de modelo de cuadro se extiende más sobre esta posible fuente de cambio de diseño.
Desplazamiento raíz frente a desplazamiento implícito
Es posible que notes que algunos desplazadores tienen un comportamiento de "deslizar hacia abajo para actualizar" y otros comportamientos especiales, en especial cuando se desarrollan aplicaciones híbridas y para dispositivos móviles. Este comportamiento de desplazamiento se produce en la barra de desplazamiento raíz. Solo hay un desplazador raíz en una página. De forma predeterminada, documentElement es la barra de desplazamiento raíz de la página. Sin embargo, si se cambia el elemento que es la barra de desplazamiento raíz, los comportamientos especiales se pueden aplicar a otros desplazadores que no sean documentElement, llamamos a este nuevo desplazamiento raíz implícito.
Para crear una barra de desplazamiento raíz, puedes usar lo que se denomina promoción de desplazamiento. Para ello, posiciona un contenedor como fijo, asegurándote de que cubra todo el viewport y el índice z en la parte superior con una barra de desplazamiento. Experimenta una barra de desplazamiento raíz en comparación con una barra de desplazamiento implícito anidada aquí.
en comparación con el desplazamiento de una barra de desplazamiento implícito sin comportamiento de desplazamiento mejorado.
comportamiento-de-desplazamiento
scroll-behavior te permite habilitar el desplazamiento hacia los elementos controlado por el navegador. Esto te permite especificar cómo se controla la navegación in-page, como .scrollTo() o los vínculos.
Esto es especialmente útil cuando se usa con prefers-reduced-motion para especificar el comportamiento de desplazamiento según las preferencias del usuario.
@media (prefers-reduced-motion: no-preference) {
.scroll-view {
scroll-behavior: auto;
}
}
comportamiento-sobredesplazamiento
Si alguna vez llegaste al final de una superposición modal, luego continúas desplazándote y la página que se encuentra detrás de la superposición se movió, se trata del encadenamiento de desplazamiento, o se burbujean hasta el contenedor de desplazamiento superior. La propiedad overscroll-behavior te permite evitar que el desplazamiento desbordado se filtre en un contenedor superior (llamado encadenamiento de desplazamiento).
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre desbordamiento
¿El desbordamiento de texto y el desbordamiento de elementos son iguales?
La propiedad overflow acepta 2 palabras clave. ¿Para qué eje es la primera?
¿Qué espacio en el modelo de cuadro consumen las barras de desplazamiento cuando se muestran y se intercalan?
overlay se superpondrán con el padding y, en el modo inline, se agregarán al padding.Para capturar un impulso adicional del desplazamiento en un desplazador implícito anidado, ¿qué propiedad usarías?
scroll-behaviorscroll-hintoverscroll-behaviorcontain, se atrapará el desplazamiento.scroll-paddingoverscroll-effect