Is there any way to apply CSS for specific chrome

Question

I'm facing a problem in Chrome 59 version alone. to sort that I need a css hack to target that chrome version alone. I saw an article with this example code says its working, but in my case it doesn't work.

example 1

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .logotext-n {
        .chrome59.margin-left: -10px; /* update for Chrome 59 issue */
     } 
}

example 2

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  .chrome59.logotext-n {
      margin-left: -10px; /* update for Chrome 59 issue */
  } 
}

both the examples doesn't work.

Answer 1

A java script answer (where you can target all builds of chrome) is java script and use something like

function getChromeVersion () {     
    var element = document.querySelectorAll(.logotext-n)[0];

if (getChromeVersion() == 59) class.style.chrome59.margin-left = -10 + 'px'
}

Answer 2

You should in principle always design for feature detection, not browser detection.

If your page renders differently in different browsers, make sure that your markup and CSS are valid.

When all else fails, you may need to detect a browser and even a specific version of that browser. As far as I know, there is no CSS hack that can be used to detect version 59 of Google Chrome specifically. In general, it is very hard to find such hacks for specific versions of specific browsers.

It is possible to detect using JavaScript, and this can also be used to inject styles into the DOM.

function isChrome59() {
  var test = navigator.userAgent.match(/chrom(?:e|ium)\/(\d+)\./i);
  if (test) {
    return (parseInt(test[1], 10) === 59);
  }
  return false;
}

if (isChrome59()) {
  var styles = document.createElement('style');
  styles.textContent = 'p { color: red; }';
  document.head.appendChild(styles);
}

p {
  color: blue;
}

<p>This text will be blue in all browsers, except in version 59 of Google Chrome, where it will be colored red.</p>

The above example loads inline styles, but you can of course also create a separate stylesheet and insert a <link rel="stylesheet" href="..." /> to reference it.