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

About these ads

4 comments

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s