Detect of browser is safari

I was reading various articles on borwser detection with javascript and I know it can be unrelliable and unprofessional at times, but I was just playing it to see if I could get somethign working.
What I wanted to do was attach a stylesheet if the browser in safari.
With what I remember from the articles I read, isn’t there a function that is navigator.appName(); ?

I was wondering if you could help me write what I am trying to do, I ahve written it in sorta of pseudo-code below:
Essentially,

if(browserName==“safari”)
{
<link type=“text/stylesheet” href=“safariStyling.css”/>
}
else
{
<link type=“text/stylesheet” href=“defaultStyling.css”/>
}

I know that there is a .html() jQuery function where I can write html in the head of the document like so, head.html(HTML GOES HERE);
but I have heard and form experience that mixing javascript and jQuery function can be dangerous.

Do you guys have any ideas on I would detect if the browser is safari and then link a stylesheet if true?

Please let me know if you need an clarification or if you have any questions, comments, or concerns.

Thanks in Advance,
Team 1504

another way is to use the useragent to find the browser name.

in the <head> first call this

 
function getBrowserName() {
    var name = "Unknown";
    if(navigator.userAgent.indexOf("MSIE")!=-1){
        name = "MSIE";
    }
    else if(navigator.userAgent.indexOf("Firefox")!=-1){
        name = "Firefox";
    }
    else if(navigator.userAgent.indexOf("Opera")!=-1){
        name = "Opera";
    }
    else if(navigator.userAgent.indexOf("Chrome") != -1){
        name = "Chrome";
    }
    else if(navigator.userAgent.indexOf("Safari")!=-1){
        name = "Safari";
    }
    return name;   
}

and then set the stylesheet with

 
function setCSSforBrowser(cssPath){     
    if(browserName == "MSIE"){
        document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_IE8.css" />');
    }  
    else if(browserName == "Firefox"){
        document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_FF3.css" />');
    } 
    else if(browserName == "Safari"){
        document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_SAF.css" />');
    }
    else if(browserName == "Opera"){
        document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_OP.css" />');              
    }
    else if(browserName == "Chrome"){
        document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_GC.css" />');
    }
    else {  //we have an unsupported browser  - use the FF css and hope for the best !!! 
        document.write('<link rel="stylesheet" type="text/css" href="'+cssPath+'wpc_FF3.css" />');
    }
}

actually a better way, so that javascript disabled browsers will still get a stylesheet, is to assign a default stylesheet in the head with something like

 
<link id="lnkCss" rel="stylesheet" type="text/css" href="wpc_IE8.css" />

and then directly below this call the 2 earlier function but in setCSSforBrowser() change the href of the above link according to the browser name instead of outputting a <link> element.

 
document.getElementById("lnkCss").href = 'safari.css';

Now a stylesheet will be assigned by default even if js is not turned on for some reason.

Tahnk you Kalon This script seems to work well, but in my code below it is not attaching or setting the href to teh css file for safari.

Logically and theoretically this should work and it is the explanation behind my edits to the code you posted:
If the browsers is not safari set href of linkCss to default.css
If it is Safari then set the href of linkCSS to space.css
If the browsers is niether Safari nor not safari (even though thats not possible), then link default.css

But when I ran my code in safari, default.css was loaded and space.css was not even atempted to be loaded :eek:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>24ways - CSS Animations - Space working only in safari</title>
		<link id="linkCss" rel="stylesheet" type="text/css" href="assets/css/default.css" />
		<script src="http://stats.24ways.org/mint/?js" type="text/javascript"></script>
		<script type="text/javascript">
			function getBrowserName() {
    			var name = "Unknown";
    				if(navigator.userAgent.indexOf("MSIE")!=-1){
       					 name = "MSIE";
   					}
    				else if(navigator.userAgent.indexOf("Firefox")!=-1){
        				name = "Firefox";
    				}
    				else if(navigator.userAgent.indexOf("Opera")!=-1){
        				name = "Opera";
    				}
    				else if(navigator.userAgent.indexOf("Chrome") != -1){
        				name = "Chrome";
    				}
    				else if(navigator.userAgent.indexOf("Safari")!=-1){
        				name = "Safari";
    				}
    			return name;
			}
			
			function setCSSforBrowser(cssPath){
    			if(browserName == "MSIE"){
        			document.getElementById("linkCss").href = 'assets/css/default.css';
    			}
    			else if(browserName == "Firefox"){
        			document.getElementById("linkCss").href = 'assets/css/default.css';
    			}
    			else if(browserName == "Safari"){
       				document.getElementById("linkCss").href = 'assets/css/space.css';
    			}
    			else if(browserName == "Opera"){
        			document.getElementById("linkCss").href = 'assets/css/default.css';
    			}
    			else if(browserName == "Chrome"){
        			document.getElementById("linkCss").href = 'assets/css/default.css';
    			}
    			else {  //we have an unsupported browser  - use the FF css and hope for the best !!!
        			document.getElementById("linkCss").href = 'assets/css/default.css';
    			}
			}
</script>
	</head>
	<body>
		<h1>Space</h1>
		<p>
			<span id="fog">A long</span>
			<span id="fog-2">long time</span>
			<span id="glow">ago,</span>
			<span id="light">in a</span>
			<span id="stars">galaxy</span>
			<span id="stars-2">far</span>
			<span id="small-stars">far</span>
			<span id="small-stars-2">away&hellip;</span>
		</p>
		<!-- Excuse the markup please, it makes sense with the css -->
	</body>
</html>

Do you have any idea why it is not linking the css for safari?
Is it possible that the original link in the beginning, whose href is default.css, is overriding what the js writes?

you don’t need to pass a parameter cssPath to setCSSforBrowser() since you are hard coding the path in the function.

you just need to do some basic debugging now.

  1. where are you assigning a value to browserName in setCSSforBrowser()

  2. have you confirmed with an alert() if getBrowserName() is getting the correct value for name?

  3. have you confirmed with an alert() if setCSSforBrowser() enters the correct if-else block for the browser name retrieved in 1)

Oh okay, I can not believe I forgot that. The functions you wrote are functions and I need something to call on them also I have added alerts. Everything I have changed is bold

<script type=“text/javascript”>

function getBrowserName() {
var name = “Unknown”;
if(navigator.userAgent.indexOf(“MSIE”)!=-1){
name = “MSIE”;
alert(“You are using Internet Explorer”);
}
else if(navigator.userAgent.indexOf(“Firefox”)!=-1){
name = “Firefox”;
alert(“You are using Firefox!”);
}
else if(navigator.userAgent.indexOf(“Opera”)!=-1){
name = “Opera”;
alert(“You are using Opera”);
}
else if(navigator.userAgent.indexOf(“Chrome”) != -1){
name = “Chrome”;
alert(“You are using Chrome!”);
}
else if(navigator.userAgent.indexOf(“Safari”)!=-1){
name = “Safari”;
alert(“You are using Safari!”);
}
return name;
}

        function setCSSforBrowser([B]browserName[/B]){
            if(browserName == "MSIE"){
                document.getElementById("linkCss").href = 'assets/css/default.css';

alert(“The stylesheet for IE has been attached!”);
}
else if(browserName == “Firefox”){
document.getElementById(“linkCss”).href = ‘assets/css/default.css’;
alert(“The stylesheet for Firefox has been attached”);
}
else if(browserName == “Safari”){
document.getElementById(“linkCss”).href = ‘assets/css/space.css’;
alert(“The stylesheet for Safari has been attached”);
}
else if(browserName == “Opera”){
document.getElementById(“linkCss”).href = ‘assets/css/default.css’;
alert(“The stylesheet for Opera has been attached”);
}
else if(browserName == “Chrome”){
document.getElementById(“linkCss”).href = ‘assets/css/default.css’;
alert(“The stylesheet for Chrome has been attached”);
}
else { //we have an unsupported browser - use the FF css and hope for the best !!!
document.getElementById(“linkCss”).href = ‘assets/css/default.css’;
alert(“Your browser is unsupported, so we attached the firefox stylesheet”);
}
}

.getBrowserName();
.setCSSforBrowser(name);
/* How would I call them though or is this fine in JS? But then again you used document.getElementById() Would I do document.getBrowserName(); and then
document.setCSSforBrowser(name);
?*/

</script>

So What i believe is happening now is that:
1.) the function getBrowserName is the defined.
2.)The function setCSSforBrowser() is defined with the required parameter browser name
3.) get Browser is called so that the proper name of the broser can be assigned to the var name so that it can be used a parameter for the function setCSSforBrowser as it is returned at the end of getBrowserName
4.) The user is alerted what browser they are using
5.) The function setCSSforBrowser is called on with the var name as its parameter.
The user is altered what stylesheet was attached
Are there any problems?

Two changes to make it work better

on top of the above post, wouldn’t alert need to be called as
document.alert(“Alert goes here”);

and also

wouldn’t the var name need to initiated outside of the function getBrowsername() first so that it could be accessed by the function setCSSforBrowser().

So something like this in the beginning:

<script type="text/javascript">

var name;

function getBrowserName() {
name = "Unknown";
if(navigator.userAgent.indexOf("MSIE")!=-1){
name = "MSIE";
alert("You are using Internet Explorer");
}
/* so on and so forth with the rest of this function and the second function then the calls */

Because isn’t it true that if the var Name is initiated and defined only the function getBrowserName(), it will be impossible to access by an outside function, such as setCSSforBrowser() , which needs to use it as its parameter to attach the proper stylesheet?

 
var browserName = getBrowserName();
setCSSforBrowser();


Hey, I just wanted to post my final code, which works! Thank you very much Kalon! :):):):):):):slight_smile:
:weee::weee::weee::weee:

Sorry, that was quite unprofessional.

Here is the final code in case anyone reads this thread:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link id="linkCss" rel="stylesheet" type="text/css" href="assets/css/default.css" />
</script>
	<script type="text/javascript">

		function getBrowserName() {
		var name = "Unknown";
			if(navigator.userAgent.indexOf("MSIE")!=-1){
				name = "MSIE";
				alert("You are using Internet Explorer");
			}
			else if(navigator.userAgent.indexOf("Firefox")!=-1){
				name = "Firefox";
				alert("You are using Firefox!");
			}
			else if(navigator.userAgent.indexOf("Opera")!=-1){
				name = "Opera";
				alert("You are using Opera");
			}
			else if(navigator.userAgent.indexOf("Chrome") != -1){
				name = "Chrome";
				alert("You are using Chrome!");
			}
			else if(navigator.userAgent.indexOf("Safari")!=-1){
				name = "Safari";
				alert("You are using Safari!");
			}
		return name;
		}

		function setCSSforBrowser(browserName){
			if(browserName == "MSIE"){
				document.getElementById("linkCss").href = 'assets/css/InternetExplorer.css';
				alert("The stylesheet for IE has been attached!");
			}
			else if(browserName == "Firefox"){
				document.getElementById("linkCss").href = 'assets/css/firefox.css';
				alert("The stylesheet for Firefox has been attached");
			}
			else if(browserName == "Safari"){
				document.getElementById("linkCss").href = 'assets/css/safari.css';
				alert("The stylesheet for Safari has been attached");
			}
			else if(browserName == "Opera"){
				document.getElementById("linkCss").href = 'assets/css/opera.css';
				alert("The stylesheet for Opera has been attached");
			}
			else if(browserName == "Chrome"){
				document.getElementById("linkCss").href = 'assets/css/chrome.css';
				alert("The stylesheet for Chrome has been attached");
			}
			else { //we have an unsupported browser so use the firefox styling hoping that it works				

				document.getElementById("linkCss").href = 'assets/css/firefox.css';
				alert("Your browser is unsupported, so we attached the firefox stylesheet");
			}
		}


		var browserName = getBrowserName();
		setCSSforBrowser(browserName);

</script>

    </head>
    <body>
        <h1>Space</h1>
        <p>
            <span id="fog">A long</span>
            <span id="fog-2">long time</span>
            <span id="glow">ago,</span>
            <span id="light">in a</span>
            <span id="stars">galaxy</span>
            <span id="stars-2">far</span>
            <span id="small-stars">far</span>
            <span id="small-stars-2">away&hellip;</span>
        </p>
        <!-- Excuse the markup please, it makes sense with the css -->
    </body>
</html>

Thanks you all.
I hope this helps anyone in web design especially in keeping their site looking the same regardless of browser!

Cheerio,
Team 1504.

glad you sorted it out :tup: :slight_smile:

just a couple of suggestions.

since you’re only interested if the browser is Safari or not, you could streamline the <head> code to

 
    <head>
        <meta charset="UTF-8">
        <link id="linkCss" rel="stylesheet" type="text/css" href="assets/css/default.css" />
 
    <script type="text/javascript">
        function getBrowserName() {
            var name = "Unknown";
            if(navigator.userAgent.indexOf("Safari")!=-1){
                name = "Safari";
                alert("You are using Safari!");
            }
            return name;
        }
 
        function setCSSforBrowser(browserName){
            if(browserName == "Safari"){
                document.getElementById("linkCss").href = 'assets/css/safari.css';
                alert("The stylesheet for Safari has been attached");
            }
        }
 
        var browserName = getBrowserName();
        setCSSforBrowser(browserName);
</script>
    </head>

and since browserName is a global variable, you don’t need to pass it to setCSSforBrowser() but the way you did it is ok as well.

other alternatives include combining the 2 functions into 1 or calling both functions in 1 line

 
        setCSSforBrowser(getBrowserName());

cheers :slight_smile:

Actually, upon testing the new one that you posted above that attaches a stylesheet if Safari but nothing if not, instead of the separate condition for each browser,
when I try it in chrome on my mac, it thinks the suer is suing safari.

However, the code with the multiple else if statements and conditions for each browser, that recognises that I am using chrome when I am using chrome and that I am using safari when I am using safari.

Any idea why the one with the just the if safari then else statement thinks chrome is safari besides the fact that they are both webkit browsers and do you have any ideas on can fix this or is this just javascript’s browser detection unreliability ?

ok, you’re now seeing one of the potential pitfalls in browser detecting (btw no method is 100% foolproof afaik).

With the “streamlined” code any browser with the string “Safari” in the browser’s useragent will get the safari stylesheet.

to see the user agent in Chrome on your mac add

 
alert(navigator.userAgent);

at the top of getBrowsername()

yes i have heard that js browser detection can be unreliable, but thank you however.

It’s not just javascript that experiences the issue. Whether you use javascript or vb script or activex - all client-side scripts are at the mercy of the client-side environment.