Internet Explorer 9 (IE9) CSS3 Opacity and Alpha filter

IE9 introduces support for CSS3 Color Module, including opacity property. IE8 and earlier versions implemented an alternative mechanism to apply opacity using alpha filter of IE-specific filter property. This creates a compatibility challenge because IE9's standard mode supports only opacity and not alpha filter. IE9's compatibility modes Quirks, 7, and 8 still support alpha filter […]

IE9 introduces support for CSS3 Color Module, including opacity property. IE8 and earlier versions implemented an alternative mechanism to apply opacity using alpha filter of IE-specific filter property. This creates a compatibility challenge because IE9's standard mode supports only opacity and not alpha filter. IE9's compatibility modes Quirks, 7, and 8 still support alpha filter but don't implement opacity.

"For sites that use best practice feature detection, this's not a problem. They'll detect that opacity is supported in IE9 and use it instead of filter. The problem is with sites that use browser detection and mistakenly assume that IE always uses filter alpha instead of opacity and then change only filter property in script. The opacity effect will appear broken in those Web pages when run in IE9's default 9 document mode. The fix is to detect the standards-based opacity feature first and browser-specific filter feature second," explains Microsoft.

W3Schools offers a clear explanation of CSS opacity and IE's legacy alpha filter.

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.