1. Technology

Marquee in the Age of HTML5 and CSS3

Scrolling Content Without Using the MARQUEE Element

By

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, marquee-style, marquee-play-count, marquee-direction, and marquee-speed.

overflow-style
The 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-line or marquee-block your content will slide in and out to the left/right (marquee-line) or up/down (marquee-block).

marquee-style
This property defines how the content will move into view (and out). The options are scroll, slide, and 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.

marquee-play-count
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.

marquee-direction
You can also choose the direction that the content should scroll on screen. The values forward and reverse are based on the directionality of the text when the overflow-style is marquee-line and up or down when the overflow-style is marquee-block.

Marquee-Direction Details

overflow-style Language Direction forward reverse
marquee-line ltr left right
  rtl right left
marquee-block   up down

marquee-speed
This property determines how quickly the content scrolls on the screen. The values are slow, normal, and 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 fast.

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.

CSS3 Vendor Prefix
overflow-x: marquee-line; overflow-x: -webkit-marquee;
marquee-style -webkit-marquee-style
marquee-play-count -webkit-marquee-repetition
marquee-direction: forward|reverse; -webkit-marquee-direction: forwards|backwards;
marquee-speed -webkit-marquee-speed
no equivalent -webkit-marquee-increment

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;
  overflow: hidden;
  overflow-x:-webkit-marquee;
  -webkit-marquee-direction: forwards;
  -webkit-marquee-style: scroll;
  -webkit-marquee-speed: normal;
  -webkit-marquee-increment: small;
  -webkit-marquee-repetition: 5;
  overflow-x: marquee-line;
  marquee-direction: forward;
  marquee-style: scroll;
  marquee-speed: normal;
  marquee-play-count: 5;
}

©2014 About.com. All rights reserved.