Microsoft Extensions to CSS
Microsoft has introduced a number of proprietary extensions to CSS, many of which have also been proposed as additions to the CSS specification. The following section provides a quick overview of these, and notes the earliest version of Internet Explorer to support each one. For a more comprehensive overview of these properties, and of Microsoft's CSS support in general, see http://www.msdn.microsoft.com/workshop/author/css/
reference/attributes.asp.
background-position-x
This Microsoft-proposed CSS property defines the x-coordinate of the background-position property. Introduced in Internet Explorer 4.
Example
<body style="background-image: url(picture.gif); background-repeat: no-repeat; background-position-x: 25%;">
background-position-y
This Microsoft-proposed CSS property defines the y-coordinate of the background-position property. Introduced in Internet Explorer 4.
Example
<body style="background-image: url(picture.gif); background-repeat: no-repeat; background-position-y: 200px;">
behavior
This Microsoft-proposed CSS property is used to define the URL for a script providing DHTML behavior. Introduced in Internet Explorer 5.0.
Example
<h1 style="behavior: url(colorchange.js);">What a dynamic header!</h2>
filter
This Microsoft-proposed CSS property is used to apply filter effects to associated HTML elements. Introduced in Internet Explorer 4.
Example
<h2 style="filter: Blur(Add = 1, Direction = 90, Strength = 20); width: 100%;">This header is all blurry.</h2>
ime-mode
This Microsoft-proposed CSS property is used to set the state of an Input Method Editor (IME); for use with Chinese, Japanese, and Korean character sets. Introduced in Internet Explorer 5.0.
Example
<textarea style="ime-mode:active;"></textarea>
layout-grid
This Microsoft-proposed CSS property defines a grid to be used in laying out Japanese or Chinese characters in a Web document. This is a shorthand property for the layout grid properties discussed next. Introduced in Internet Explorer 5.0.
Example
<p style="layout-grid: char line 12px 12px .5in;">A short text sample.</p>
layout-grid-char
This Microsoft-proposed CSS property defines the size of the character grid used for laying out Japanese or Chinese characters in a Web document. Introduced in Internet Explorer 5.0.
Example
<p style="layout-grid-char: 50px;">A short text sample.</p>
layout-grid-line
This Microsoft-proposed CSS property defines the gridline value used for laying out Japanese or Chinese characters in a Web document. Introduced in Internet Explorer 5.0.
Example
<p style="layout-grid-line: 100px">A short text sample
with line breaks so
the meaning of this
property will be obvious.</p>
layout-grid-mode
This Microsoft-proposed CSS property defines if the text layout grid uses one or two dimensions. Introduced in Internet Explorer 5.0.
Example
<p style="layout-grid-mode: none; layout-grid-line: 100px;">A short text sample
with layout-grid-mode
set to a value of none
to turn off the grid.</p>
layout-grid-type
This Microsoft-proposed CSS property defines the type of grid to be used for laying out Japanese or Chinese characters in a Web document. Introduced in Internet Explorer 5.0.
Example
<p style="layout-grid-type: strict; layout-grid-line: 55px;">A short text sample.</p>
line-break
This Microsoft-proposed CSS property defines line-breaking rules for Japanese text. Introduced in Internet Explorer 5.0.
Example
p {line-break: normal;}
overflow-x
This Microsoft-proposed CSS property defines how content should behave when it exceeds the width of its enclosing element. Introduced in Internet Explorer 4.
Example
<p style="overflow-x: scroll; width: 100px;"<ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
overflow-y
This Microsoft-proposed CSS property defines how content should behave when it exceeds the height of its enclosing element. Introduced in Internet Explorer 4.
Example
<p style="overflow-y: scroll; height: 25px; width: 50px; background-color: lightblue;">
ABC
DEF
GHI
JKL
MNO
PQR
STU
VWXYZ
</p>
ruby-align
This Microsoft-proposed CSS property defines the alignment of ruby text as defined by the <rt> element, in relation to base text defined by the <ruby> tag (see entries for <ruby> and <rt> in Appendix A). Introduced in Internet Explorer 5.0.
Example
<ruby style="ruby-align: right;">
This is the base text defined by the ruby element.
<rt>This is the ruby text defined by the rt element.</rt>
</ruby>
ruby-overhang
This Microsoft-proposed CSS property defines the overhang of ruby text as defined by the <rt> tag, in relation to base text defined by the <ruby> tag (see entries for <ruby> and <rt> in Appendix A). Introduced in Internet Explorer 5.0.
Example
<ruby style="ruby-overhang: auto;">
This is the base text defined by the ruby element
<rt>This is the ruby text defined by the rt element and it's a lot longer than the base text in this example. A lot longer.</rt>
</ruby>
This is text outside of the ruby element.
ruby-position
This Microsoft-proposed CSS property defines the position of ruby text as defined by the <rt> tag, in relation to base text defined by the <ruby> tag (see entries for <ruby> and <rt> in Appendix A). Introduced in Internet Explorer 5.0.
Example
<ruby style="ruby-position: inline;">
This is the base text defined by the ruby element.
<rt>This is the ruby text defined by the rt element but it won't look that way in IE 5.5 because it has been defined as inline in relation to the base text.
</rt>
</ruby>
scrollbar-3d-light-color
This Microsoft extension to CSS defines a color for the top and left edges of the scroll box in a scrollbar; this and the related scrollbar properties can be applied to the browser window scrollbar when used with the body element, or to other elements when used in conjunction with clipping properties. Introduced in Internet Explorer 5.5.
Example
body {scrollbar-3d-light-color: lightblue;}
scrollbar-arrow-color
This Microsoft extension to CSS defines a color for the arrows in a scrollbar. Introduced in Internet Explorer 5.5.
Example
body {scrollbar-arrow-color: red;}
scrollbar-base-color
This Microsoft extension to CSS defines the base color for a scrollbar. Introduced in Internet Explorer 5.5.
Example
body {scrollbar-base-color: green;}
scrollbar-dark-shadow-color
This Microsoft extension to CSS defines a shadow color for the right and bottom edges of a scrollbar. Introduced in Internet Explorer 5.5.
Example
body {scrollbar-dark-shadow-color: #0000FF;}
scrollbar-face-color
This Microsoft extension to CSS defines a color for the face of a scrollbar. Introduced in Internet Explorer 5.5.
Example
body {scrollbar-face-color: #CC00FF;}
scrollbar-highlight-color
This Microsoft extension to CSS defines a color for the top and left edges of a scrollbar. Introduced in Internet Explorer 5.5.
Example
body {scrollbar-highlight-color: #CCFFFF;}
scrollbar-shadow-color
This Microsoft extension to CSS defines a color for the right and bottom edges of a scrollbar. Introduced in Internet Explorer 5.5.
Example
body {scrollbar-shadow-color: purple;}TIP Scrollbar color changes may not show in Internet Explorer if the browser is in strict compatibility mode as set by the doctype statement.
text-autospace
This Microsoft-proposed CSS property defines spacing values for text; used when combining different types of characters, such as regular text, ideographic text, and numeric characters. Introduced in Internet Explorer 5.0.
text-justify
This Microsoft-proposed CSS property provides greater control over how justified text should be aligned and spaced. Introduced in Internet Explorer 5.0.
Example
<p style="text-align: justify; text-justify: distribute-all-lines; width: 250px;">
This paragraph is not only justified,
but the text-justify property is set to a value that makes the last line justify as well.
</p>
text-kashida-space
This Microsoft-proposed CSS property defines the ratio between kashida expansion and white space expansion in justified text (kashida is a typographic effect used with Arabic writing systems). Introduced in Internet Explorer 5.5.
text-underline-position
This Microsoft-proposed CSS property defines the position of underlining set with the text-decoration property. Introduced in Internet Explorer 5.0.
Example
<p style="text-decoration: underline; text-underline-position: above;">
This example uses the text-underline-position property to place the underlining on top of the text. Why not just set text-decoration to overline instead?</p>
word-break
This Microsoft-proposed CSS property can be used to allow line breaks within words, primarily for use with Asian languages. Introduced in Internet Explorer 5.0.
Example
<div style="word-break: break-all; width:50px;">
Words can break in this code example. Like this one:
Sesquipedalianism</div>
word-wrap
This Microsoft extension to CSS can be set to allow line breaks within words when content exceeds the limits of its containing element. Introduced in Internet Explorer 5.5.
Example
<p style="word-wrap: break-word; width: 30px;">
Words can break in this code example. Here is another long one:
Transcendentalism</p>
writing-mode
This Microsoft-proposed CSS property can be used to set text flow appropriate for European alphabets or East Asian alphabets. Values are lr-tb (left-to-right, top-to-bottom) and tb-rl (top-to-bottom, right-to-left). Introduced in Internet Explorer 5.5.
Example
<p style="writing-mode: tb-rl;">This example will really turn your head if you view it in Internet Explorer 5.5.</p>
zoom
This Microsoft extension to CSS can be used to define a magnification scale for an element. Can be used with scripting to create rollover effects. Introduced in Internet Explorer 5.5 and appears to be slated for CSS3 inclusion.
Example
<p onmouseover="this.style.zoom='150%';" onmouseout="this.style.zoom='normal';">
Careful, this text might jump out at you!</p>
