
Visual filters are extensions to Internet Explorer 4.0 behavior that create onscreen effects in a document's contents. In some cases, filter effects are little more than prepackaged behavior that could have been done otherwise as script. In other cases, they go far beyond script and modify the rendered appearance of a control. Using visual filters greatly simplifies the task of incorporating sophisticated effects in Web documents.
Filters are applied to HTML controls through the filter style sheet property. The filter property is a string of filter descriptions that uses a function-like notation but does not require any knowledge of scripting. The syntax for a filter property in a style attribute is:
filter:filtername(parameters)
Here's an example of how filters are written as style attributes.
<img id=sample src="sample.jpg" style="filter:blur(strength=50) flipv()">
The sample HTML above attaches two filters to the IMG control. The first causes the image to blur over a specified number of pixels. The second filter flips the image vertically.
Each filter can have a set of optional parameters to define the precise nature of the effect, such as color or duration of behavior. Some filters, such as FlipV and FlipH for vertical and horizontal mirror images, have no parameters (although all filters and transitions have an enabled property, and all transitions have a Duration property). Multiple filters can be applied so that in the above example the "flipv" and "blur" filters are applied in combination to the IMG.
Filters often create effects that can also be generated with script. This raises the question, "Why use filters if script can do the job?" There are several reasons for using filters. Probably the most important is because they don't require script. For better or for worse, many HTML authors shy away (or are kept away) from scripting. Filters are a convenient package for the same functionality that scripting can provide. Another benefit of filters over script is that because they use the declarative and inherited syntax of CSS, they are easier to author and can be applied to entire classes of elements.
Another reason for using filters is because they provide a good downlevel story. Browsers that don't support the filter property or even style sheets simply ignore them. Even browsers that do support the filter property can do so in totally different ways without affecting the author. For instance, while filters in Internet Explorer 4.0 are implemented as special COM objects and can be easily extended, it is likely that the Windows® 3.1 implementation will be built in and represent a subset of the Internet Explorer 4.0 functionality.
Although all the filters that ship with Internet Explorer 4.0 are "visual," it is not a requirement. An example of a nonvisual filter would be a filter that changed various style sheet attributes (such as color, font size, bold, and even position) on the filtered element. These filters can be applied to any element (not just controls).
Visual filters can be applied only to HTML elements that are controls. A control element defines a rectangular space within a browser window when the browser renders the Web document. Controls cannot be windowed, such as an IFRAME. Valid HTML controls are:
| BODY |
| BUTTON |
| DIV (with a defined height, width, or absolute positioning) |
| IMG |
| INPUT |
| MARQUEE |
| SPAN (with a defined height, width, or absolute positioning) |
| TABLE |
| TD |
| TEXTAREA |
| TFOOT |
| TH |
| THEAD |
| TR |
Windowless controls, such as structured graphics and ActiveX Controls, can also apply filter attributes. Filters follow the standard CSS attribute inheritance scheme (if it exists for the object) except for the exceptions noted below.
Filters are ignored for any positioned elements nested inside nonpositioned elements, such as a positioned SPAN inside a nonpositioned DIV. The simple solution is to always position or define a width for your outermost element.
Elements and windowed objects that cannot have filters applied to them include Java applets, IFRAME, the SELECT and OPTION form elements, P paragraph elements, Hn headings, and EM and STRONG logical text style elements.
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.