Internet Explorer versions 4–8 have a feature called CSS filters to help you apply multimedia-style visual effects to your web pages. These filters are deprecated as of Internet Explorer 9, but you can still use them if your customers use older versions of the browser.
Some of the filters you can add include:
- Visual filters
- Transitions
Visual Filters
Visual filters are filters that affect how the page looks. Some of the popular visual filters include:
- One of the most commonly used filters is the
Alphafilter. This filter helps the designer set the opacity level of elements. In fact, many sites suggest using the alpha filter as a fallback mechanism for the CSSopacityproperty. - And many designers used the
AlphaImageLoaderfilter to provide support for PNG transparency in IE6 and lower. - The
ShadowandDropShadowfilters can be used to create shadow effects on HTML elements.
Transition Filters
Transition filters are time varying filters that affect how a change of content is displayed. Transition filters can be applied to:
- change images on a page
- make an image fade in or out
- pages to make them load or exit in specialized ways
But You Shouldn’t Use CSS Filters
CSS filters may be very tempting because they allow you to add features like drop shadows, fades, and transparency and have those features for even really old versions of Internet Explorer.
But CSS filters are only useful to Internet Explorer. For every other browser, they simply add download time. And the more filters you use, the slower your pages will load.
But that’s not the only reason. CSS filters can also slow the rendering of a web page in Internet Explorer. The AlphaImageLoader filter blocks the rendering of the page and even freezes the browser while the image it’s applied to is downloaded. In other words, nothing other than that image can be downloaded once it starts until it is complete. Plus that filter is applied per element, rather than per image, so even images that don’t need the filter can be affected by it.
