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 the开发者_StackOverflow社区ir 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?
CSS Browser Selector should help.
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).
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;
}
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 )
加载中,请稍侯......
精彩评论