Different stylesheets for different Safari browser versions

Safari Compatible issues between its versions

Today I found there are some style issues between safari 3.x and safari 4.x.

In General we use the following way to use different style sheets for different IE versions

<!--[if IE]>

<link href="http://www.norinajane.com.au/templates/norinajane/media/style/iestyle.css" rel="stylesheet" type="text/css" />

<![endif]-->

<!--[if IE 7]>

<link href="http://www.norinajane.com.au/templates/norinajane/media/style/ie7style.css" rel="stylesheet" type="text/css" />

<![endif]-->

But It is not possible to differentiate versions of Safari browser like this for defining different CSS for different safari versions.

I worked on Quirks Javascript today and made some changes which is easy to use for dummies also.

Include the following JavaScript in your html document
======================================================================
<script type="text/javascript">

<!--
var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
       
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox",
            versionSearch: "Version"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        }
       
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

// -->
</script>
======================================================================
And then the following script
======================================================================

<script type="text/javascript">
<!--
if (BrowserDetect.browser == "Safari")
{


    if (BrowserDetect.version >= 4 )
    {document.write('<link href="safaristyle4.css" rel="stylesheet" type="text/css" />');}
    else
    {document.write('<link href="safaristyle.css" rel="stylesheet" type="text/css" />')}


}


//////////////////////////// If you want to use for IE too


if (BrowserDetect.browser == "Explorer")
{


    if (BrowserDetect.version == 6 )
    {document.write('<link href="IE6.css" rel="stylesheet" type="text/css" />');}
    else if (BrowserDetect.version == 7 )
    {document.write('<link href="IE7.css" rel="stylesheet" type="text/css" />')}
    else if (BrowserDetect.version == 8 )
    {document.write('<link href="IE8.css" rel="stylesheet" type="text/css" />')}
   
}

//////////////////////////// If you want to use for safari


if (BrowserDetect.browser == "Firefox")
{


    document.write('<link href="safari.css" rel="stylesheet" type="text/css" />')
   
}


// -->
</script>

 ======================================================================

Hope it is useful ...


Let me know if you have any questions regarding this