CODEWITHSUNDEEP
javascriptcss
Mangofett
Mangofett

Reputation: 111

Cross-Browser Opacity Javascript Properties

I just got done reading this article: https://css-tricks.com/snippets/css/cross-browser-opacity/

This (misleading?) statement caught my eye: "These days, you really don't have to worry about opacity being a difficult thing cross-browser. You just use the opacity property, like this:

.thing {
  opacity: 0.5;
}

"

Is there no longer a use for:

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

?

And also, why is it so hard to find Javascript property selectors for old browsers? All I was able to find was "MozOpacity" here: http://help.dottoro.com/ljdkioqd.php, and the "filter.alpha" property here: http://help.dottoro.com/ljqtwlbv.php. What about the khtml property selector? The statement in the article made seems to be misleading to me if there is still a use for these other selectors. He's making it seem like all of a sudden opacity works in every browser old and new. I just need some clarification (I've read every other question on StackOverflow regarding opacity cross-browser and have found nothing significant).

<----------------------------- UPDATE --------------------------------->

I've found all of the selectors! Here they are for anyone who wants to use them:

.style.opacity
.style.MsFilter
.style.filter.alpha
.style.MozOpacity
.style.KhtmlOpacity

Note: When using the "MsFilter" property: 

.style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\"";

Upvotes: 3

Views: 134

Answers (2)

Mangofett
Mangofett

Reputation: 111

<----------------------------- UPDATE --------------------------------->

I've found all of the selectors! Here they are for anyone who wants to use them:

.style.opacity
.style.MsFilter
.style.filter.alpha
.style.MozOpacity
.style.KhtmlOpacity

Note: When using the "MsFilter" property make sure to cancel the extra set of quotes with a slash: 

.style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\"";

Thank you everyone for your help/input!

Upvotes: 1

Rounin
Rounin

Reputation: 29463

He's making it seem like all of a sudden opacity works in every browser old and new.

You can find browser usage stats here:

http://caniuse.com/#feat=css-opacity

caniuse.com estimates a global user base of 0.63% for IE8.

The other browsers (IE7 and lower, Netscape and Safari 1) are not listed.

Upvotes: 3

Related Questions