How to target only one browser?

Question

I would like to set a height for a div only for one browser, so it doesn't look weird in Firefox or whatever.

Here is an example:

#example {
  height: 200px; <!--How can I target Safari for example?--> 
  height: 250px; <!--How can I target Firefox for example?--> 
  height: 300px; <!--How can I target IE for example?--> 
  width: 250px;
  background-color: #FFF;
}

<div id="example">
  <img src="example.png">
  <p>Just some text.</p>
  <p>Click <a href="www.example.com">here</a> to visit www.example.com</p>
</div>

I've already tried -moz-height: 250px; but it didn't work.

Something else that might help is [`box-sizing`](http://www.paulirish.com/2012/box-sizing-border-box-ftw/), which can instruct each browser to apply height and width in the same manner. — Jonathan Lonowski, Nov 07 '15 at 18:04
Browser sniffing is a pretty bad approach. No reason a page would look (much) different on any browser when the markup is written correctly. — Shikkediel, Nov 07 '15 at 20:04

score 1 · Answer 1 · answered Dec 11 '18 at 11:20

navigator.appName

it will return always the same value for all browsers. I've tested on Firefox, Chrome, and Safari all browsers show Netscape. But if you want to target specific browsers you can use this code

Firefox navigator.userAgent.includes("Firefox");

Safari navigator.userAgent.includes("Safari");

Chrome navigator.userAgent.includes("Chrome");

Daniel Lewis · Answer 2 · 2015-11-07T18:34:27.163

0

For this, you can use JavaScript. There is a string that you can access called navigator.appName. You can just put this:

if(navigator.appName === "Google Chrome")
    // Do whatever here

replacing Microsoft Internet Explorer with your target browser.

I really hope this helps!

edited Nov 07 '15 at 18:34

answered Nov 07 '15 at 18:03

Daniel Lewis

88
2
9

score 0 · Answer 3 · answered Nov 07 '15 at 18:04

You can use conditional comments. So you tell the code to use a certain stylesheet for a particular browser. Here's an article about it.

Here's an example:

<link rel="stylesheet" href="normal_style.css">
<!--[if IE]><link rel="stylesheet" href="ie_style.css"><![endif]-->

Note: this only works with Internet Explorer. If you want to do it for some other browser you need to use JavaScript. Here's an example of JS:

<link rel="stylesheet" id="stylesheet" href="normal_style.css">
if (navigator.appName === "Mozilla Firefox") {
    document.getElementById("stylesheet").setAttribute("href", "special_style.css"); 
}

score 0 · Answer 4 · answered Nov 07 '15 at 18:05

0

You can access the navigator object and get the browser.

var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;

Then

document.getElementById("example").style.height= y;

"y" it is a variable whose value changes depending on the browser.

answered Nov 07 '15 at 18:05

Gabriel Cuenca

121
6

How to target only one browser?

4 Answers4

Linked