is opacity worth bothering with

[ajfmrf]

I ask because I am considering using it but I don't have any idea how the different browsers handle it

Is it one of those things that is different for each browser or is there one or two ways to use it to cover everything.

I hope I am not confusing the question too much-lol

[bernie1227]

I ask because I am considering using it but I don't have any idea how the different browsers handle it

Is it one of those things that is different for each browser or is there one or two ways to use it to cover everything.

I hope I am not confusing the question too much-lol

well there's only one css style you need to use for Chrome, Safari, Firefox and ie9, and then there's one other simple one to get ie8 and earlier as well.
Chrome, Safari, Firefox and ie9:

opacity:0.4;

ie8 and below:

filter:alpha(opacity=40);

so it's pretty easy to get all the browsers.

[ajfmrf]

This is interesting.

I figured it would be more involved to include all or most browsers.

Thanks for the quick response bernie1227

How about for general usage?Appearance wise any thoughts from any one using or not using this

[djr33]

It's impossible to answer that without context. Of course using opacity can be helpful sometimes, and other times it might just be excessive or too busy on a page. But if it helps the page, use it.
The real reason I'm responding is this: clearly opacity isn't a necessary feature, so it's optional. Use this to your advantage. If it looks better with lowered opacity, go for it. And if some browser (especially for a small minority of visitors) can't do it, then you've only lost the effect. It's the same for them, and better for the others. No loss, gain for some.

As a general philosophy about these things, don't entirely rely on them, and always (whatever the feature) include a working fallback if it fails. But none of that is a reason to not use them when they do work.


And as bernie explained, yes, it's possible to get it working in most browsers. This is true of most features. Few things will work in absolutely every case (for example, text only browsers, certain mobile devices, etc.) but as long as the page is well designed and it works for most people, I don't see that as a problem.

[ajfmrf]

Thanks Daniel ,I always look forward to your thoughts as well as a few other people here.

[bernie1227]

Thanks Daniel ,I always look forward to your thoughts as well as a few other people here.

In my experience, opacity is best used when you actually have something behind the opaque div, that you really want to be able to see something. For example, of you have a background image, then opacity may be appropriate. Even more so, if you've seen a lot of image galleries, then many of them have opaque captions so that you can see the image still. So those are times when I've found that opacity is most useful on a website graphically. Using opacity with just white behind it, the div will just lose its color and look washed out.

[jscheuer1]

One thing to be aware of with opacity is that when using the MS version (filter alpha opacity) required by IE 8 and less, those browsers lose the anti-aliasing quality of text (aka ClearType).

There's an evolving (some would say devolving) history. In IE 5.5 and 6 there was no problem. In IE 7 it's OK as long as the faded text has background (color or image) in its element. With IE 8 nothing helped. Fortunately with IE 9 there's no problem, and IE 9 can also use the standard opacity without filter.

As a rule of thumb, if you're fading text, just use opacity. IE 8 and less will skip it. IE 9 and all other browsers will do just fine.

There are ways to get the effect to work out with text in IE 8 and less. But it's tricky.

If you're simply fading images, it's fine though.


Other Info:

This problem with text looking sketchy in IE 7 and 8 also occurs with any filter, not just the alpha opacity filter.


There are also legacy browser versions that require a different opacity syntax:

Older Safari and Konqueror used:

-khtml-opacity

Older Mozilla used:

-moz-opacity

But these can now safely be ignored for the most part.


Certain versions of Opera copied or somehow otherwise exhibited the problem IE 8 has with faded text, only with standard opacity. These Opera versions were short lived.


In IE 9 there's -ms-opacity, but I'm not aware of any advantage in using it since that browser is also fine with standard opacity.


In scripting it can be tricky, but a good javascript library can simplify things. These generally ignore all but standard opacity and the IE proprietary filter alpha opacity. In jQuery (the one I'm most familiar with), when the filter is used with IE 8 and you're fading in, it's removed once the text is 100% opaque, thus restoring ClearType. But it doesn't look all that great during transition. Other libraries may or may not use this trick for IE 8. I just don't know. I haven't worked with them enough to know.

[ajfmrf]

Thanks John,I was wondering if you would get around to sharing some thoughts.

The whole reason I was asking was the long thread about the clock that used words instead of numbers with and image background.

I have it here http://www.web-user.info/clock/two.html and thought that if I was able to make the background where the text is a bit pale it may look better.

Although I am going to see how it looks using using the typical clock and date too.

[jscheuer1]

Yeah, it does look better with:

#timeDiv 
{ 
    position: absolute; 
    left: 5px; 
    top: 610px;  
     background: #f7fffc; 
    opacity: 0.6;
}  

#dateDiv 
{ 
    position: absolute; 
    left: 610px; 
    top: 610px; 
     background: #f7fffc;
    padding:5px;
    opacity: 0.6;
}

And that's just how I'd do it. IE 8 and less will skip it, which is just as well because it's text and would be distorted by the filter in IE 8. Because there's a background color, I think it would be OK in IE 6, possibly 7 with the filter. But those two browsers are rarely used, so why bother?

If you want to though, in a case like this you can put the text in one absolutely positioned div, and the background color in another behind it. Make the text a slightly lighter color and apply the filter only to the div with the background color.

[williamsun]

This is the group I use that covers most all of the browsers:

CSS file

filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
-khtml-opacity:0.50;