Setting Opacity and Other Filters in Internet Explorer 8

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

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

4 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>