Thursday, August 26, 2010

Javascript Detect for Safari 3

Today I needed a quick way to detect Safari3 for some specific markup tricks, so I wrote this function.
Thought it might be helpful to someone else.

<script type="text/javascript">
var isSafari3 = (function() {
var retval = false;
if (navigator.vendor && navigator.vendor.indexOf('Apple') > -1) {
var index=navigator.appVersion.indexOf('Version');
if (index > -1) {
retval = (parseInt(navigator.appVersion.substring(index+8))==3);
}
}
return retval;
})();
alert(isSafari3);
</script>

Shannon Norrell

Monday, August 23, 2010

IE CSS Hack

Most folks know about the so-called "star hack" for IE.

However, there are two other varieties of IE-only hacks that are perhaps a bit more useful.

All of these work, in some form or another for IE. I tested them all in various flavors to arrive at my favorite (sic).

You can set up a test harness yourself using this code to see for yourself.

<style type=text/css>
body {
background-color:red;
_background-color:blue;
*background-color:green;
background-color:yellow\9;
}
</style>


  • _ hack WORKS for: IE8 Quirks, IE7 Quirks, IE6

  • _ hack DOES NOT WORK for: IE8 IE8 Standards, IE8 IE7 Standards, IE7 IE7 Standards

  • * hack works for: IE8 Quirks, IE8 IE7 Standards, IE7 Quirks, IE7 IE7 Standards, IE6

  • * hack DOES NOT WORK for: IE8 IE8 Standards

  • \9 hack WORKS for: IE8 IE8 Standards, IE8 IE7 Standards, IE8 Quirks mode, IE7 Quirks, IE7 Standards (all varieties of IE8), IE6



So, in short, if you want an IE CSS hack that works in all flavors of IE, use the backslash-nine hack. That is, just put a \9 after *whatever* css value you are assigning.

Examples
width: 9px\9;
background-color:yellow\9;

etc.

Good luck.

Shannon Norrell