CSS overflow-style

<!doctype html>
<title>Example</title>
<style>
.example {
  font: 12px arial, helvetica, sans-serif;
  width: 100px;
  height: 100px;
  padding: 10px;
  background-color: yellowgreen;
  border: 20px solid rgba(0,0,0,0.3);
  overflow: scroll;
  overflow-style: marquee-block;
}
</style>
<div class="example">
And the longest place name in the world is... Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu in New Zealand!
</div>

The CSS overflow-style property is used for specifying the scrolling method/s for elements that overflow.

If the contents of an element are too large to fit inside the element (i.e. they "overflow"), the overflow property can be used to specify how the contents should be displayed.

One option of the overflow property is that the content should scroll. If the "scroll" option is effected, the overflow-style property specifies the preferred scrolling method. For example, the outer container could grow scroll bars. Or, the element could become a "marquee", where the content scrolls across the element, eventually resulting in all the content having been displayed.

Dropped

The specification which defines this property now states that the specification is no longer being developed. Therefore, the overflow-style property is unlikely to work in any browser unless it's redefined in a later spec.

Syntax

Possible Values

The value can be either auto, meaning no preference, or a list of methods in order of preference. The browser/user agent will use the first method in the list that it supports. If it supports none, it will use auto.

auto: Specifies that the scrolling method should be automatically determined by the browser/user agent.
marquee-line: Specifies that a marquee should scroll the content horizontally (i.e. for content that overflows to the left or right).
marquee-block: Specifies that a marquee should scroll the content vertically (i.e. for content that overflows above or below the content box).

Dropped Values

The following values were previously included in the CSS3 (draft) specification for this property, however, at the time of writing, they appear to have been dropped from the CSS3 specification. They've been included here for reference, as it's possible that they may return to the spec at some stage.

scrollbar: Specifies that the scrolling method should be with scrollbars. That way, the user can use vertical scrollbars to scroll down/up or horizontal scrollbars to scroll left/right.
panner: Specifies that a "panner" should be used to assist the user in viewing all the content. A panner is typically a rectangle shown in one corner of the element, with a smaller rectangle inside. The larger rectangle represents all of the content, while the smaller rectangle can be moved around to view a different part of the content.
move: Specifies that the scrolling method should be "move". This means that the user can move the content around within the content box directly. For example, the cursor might turn into a hand or cross of four arrows, which indicates that the mouse (or other pointing device) can be used to "click and drag" the content around.
marquee: Specifies that the scrolling method should be "marquee". A marquee is an effect where, the content moves autonomously, without the need for the user to do anything. Typically, a marquee will result in the content scrolling horizontally or vertically. Although the content is too large to fit within the outer container, eventually, all of it will be displayed as the content has moved across the content box. Often, a marquee will keep scrolling so that, in the event the user missed some content the first time around, he/she will have further opportunity to view the content as it passes for a second, third, fourth, ... etc time.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Initial Value: auto
Applies To: Non-replaced block-level elements and non-replaced 'inline-block' elements
Inherited?: Yes
Media: Visual

Example Code

Basic CSS

Working Example within an HTML Document

Try it

CSS Specifications

The overflow-style property is defined in CSS Marquee Module Level 3 (W3C Candidate Recommendation 5 December 2008).

Note that the latest version of this specification states that the specification is no longer being developed.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

Qhmit.com