Desbordamiento de CSS: visualización del contenido de un elemento

Las hojas de estilo en cascada son fáciles de usar si no se adentra en la jungla de la herencia, la priorización, la estructura de clase, los puntos teóricos y la experiencia práctica.

El objetivo principal de cada propiedad CSS es mostrar, pero eso no significa en absoluto "visible": la construcción oculta CSS Overflow es igual de importante.

Elementos de página

La página contiene no solo elementos en ellaSe pueden ubicar elementos de elementos, ya sean marcos (y esto puede ser no solo un conjunto de componentes, sino también otro sitio en su conjunto) o sistemas de objetos hechos a mano.

Naturalmente, la gran mayoría de los desarrolladoreslos sitios están practicando la composición tipográfica de caucho, se ven obligados a contar con los crecientes volúmenes de información y el hecho de que la barrera de 800 por 600 píxeles no es en absoluto la barrera de 640 KB que la mentalidad de los creadores de MS DOS superó durante varias décadas, dificultando la vida de los programadores y usuarios del primer equipo.

En la construcción del sitio, todo es inicialmente más simple: la página no cabe en la pantalla, el navegador se desplaza a ella. Aunque el desarrollador puede prever mostrar el contenido de la página en una ventana sin barras de desplazamiento y sin otras propiedades: el contenido de la página nunca saldrá de la ventana asignada. Naturalmente, otras aplicaciones se encuentran fuera de la ventana, y la ventana del navegador no es mejor que otras ventanas: el sistema operativo siempre representa la igualdad de las aplicaciones.

Sin embargo, no importa cuán priorizado seaelegir la opción de diseño, no importa cómo se distribuya el interés de los visitantes por la resolución de pantalla óptima para ver sitios, hoy en día hay diferentes pantallas que no siempre tienen capacidades rectangulares de un tamaño fijo.

Un mundo dinámico a través de Overflow CSS

Se acepta que la página de un sitio es contenido establecido por etiquetas de hipertexto que indican cómo mostrarla en un caso particular bajo ciertas condiciones.

Todo cambia constantemente. Incluso si el sitio es tal que su contenido no se puede cambiar durante muchos años, no hay garantía de que un visitante inesperado no lo abra en un nuevo dispositivo, que el desarrollador de este sitio ni siquiera sabía.

Opciones de propiedad de regla Overflow CSS proporciona solo cuatro: está permitido ocultar todo lo que va más allá del alcance del elemento, mostrar, proporcionar desplazamiento siempre o solo si es necesario, o heredar el valor del antepasado.

En el primer caso (desbordamiento: oculto), todo el contenido que vaya más allá del elemento estará oculto y lo que esté oculto no estará disponible. Esta posición es efectiva, pero no menos interesante es la opción de mostrar todo lo que va más allá (desbordamiento: visible). Por lo tanto, el desarrollador brinda al visitante la oportunidad de tener siempre una idea del contenido completo del elemento y administrar su volumen. El desplazamiento ofrece menos opciones (desbordamiento: desplazamiento: las barras de desplazamiento siempre están allí; o desbordamiento: las barras de desplazamiento automático aparecen según sea necesario).

Características del uso de la regla de desbordamiento

Elementos que están dentro de una etiqueta que tiene sentido CSS "desbordamiento de texto"son de particular interés solo cuando son texto. La ubicación de otros componentes generalmente está fijada por coordenadas o posiciones relativas.

Los elementos de texto no siempre contienen un número fijo de caracteres, y si fuera necesario usar una regla desbordamiento, se le confía a CSS opciones de control para cambios inesperados en el volumen de contenido.

En particular, en la etapa de depuración, puede aplicarel valor de las propiedades automáticas o de desplazamiento, y luego bloquea la visualización de todo lo que va más allá del área, proporcionando al visitante un conjunto de botones con los que moverá el contenido invisible al área visible. Esta es una práctica común. No todos están impresionados por la barra de desplazamiento, algunos prefieren cuatro botones: al principio, hacia adelante, hacia atrás, hasta el final.

Además, la regla de desbordamiento de CSS está establecida enauto / scroll trae un elemento de incertidumbre desagradable a la página: el navegador transfiere prioridad al desplazarse desde la página a su elemento cuando el puntero del mouse está sobre él.

Cuando un elemento es un bloque de texto,esto no es demasiado notorio e inconveniente, pero si coloca un control deslizante (bloque de elementos de imagen) en todo el ancho de la ventana, no puede superar este diseño con el mouse, a menudo tiene que usar los botones "inicio" o "fin de página".

Prioridades de desplazamiento

La página de diálogo del sitio con el visitante tienevalor significativo, así como su diseño, desarrollo, contenido. Como el sitio abre un navegador y lo hace en su propia ventana o en una pestaña separada, lo más probable es que la página tenga derecho a desplazarse, y no su elemento. Este último puede no solo ser muchos, sino que cada uno puede tener su propia función.

El sitio siempre tiene un significado específico, inclusosi pertenece al campo de la filosofía, misticismo u otro contenido imprevisto. Es por eso que siempre puede asumir una carga de diálogo específica en elementos con la regla de desbordamiento CSS.

En particular, si el elemento esel selector del año (fecha), el selector clásico será inconveniente y su barra de desplazamiento causará inconvenientes obvios. Aplicando el desbordamiento en este caso, CSS se puede usar de manera efectiva además: los campos internos en el elemento, los períodos destacados, brindan al visitante la oportunidad de establecer de manera rápida y conveniente la fecha, mes y año deseados.