Menu
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?
316
CSS Browser Selector should help.
143
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).
37
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With