Microsoft Extensions to CSS | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

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.

Table B-7: CSS2 Aural Style Properties
azimuth	cue
cue-after	cue-before
elevation	pause
pause-after	pause-before
pitch	pitch-range
play-during	richness
speak	speak-header
speak-numeral	speak-punctuation
speech-rate	stress
voice-family	volume

Example

  <body style="background-image: url(/books/4/324/1/html/2/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(/books/4/324/1/html/2/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!  </h1>

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  <br />  with line breaks so  <br />  the meaning of this  <br />  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  <br />  with layout-grid-mode  <br />  set to a value of none  <br />  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  <br />  DEF  <br />  GHI  <br />  JKL  <br />  MNO  <br />  PQR  <br />  STU  <br />  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>

< Day Day Up >