How to detect a browser that dosen't render .p

Question

I have this code that render's a image acording to the day of the week. But in IE6 and lower and probably some other browsers it won't render png opacity. So I want to change it a litle so that it will detect the browser's that don't render alpha transparency and tell them to load this image instead: "img/horarios2.png". Ive tried making it so that it would rule out IE6 and lower that are known for not rendering, but then I thinking about all the other browsers that I probably don't know about that don't render either and needed something that would rule them out also. I don't know the best way to acomplish this so im open to all sugestions.

$(document).ready (function horario () {
var date = new Date();
var weekday = (date.getDay());

if (weekday==0)
    document.getElementById('horarios').src = "img/domingo.png";
else if (weekday==4)
    document.getElementById('horarios').src = "img/quinta.png";
else if (weekday==5)
    document.getElementById('horarios').src = "img/sexta.png";
else if (weekday==6)
    document.getElementById('horarios').src = "img/sabado.png";
else 
    document.getElementById('horarios').src = "img/quarta.png";
});

Answer 1

IE6 can render png transparency via a non-standard css filter, which invokes directX to handle the transparency on IE's behalf.

As for other browsers, only IE was stupid enough to add only partial PNG support. If a browser supports png, you can safely assume it handles transparency as well (except if it's IE).

Answer 2

I don't think there's a good, generic way of detecting whether or not png transparency is supported. However I all major browsers support it nowadays except for IE6 and very rarely IE5.5. I don't think you'll have to reasonably worry about any other cases.

var badBrowser = (/MSIE ((5\.5)|6)/.test(navigator.userAgent) && navigator.platform == "Win32");

if( badBrowser ) {
    // change to "img/horarios2.png"
}

Taken from here.

Answer 3

I've done a reasonable amount of research into this this issue and came to the conclusion that it was not feasible to create a feature test in JavaScript, and that IE 6 is the only browser in serious use that doesn't support PNG transparency. That being the case, your best bet is conditional comments, as recommended by Gabriel Ross. It is possible to use conditional comments in pure JavaScript, which I think is what you want:

var div = document.createElement("div");
div.innerHTML = "<!--[if lte IE 6]><i></i><![endif]-->";
var isIe6orLower = (div.getElementsByTagName("i").length == 1);

alert("Is IE 6 or lower: " + isIe6orLower);

UPDATE 17 June 2012

Note that IE 10 will not support conditional comments, so this approach will not work in future versions of IE.

Answer 4

Conditional comments:

<!--[if IE 6]>
<script>
var ie6 = true;
</script>
<![endif]-->