Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<marquee> html tag usage/replacment

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.

like image 230
Baruch Avatar asked Dec 12 '10 19:12

Baruch


People also ask

What replaced marquee in HTML?

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.

Is marquee tag outdated?

<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.

Why marquee tag is deprecated?

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.

How do I scroll text without marquee in HTML?

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 .


2 Answers

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.

like image 93
Henrik Avatar answered Oct 18 '22 19:10

Henrik


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.

like image 24
nico Avatar answered Oct 18 '22 21:10

nico