I know that <marquee>
tags are evil.
If it is so bad to have scrolling text, then using JS to get the same effect doesn't make it any better, right?
And suppose I decided to have some scrolling text (gasp), is there some type of CSS(3?) or HTML(5?) way to do this that is technically correct (i.e. not deprecated)?
If there isn't a CSS/HTML solution, should I use:
or should I use
<marquee>
(<blink><blink>) tag, which is lightweight (19 bytes!), fully supported by all browsers in all rendering modes and all doctypes (even though it shouldn't be), but is deprecated?Thanks.
P.S. I think a news ticker is a valid use for marquee-style
P.P.S. If anybody tells me that if I don't want a heavy Javascript solution I should use JQuery because it is lightweight, I will shoot them in the comments
Edit: I'm adding JQuery tag since that seems to be the best way to get attention from a lot of experts on JS questions, and it is not totally unrelated here.
Use CSS animation instead of <marquee> CSS animation enables you to create the marquee effect and make it user-friendly by using the prefers-reduced-motion media query to stop all animations for those who don't want them.
<marquee>: The Marquee element. Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
The marquee element creates scrolling text that is difficult to read and click on. Beyond that, it can be distracting to viewers, especially to those with low vision, cognitive disabilities, or attention deficits. People with attention deficits or cognitive disabilities could become distracted by content that scrolls.
You can use the :hover selector with the animation-play-state property to stop the scrolling of the text when hovered. Set the "paused" value for the animation-play-state .
It is not the effect that is bad. The problem with marquee, blink and font tags is that they convey presentation not structure of your content.
CSS3 has support for marquee, but it is only supported in a few browsers (Safari and Chrome are the only one, to my knowledge)
http://www.w3.org/TR/css3-marquee/
There are several JQuery plugins that accomplish it, but they come at the expense of loading JQuery (26Kb, heavier than the HTML only solution, but not what I would call heavy)
http://plugins.jquery.com/plugin-tags/marquee
Of course you can easily do it yourself without JQuery, but looking at those plugins may give you ideas.
Another option to consider is to do a small Flash animation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With