Microsoft-Specific Style Sheet Properties Sampler

---

Browser vendors are already making new additions to cascading style sheets, Microsoft being the most notable extender of the specification. Undoubtedly, these additions are just the beginning of a slew of new proprietary changes introduced into style sheets. Before we get started, an important note: the DTD statement used can be very important when trying proprietary extensions. In a strict rendering mode, Internet Explorer may not respect its own extensions. You may have to remove your DTD statement to get the browser into quirk mode to render the examples.

The first example of browser specific CSS is the zoom property, which can be used to scale content. The zoom property takes either a percentage value, a floating point number indicating a magnification scale such as 2.0 for twice as big or 0.5 for half- size , or the keyword normal indicating an object's normal magnification. For example, to zoom objects in a class named twotimes, use a CSS rule such as

 .twotimes   {zoom: 200%;} 

Although setting a zoom property might not make much sense with a static rule, when combined with scripting it can create an interesting possibility of zooming images or text based on response to user events. For example, try this

  <p onmouseover="this.style.zoom='200%'"   onmouseout="this.style.zoom='normal'">  Roll your mouse over me and watch me zoom!  </p>  

under Internet Explorer 5.5 or better to see a possibility of how the zoom property can be used.

An interesting collection of CSS property extensions is supported by Microsoft Internet Explorer 5.5 and higher and can be used to control the appearance of scrollbars for the entire window, as set by a rule on the body element and for the textarea element as well. These properties include scrollbar-3d-light- color , scrollbar-arrow-color , scrollbar-base-color , scrollbar-dark-shadow-color , scrollbar-face-color , scrollbar-highlight-color, and scrollbar- shadow-color . Each of these properties takes a color value defined in CSS in any form. A simple rule showing how to change your document's scrollbars to red is shown here:

 body {scrollbar-face-color: red;} 

Aside from cosmetic improvements to screen presentation, Microsoft has introduced a variety of style sheet extensions for supporting foreign language display, probably the most interesting being the writing-mode property. With this property, it is possible to make text flow up and down or right to left, which is very useful in languages such as Japanese. The following markup demonstrates how this property is used:

  <div style="writing-mode:tb-rl">  Up and down text.  <span style="writing-mode:lr-tb; color: red;">  Left and     right.  </span>  More up and down.  <span style="writing-mode:lr-tb; color: green;">  Back to    left and right.  </span>   </div>  

This markup produces an interesting layout under Internet Explorer 5.5 or better, as shown here:

Although this is a property extension, it would be useful to render some languages like Japanese, and something similar to this property probably will wind up in CSS3.

There are a variety of other extensions to CSS introduced by Microsoft, most notably multimedia filters that can be used to change the appearance of objects and even control the loading and unloading of pages. The reality is that these properties have bugs and the syntax is not stable, having changed dramatically between releases of the Internet Explorer browsers. Furthermore, under the browser's own strict rendering mode, they may not even work! Given such limitations, designers are not encouraged to use these properties. For definitive information on the latest style sheet extensions, check Microsoft's developer information for Internet Explorer at http://www.msdn.microsoft.com/.

Downloadable Fonts

The last requirement for perfect layout control would be the inclusion of dynamic fonts. Although the CSS specifications are still working this out, the browser vendors have gone ahead and provided downloadable fonts since their 4. x releases. However, today only Internet Explorer continues to support downloadable fonts natively. As you may recall from the discussion of dynamic font technology in Chapter 6, fonts can be embedded in a Web page. They are best referenced using style sheet syntax.

To embed fonts in a Web document under Microsoft Internet Explorer, use the @font-face property. This property allows the designer to specify fonts in the document that might not be available on the viewer's system. To embed a font, first specify the font-family property. Then, specify the src property and set it equal to the URL of an embedded OpenType file, which should have an .eot extension. When the file is downloaded, it is converted to a TrueType font and then displayed on the screen. By putting a rule such as the following in the style sheet, the font named GhostTown can be used elsewhere on the page by using the font-family property:

 @font-face {font-family:GhostTown;             src:url(http://www.democompany.com/fonts/ghost.eot);} 

You may wonder how to create a special embedded font file. The designer has to run the font through a tool to create the font definition file and then place that file on the Web server. The designer or someone else on the project may also have to make changes to the Web server so that the file is delivered correctly. See the Microsoft Typography Web site at http://www.microsoft.com/typography/ for information about the embedded font creation tool WEFT and other deployment issues.

Note  

The Microsoft style of adding an src rule for @font-face is the proposed solution from the W3C and eventually may become standard.

---