CODEWITHSUNDEEP
htmlcss
nectar
nectar

Reputation: 9679

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
{
margin:0;
}

//if mozila

a img
{
margin:5px;
}

Upvotes: 8

Views: 24174

Answers (8)

Smile4ever
Smile4ever

Reputation: 3704

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

Upvotes: 0

Anax
Anax

Reputation: 9372

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.

Upvotes: 5

Safwan Bakais
Safwan Bakais

Reputation: 129

Use the URL-prefix for the Mozilla extension:

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

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382696

You can go for:

Upvotes: 3

Alexander_F
Alexander_F

Reputation: 2877

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

Upvotes: -2

Matthew Wilson
Matthew Wilson

Reputation: 3929

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.

Upvotes: 7

Jason Hall
Jason Hall

Reputation: 20920

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

Upvotes: 2

DBQ
DBQ

Reputation: 199

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

Upvotes: 1

Related Questions