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.
Note that at the time of writing, browser support for the
overflow-style property was limited or non-existent. Therefore, the examples on this page may not work as expected (at least until browsers start to support this property).
Also, this property is still under development by the W3C, which means that it may change at any time.
|Try it yourself!||
The value can be either
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.
|Applies to:||Non-replaced block-level elements and non-replaced 'inline-block' elements|
At the time of writing, CSS3 was still under development and browser support for many CSS3 properties was limited or non-existent. For maximum browser compatibility many web developers add browser-specific properties by using extensions such as
-webkit- for Safari and Google Chrome,
-ms- for Internet Explorer,
-moz- for Firefox,
-o- for 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.
Be aware that if you choose to use the proprietary CSS extensions in a live environment, your code will not pass any W3C CSS validation, as the browser-specific properties are not valid W3C properties.
Many of the CSS3 examples on this website include these browser specific properties. If they weren't included, most of the examples wouldn't work for most users (at least, not until possibly years after the article was written).
The major browser manufacturers are working to support the W3C properties, and eventually, you will be able to omit these browser-specific properties.