Setting Opacity and Other Filters in Internet Explorer 8

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

It was expected that Internet Explorer 8 will support the standard “opacity” property of CSS, but it seems that its developers have decided not drop the support for filters yet, which is not that bad, though, as it still lacks support for <canvas> scripting.

However, there is a great difference between the filter support in IE8 and its previous versions. The CSS filters support in Internet Explorer 5.5 – 7.0 is added as follows:

element
{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}

or

element
{
filter: alpha(opacity=80);
}

In Internet Explorer 8, the approach is already (finally!) vendor-specific (a lá -moz- for FireFox, -webkit- for Safari and -o- for Opera) and the value is a string in quotes:

element
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

The entire article on the new Microsoft vendor extensions can be found on the official Internet Explorer blog.

More Cool Stuff

Categories and Tags
Links

© 2006 - 2023 Martin Ivanov