Is opacity acceptable?

[rWagz]

I recently discovered that you can make elements that have an opacity setting - sounds great for creating graphics-based highlighting buttons and some interesting designs I've running around in my head.

My question, which I've not found the answer to by either searching this forum or the internet in general, is this: Is it acceptable to use? As far as I've learned, it's supported in all browsers except the old versions of Opera. I can't find a straight answer if it's valid by w3c standards, other than it wasn't valid in '05.

[felgall]

The official opacity tag is

opacity:0.5;

This is part of the standards and is understood by all browsers released in the last couple of years.

For earlier Mozilla browsers use

-moz-opacity:0.5;

For earlier Safari and Konqueror browsers use

-khtml-opacity:0.5;

These are also according to the standards since they have the appropriate standards extension qualifiers on the front.

For Internet Explorer you need to use

filter:alpha(opacity=50);

Note that this entry is not according to the standards since Microsoft omitted the -ie- off of the front that would identify it as a valid browser specific extension.
Also note that while the first three specify an opacity level between 0 and 1 the IE versionspecifies a level between 0 and 100.

[rWagz]

Yeah, I was going to edit in a quick example I made:

Example here.

I used the opacity & filter:alpha tags. Should I add in the -khtml-opacity tag for early Konqueror/Safari support?

One of my ideas was to use this to define a text/menu/ect area - I've since found it also fades out any text in the <div>. I like the demos I've seen using this effect to create highlight on hover. I've also found examples of using java and opacity to create fade-ins/outs (found that in a post here & elsewhere). Definitely one to add to the bag of tricks.

[NogDog]

The official opacity tag is

opacity:0.5;

...

Note that "opacity" is not part of the CSS 2.1 standard. It is part of the CSS 3 "under construction" standard, and is part of the CSS3 Color Module which is still in "Candidate Recommendation" level, leaving it two more steps in the process before it becomes a "Recommendation". (And at the rate things have moved with CSS3, who know when that will happen, if ever.)

This does not mean you cannot use it (utilizing all the info Fellgal kindly supplied), just note that it will not validate as CSS2 compliant CSS (see validator result), and since it's not truly "standard" you probably should design your layout such that it is still readable if the opacity is not implemented by a given client.

[rWagz]

I figured as much, since I'd never heard of anyone using it before.

Oh well, I guess it's back to putting the effect into the background image. blah.

[felgall]

It may only be a candidate for inclusion in CSS3 but all modern browsers have already implemented it. This means that the standard is running behind the browsers in this instance rather than the other way around as is usually the case. Since it is already implemented I think it is therefore guaranteed to be included in the final version of the standard.

You wont get the code to pass validation regardless of which standards level you validate against because the IE version is non-standard anyway.

Still if you include all 4 versions then you will get the opacity to implement in all browsers that support it (the most recent version that wont is Opera 8).

[Kravvitz]

I used the opacity & filter:alpha tags. Should I add in the -khtml-opacity tag for early Konqueror/Safari support?

Yes, add it to support Safari 1.1 through 1.3.

It may only be a candidate for inclusion in CSS3 but all modern browsers have already implemented it. This means that the standard is running behind the browsers in this instance rather than the other way around as is usually the case. Since it is already implemented I think it is therefore guaranteed to be included in the final version of the standard.

I agree.

Still if you include all 4 versions then you will get the opacity to implement in all browsers that support it (the most recent version that wont is Opera 8).

I haven't tested this in iCab 3 yet, but I know that Konqueror doesn't support opacity or -khtml-opacity yet.

Note that "opacity" is not part of the CSS 2.1 standard. It is part of the CSS 3 "under construction" standard, and is part of the CSS3 Color Module which is still in "Candidate Recommendation" level, leaving it two more steps in the process before it becomes a "Recommendation".

CSS2.1 currently has working draft status.