Contents Updates to The XHTML Language and Design Sourcebook

Internet Explorer 4/5 Extensions to CSS

As of Version 4 and 5, Internet Explorer supports two non-standard CSS properties that control dynamic aspects of page rendering. The filter property (supported by Internet Explorer 4 and greater) is used to to define element rendering properties, and allows for several pre-defined static and dynamic rendering controls defined using functions (e.g., filter: chroma(color=red)). Internet Explorer 5 and greater also support a behavior property, which is used to attach scripted (JavaScript, Jscript or VBScript) behaviors to elements.

Internet Explorer 4 and 5 also support some other non-standard CSS that help control text rendering and layout. These are briefly discussed at the end of this document.

1. filter: Visual Filter Effects

Visual filters affect the way an element is displayed. Some of these effects are static (the display is affected once), while others, such as revealtrans are dynamic and produce dynamic rendering effects. In most cases, these filters are invoked from a document script program. However, they are defined as style "objects", so that they can also be explicitly set using a CSS declaration, as described here.

The general form for a filter declaration is:

filter: filtername(param=value ... );

where filtername is the specific filter function, and param are the parameters taken by the function. Some filters take no parameters, and some can take several -- many of them are quite complicated.

There are many filter functions. The rest of this section summarizes the filters and their purpose, but you are referred to the Microsoft Developer's Web site, at

http://msdn.microsoft.com/workshop/author/filter/reference/reference.asp,

for details on the many parameters supported by these filters.

1.1 NOTE: Supported Elements and Usage Conditions

These filters are not supported by all X/HTML elements. In most cases, they are supported by the following elements: body, button div, img, input (type="button", "checkbox", "file", "image", "password", "radio", "reset", "submit" and "text"), marquee, span, table td, textarea, and th. Other cases are noted in the following descriptions. Note also that these properties often only work when the associated element has a specific height and/or width, and will not work if these have the implicit value of "auto". Similarly, some effects will not work if the element has explicit background properties (i.e., and explicit background color or image).

1.2 List of Filter Property Values (Functions)

alpha -- Set transparency properties for an element [IE 4+]
This filter sets the level of opacity for an element. This can be a constant value, or it can be 'blended' across an element (i.e., an alpha gradient) using a variety of different styles.

blendtrans -- Fade the element into or out of view [IE 4+]
This dynamic filter is used to fade an element and its content into and out of view: parameters control the speed and duration of the fading effect.

blur -- Blur the element and its content [IE 4+]
This filter is used to blur the content of an element. Parameters can control the degree of blurring, and the direction in which the blur is applied.

chroma -- Make a single color transparent [IE 4+]
This filter takes the form filter: chroma(color="rrggbb); , and sets the indicated color to be transparent. Dynamic scripts can use this to change the color that is transparent. The value rrggbb can be either an RGB code (#rrggbb) or a known color name.

dropshadow -- Add a drop shadow to the element text [IE 4+]
This filter creates a drop shadow effect for the text content of an element. Various supported parameters define the direction and size of the shadow. This is only supported by the div, marquee, span, table, td and th elements.

fliph -- Horizontally flip the element [IE 4+]
This filter has no parameters and takes the form: filter: fliph(); . This flips or "mirrors" the element horizontally.

flipv -- Vertically flip the element [IE 4+]
Adds radiance around the outer edge of an element . filter: flipv(); . This flips or "mirrors" the element vertically.

glow -- Add radiance around text letters [IE 4+]
This filter adds a radiant glow around the text content of an element. The parameter color sets the glow color (e.g. color=green), while the parameter strength sets the size for the glow( zero to 100). This has no effect if a background color or image is applied to the element.

gray -- Render element in grayscale [IE 4+]
This filter has no parameters and takes the form: filter: gray(); . This transforms the element and content to a grayscale palette.

invert -- Inverts colors in the element [IE 4+]
This filter has no parameters and takes the form: filter: invert(); . This transforms the element and content such that each color is replaced by the color with the opposite hue, saturation and brightness.

light -- Simulated light source projected on the element [IE 4+]
This filter creates the effect of a simulated light source shining down on the element content. Parameters define the type of light source (color, shape, strength) and the position of the source.

light -- Simulated light source projected on the element [IE 4+]
This filter creates the effect of a simulated light source shining down on the element content. Parameters define the type of light source (color, shape, strength) and the position of the source.

mask -- Remasks transparent pixels. element [IE 4+]
This filter takes the selected element content, paints the transparent pixels using the color specified by the color property, and changes all the nontransparent pixels to be transparent. This takes only one parameter, color, to set the color.

redirect -- Allow animation using Microsoft DirectAnimation™ components. [IE 4+]
This filter Converts the object into a DAImage object which can then be manipulated using Microsoft's DirectAnimation controls. Of course, this requires that the DirectAnimation browser component, be invoked in the Web page. This is typically done by referencing the appropriate DLL using an object element.

revealtrans -- Show or hide an element and its content [IE 4+]
This filter defines one of 23 defined transitions that can hide or reveal the element content. Parameters define the type of transition, its duration, and the nature of the transition (e.g., stops after one transition loop).

shadow -- Paint a shadow around the element content [IE 4+]
This filter paints a shadow around the selected element content. Parameters define the color of the shadow, and the direction in which the shadow should be applied.

wave -- Apply a sine-wave distortion to the element [IE 4+]
This filter applies a sine-wave distortion to the element and its content. Parameters define the magnitude and frequency of the wave, and the strength (amplitude, color, etc.) of the distortion.

xray -- Create X-ray effect [IE 4+]
This filter has no parameters and takes the form: filter: xray(); . This changes the color depth of the display, and renders the element content in black and white, making it look like a black-and-white x-ray.

2. Behavior: Attach Scripted Behaviors (IE 5+)

The behavior property attaches a scripted behavior to associated markup elements. A Scripted behavior is simply a set of instructions that tells the browser how to handle events that occur on that element. For example, the following markup

<li onmouseout="dothis()" onmouseover="dothat()">list text</li>

could be replaced by the following:

<style> ....
li {behavior: url(file.htc); }
</style>
...
<li>list item</li>

 where the file file.htc contains an HTML Control (HTC) that defines the script functions and the document events they are attached to. An HTC file is a small XML document that contains script code plus XML markup that attaches the different script functions to the desired events.

There are three ways that behaviors can be referenced in a behavior property:

In principle a single CSS rule can specify multiple behaviors for the same element. Also, a single behavior declaration can have more than one behavior in it, as in
behavior: url(behav1.htc) url(behav2.htc) ;

Managing behaviors is complex, and generally requires a good understanding of scripting issues, and of the special HTC markup used to write HTML Control documents. The following links connect to the sections at the Microsoft Web site that provide this useful information.

Overview of Behaviors
http://msdn.microsoft.com/workshop/author/behaviors/overview.asp -- Overview
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/behavior_1.asp -- behavior property description
http://msdn.microsoft.com/workshop/author/behaviors/reference/reference.asp -- Default behaviors

Overview of HTC (HTML Control) Files
http://msdn.microsoft.com/workshop/author/behaviors/howto/creating.asp -- HOWTO guide
http://msdn.microsoft.com/workshop/components/htc/reference/htcref.asp -- HTC Reference section

3. Other CSS Extensions

Internet Explorer also supports a few additional CSS properties. These are:

As these are not widely used, we don't go into details here. For a complete explanation, with examples, see the Microsoft CSS Attributes Reference section of the MSDN Web site, at: http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp.

© 2000, by Ian S. Graham Last Modified: 20 February 2000