Question

Do I really need all these CSS Opacity Properties? I’m not using ALL of these at once, but showing them at different percentages. But I usually have the group of 4 and I wanted to see if I can eliminate anything from my stylesheet.

And can someone show me an example of 100%, 25%, and 0%? I want to make sure I have them done correctly.

opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";


opacity: 0.25;
-moz-opacity: 0.25;
filter:alpha(opacity=0.25);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=25)";


opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

Answer 1

If you want CSS3 opacity across as many browsers as possible, you’ll need all of these properties:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";     /*Best for Internet Explorer 8 */
filter: alpha(opacity=50);    /*Internet Explorer 5, 6, 7, 8 */
-moz-opacity: 0.5;    /* Old Mozilla Browsers */
-webkit-opacity: 0.5;    /* Old Webkit browsers (Safari, Chrome, various others) */
-khtml-opacity: 0.5;    /* Really old Safari browsers and Konqueror */
opacity: 0.5;    /* Modern browsers */

However, you can cut most of those for modern usage:

filter: alpha(opacity=50);    /*Internet Explorer 5, 6, 7, 8 */
opacity: 0.5;    /* Modern browsers */

Note that while IE 8 support filter, it’s not the recommended way to add opacity. However, it all works the same.