How to change CSS styling depends on the browser
I know there's a bro开发者_如何学JAVAwser detection in mootools. Therefore, I want to know how to change the CSS styling depends on browser? -v-
if ( Browser.chrome ) { document.id('foo').addClass('bar'); }
For more see Mootools documentation for Browser
Perhaps the following CSS Hacks will serve:
http://www.cssblog.es/hacks-css-mediante-selectores/
Regards!
for a personal reminder, I posted this small example on jsfiddle : http://www.jsfiddle.net/ghazal/XUXAP/ Maybe it'll help you Cheers.
2 ways:
Server Side
Detect user agent string and serve the associated style sheet during page generation.
Conditional Style Sheets
This is only served to IE (all versions)
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<!--<![endif]-->
Take a look at:
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For conditions related to different versions precisely.
Notes
Probably best to attempt to fix the underlying problem rather than resort to hacks as it will be a lot easier to maintain. Also be aware new versions are being released all the time, browser versions can be spoofed, etc etc. It should really only be used for specific, isolated fixes when you can't find another solution.
Browser detection is needed only for older versions of IE, if there are problems in other modern browsers then it is probably developer fault.
One way is server side check:
// returns true on at least a minimal version of IE, or if is not IE
function checkIEVersion( minimal ) {
var ver = true;
if ( navigator.appName == 'Microsoft Internet Explorer' ) {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) ver = parseFloat( RegExp.$1 ) >= minimal;
}
return ver;
};
Another way is by using conditional comments in html:
<!--[if lt IE 9]><html class="ie"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html><!--<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
Then the regular css style will look like this:
.somestyle {}
And the fallback style in ie.css will look like:
.ie .somestyle {}
Nice question, first you can add different classes with CSS like:
.color-safari{}
.color-chrome{}
Then make element with class but empty, like:
<input id="myID" type="text" name="hi" class="">
Then in script part, you can add the following for check the browser:
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent .indexOf('safari')!=-1){
if(userAgent .indexOf('chrome') > -1){
//browser is chrome
$("#myID").addClass("color-chrome");
}else{
//browser is safari, add css
$("#myID").addClass("color-safari");
}
}
I tried and it works, cheers!
加载中,请稍侯......
精彩评论