Firefox Supports CSS3 Opacity

The W3C specification for CSS 3 has added a new opacity property. Previous to this, Internet Explorer used

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)

and Mozilla-based browsers used

-moz-opacity

Of course, this was not an ideal situation since it relied on coding that was not based on standards, something the W3C has been trying to reduce and something that was at the root of the browser wars of the 1990s.

The W3C introduced the opacity property in the 5 March 2001 working draft version of the CSS3 specification. Currently, the W3C specification for CSS3 is only at “candidate recommendation” status and has been for nearly two years. This means, technically, it is not a “standard”.

That being said, Firefox supports the opacity property of the CSS3 specification. This is important because it proves that Firefox is still committed to web standards and is forward thinking.

Check out these two boxes below. In Firefox 1.0, the top one is black and the bottom one is grey.

 
 

UPDATE: (31 March 2005) I just checked Safari and it supports the opacity property of CSS3 as well. Very cool.

By Kim Siever

I am a copywriter and copyeditor. I blog on writing and social media tips mostly, but I sometimes throw in my thoughts about running a small business. Follow me on Twitter at @hotpepper.

4 comments

  1. unfortunately it looks like opera does not yet support this feature.

  2. I tried this in opera too, it works I can see the grey box too, I guess opera already support the CSS3.

  3. Opera does support opacity, however you need version 9 or higher. Tried it first with version 8.54 this did not work. Later i tried with 9.02 and this does work.

  4. Great to know. It’s now at least three browsers that support it.

Comments are closed.