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;

[jscheuer1]

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;

Which in a case like this would make the text look ugly in IE 8.

[williamsun]

Ok, just IE 8, and can you explain further please. I have only used this for small image thumbnails and mouseover the <a .... would be 1.0/100%.

[jscheuer1]

Images are OK. See my earlier post in this thread:

http://www.dynamicdrive.com/forums/showpost.php?p=277945&postcount=7

for more explanation on why, with text (as was the case in this thread), there would be problems in IE 8. IE 7 could have issues too, if there's no background.

BTW, I would love to write off IE 8, but as it's the most recent IE browser available to anyone still using Windows XP, and there are a lot of folks in that category, we should probably continue supporting it for the foreseeable future. There are workarounds, the easiest is just skipping all filters on text. The time will come however when we can forget about IE less than 9 . . . We're just not there yet. Folks with XP should probably switch to Chrome, Opera (my preference in that situation, but Chrome is probably best for most folks) or Firefox (clunky, but many like it) though unless they need IE specific features for certain sites they visit. Even if they do, using IE 8 only for those sites and Chrome for the rest will greatly enhance their web experience.

[williamsun]

Images are OK. See my earlier post in this thread:

http://www.dynamicdrive.com/forums/showpost.php?p=277945&postcount=7

for more explanation on why, with text (as was the case in this thread), there would be problems in IE 8. IE 7 could have issues too, if there's no background.

BTW, I would love to write off IE 8, but as it's the most recent IE browser available to anyone still using Windows XP, and there are a lot of folks in that category, we should probably continue supporting it for the foreseeable future. There are workarounds, the easiest is just skipping all filters on text. The time will come however when we can forget about IE less than 9 . . . We're just not there yet. Folks with XP should probably switch to Chrome, Opera (my preference in that situation, but Chrome is probably best for most folks) or Firefox (clunky, but many like it) though unless they need IE specific features for certain sites they visit. Even if they do, using IE 8 only for those sites and Chrome for the rest will greatly enhance their web experience.
Ok. Sounds reasonable.

I don't remember the OP saying he wanted it for text. If he would have I would have suggested a couple of alternatives instead. Like a lighter color of text that mixes well with the background, then a darker shade on a:hover. Or may normal text on <a and bold text on a:hover. Much simpler and no compatibility issues. (At least that "I" know of.) Or using a block div and transparent the background should render something similar, although there may be issues like you mentioned. I'm not sure.

[jscheuer1]

Ok. Sounds reasonable.

I don't remember the OP saying he wanted it for text. If he would have I would have suggested a couple of alternatives instead. Like a lighter color of text that mixes well with the background, then a darker shade on a:hover. Or may normal text on <a and bold text on a:hover. Much simpler and no compatibility issues. (At least that "I" know of.) Or using a block div and transparent the background should render something similar, although there may be issues like you mentioned. I'm not sure.

They didn't mention it was for text until just after I mentioned what I did about text, see (their next post after mine about text):

http://www.dynamicdrive.com/forums/showpost.php?p=277952&postcount=8

If you want to go the route of a workaround, there are all sorts of ways of dealing with this issue in IE 8. But generally, just skipping the filter is the easiest. If you do, usually it won't look as cool in IE 8, but it won't look crappy either. All other modern browsers, including IE 9 and presumably later will work fine with just CSS style opacity. Those other two (-moz- and -khtml-) are really unnecessary, though a nice touch for legacy browsers using the earlier Mozilla (some old Netscape, possibly very early Firefox, others) and Webkit (includes old Safari, old Konqueror, others perhaps) engines, and won't hurt anything.

[williamsun]

Ahhh, I wasn't paying close enough attention.

Hopefully we all learned a little. I know I did.