views:

624

answers:

5

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.

+2  A: 

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.

alex
Thanks for the advice but I am interested in whether or not this check is possible using the specific jQuery feature that I mentioned...
TM
It's possible, check the link I posted.
alex
Maybe I'm just being dense but I don't see anything about semi-transparent PNG support on that docs page. I read it before I posted this question. Could you clarify? Sorry if I'm just being stupid here but I didn't see it before and I still don't see it. PS: you'll note that I posted that SAME link in the question
TM
Why 'check' when you could just have jQuery transparently fix it? Or am I being too 'pythonic' there? :)
TML
Sorry TM, did not see the link there. I'll post an example of whtat *may* work. @TML, not quite sure what you're getting at
alex
$.support.opacity refers to the opacity CSS property (vs filter in IE), not anything related to PNG.
TM
That's what I thought. I guess you're out of luck using JS to detect it.
alex
+1  A: 

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.

TML
A: 

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.

Gordian Yuan
Not trying to fix it, I will display an alternative background color in the case where it is not supported. Right now I do use conditional comments, but I'd rather check browser SUPPORT for transparent PNG than simply hard coding for IE6.
TM
+1  A: 

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 http://stackoverflow.com/questions/680912/javascript-get-pixel-data-from-image-under-canvas-element

jeroen
A: 

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.

Fredrik Stai