how to call browser based css?

Question

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

Answer 1

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

Answer 2

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

Answer 3

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);

Answer 4

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.

Answer 5

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.

Answer 6

You can go for:

• conditional CSS
• IE Conditional Comments