Category: Web

Recovered from the Wayback Machine.

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.

Recovered from the Wayback Machine.

I have Windows XP SP3 installed on my Dell I was therefore more than a little taken back about the instructions to follow to install IE8 beta 2:

• Uninstall Windows XP SP3
• Uninstall IE8 Beta1
• Re- install Windows XP SP3
• Install IE8 Beta2

If you don’t follow this path, you’ll have permanently installed IE8 on the machine. You know, you can’t make up stuff like this.

Recovered from the Wayback machine.

Again, I congratulate the browser teams who have passed the Acid3 and have only one more thing to say:

Don’t ever do that again.

I’m right in the middle of going through the proofs for Painting the Web, and I’m having to make proof modifications to code and writing because both Safari and Opera are feverishly changing their source in order to “meet” the Acid3 test. However, I don’t know, for sure, if all the changes will end up in the next released version of the browsers, or if they’ll be shunted off as a branch for inclusion in a later browser version after further refinement.

A better approach would be to list out all of the Acid3 tests and create a roadmap of planned implementation, ie the functionality in test 1 will be included in Opera 9.5, the functionality in test 2 in Safari 4.0, and so on. It may lack the glamour of displaying a passed test results, but it plays less havoc on those writing documentation, testers, book writers, and other people who have ended up being tossed about, like so much flotsam, by the Acid3 hurricane, and are now feeling particularly bruised and battered.

Please don’t do an Acid4. I don’t know if I can survive it.