Cross-Browser Opacity that Stops Inheritance

The Skinny

So if you know what you are doing and are just curious to see my solution here is the CSS that does what the title of this article claims:

.startOpacity{
    background:rgb(255,255,255);
    background:rgba(255,255,255,0.7);
    -ms-filter:alpha(opacity=70);
    filter:alpha(opacity=70)
}
.stopOpacity{
    position:relative
}

As you can see the simple answer is: don’t use opacity when you can use rgba() instead. As for IE, this is one of those situations where its non-standard CSS implementation comes to the rescue. Just add .stopOpacity (or position:relative) to the child of the element that has opacity whom you wish not to inherit opacity. All opacity inheritance will stop with that child if you are using IE. If you produce a browser that is not IE and also does not understand rgba() then this CSS will produce an element that has no opacity. If you do not allow this degradation to adversely affect accessibility then we can call it graceful.

What you Were Using

So if you’ve used opacity in the past and wanted it to be as cross-browser compatible as possible, you were probably using this:

.opacity{
    opacity: .75;
    filter: alpha(opacity=75);
    -ms-filter: "alpha(opacity=75)";
    -khtml-opacity: .75;
    -moz-opacity: .75
}

It could be said that neither solution is very elegant. This rule does the trick but for me it just didn’t quite hit the mark because of inheritance. Every element that is nested inside an element with this CSS style will also have transparency. I would venture to say that in most situations this is NOT desired. Unfortunately the W3C disagrees so we have a spec that says opacity should be inherited.

Enter rgba()

Luckily we now have rgba() in modern standards compliant browsers (read not Internet Explorer). Not only does rgba() allow you to create transparent backgrounds without passing inheritance, but it allows you to declare it on a single CSS property instead of setting the entire element to one level of opacity. No inheritance AND more granular control, what’s not to love?

IE – Always the Downer

With IE we have no choice but to keep doing things the old way. However, we can use its own weapon of maddeningly random non-compliance against it! If you add position:relative to a child of an element that has transparency, that child will no longer inherit that transparency.

Hacking it Together Reconciling with IE

So how do we trick IE into ignoring rgba()?

We don’t have to IE can’t read it. Just declare an rgb() color first for IE to read, everyone else will overwrite it with the rgba() color – but only if it comes AFTER the rgb() color.

What about the alpha filter?

The filter property is only read by IE so there’s no need to hack anything there either.

What’s the catch then?

Well, there is one part that might be called a hack by some and that is the need to use the position:relative declaration on the children that you don’t want to inherit transparency in IE. This is one of those declarations that really shouldn’t affect the style in the first place but just happens to fix an undesired effect in IE. In situations like those the most I do is quarantine the rule in an IE style sheet.(linked with conditional comments)But even that isn’t really necessary. By the way, if for some reason you require position:absolute or any other valid position: value it will still work.

The Ugly Alternative

The most popular alternative method for getting out of the transparency inheritance issue is to use absolutely positioned divs to place elements above a transparent element without those divs actually being nested inside the transparent element. This is NOT good semantics and will add bloat to your mark-up. The situation will dictate the proper solution though, for example this is how I already position my navigation and banner ads for SEO purposes so I can take advantage of that I use a different theme now so you would see that this is no longer true, but the point remains valid. I cannot however, justify using AP divs solely to accommodate a hacky design.

That concludes this tutorial on stopping opacity inheritance. I hope this method improves your designs as much as it has mine.

CodeProject