Marquee in CSS – Beginner’s Guide

Marquee was first introduced in Internet Explorer and was very popular in the ’90s before W3C ultimately decided to exclude it from the HTML standard element due to usability issues. Web designers were encouraged to not use the tag.

Surprisingly though, the marquee is now making a comeback, not in a tag <marquee> format like it did, but in a CSS Module. This module is available as part of the Webkit CSS specification and the W3C is currently working on a similar module as well. However, since the W3C version is still at the Candidate Recommendation stage, it is not applicable yet. So, at this time, we will only cover the one from the Webkit specification.

The Syntax

First of all, the marquee can be defined using the following shorthand syntax.

-webkit-marquee: [direction] [increment] [repetition] [style] [speed]

Each of the values needed in the syntax above, I believe, are quite self-explanatory, or else you can find them sufficiently explained at this documentation. So, if you want to dig deeper into how this syntax is going to work you can always refer to the documentation first.

Then, join us as we proceed to create some real examples and see how it in action.

Example 1: Scrolling the text

All right, in the first example we will create the classic movement of the marquee that is having the text move from right to left.

Let’s create our text markup like below:

<div class="marquee">Lollipop topping lemon drops jujubes applicake fruitcake tart liquorice sesame snaps.</div>

Then define the marquee with the following syntax.

 -webkit-marquee: auto medium infinite scroll normal; 
 overflow-x: -webkit-marquee;
 

When the marquee direction is set to auto, it will by default move from the right to the left; alternatively you can change this value to left. Also notice that the overflow-x property has to be set to -webkit-marquee so that the content will always act like one. If you omit this property, the text will not move on.

Example 2: Bounce back and forth

In the second example, we will try giving a different style to the marquee. This time we use alternate instead of scroll and change the direction value to right. That way, the marquee will move from the left to the right then bounce back and forth.

 -webkit-marquee: auto medium infinite alternate normal;
 overflow-x: -webkit-marquee;
 

Example 3: Moving the text upwards

And for the last example, we will change the marquee direction to move upwards. There are two direction values to do so; you can change the value to up or ahead.

Personally, I don’t get why the Webkit provided two values that essentially do the same thing since I think that could lead to confusion for some people.

 -webkit-marquee: up medium infinite scroll normal;
 overflow-x: -webkit-marquee;
 

Furthermore, I’ve compiled some more examples, but they will be overwhelming if they are all explained here.

Final thoughts & References

I was first surprised that there is still interest in the marquee, which I thought had met its end. This also led me to question how a CSS module like this is going to be useful. In fact every browser is still supporting the legacy of the <marquee> tag.

So, what do you think? Is the marquee still relevant at this age and would it be useful in modern web design?

If you are still curious about this marquee stuff, you can visit some of the following references:

• Safari CSS Reference
• Webkit marquee generator
• Comprehensive documentation of the old <marquee> tag from Sitepoint.
• And there is always a generator for almost everything, including this Marquee Generator.