What is the difference between "opacity" and "filter: opacity()"

Question

Most of us know the simple `opacity` CSS rule, but recently I stumbled upon `filter` which can have `opacity(amount)` as it value - among other things. But what exactly is the difference between the two?

Accepted Answer

`filter` in CSS had some different runs, namely for FireFox and MSIE.

In MSIE 5.5 on through 7, `filter`, also known as `Alpha Filter`, actually makes use of MSIE's DX Filter (no longer supported). However, in order to be more CSS2.1 compliant, in IE8 MS introduced `-ms-filter` to replace `filter`. The syntax is different in that the value of `-ms-filter` must be encased in quotes. Eventually, IE9 brought deprecation to this method and as of IE10, it is no longer used.

Another interesting note here, if you're wanting full compatibility for older IE, then you must make sure use of `filter` and `-ms-filter` must be very specific. For example, the following does not work in IE8 running IE7 compat mode:

```
element {
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
```

`-ms-filter` must come before `filter` in order to get more out of older IE compatibility.Like so:

```
element {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}
```

FireFox made use of `filter` as an experiment gone awry. I believe the original idea was to mock what IE was doing in using the Direct X engine. There was even a browser specific version, as there was for most browsers at one time. Eventually, HTML5/CSS3 announced use of the `filter` namespace and it now has a new purpose.

As of CSS3, `filter` now has a whole new meaning! Firefox docs stay open as if they plan to expand on this, though I've yet to see it (however they do crash JS if your CSS is not to its liking now!). Webkit (which will probably become standard in next update to CSS3) has started to implement `filter` to the point you can almost "photoshop" images for your site!

Since filter is changing so much, `opacity` would be the preferred method to use, however, as you can see, to be completely cross-browser compatible means being very thorough.

Browser specific alternates:

- -webkit-filter: filter(value);

- -moz-filter: filter(value);

- -o-filter: filter(value);

- -ms-filter: "progid:DXCLASS.Object.Attr(value)";

What is the difference between "opacity" and "filter: opacity()"

Solution

Problem

Related problems