CODEWITHSUNDEEP
cssinternet-explorer-8opacity
David Gard
David Gard

Reputation: 12047

CSS3 valid 'opacity' for <=IE8

I'm trying to ensure that my companies website is HTML5/CSS3 valid, but I've hit a problem with one little piece of CSS.

Basically, we have a filtered list of Team members (a picture of each with a name/email underneath), with those who are out of scope placed at the end and slightly faded (opacity: 0.3;). However, with IE8 (and before) being special, I used the following -

filter: alpha(opacity=30);

This however caused a validation error "Parse Error opacity=30)", so I done some searching and replaced it with this -

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

No error this time, but I do get a warning - "Property -ms-filter is an unknown vendor extension"

Does anybody know of a CSS3 valid way of applying opacity that is backwards compatible with IE8 (I.e. no errors or warnings)? Thanks.

Upvotes: 1

Views: 120

Answers (1)

James Donnelly
James Donnelly

Reputation: 128791

Well one way would be to simply add an additional effect alongside the opacity. This way browsers which do not render the opacity property are still able to differentiate the team members who are out of scope:

selector {
    background: #dfdfdf;    /* New property, light grey background. */
    opacity: 0.3;           /* Old existing property, no validation warnings. */
}

Upvotes: 1

Related Questions