Which css properties for cross browser opacity are recommend for usage today? [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 9 years ago.

Improve this question

I was wondering what is recommended now a day for using opacity in css, that will work for most of broswers and versions.

Should that be only opacity and filter or should I use still '-ms-filter' too?

Thank you.

Answer 1

.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%; 

/* Theoretically for IE 8 & 9 (more valid) */   
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);

/* Older than Firefox 0.9 */
-moz-opacity:0.5;

/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;

/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
  }

For today usage.

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

source

Answer 2

For setting opacity, it's generally best to use rgba(red, green, blue, alpha) (with color, background, or any other property that uses a color value); the opacity property affects all descendants (you can only make things more transparent with opacity, it's not possible to make things more opaque than their ancestor), whereas with rgba(), the alpha value isn't cumulative, so you don't end up getting stuck in a situation where you suddenly need to change the DOM structure to undo transparency on some element.