Post Archive
› May 6, 2004
Opacity support in Mozilla 1.7
Mozilla 1.7 RC1 supports the CSS3 opacity property. From the CSS3 color module:
Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element (including its children) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.
In other words, the opacity property allows you to set a sort of seethrough value for any element on the page. One interesting application of this principle is e.g. an on :hover lightup effect for images. No need for creating faded versions of the original images, and no image replacement techniques around - img tags and CSS3 do the job.
Comments
1. May 6, 2004 04:41 AM
2. May 6, 2004 06:26 AM
liorean Posted…
Yes, but that's old news. Saf1.1 added -khtml-opacity, and saf1.2 changed the name to just opacity. Safari also supports RGBA colours, as the first browser to do such, though I believe Mozilla are working on it. (And so does probably Opera too, but in secrecy. They don't seem to like being behind...)
3. May 6, 2004 07:24 AM
Ben de Groot Posted…
I am surprised that Opera doesn't yet support this. Mozilla already had this as -moz-opacity, but I'm glad they applied the CSS3 way. It works in Firefox CVS too, of course. For those interested, I made an example page.
4. May 6, 2004 07:32 AM
Andrew Dunning Posted…
That's good to see. What I'm surprised at is how long they're taking to implement text-shadow, which has been in Safari since 1.1.
5. May 6, 2004 08:38 AM
liorean Posted…
As I understand from the Mozilla bugs, the problem with opacities has long been the same: They aren't encoding their colours in a way that easily allows the calculation of opacity/alpha channels. That's why their PNG rendering is so much slower than Tasman, Safari and Opera. (Notable on pages where you have moving parts with alpha PNGs.) As for text-shadow, Apple has an OS that makes it easy for them, Mozilla and Opera don't. The lack of implementations led to text-shadow not being present in the [CSS2.1] spec. Also note that text shadows require easy alpha channel handling as well.
6. May 6, 2004 11:59 AM
Anne Posted…
Another problem was that '-moz-opacity' wasn't consistant with the W3C specification, 'opacity' is.
7. May 6, 2004 12:46 PM
8. May 6, 2004 01:04 PM
James Craig Posted…
RGBA == Red Green Blue Alpha... Alpha is the transparency channel.
'-moz-opacity' is consistent with the W3C specification. I called this one out before, too. Instead of incorrectly implementing properties that are in an unfinished spec, the recommended practice is to call the property -vendorName-proposedPropertyName.
9. May 6, 2004 01:05 PM
10. May 6, 2004 01:28 PM
Pieter Michels Posted…
It seems it's slow on my machine, ok I have downloaded the rc (always a bit buggy)
11. May 6, 2004 04:08 PM
liorean Posted…
Hmm, seems like it works according to the specs when it comes to the points of nesting, inheritance and capping (values > 1.0 should be capped down to 1.0 before the nesting plays into the deal, thus preventing a decendant to be less transparent than it's most transparent ancestor). However, have a look at my opacity testcase. Check out how both Safari 1.2 and Mozilla 1.7rc1 handles text selection in the opacity row. Rows are the computed colour after applying opacities, opacity, -moz-opacity, -khtml-opacity.
12. May 7, 2004 10:56 AM
Anne Posted…
James Craig, it was _not_ consistent with the CSS3 color specifications, more specifically, it was not consistent with the 'opacity' property described by that specification.
13. May 7, 2004 10:59 AM
14. May 8, 2004 01:42 AM
Stephane Posted…
It's cool to see things like Opacity and PNG working in more browser but until it does in Explorer, it will only be an added bonus for the people using a Modern Browser
That's what i've done on my web site http://www.projetsurbain.com/ and David Hyatt weblog http://weblogs.mozillazine.org/hyatt/ but I recommend that you go on my website to see a working version since I gave Mr Hyatt a couple of broken files.
For those not lucky enough to see the full effect, you can see a screen capture showing a PNG as a transparent background (black under text), Text Shadow (on the title) and RGBA on the main text by Mary Schmich.
15. May 20, 2004 07:04 AM
DUNSEL Posted…
I've been changing the opacity of elements with JS. Works just fine, except that in NS/Mozilla the elements "blink" as they reach 100% opacity. Really kills the effect. Safari and IE are smooth and just fine. Opera doesn't support it at all, so nothing to be done there. Has anyone heard of a workaround for this NS/Moz bug?16. June 16, 2004 03:12 AM
sonicMonkey Posted…
hi dunsel, ive had that blinking prob before, you apparently have to lower the max opacity to about 99% (i had to use 95%) to prevent the blink bug. however i believe this problem has been corrected in mozilla suite1.7.NEED HELP HERE! does anyone know what kind of value safari returns when you call object.style.opacity? i keep getting '0' regardless of what i do!
and does safari 1.2 also support -khtml-opacity or only -opacity? how many pple are still using version 1.1?
thanks in advance!
17. August 31, 2004 03:03 PM
erik Posted…
I don't know if you'd call it a bug, but in Mozilla 1.7 opacity seems to be limited to 2 dimensions. When a block is given an opacity level, all elements within the XY area of that block inherit the opacity, even higher layers. For example, it would be nice to have solid 100% text on top of a 50% opaque background. If you explicity force the text layer to opacity 1, IE displays correctly. In Mozilla, however, the text takes on the 50%, even when it has z-index higher than the opaque block. See this example. Is there anyway to trick Mozilla into this? Am I missing something?18. August 2, 2005 06:48 AM
elbrando Posted…
I've found the same "bug" since a week, when i started working with layer opacity, and i'm still looking for a solution; what i need to get is an half transparent layer with all children and included objects(text and images) opaque. does anybody know how to make something like this?
19. October 15, 2005 04:11 PM
Bowser Posted…
I've been searching for an answer forever! Opacity is great, but there is also the need to make opaque things over them as well! The only solution I have found is to take whatever you need to be opaque out of the flow by putting it in a separate absolutely positioned DIV. This comes at a cost though... the positioning can be tricky and (in my case) it can interfere with links such as in a navigation menu (Opera specifically had problems). There's gotta be a better way!!
Richard Earney Posted…
Safari seems to support this too!