Visual Filters in Internet Explorer

Beginning with Internet Explorer 4, Microsoft began adding a number of programmable visual filter and transition effects to their browser. In fact these new extensions were to be the first CSS-based extension that Microsoft added to their browser. Depending on the filter, their effects can either be modified programmatically via JavaScript, or can be added using CSS elements on a given Web object.

In practice, filters and transitions have seen relatively little use on the Web, as their display properties are exclusive to Internet Explorer, and their effects can be dramatic enough that a page must be viewed using Internet Explorer in order for its content to be readable — in other words, they don't make for browser-compatible code. Having said that, if you are confident that your audience is composed largely of Internet Explorer users — say, on a corporate intranet — or are willing to customize your code on a browser-by-browser basis, you can use these filters and transitions to good effect.

Visual filters and transitions differ from regular CSS properties in that they require the full program code prior to the name of the filter, so the code specified for the Alpha filter actually looks something like this code snippet:

filter: progid:DXImageTransform.Microsoft.Alpha

A given filter's values are further modified by enclosing its values in parentheses, separated by commas, as you can see from the following code snippet:

(Opacity=100,FinishOpacity=0, Style=1, StartX=0, FinishX=0,
StartY=0, FinishY=100)

At this point you may well be thinking that this is really beginning to stretch the boundaries of CSS, and frankly, you'd be right. In some cases the properties rely upon JavaScript to make them work, so they don't fit the mold of your typical static CSS property used to make some text look nice on a Web page.

Internet Explorer 4.x introduced over a dozen visual filters. All of these original filters were superceded or expanded upon by the release of Internet Explorer 5.5, when Microsoft took the opportunity to rationalize and greatly expand the filtering and transition capabilities within the browser, deprecating several of these earlier filter types in the process.

There are two classes of filters: static filters and transitional filters. The static filters are not always so static, as you will see from some of the examples in this chapter, but their often dynamic effects are rendered on a single selected object. The transition filters are all designed to produce interesting "wipes," slowly revealing new content over the old. This chapter provides an overview of what's available.