Different CSS depending on OS (Mac or PC)

[mab240976]

I need some help. This may be quite basic to you guys. I've found the following script below to switch the CSS style sheet for appearing on mac or PC. However I can't work out which bits I edit or where to put the info. This is probably really simple. Please help. Many thanks.

I have two style sheets macstyle.css & pcstyle.css

<script type="text/javascript">

/***********************************************
* Different CSS depending on OS (mac/pc)- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var csstype="inline" //Specify type of CSS to use. "Inline" or "external"

var mac_css='body{font-size: 14pt; }' //if "inline", specify mac css here
var pc_css='body{font-size: 12pt; }' //if "inline", specify PC/default css here

var mac_externalcss='/style/macstyle.css' //if "external", specify Mac css file here
var pc_externalcss='/style/pcstyle.css' //if "external", specify PC/default css file here

///////No need to edit beyond here////////////

var mactest=navigator.userAgent.indexOf("Mac")!=-1
if (csstype=="inline"){
document.write('<style type="text/css">')
if (mactest)
document.write(mac_css)
else
document.write(pc_css)
document.write('</style>')
}
else if (csstype=="external")
document.write('<link rel="stylesheet" type="text/css" href="'+ (mactest? mac_externalcss : pc_externalcss) +'">')

</script>

[kepler]

If I can make a suggestion, don't use JavaScript to switch styles. The problem with using JavaScript is some people disable JavaScript in their browsers. Instead do the switching on the server.

You can do it easily if you are using an Apache server with PHP installed. Use my (free) dynamic CSS library at www.coolphptools.com/dynamic_css. Then create a style.css that contains:


/*
* Loads the appropriate CSS file based on OS
*/

eval $user_agent = $_SERVER['HTTP_USER_AGENT'];

if ( strstr( '$user_agent', 'Mac' ) !== false )
@include 'macstyle.css';
else
@include 'pcstyle.css';
endif



This assumes all your CSS files are in the same directory. If not change the include path.

Finally just have the following link in your HTML:

<link rel="stylesheet" type="text/css" href="style.css" />

The switching will be done on the server.

[kepler]

By the way, if you are using external style sheets, change the following line:

var csstype="inline"

to

var csstype="external"

If you decide to use the JavaScript solution.

[Medyman]

The highlighted parts are what you can/should edit.

var csstype="inline" //Specify type of CSS to use. "Inline" or "external"

var mac_css='body{font-size: 14pt; }' //if "inline", specify mac css here
var pc_css='body{font-size: 12pt; }' //if "inline", specify PC/default css here

var mac_externalcss='/style/macstyle.css' //if "external", specify Mac css file here
var pc_externalcss='/style/pcstyle.css'   //if "external", specify PC/default css file here

I'd recommend using external CSS files here. It will be much easier to maintain that way.

Can I ask why you want to use OS-dependant CSS? It's usually much better practice to use browser-dependant CSS if you're trying to fix any bugs.

If you're using OS-dependant CSS for content-related changes, then I would also suggest what kepler did above -- use server side scripts.

[harryknight]

Hi, I am still learning but my website with CSS can be seen by both a Mac and a PC - I've tested it.

So how come you need two types of CSS?

Thanks

[mab240976]

Thanks guys. That should do the trick.

The main reason for doing this is because my client likes things to line up. For example the bottom of images to the bottom of a line of text. Now this is all well and good, but to achieve this on both PC and Mac is difficult without two sets of style sheets due to the way a Mac a PC view font sizes.

Would be fantastic if they both got together to develop one standard size and browser that viewed the same on both platforms.

Anyway enough of my waffle. Thanks for the advice I will try it out today.

[Medyman]

That's not just a Mac vs. PC problem. That's going to vary from browser to browser, within operating systems. If you define everything in pixels, intead of points(pt) or EM units...you won't have the problem of font's being "different sizes".

[mab240976]

That's not just a Mac vs. PC problem. That's going to vary from browser to browser, within operating systems. If you define everything in pixels, intead of points(pt) or EM units...you won't have the problem of font's being "different sizes".

I am defining sizes as pixels but PC's seem to view it slightly bigger. I'm working on a Mac and when I've made changes the browsers I test the site on (Firefox & Safari), show the same results where as Internet Explorer on the PC shows the font size larger also spacing is an issue on the PC between paragraphs. All very odd.

I'm open to suggestions, as I'd prefer just to have one style sheet. But as I mentioned my client is viewing the site on a PC and using Internet Explorer and wants it to view properly on his computer. We're due to send an email around to about 10 people to test the site and give feedback, to see if there are any other issues.

[mab240976]

If I can make a suggestion, don't use JavaScript to switch styles. The problem with using JavaScript is some people disable JavaScript in their browsers. Instead do the switching on the server.

You can do it easily if you are using an Apache server with PHP installed. Use my (free) dynamic CSS library at www.coolphptools.com/dynamic_css. Then create a style.css that contains:


/*
* Loads the appropriate CSS file based on OS
*/

eval $user_agent = $_SERVER['HTTP_USER_AGENT'];

if ( strstr( $user_agent, 'Mac' ) !== false )
@include 'macstyle.css';
else
@include 'pcstyle.css';
endif



This assumes all your CSS files are in the same directory. If not change the include path.

Finally just have the following link in your HTML:

<link rel="stylesheet" type="text/css" href="style.css" />

The switching will be done on the server.

Below you mentioned creating a style.css with the following info. Can you explain the process to do this as I can't seem to make it work. Thanks.
Mark

Then create a style.css that contains:


/*
* Loads the appropriate CSS file based on OS
*/

eval $user_agent = $_SERVER['HTTP_USER_AGENT'];

if ( strstr( $user_agent, 'Mac' ) !== false )
@include 'macstyle.css';
else
@include 'pcstyle.css';
endif

[Medyman]

So you're comparing the results between Fx and Safari on the Mac vs IE on a PC? Have you considered the fact that it could just be IE's box model that's screwing you up?

In all the websites that I've made (a good 50 by now, probably) I've never had much trouble with Fx and Safari rendering different on a Mac than on a PC. Yes, they're slightly different but the positioing has always been relative. So, if the font renders larger, the positioning is still relative to that font size. And I haven't been doing anything special to make this happen.

I would look into the possibility of it being an IE issue rather than a Mac - PC issue.