Change css style in a specific browser [closed]

Question

Change css style in a specific browser [closed]

Navigation

#1 by (1 votes)

-6

Is there a way to change a style only in a specific browser?

html css firefox

asked by davescode 11.04.2018 в 11:48

source

1 answer

How can I do this, I do not know what it's called [closed] C ++ Style when writing code

score 1 · Answer 1

You can generate a parent class to show one style or another depending on the browser and with a function in javascript I get the browser to add it as class . For example:

function getBrowser() {
  // Opera 8.0+
  if ((!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0) {
    return 'opera';
  }
  
  // Firefox 1.0+
  if (typeof InstallTrigger !== 'undefined') {
    return 'firefox';
  }

  // Safari 3.0+ "[object HTMLElementConstructor]" 
  if (/constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification))) {
    return 'safari';
  }

  // Internet Explorer 6-11
  if (/*@cc_on!@*/false || !!document.documentMode) {
    return 'ie';
  }

  // Edge 20+
  if (!!window.StyleMedia) {
    return 'edge';
  }

  // Chrome 1+
  if (!!window.chrome && !!window.chrome.webstore) {
    return 'chrome';
  }

  // Blink engine detection
  if ((isChrome || isOpera) && !!window.CSS) {
    return 'blink';
  }
}

// agrego la clase al #container
document.getElementById('container').classList.add(getBrowser());

.nombre {
  color: white;
  background: green;
  display: inline-block;
}

.chrome .nombre {
  color: red;
  background: yellow;
}

.firefox .nombre {
  color: blue;
  background: red;
}

.ie .nombre {
  color: yellow;
  background: green;
}

.edge .nombre {
  color: white;
  background: black;
}

<div id="container">
  <div class="nombre">
    Stackoverflow
  </div>
</div>