CSS setting for all browsers but Not Chrome

Question

I have this setting in css as below:

.row-height {
  height: 100% ;
}

and I want to have this setting for all browser but NOT Chrome. Is there a way to do so. Kim

Answer 1

You can't check for specific browsers directly in CSS, but you can set a class on the BODY element in JavaScript, like so:

if (navigator.userAgent.match(/Chrome/))
  document.body.classList.add('chrome');

Once you've done that, you can add CSS rules for that specific browser. Like using automatic height instead of the 100% on Chrome only:

body.chrome .row-height { height: auto; } 

Needless to say, it's best if you don't have to do this as it adds overhead and is prone to breaking in unexpected ways. Perhaps there's a different workaround for the speific problem you're facing directlty in CSS.

However, sometimes it's necessary to use targeted CSS like this to work around browser bugs, so don't feel "bad" if you have to do it this way.

Answer 2

The simplest way to do this I can think of is to detect browser with Javascript (1) and to change page's CSS file (2) if Chrome is detected. The drawback of this solution is that you will have to maintain two near-identical CSS files, which might be relatively cumbersome during development.

So, your code should probably look like this:

<link id="styleSheet" rel='stylesheet' href='style.css' type='text/css' media='all' />
<script>
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isChrome = !!window.chrome && !isOpera;
if(isChrome) {
     document.getElementById('styleSheet').href = "styleForChromeOnly.css";
}
</script>

Or, if you'd prefer not to have one-time use variables in your code or you like spaghetti:

<link id="styleSheet" rel='stylesheet' href='style.css' type='text/css' media='all' />
<script>
if(!!window.chrome && !window.opera && navigator.userAgent.indexOf(' OPR/') >= 0) {
     document.getElementById('styleSheet').href = "styleForChromeOnly.css";
}
</script>

---

(1) How to detect Safari, Chrome, IE, Firefox and Opera browser?

(2) How can you change the attached CSS file with Javascript?