Is there any way to apply CSS for specific chrome version?

て烟熏妆下的殇ゞ 提交于 2019-12-02 19:25:47

问题


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.


回答1:


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.




回答2:


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'
}


来源:https://stackoverflow.com/questions/45008896/is-there-any-way-to-apply-css-for-specific-chrome-version

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!