13 September 2008 Archives

Where I focused on Ian Hickson’s statement about extensibility, every other person, and their brothers, sisters, and aunts are throwing a hissy because of the HTML5 timeline.

Scott Gilbertson writes:

Even if your 2022 ronc-o-matic web-enabled toaster (It slices! It dices! It browses! It arouses!) does ship with Firefox v22.3, will HTML still be the dominant language of web? Given that no one can really answer that question, does it make sense to propose a standard so far in the future?

Jeff Croft writes:

I’m not saying the specs should go away. They absolute serve a purpose. I’m just saying that I personally am done paying much attention to them. Instead, I’m reading blogs like Surfin’ Safari and Mozilla Developer News to find out what the new shiny is in browsers, because these are the things I can actually take advantage of in serving my clients and users.

And?

So?

Specification work was never focused on the end users, it’s focused at the user agents or others who have to implement the specifications. The Mozillas, Apples, Operas, Microsoft, et al. The only reason I pay attention to any of it is because of my concern about extensibility.

In the meantime, the new stuff that is HTML5 is leaking into browsers now, not years from now. That’s part of the specification process—actual implementation on the street in order to “proof the spec”, as it were. And pieces of HTML5 are not just showing up in Firefox, Opera, and Safari/WebKit— IE8 has a few HTML5 tricks up its sleeve.

Heck, HTML5 isn’t the only longish spec under development. CSS 2 started in 1998, the lost call for CSS 2.1 was in 2002, the candidate recommendation was in 2007, and Microsoft is only now providing CSS 2.1 support. That’s ten years, end to end.

In the meantime, I’m using CSS3 stuff that’s only supported by a couple of browsers, and the final release of all the CSS3 bits is probably years out, too. Of course, I only play around with my own spaces—professional web designers and developers know that we can’t necessarily use the shiny new stuff for client applications, because we’re still having to support browsers that are seven years old.

Hey! We’re still supporting browsers almost as old as the timeline when HTML5 will be finalized! I guess things aren’t as “today” and “now” as we think they are.

The point is, specifications take time, or at least, good specifications typically take time. Any doofus can toss a quick spec out and call it done, but who wants to use the doofus spec?

That schedule part of what Ian had to say didn’t phase me. As far as I’m concerned, the group can take as long as it needs. In the meantime, I’ll play around with the local storage, and some of the other odds and ends, as I keep putting in my annoying “But what about SVG?” “But what about RDF?” oar; probably helping to slow the development of the spec, even more.

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.