CODEWITHSUNDEEP
csscss-selectors
pixi
pixi

Reputation: 355

OS-Specific CSS?

In the past, I've seen nearly no difference between CSS in the same browsers on different platforms- pages on Safari on Mac usually look identical to Safari on Windows (and same with FF-Win vs FF-Mac). However, now I'm having an issue where both Mac browsers are pushing some elements off by a pixel compared to their PC counterparts.

Is there a way to select a browser on a specific OS to apply CSS to? Maybe something like conditional stylesheets, only for operating systems instead of browsers?

Upvotes: 9

Views: 16276

Answers (4)

Attilio
Attilio

Reputation: 31

Change CSS for specific OS:

I wrote this function that recognize if your OS is XP or different and puts specific CSS as consequence.

function changeStyle() {
var css = document.createElement('link');
css.rel="stylesheet";
css.type = 'text/css';

if (navigator.appVersion.indexOf("Windows NT 5.1")!=-1){ /* IF is windowsXP */
css.href = 'styleXP.css';
} else {
css.href = 'style7.css';
}

document.getElementsByTagName("head")[0].appendChild(css);
return false;
}

Upvotes: 1

Brian Moeskau
Brian Moeskau

Reputation: 20429

It's quite possible. The most common approach (that many JS frameworks take) is to first do platform/browser detection based on UA string and/or existence of known JS objects/methods. Then, they usually apply a platform/browser CSS class to the <head> or <body> so that you can write rules like:

.gecko2.mac .specialRule { 
    // whatever 
}

Probably a bit of a challenge to roll this approach from scratch, but certainly possible (especially if you only care about certain combinations).

Upvotes: 1

Andy Ford
Andy Ford

Reputation: 8490

CSS Browser Selector should help.

Upvotes: 9

Groxx
Groxx

Reputation: 2499

I don't know of any CSS-specific tricks, but you could select stylesheets to load with Javascript. You can use navigator.appVersion to get the OS type, along with more info.

For instance, I get:

5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-us) AppleWebKit/532.5+ (KHTML, like Gecko) Version/4.0.4 Safari/531.21.10

( from: http://www.javascripter.com/faq/operatin.htm )

Upvotes: 0

Related Questions