Jquery code is returning true when is not supposed to

Question

I have this code in jquery to add diferent css styles according to the browser since i can't get stuff in the exact same place. This is the code that adds the link to the style sheet when the user is using chrome.

<script type= "text/javascript">
    $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
    if ($.browser.chrome) {
        document.write('<link rel="stylesheet" href="css/chrome.css" 
                                         type="text/css" media="screen">'); 
    }
</script>

However, when i use chrome, another code (the same one that adds the link to the style sheet for safari) also becomes true and adds a link too. so i have two stylesheets when im using chrome. Both codes are exact the same thing, the only difference is that the word "chrome" is changed for "safari".

Answer 1

For better, more accurate chrome detection, check out following url: https://stackoverflow.com/a/11382806/2177992

Besides that you can structure your code like this:

if ( chrome )
{
    //chrome stuff
}
else if ( safari )
{
    //safari stuff
}

This way the both will never be active at the same time.