Detecting browsers without transparency capability

[Jeager]

Is there a way that I can use normal rgba transparency’s for something, and have some kind of detection that it will use a transparent image in its place if the browser does not support it?

[TheDoc]

https://css-tricks.com/rgba-browser-support/

Just provide an alternative for IE6-8 in an IE specific stylesheet.

[Jeager]

Ah. css3please gives you this:

.box_rgba {

background-color: transparent;

background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490); /* IE6–IE9

zoom: 1;

}

Is the fallback there good enough? Or do you need to make a conditional stylesheet still?

[TheDoc]

Never used that stuff, to be honest, so I’m not sure how reliable it is.

[Jeager]

So this still hasn’t really been solved. The filter for the script works with IE6+, but what about older versions of FF, safari, ect.. Is there a way I can have the background image load only if the browser is unable to do rgba transparency?

[mshort1985]

you could use modernizr to do it. just include it on the page in question then style it using

body#no-rgba .vox-rgba {



}

for the styles you want to appear if RGBA is not supported.

[Jeager]

I could use modernizr, I keep reading about it, but have yet to use/do it. As for the class, wouldn’t that always load the background image, then make it 50% transparent? I was talking about if a browser cant use the rgba, it will have a fallback to a background image. But I think modernizr will be my best bet.

[noahgelman]

I don’t think anyone uses a browser that’s too old to support rgba besides IE users.

No one uses pre- FF3+, Saf3+, Opera 10.10+

Anyone who uses FF, Safari, or Opera, updates often. Usually it’s done automatically for them.

Chrome has always supported it I believe. So really, all you need to worry about is IE. Using Modernizr is a bit over the top just for rgba support.

[Jeager]

Ah, I understand. I guess I didn’t comprehend the second style being a background. But just to make sure im clear, the first one (fallback) always has to be first on the list correct? I would of assumed the opposite, as it would look for the rgba, then if nor supported go to the next best thing. But I do get where your coming from, and appreciate the help a ton.

[Author]

Posts