2

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.

TM.
  • 108,298
  • 33
  • 122
  • 127

5 Answers5

3

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
  • 479,566
  • 201
  • 878
  • 984
  • 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. May 22 '09 at 02:24
  • It's possible, check the link I posted. – alex May 22 '09 at 02:27
  • 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. May 22 '09 at 02:35
  • 1
    Why 'check' when you could just have jQuery transparently fix it? Or am I being too 'pythonic' there? :) – TML May 22 '09 at 02:50
  • 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 May 22 '09 at 03:53
  • $.support.opacity refers to the opacity CSS property (vs filter in IE), not anything related to PNG. – TM. May 22 '09 at 04:33
  • That's what I thought. I guess you're out of luck using JS to detect it. – alex May 22 '09 at 05:09
2

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?

Community
  • 1
  • 1
jeroen
  • 91,079
  • 21
  • 114
  • 132
1

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
  • 11
  • 1
1

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
  • 12,813
  • 3
  • 38
  • 45
0

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
  • 4,750
  • 6
  • 29
  • 35
  • 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. Jun 16 '09 at 21:25