Those of you who have been writing HTML for a long time may remember the
MARQUEE element. This was a browser-specific element that created a banner of scrolling text across the screen. This element was never added to the HTML specification and support for it varied widely across browsers. People often had very strong opinions about the use of this element — both positive and negative. But whether you loved or hated it, it did serve a purpose of making content that overflowed the box boundaries visible.
Part of the reason it was never fully implemented by browsers (aside from those strong feelings I mentioned) was that it is considered a visual effect and as such it shouldn’t be defined by the HTML, which defines the structure. Instead, visual or presentation effects should be managed by CSS. And CSS3 adds the marquee module to control how browsers add the marquee effect to elements.
New CSS3 Properties
CSS3 adds five new properties to help control how your content displays in the marquee:
overflow-style property (which I also discussed in the article CSS Overflow) defines the preferred style for contents that overflows the content box. If you set the value to
marquee-block your content will slide in and out to the left/right (
marquee-line) or up/down (
This property defines how the content will move into view (and out). The options are
alternate. Scroll starts with the content completely off screen, and then it moves across the visible area until it is all completely off screen again. Slide starts with the content completely off screen, and then it moves across until the content has fully moved onto the screen and there is no more content left to slide on screen. And alternate bounces the content from side to side, sliding back and forth.
One of the drawbacks to using the
MARQUEE element is that the marquee never stops. But with the style property
marquee-play-count you can set the marquee to rotate the content on and off for a specific number of times.
You can also choose the direction that the content should scroll on screen. The values
reverse are based on the directionality of the text when the
marquee-line and up or down when the
This property determines how quickly the content scrolls on the screen. The values are
fast. The actual speed depends upon the content and the browser displaying it, but the values must be
slow is slower than
normal which is slower than
Browser Support of the Marquee Properties
At this time (August 8, 2012) in order to get the CSS marquee elements to work you need to use vendor prefixes.
The last property allows you to define how large or small the steps should be as the content scrolls on screen in the marquee.
In order to have your marquee working, you should place the vendor prefixed values first, and then follow them with the CSS3 specification values. For example, here is the CSS for a marquee that scrolls the text five times from left to right inside a 200x50 box.
width: 200px; height: 50px; white-space: nowrap;