 |
 |
Setting CSS dynamically for Broswer
|
|
|
|
|
Mac Elite
Join Date: Sep 2000
Location: 'round the corner
Status:
Offline
|
|
Ohkay, if I want one CSS file for windows and another one for Macs, how can I achieve this? thanks
|
|
|
| |
|
|
|
|
|
|
|
Senior User
Join Date: Mar 2002
Location: Chicago, IL
Status:
Offline
|
|
The most reliable would be to have a normal style tag link to one of the files, and then use a javascript to sniff for the browser platform and if it's a certain platform then use a document.write() to add a link to that file. This will ensure that if a user has javascript off or your script chokes for some reason, something other than unstyled content will get displayed. The definitions in the second file will replace those in the first file, as long as you keep the same selectors in both.
Usually, though, you'd want to avoid browser sniffing unless it was really needed. Why exactly do you want separate css for each platform?
|
We need less Democrats and Republicans, and more people that think for themselves.
infinite expanse
|
| |
|
|
|
|
|
|
|
Mac Elite
Join Date: Sep 2000
Location: 'round the corner
Status:
Offline
|
|
Because the CSS looks correct on Safari, IE for Mac, but when my Windows friends look at it, it looks like some big poop on a huge stick.
So, I just want the windows users to see a Not-as-cool-and-not-bad looking CSS. where can I get said WavaShrcipt?
|
|
|
| |
|
|
|
|
|
|
|
Registered User
Join Date: Jul 2003
Location: San Jose
Status:
Offline
|
|
this works in safari and ie4win...
if it's a mac, it will get the mac_style.css, everything else gets win_style.css. the default.css is a catch-all if the browser doesn't run the script...
[php]
<html>
<head>
<link type="text/css" href="default.css" rel="stylesheet">
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
if (navigator.appVersion.indexOf('Mac') != -1) {
document.write('<link type="text/css" href="mac_style.css" rel="stylesheet">');
} else {
document.write('<link type="text/css" href="win_style.css" rel="stylesheet">');
}
//-->
</script>
<a href="a.htm" class="link">asdf</a>
</body>
</html>
[/php]
kind of a weird way to do it... the script needs to be run in the body, document.write() won't work in the head.
EDIT:
my mistake... played around a little more and it looks like you can move the script up into the head and have everything work.... as long as the script is placed after the default stylesheet.
(Last edited by mzllr; Sep 14, 2003 at 05:17 PM.
)
|
|
|
| |
|
|
|
|
|
|
|
Registered User
Join Date: Jul 2003
Location: San Jose
Status:
Offline
|
|
.... and a little more straight-forward if you can use php...
[php]
<html>
<head>
<?
if (strstr($_SERVER['HTTP_USER_AGENT'], "Mac")) {
echo "<link href=mac_style.css rel=stylesheet type=text/css>";
} else {
echo "<link href=win_style.css rel=stylesheet type=text/css>";
}
?>
</head>
<body>
</body>
</html>
[/php]
(Last edited by mzllr; Sep 14, 2003 at 02:44 PM.
)
|
|
|
| |
|
|
|
|
|
|
|
Mac Elite
Join Date: Sep 2000
Location: 'round the corner
Status:
Offline
|
|
THanks a BUncher, duder!
That is some nice code, thank you 
|
|
|
| |
|
|
|
|
|
|
|
Mac Elite
Join Date: Sep 2000
Location: 'round the corner
Status:
Offline
|
|
Originally posted by mzllr:
this works in safari and ie4win...
if it's a mac, it will get the mac_style.css, everything else gets win_style.css. the default.css is a catch-all if the browser doesn't run the script...
[php]
<html>
<head>
<link type="text/css" href="default.css" rel="stylesheet">
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
if (navigator.appVersion.indexOf('Mac') != -1) {
document.write('<link type="text/css" href="mac_style.css" rel="stylesheet">');
} else {
document.write('<link type="text/css" href="win_style.css" rel="stylesheet">');
}
//-->
</script>
<a href="a.htm" class="link">asdf</a>
</body>
</html>
[/php]
kind of a weird way to do it... the script needs to be run in the body, document.write() won't work in the head.
I tried using this in Safari and IE, and it does not switch to my prefered stylesheet:
A snippiet:
[php]
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>
Prelude to Innovations in Motion
</title>
<link type="text/css" href="stylealt.css" rel="stylesheet" media = "screen">
</head>
<body>
__ <script language="JavaScript" type="text/javascript">
<!--
if (navigator.appVersion.indexOf('Mac') != -1) {
____document.write('<link type="text/css" href="style.css" rel="stylesheet" media = "screen">');
____}
else {
____document.write('<link type="text/css" href="stylealt.css" rel="stylesheet" media = "screen">');
____}
//-->
</script>
<img id="titletext" src="titletext.png" alt="Prelude to Innovations in Motion">
[/php]
|
|
|
| |
|
|
|
|
|
|
|
Registered User
Join Date: Jul 2003
Location: San Jose
Status:
Offline
|
|
hmmmmm, seems to work here for me.
do you see a change on this one?
(Last edited by mzllr; Sep 14, 2003 at 03:49 PM.
)
|
|
|
| |
|
|
|
|
|
|
|
Mac Elite
Join Date: Sep 2000
Location: 'round the corner
Status:
Offline
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
Registered User
Join Date: Jul 2003
Location: San Jose
Status:
Offline
|
|
[php]
__ <script language="JavaScript" type="text/javascript">
<!--
if (navigator.appVersion.indexOf('Mac') != -1) {
____document.write('<link type="text/css" href="style.css" rel="stylesheet" media = "screen">');
____}
else {
____document.write('<link type="text/css" href="stylealt.css" rel="stylesheet" media = "screen">');
____}
//-->
</script>
[/php]
are there underscores ( ___ ) in the code you are trying to run? if so, that could be a problem.
(Last edited by mzllr; Sep 14, 2003 at 05:14 PM.
)
|
|
|
| |
|
|
|
|
|
|
|
Registered User
Join Date: Jul 2003
Location: San Jose
Status:
Offline
|
|
cool, i'm glad it worked out... cool site, too - i like the design.
(Last edited by mzllr; Sep 14, 2003 at 05:08 PM.
)
|
|
|
| |
|
|
|
|
|
|
|
|
|
|
|
|
 
|
|
|
Forum Rules
|
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|
|
Top
