Is it possible to check for PNG support with jQuer

Question

My question is regarding the jQuery Support system.

I'd like to know if it is possible to tell whether or not the browser will support semi-transparent background PNG images using this method.

Edit: I am not interested in CSS solutions to a specific problem. I'd like to know if the jQuery support checking system can check this. I appreciate the advice but I'm trying to find out a specific bit of information about the support feature of jQuery.

Answer 1

I think that is simply not possible, after all, even IE6 shows the transparent png's, it just does not show the transparency; all browsers "support" png's so you can´t check for that.

If you could get the color of a specific pixel on a page, you could of course, but it seems that is impossible to do.

See also Javascript - get pixel data from image under canvas element?

Answer 2

Maybe you could just use jQuery pngFix or jQuery ifixpng?

If neither of those will do, I'd suggest looking into conditional comments instead, as documented at MSDN.

Answer 3

Fixing pngs with javascript is bad practice. You’ll end up with a flash of unstyled content. CSS and conditional comments would be a better choice.

You can use the method of alex.

Answer 4

I think I understand what you're after TM, since I'm trying to do something similar: If alpha PNG is supported, insert a PNG using jQuery. Otherwise, do nothing.

The only solution I can think of is inserting a DIV using jQuery. Then, in the CSS you set the DIV's background-iamge to the PNG you want to use followed by a conditional comment to feed IE6 a transparent gif instead.

I haven't tried it out yet but it should do the trick.

Answer 5

I don't use Js for this sort of thing...

I use

.png24 {
  background-image: url(png24.png);
}

/* ie6 */
* html .png24 {
 background-image: url(non-png24.png);

}

jQuery have deprecated the browser checking in jQuery 1.3. I'm not sure when they will entirely remove it though.

I would highly recommend leaving this checking up to CSS and/or conditional stylesheets.

There is no way to in JS to check for the ability to support alpha transparency without checking browsers.