Myujth

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?

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)";

See Also:

• What's compatible with opacity?


• 
  What's compatible with the newer filter?
  
  • keep in mind, not the same as Older IE's filter
  
  

filter: opacity() applies transparency to the samples in the input image. The value of “amount” defines the proportion of the conversion.
A value of 0% is completely transparent. A value of 100% leaves the
input unchanged. Values between 0% and 100% are linear multipliers on
the effect. This is equivalent to multiplying the input image samples
by amount. If the “amount” parameter is missing, a value of 100% is
used.

filter: opacity() is similar to the more established opacity property; the difference is that with filters, some browsers provide
hardware acceleration for better performance. Negative values are not
allowed.

Source: https://css-tricks.com/almanac/properties/f/filter/

/* USAGE EXAMPLE:
* -----------
* filter: opacity([ <number> or <percentage> ])
* -----------
*/

.filter-opacity 
 filter: opacity(0.3);
 height: 5rem;
 width: 5rem;
 background-color: mediumvioletred;


.just-opacity 
 opacity: 0.3;
 height: 5rem;
 width: 5rem;
 background-color: lawngreen;

<div class="filter-opacity">
 filter-opacity
</div>

<div class="just-opacity">
 just-opacity
</div>