Category: Web

A List Apart has a timely article titled Understanding Progressive Enhancement discussing the perceptual differences between graceful degradation and progressive enhancement. I enjoyed seeing Steve Champeon’s idea given new light. Additionally, now is as good a time as any to have a go at these topics, with the many new enhancements being added to today’s browsers, while antiques still cutter cyberspace. I could have done without the cloyingly cute M & M analogy in the article, but that’s probably my inner Cranky Woman having a go this AM.

I’ve written about graceful degradation, previously. Graceful degradation means applying modern technology but ensuring the application doesn’t negatively effect those viewing a web site with an Antique (remaining nameless). However, contrary to the ALA author’s statement of Under this paradigm, older browsers are expected to have a poor, but passable experience, graceful degradation is just that: gracefully degrading, meaning that though the person using the Antique doesn’t get all the bells or whistles, their experience at the site is more than “poor but passable”.

Progressive enhancement, on the other hand, begins with the content, rather than the technology; ensuring that the markup used to organize the content is semantically correct and valid. Then, and only then, the web site developer progresses to the use of CSS and JavaScript, both to annotate and enhance the content. That’s been the primary difference between the two approaches: graceful degradation tends to focus on technology, first, while progressive enhancement focuses on content, first.

Of course, the two are not exclusive: one can use progressive enhancement techniques, beginning with the content outward, paying particular attention to the semantics of the markup, and then apply the technique of graceful degradation when applying CSS and JavaScript. In particular when using Content Management Systems, such as Drupal and WordPress, it’s important to not neglect the semantics by focusing overmuch on the themes, widgets, and other, frequently annoying, gewgaws.

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.