Opacity returns to IE8
When IE8 beta 1 released, there was a minor uproar at the fact that Microsoft had dropped support for its proprietary version of opacity, while not providing support for the newer CSS-based opacity.
Gone were the days when the following CSS setting would change the opacity of an element in all of the major browsers:
#somediv
{
opacity: 0.0; filter: alpha(opacity=0);
}
If you wanted to get opacity to work with IE8, either you'd have to have your users turn on the IE7 compatibility mode, or you'd have to add a meta tag to your web page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Yesterday, Microsoft released a post on the IEBlog that had both good and bad news. The good news was that opacity was back. The bad news was that setting opacity in such a way that IE8 would process it as IE8 is now more complicated than ever.
It seems that the reason Microsoft pulled the old filter syntax is because the format was not CSS 2.1 compatible. However, according to comments in the post, Microsoft couldn't just transfer the opacity functionality over to the CSS approach, because the behavior between the two, CSS and Microsoft filter behavior, differs.
Due to the gently incessant requests (!?) of web developers, Microsoft has added back in the opacity filter. However, the company is using the naming convention standardized for browser based CSS extensions, which means it still meets the CSS 2.1 requirements. Where the old, formalized, filter setting looked like the following:
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0)
Which had illegal characters, including the equal sign, Microsoft now has the following:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
Notice the use of the "-ms-" prefix on the filter, and the use of quotes to enclose the setting, and hide the illegal characters.
Of course, for the opacity setting to work with both IE7 and IE8, we have to use both. According to Microsoft, we have to list the new extension format first, and then older setting. This in addition to the CSS opacity setting:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
I created a simple example to demonstrate how opacity would work, honoring both formats. It includes setting opacity with JavaScript, and works with Firefox, Safari, Opera, IE8, and as tested with IE7 compatibility mode. Click the image several times to hide one image, and expose another.
theobj.style.filter='progid:DXImageTransform.Microsoft.Alpha(Opacity=' + opacity + ')';
theobj.style.opacity=value;
The challenge isn't over yet, though. The images in the first test are JPEGs, but I also tried the example with PNGs with alpha transparency. Unfortunately, IE8 beta 2 supports opacity, but if opacity settings are applied to an image or element containing an image, and the image is a PNG that incorporates alpha transparency, the transparent effect is lost when the opacity is changed.
In older versions of IE, PNG alpha transparency was set with the AlphaImageLoader, like the following:
#div1 img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=fig0902.png,
sizingMethod='scale');
}
In IE8, which normally would support the PNG transparency, when the opacity filter is changed, the alpha transparency is lost. To compensate, when the containing element's opacity is changed, the image's alpha transparency also has to be set in script, as demonstrated in a second example:
document.getElementById("img1").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=fig0902.png,sizingMethod='scale')";
Since the alpha transparency in PNGs is supported with IE8 (and IE7), the CSS setting doesn't seem to need the new Microsoft extension naming. However, unless the image's alpha transparency setting is "reset" after changing the opacity, the transparency is lost when the application is run as IE8, as you can see from a third example. Oddly enough, the problem with the alpha transparency on the PNGs doesn't happen in IE7 compatibility mode. The only thing I can think is more than the name has changed with IE8's opacity implementation.
Of course, if you use the EmulateIE7 meta tag, you don't have to muck around with the new opacity extension, or resetting the PNG filter, but you also don't get the other CSS 2.1 standard settings from IE8.
