Examples & Howtos

List of Supported Filters

This polyfill supports the filters grayscale, sepia, blur, invert, brightness and drop-shadow.

Declarative or Programmatic Definition

You can apply filters in a declarative way via stylesheets, or you can set them programmatically via JavaScript or jQuery.

Embedded or External Stylesheets

If you specify filters in a stylesheet, this stylesheet may be embedded or referenced externally. Inline styles are currently not supported.

Animated Filters

Most of the time filters will be static. But if you need to animate them, you can do so using plain JavaScript, or you can fiddle it in jQuery. The latter one just making sense if you are after one of the easing-methods of jQuery.

Initialization of the Polyfill

For the polyfill to initialize as quickly as possible, it either attachs itself do jQuery's $(document).ready, or you can offer it the contentLoaded library. If none of both is available, the polyfill will use one of the native events that fits best.

Compatibility

Desktop

Google Chrome Opera Safari Mozilla Firefox Internet Explorer
20+ 15+ 6+ 4+ 6-9 (no 10+)

Mobile

Google Chrome Opera iOS Safari Mozilla Firefox Internet Explorer
28+ 14+ 6+ 4+ just grayscale works in WP7