99

Longer time I'm curious about HTML tag <marquee>.

You can find in MDN specification:

Obsolete This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

or on W3C wiki:

No, really. don't use it.

I searched several articles and found some mention about CSS relevant replacement. CSS attributes like:

marquee-play-count
marquee-direction
marquee-speed

but it seems, they don't work. They were a part of specification in year 2008, but they were excluded in year 2014

One way, proposed by W3 Consortium, is using CSS3 animations, but it seems for me much more complicated than easy-to-maintain <marquee>.

There are also plenty of JS alternatives, with lots of source code that you can add to your projects and make them larger.

I'm always reading things as: "don't ever use marquee", "is obsolete". And I don't get why.

So, can anybody explain to me, why is marquee deprecated, why is so "dangerous" using it and what is the easiest substitution?

I found an example, it looks nice. When you use all prefixes needed for good browser support, you have around 20-25 lines of CSS, with 2 values hardcoded (start and stop indent), depending on text length. This solution is not so flexible, and you can't create bottom-to-top effect with this.

Community
  • 1
  • 1
areim
  • 3,371
  • 2
  • 23
  • 29
  • 47
    The easiest substitution is not moving text you want the user to read :) – doldt Aug 11 '15 at 20:25
  • 2
    Well, using marquee won't kill users, but if a browser vendor decides to remove it in a next version, users can't see the content anymore. – Teemu Aug 11 '15 at 20:28
  • 1
    @doldt, yes I agree, but you have it everywhere, imagine for example playlist with songs and when they have longer names, they are in most of applications moving - this is real problem "hard" to do with JS/CSS – areim Aug 11 '15 at 20:31
  • 1
    @areim you should consider switching to a better music player :-) – Lucas Trzesniewski Aug 11 '15 at 20:33
  • 1
    @areim maybe the song thing is a bad example because there is no really to read the scrolling title when the song is playing. Also these marquee you see are in the everyday world but for web, it might not apply. For me personally, when I see a marquee, I usually just ignore it altogether because I don't want to wait and read. With css3 animation, it is not that complicated to setup a marquee – Huangism Aug 11 '15 at 20:33
  • 4
    Yes, I also don't like it and ignore all annoying moving things on web, but why it is deprecated? It was clear and easy. Is there some real issue with it? It couldn't be just "most of people don't like it". There are tones of paralaxes, sliders today :-D – areim Aug 11 '15 at 20:40
  • 1
    https://stackoverflow.com/questions/21233033/css3-marquee-effect – VXp Sep 19 '18 at 09:43

6 Answers6

90

I don't think you should move the content but that doesn't answer your question... Take a look at the CSS:

.marquee {
    width: 450px;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Here is the codepen.

Edit:

Here is the bottom to top codepen.

Thomas Bormans
  • 5,156
  • 6
  • 34
  • 51
  • 7
    Realy nice, but it doesnt workt if you have multiple divs or mutliple P s in the scrolling content :( – Radon8472 Feb 20 '18 at 08:14
  • 1
    To answer the question if someone falls on it because of the obsolescence, it's quite simple in fact :). put the whole thing in a div and then put the elements in span https://codepen.io/scwall/pen/mdemeER – Pascal de Sélys Apr 25 '20 at 21:58
  • 3
    @PascaldeSélys how do I make it repeat without any white spaces between the last span and repeated first span (No white spaces after last span?) – josh Sep 11 '20 at 06:26
  • If you want to repeat without the white spaces, you need to clone the `p` node via JavaScript and append it after the first one. Then you can animate from `transform: translate(0, 0)` to `transform: translate(-50%, 0)` and repeat without any visible break (provided that the width of two `p` nodes is larger than the width of the container). – Jasper Habicht Nov 17 '21 at 16:10
16

You just have to define class and attached looping animation once in CSS and use it afterwards everywhere you need. But, as many people said - it's a bit annoying practice, and there is a good reason, why this tag is becoming obsolete.

.example1 {
  height: 50px; 
  overflow: hidden;
  position: relative;
}
.example1 h3 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;

    /* Starting position */
       -moz-transform:translateX(100%);
       -webkit-transform:translateX(100%);  
       transform:translateX(100%);

 /* Apply animation to this element */  
       -moz-animation: example1 5s linear infinite;
       -webkit-animation: example1 5s linear infinite;
       animation: example1 5s linear infinite;
}

/* Move it (define the animation) */
      @-moz-keyframes example1 {
       0%   { -moz-transform: translateX(100%); }
       100% { -moz-transform: translateX(-100%); }
      }
      @-webkit-keyframes example1 {
       0%   { -webkit-transform: translateX(100%); }
       100% { -webkit-transform: translateX(-100%); }
      }
      @keyframes example1 {
       0%   { 
       -moz-transform: translateX(100%); /* Firefox bug fix */
       -webkit-transform: translateX(100%); /* Firefox bug fix */
       transform: translateX(100%);         
       }
       100% { 
       -moz-transform: translateX(-100%); /* Firefox bug fix */
       -webkit-transform: translateX(-100%); /* Firefox bug fix */
       transform: translateX(-100%); 
       }
      }
    
<div class="example1">
   <h3>Scrolling text... </h3>
</div>
Artanis
  • 965
  • 1
  • 7
  • 25
16

<marquee> was never part of any HTML specification and what you link to is a CSS spec so it's hard to deprecate something that was never included. HTML is about structure of a document, not its presentation. So having a self-animated element as part of HTML does not abide by those goals. Animation is in CSS.

Rob
  • 14,746
  • 28
  • 47
  • 65
  • 3
    @user7892745 your argument DOESN'T make the tag not [obsolete](https://caniuse.com/#search=marquee) – honk31 May 30 '17 at 15:42
  • https://html.spec.whatwg.org/multipage/rendering.html#the-marquee-element-2 – BarryCap Jul 13 '21 at 15:53
  • 1
    @BarryCap [Obsolete Features - marquee](https://html.spec.whatwg.org/#toc-obsolete) Since the element was never part of any HTML specification, but its usage was too widespread, it was necessary to create an entry in that spec in order to mark it as obsolete. – Rob Jul 13 '21 at 17:39
7

I know this was answered a couple years ago, but I found this when inspecting this. When I inspected, I found this.

@keyframes scroll {
    from {
        transform: translate(0,0)
    }

    to {
       transform: translate(-300px,0)
    }
}

.resultMarquee {
    animation: scroll 7s linear 0s infinite;
    position: absolute
}
Edric
  • 24,639
  • 13
  • 81
  • 91
Bryan Zeng
  • 101
  • 2
  • 16
  • 2
    Welcome a few months later... the whole first result page of your linked google is now a list of web resources that explain that marquee is deprecated, without specifying the solution. When searching "HTML marquee replacement", the first result is this stackoverflow page, so no need to redirect back to google. – grek40 Apr 16 '18 at 11:21
  • @grek40b I guess so, but what about searching it up with some other search engine or searching it up with stack overflow in general? – Bryan Zeng Apr 21 '18 at 19:28
  • Cute Google Easter Egg! .. pretty funny. :) https://www.google.com/search?q=marquee+html – Rowe Morehouse Aug 13 '23 at 13:47
4

As stated before: the easiest substitution is CSS animation

To all the critics of the marquee:

It is a very useful tool for UI, I am using it just on hover, to display more information in a limited space.

The example for the mp3-player is excellent, even my car-radio is using the effect to show the current song.

So nothing wrong about that, my opinion ...

Wolfgang Blessen
  • 900
  • 10
  • 29
  • 8
    But to their point, HTML is "HyperText Markup Language". Animation is not a document structure (ergo markup) concern. It's a presentation concern. That is why it's now relegated to CSS and/or Javascript for implementation. – Tim Goyer Aug 11 '16 at 21:22
  • Den why have awesome inputs? Hmmm? –  May 08 '17 at 01:49
  • 1
    @TimGoyer I am just reflecting on using a Marquee Effect in general, just as an answer to people saying: "Don't move the text !" Implementing it with CSS instead of HTML is better and reasonable IMO – Wolfgang Blessen May 08 '17 at 08:49
  • 1
    @user7892745 - having inputs on a form for data-entry is a document structure concern. Making them "awesome" is a styling/scripting concern, depending on your definition of "awesome". Wolfgang - I agree that animation is best realized as a CSS/script effect. I was just pointing out that HTML is about document structure and that is why was deprecated. It doesn't offer a structure-based benefit beyond what a
    tag already offers. It merely attaches an animation that should be handled through scripting or styling.
     – Tim Goyer Jun 21 '17 at 19:13
1

I have created a jQuery script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount. Actually the code can skip the jQuery part but I felt too lazy to do so, and the vanilla JS part is actually a solution that I modified from @Stano answere from here

Here is the code:

jQuery(function($) {

  if ($('marquee').length == 0) {
    return;
  }

  $('marquee').each(function() {

    let direction = $(this).attr('direction');
    let scrollamount = $(this).attr('scrollamount');
    let scrolldelay = $(this).attr('scrolldelay');

    let newMarquee = $('<div class="new-marquee"></div>');
    $(newMarquee).html($(this).html());
    $(newMarquee).attr('direction', direction);
    $(newMarquee).attr('scrollamount', scrollamount);
    $(newMarquee).attr('scrolldelay', scrolldelay);
    $(newMarquee).css('white-space', 'nowrap');

    let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
    $(this).replaceWith(wrapper);

  });

  function start_marquee() {

    let marqueeElements = document.getElementsByClassName('new-marquee');
    let marqueLen = marqueeElements.length
    for (let k = 0; k < marqueLen; k++) {


      let space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
      let marqueeEl = marqueeElements[k];

      let direction = marqueeEl.getAttribute('direction');
      let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
      let scrollamount = marqueeEl.getAttribute('scrollamount');

      let marqueeText = marqueeEl.innerHTML;

      marqueeEl.innerHTML = marqueeText + space;
      marqueeEl.style.position = 'absolute';

      let width = (marqueeEl.clientWidth + 1);
      let i = (direction == 'rigth') ? width : 0;
      let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

      marqueeEl.style.position = '';
      marqueeEl.innerHTML = marqueeText + space + marqueeText + space;

      setInterval(function() {

        if (direction.toLowerCase() == 'left') {

          i = i < width ? i + step : 1;
          marqueeEl.style.marginLeft = -i + 'px';

        } else {

          i = i > -width ? i - step : width;
          marqueeEl.style.marginLeft = -i + 'px';

        }

      }, scrolldelay);

    }
  }

  start_marquee();
});
.wrap {
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrap">
  <marquee direction="left" scrollamount="5" scrolldelay="1"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? ---&nbsp;Ma'ruf Amin: Semua orang tahu saya tua, tapi... ---&nbsp;Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi ---&nbsp;2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
    Turki ---&nbsp;Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>

  <marquee direction="rigth" scrollamount="10" scrolldelay="2"> Timses Jokowi: Apa Urusan Pilpres dengan masuk surga? ---&nbsp;Ma'ruf Amin: Semua orang tahu saya tua, tapi... ---&nbsp;Kata Cak Imin soal pidato Jokowi dan Prabowo yang jadi kontroversi ---&nbsp;2 tahun ditahan, pendeta AS Andrew Brunson dibebaskan
    Turki ---&nbsp;Perkembangan terbaru kasus SPG yang buang bayi dari lantai 3 Mal --- Breaking News --- </marquee>
</div>
EzioMercer
  • 1,502
  • 2
  • 7
  • 23
Ale
  • 944
  • 3
  • 14
  • 34