Mozilla Adds Support for CSS3's Opacity

Album Cover: Crash

"You wear nothing, but you wear it so well."
Dave Matthews Band / Crash Into Me

Posted on March 29, 2004 11:26 PM in Browsers
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

While reading today's Mozilla Status Update, I noticed that Mozilla 1.7b now supports CSS3's opacity property. If I'm not mistaken, this support was added to the underlying Gecko engine, which means Firefox users can expect to see support added in Firefox 0.9 as well.

Granted, the Gecko engine has supported opacity for quite a long time before this, but it was always via the proprietary -moz-opacity property. If you've been using -moz-opacity in your stylesheets, once Mozilla 1.7 and Firefox 0.9 are released you should be safe converting those properties to opacity instead, all the while knowing that you are becoming standards compliant as you do so. The only drawback? Well, if you want the opacity to show up in IE variants as well, you'll still need to use the proprietary filter:alpha(opacity=n) rule (where n is a number between 0 and 100, inclusive), since Internet Explorer does not yet support CSS3's opacity property.


phalacee on October 06, 2004 at 2:55 AM:

This is an absolute God-send. I was fed up with my CSS validation failing because I wanted to use opacity on my pages, and was annoyed that I had to resort to semi-transparent PNG's in order to remain standards compliant.

Is there a full changelog I can get hold of for Firefox 0.10.1 (1.0 PR)???


Bernie Zimmermann on October 08, 2004 at 10:30 PM:

Phalacee, you can take a look at The Burning Edge to see when this change made its way into Firefox. Look under the "New web developer features" section.


Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.


Email Address:



Check this box if you hate spam.