3

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";
});
Jonny Sooter
  • 2,417
  • 1
  • 24
  • 40
  • There are no other relevant browsers that don't handle PNG transparency, it's only IE6 - and you can use [conditional comments](http://www.quirksmode.org/css/condcom.html) to run special code for it. – Wladimir Palant Aug 10 '11 at 18:43
  • This is undetectable according to https://github.com/Modernizr/Modernizr/wiki/Undetectables , you have to use one of the "ugly" solutions like detection based on user-agent string, CSS hacks or conditional comments. – duri Aug 10 '11 at 18:47

4 Answers4

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.

Tim Down
  • 318,141
  • 75
  • 454
  • 536
2

Conditional comments:

<!--[if IE 6]>
<script>
var ie6 = true;
</script>
<![endif]-->
Gabriel Ross
  • 5,168
  • 1
  • 28
  • 30
  • -1 - conditional comments are not good because you have to put them on every page. Ive thought of that but it would have to be a JS conditional that would negate the whole script for IE6 and lower – Jonny Sooter Aug 10 '11 at 18:55
  • @Jonny: A downvote would be harsh, I think. Your question doesn't say that you need a JS-only solution, and using conditional comments is probably the best solution. – Tim Down Aug 10 '11 at 23:40
  • I didn't downvote just used that -1 to say that its not very usefull to me in this ocasion because I have pages that are generated automaticly although it would probably be the best thing to do, maybe I didn't explain myself as I should have. – Jonny Sooter Aug 11 '11 at 12:17
1

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.

tskuzzy
  • 35,812
  • 14
  • 73
  • 140
0

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).

Marc B
  • 356,200
  • 43
  • 426
  • 500