<marquee> html tag usage/replacment

Question

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:

• Javascript, which will be heavier to download and might be turned off (is that a pro or a con?), but I get the bonus of being W3C correct and valid and non-deprecated and smart,

or should I use

• the hated <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.

Answer 1

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.

Answer 2

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.

Answer 3

If you're sure that it works on all platforms you're aiming for, and you don't care what w3c says you can certainly use the marquee tag. There is no way that you can find a JavaScript solution that works in less than 14 bytes.

The only unfortunate thing is that the reason all these browsers support all these deprecated elements that are -in this case- not even part of any HTML standard, is because of all these people using these elements and start whining when a new version doesn't support their 1982 compliant website anymore.

So please go ahead and use marquee as long as it works for you, but please don't complain if you site stops working in a newer browser.

Answer 4

Here's the code that implements the marquee element in Firefox, it's basically doing it in JavaScript anyway so you could always just adapt that code and use it directly in all browsers.

The code can be hacked around so that marquee can be implemented on any element in Firefox, applied through CSS and XBL bindings (Firefox only example). The equivalent in IE would be behaviours, and you could use the CSS3 in Safari/Chrome as nico suggested and you would be keeping the presentational stuff out of your markup, but only you can know if it's worth the effort.

Answer 5

I've been looking for the most efficient and cross-browser supported marquee implementation. For whatever reason, even the webkit CSS marquee implementation is glitchy.

The common approach is to use timer (or jQuery animate implementation) to adjust the CSS margin property of the element. This is too glitchy and very inefficient. I came up with implementation that utilises CSS3 transitions for browsers that support it and otherwise animate the scrollLeft property of the containing element. It is an experimental implementation, though it works well with IE7+. Other people might find it useful as well, https://github.com/gajus/marquee (demo https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/).

Answer 6

Recently, i had to do this effect for a client and i've used this plugin which is very easy to use :

jQuery Marquee plugin on github

jQuery Marquee on plugins.jquery.com