La etiqueta de marquesina es un elemento HTML no estándar que hace que el texto se desplace hacia arriba, abajo, izquierda o derecha automáticamente. La etiqueta se introdujo por primera vez en las primeras versiones de Internet Explorer de Microsoft y se comparó con el elemento Blink de Netscape , como una extensión propietaria no estándar del estándar HTML con problemas de usabilidad. El W3C desaconseja su uso en documentos HTML.
La marquesina puede distraer. [1] El ojo humano se siente atraído por el movimiento, [2] y el texto de marquesina se mueve constantemente.
Al igual que con el elemento parpadeante , las imágenes o el texto etiquetados con marquesinas no siempre son completamente visibles en las páginas renderizadas, lo que hace que imprimir dichas páginas sea una tarea ineficiente (si no imposible); normalmente se requieren varios intentos para capturar todo el texto que podría mostrarse cuando los mensajes se desplazan o parpadean. La behavior="alternate"
versión de marquesina hace que el texto se mueva hacia adelante y hacia atrás, pero no oculta ninguna parte si los anchos de desplazamiento se configuran correctamente.
Debido a que el texto de marquesina se mueve, es más difícil hacer clic en los enlaces que contiene que en los de texto estático, dependiendo de la velocidad y la duración del desplazamiento. Los usuarios solo tienen una oportunidad cada vez que pasa. Además, desplazar el texto demasiado rápido puede hacerlo ilegible para algunas personas, especialmente aquellas con discapacidad visual. Esto puede frustrar fácilmente a los usuarios. Para combatir esto, las secuencias de comandos del lado del cliente permiten programar las marquesinas para que se detengan cuando el mouse está sobre ellas.
A diferencia de su contraparte parpadeante, el elemento de marquesina tiene varios atributos que se pueden utilizar para controlar y ajustar la apariencia de la marquesina.
Los bucles se cuentan cada vez que llega a cada extremo de la marquesina; un bucle de 1 es diferente del atributo 'Diapositiva'. Cuando el elemento se desplaza con el atributo 'Diapositiva', el elemento se detendrá permanentemente al final de la marquesina, mostrando el elemento completo. Sin embargo, cuando se desplaza un elemento sin un atributo 'Loop', el número de desplazamientos se repetirá según el número al que sea igual 'Loop'. Si 'Loop=1' entonces el elemento se desplazará solo una vez y saldrá completamente de la longitud del marco, mientras que el elemento que se desplaza se detendrá, sería lo mismo que 'Diapositiva'. De forma predeterminada, 'Loop=infinite', por lo que no es necesario codificar el atributo 'Loop' si desea un desplazamiento continuo. Nota: 'Bucle' se ignorará si se codifica el atributo 'Comportamiento'. Además, si 'Behavior=Alternate' y 'Loop=2' entonces el elemento irá desde el principio de la marquesina hasta el final y volverá al principio, contando un viaje de ida y vuelta como 2 bucles.
Un elemento de marquesina puede contener HTML arbitrario, por lo que, además de texto, podría mover una o más imágenes, clips de película o GIF animados .
La etiqueta de marquesina ha quedado obsoleta en la mayoría de los navegadores, pero aún se puede implementar el mismo comportamiento con hojas de estilo en cascada , como esta:
@ marquesina de fotogramas clave { 0 % { transformar : traducirX ( 100 % ); } 100 % { transformar : traducirX ( -100 % ); }}. contenedor de marquesina { espacio en blanco : nowrap ; desbordamiento : oculto ; posición : relativa ; animación : marquesina 10 s lineal infinita ; }. contenido de marquesina { pantalla : bloque en línea ; }
La animación, marquee
, se define por @keyframes
ser una simple traducción de derecha a izquierda; sería posible invertir la animación invirtiéndola (de -100% a 100%, por ejemplo). También se 10s
puede modificar para alterar su salida.
Luego se puede invocar el estilo en HTML:
< div class = "marquee-container" >< div class = "marquee-content" > ¡Los malditos gansos están en alquiler! </div> </div>
¡Los malditos gansos están en alquiler!
El elemento marquesina se inventó por primera vez para Internet Explorer de Microsoft y es compatible con él. Los navegadores web Firefox , Chrome y Safari lo admiten por compatibilidad con páginas heredadas. El elemento es HTML no compatible . Se propusieron propiedades CSS para lograr el mismo efecto especificado en el módulo Marquee Nivel 3, que se abandonó sin implementación en 2014. [3] También se pueden lograr efectos similares mediante el uso de animaciones JavaScript , [4] o CSS3 . [5]