how to call browser based css?

we can get the browser name from javascript but is there any way to change css accordingly.I mean some classes of css file because I dont want to link another css file , I want to write styles on

if chrome

 a img
{
m开发者_如何学编程argin:0;
}

//if mozila

a img
{
margin:5px;
}

Maybe something like

body.chrome a img
{
margin:0;
}

body.mozilla a img
{
margin:5px;
}

then use Javascript to set a class on the body as required.

There are two ways:

Client side: you need to use Javascript to detect the browser and import the appropriate CSS style. Have a look at this article. (link no longer available)

Server side: you need to detect the user agent and serve the appropriate HTML. Here's a PHP source link for this.

You can go for:

• conditional CSS
• IE Conditional Comments

What you're describing is conditional CSS (or for IE, conditional comments).

I have done this in the past with conditional includes. Detect the browser from its headers, then include a .css file based on the condition

Use the URL-prefix for the Mozilla extension:

@-moz-document url-prefix() {
  a img {
    margin:5px;
  }
}

I use this:

let userAgent = navigator.userAgent;
let b = "";
if(userAgent.indexOf("Firefox") > -1){
    b = "firefox";
}
if(userAgent.indexOf("Chrome") > -1){
    b = "chrome";
}

let styles = document.createElement('link');
styles.rel = "stylesheet";
styles.type = "text/css";
styles.media = "screen";
styles.href = "css/options." + b + ".css";
document.getElementsByTagName('head')[0].appendChild(styles);

u can detect with js the browser version. And link the right css file.

For IE you can use

Sometimes I use -moz-CSS_ATTRIBUTE für Mozila, but it works not everytime.

I think JS is the best solution