Creating Scrollable Content in HTML5 and CSS3 Without MARQUEE

Those of you who have been writing HTML for a long time may remember the 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 the purpose of making content that overflowed the box boundaries visible.

Part of the reason it was never fully implemented by browsers, aside from strong personal opinion, 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 the screen.

Lastly, alternate bounces the content from side to side, sliding back and forth.

marquee-play-count
One of the drawbacks of 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 the 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

You may need to use vendor prefixes to get the CSS marquee elements to work. They are as follows:

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;
}