Propiedades `overflow` y `contain`
Este artículo explica las propiedades overflow y contain.
Puedes aprender cómo describir cosas como mostrar barras de desplazamiento y recortar con la propiedad overflow.
YouTube Video
HTML para vista previa
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>Propiedades overflow y contain
overflow
La propiedad overflow de CSS es una propiedad importante que controla cómo se muestran los contenidos de un elemento cuando superan el tamaño de su contenedor. Se utiliza comúnmente para diseñar la estructura y la interfaz de usuario de las páginas web, ayudando a gestionar la visualización de barras de desplazamiento, el recorte y el desbordamiento de elementos.
Conceptos básicos de la propiedad overflow
La propiedad overflow tiene cuatro valores principales: visible, hidden, scroll y auto.
visible
1section.overflow-visible {
2 width: 400px;
3 height: 100px;
4 overflow: visible;
5}visible es el valor predeterminado, donde los contenidos de un elemento se desbordan más allá del tamaño del contenedor pero siguen siendo visibles. Las partes desbordadas pueden superponerse a otros elementos, pero no se muestran barras de desplazamiento en particular.
Características:
- El contenido se muestra sin límites.
- No se muestran barras de desplazamiento.
hidden
1section.overflow-hidden {
2 width: 400px;
3 height: 100px;
4 overflow: hidden;
5}hidden es la opción donde, si los contenidos de un elemento superan el tamaño del contenedor, las partes desbordadas no se muestran. No se muestran barras de desplazamiento, y el contenido desbordado no será visible.
Características:
- Cuando el contenido excede los límites del elemento, la parte excedente se oculta.
- No se muestran barras de desplazamiento.
scroll
1section.overflow-scroll {
2 width: 400px;
3 height: 100px;
4 overflow: scroll;
5}Cuando se utiliza scroll, las barras de desplazamiento se muestran obligatoriamente si el contenido del elemento supera el tamaño del contenedor. Incluso si el contenido no se desborda, las barras de desplazamiento siempre se muestran.
Características:
- Las barras de desplazamiento se muestran incluso si el contenido cabe dentro de los límites del elemento.
- Es posible desplazar el contenido en direcciones horizontal y vertical.
auto
1section.overflow-auto {
2 width: 400px;
3 height: 100px;
4 overflow: auto;
5}auto muestra barras de desplazamiento solo cuando el contenido se desborda; si el contenido cabe dentro del contenedor del elemento, no se muestran barras de desplazamiento.
Características:
- Las barras de desplazamiento aparecen solo cuando el contenido se desborda.
- Crea automáticamente un área desplazable.
overflow-x y overflow-y
1section.overflow-xy {
2 width: 400px;
3 height: 100px;
4 overflow-x: scroll;
5 overflow-y: hidden;
6}La propiedad overflow también puede controlarse individualmente para las direcciones horizontal (eje x) y vertical (eje y).
De esta manera, puedes usar overflow-x y overflow-y para configurar la visualización de las barras de desplazamiento vertical y horizontal individualmente.
Consideraciones para el desbordamiento
Al usar la propiedad overflow, hay algunos puntos que debes tener en cuenta.
Efectos en el diseño debido a la visualización de barras de desplazamiento
Usar scroll o auto para mostrar las barras de desplazamiento puede interrumpir el diseño general de la página. En particular, si los elementos están colocados en el borde derecho o inferior, las barras de desplazamiento pueden hacerlos menos visibles.
Comportamiento predeterminado del navegador
La forma en que las barras de desplazamiento se muestran y funcionan puede variar entre navegadores. Especialmente entre Windows y macOS, hay diferencias en los estilos de visualización de las barras de desplazamiento, lo que puede hacer que los diseños no se vean como se pretendía. Es importante realizar pruebas en diferentes navegadores.
Desbordamiento de elementos secundarios
Establecer overflow: hidden en un elemento padre oculta los elementos secundarios que exceden el contenedor del padre. Esto puede hacer que los cuadros emergentes y las ventanas modales no se muestren correctamente.
overflow: clip (CSS Level 3)
1section.overflow-clip {
2 width: 400px;
3 height: 100px;
4 overflow: clip;
5}En la nueva especificación de CSS, también se ha introducido un valor llamado overflow: clip. Esto es similar a hidden, pero no permite el desplazamiento y solo recorta el contenido. Actualmente, solo algunos navegadores lo soportan.
Características:
- Si el contenido se desborda, esa parte quedará completamente oculta.
- No se muestran barras de desplazamiento.
Conclusión
La propiedad CSS overflow es una herramienta esencial para controlar la visualización del contenido en el diseño web. Al gestionar situaciones en las que el contenido excede el contenedor del elemento y aplicar barras de desplazamiento o recortes adecuados, ofrece a los usuarios una interfaz más amigable. Además, usar overflow-x y overflow-y permite un control más detallado.
Con este valor, las barras de desplazamiento se muestran de forma forzada cuando el contenido del elemento excede el contenedor. Incluso si el contenido no se desborda, las barras de desplazamiento siempre se muestran.
contain
Visión general de la propiedad contain
La propiedad CSS contain limita la influencia que un elemento tiene sobre otros elementos y sobre toda la página, optimizando el proceso de renderizado del navegador. Específicamente, restringe los reflujos y repintados evitando que los cambios de estilo o diseño en un elemento afecten al contenido fuera de ese elemento.
Esto es importante para el rendimiento de las páginas web y es particularmente efectivo para sitios web con diseños complejos o grandes cantidades de contenido.
Valores para contain
La propiedad contain tiene los siguientes valores:.
layout
1section.contain-layout {
2 width: 300px;
3 height: 300px;
4 contain: layout;
5}layout aplica restricciones relacionadas con el diseño. Al usar este valor, el tamaño y la posición de un elemento no afectan a otros elementos. Por ejemplo, incluso si un elemento se redimensiona internamente, ese cambio no afecta al diseño externo.
paint
1section.contain-paint {
2 width: 300px;
3 height: 300px;
4 contain: paint;
5}paint limita el impacto del pintado (dibujado). Cuando se especifica este valor, el dibujo dentro del elemento ya no afecta a los elementos externos, limitando así el alcance de los cálculos de repintado.
size
1section.contain-size {
2 width: 300px;
3 height: 300px;
4 contain: size;
5}size asegura que el tamaño del elemento no dependa de elementos externos. Específicamente, evita que el cambio de tamaño de los elementos secundarios afecte el tamaño del elemento padre, mejorando así la estabilidad del diseño.
style
1section.contain-style {
2 width: 300px;
3 height: 300px;
4 contain: style;
5}style asegura que el estilo de un elemento no afecte a elementos externos. Por ejemplo, especificar contain: style; asegura que los cambios de estilo en ese elemento no afecten a otros elementos, reduciendo el rango de recalculaciones.
content
1section.contain-content {
2 width: 300px;
3 height: 300px;
4 contain: content;
5}content es un valor compuesto que aplica layout, paint, size y style. Usando esto, puedes asegurar que el diseño, dibujo, tamaño y estilo del elemento no tengan ningún impacto en los elementos externos.
Beneficios de rendimiento
La razón principal para usar la propiedad contain es mejorar el rendimiento de las páginas web. En particular, es efectiva en las siguientes situaciones.
-
Optimización de recalculación: Cuando el tamaño o diseño de un elemento cambia, su impacto puede limitarse al alcance más pequeño posible. Esto reduce el alcance de las recalculaciones innecesarias (reflows) y aligera la carga del navegador.
-
Reducción de repinteo: Al limitar el área de dibujo, se puede minimizar la parte que necesita ser repintada cuando el estilo o contenido de un elemento cambia.
-
Desarrollo basado en componentes: Dado que cada componente o módulo opera independientemente de otros elementos, mejora el rendimiento de cada componente incluso en aplicaciones web a gran escala.
Notas
Cuando uses la propiedad contain, deberías tener en cuenta los siguientes puntos.
-
Entender el alcance de la aplicación: La propiedad
containes útil para la optimización del rendimiento, pero no debería aplicarse a todos los elementos. Es importante usarla apropiadamente en los lugares adecuados. Por ejemplo, usarla en elementos que cambian con frecuencia o en partes de una estructura DOM grande podría degradar el rendimiento en lugar de mejorarlo. -
Compatibilidad con navegadores: La propiedad
containes una característica relativamente nueva de CSS y no es totalmente compatible con todos los navegadores. Es compatible con los navegadores principales (Chrome, Firefox, Edge, Safari), pero puede no ser aplicable en versiones más antiguas.
Conclusión
La propiedad CSS contain es una herramienta poderosa para optimizar el rendimiento de las páginas y aplicaciones web. Al limitar el impacto que tiene un elemento específico en otros, reduce los costos de recalculación y repinteo, optimizando el proceso de renderización general. Sin embargo, es importante considerar cuidadosamente dónde aplicarla y usarla de manera adecuada.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.