1

I am using the latest version of Edge(Version 80.0.361.66 (Official build) (64-bit)). The "right: xxpx" property is behaving differently in Chrome and Edge. Is there any media or supports tag I can use for targeting Edge only.

"Found an alternative solution" But thanks for the responses. Will add an example next time.

Pavithra Ashwath
  • 163
  • 8
  • Can you post more information/code here please to make your question clear? – Nathaniel Flick Mar 09 '20 at 21:39
  • We need to see a [mcve]; I highly doubt this is an issue with the browsers. – TylerH Mar 09 '20 at 21:46
  • 1
    ...and how about telling us what the _alternate solution_ was? – Stephen P Mar 09 '20 at 22:38
  • Can you post enough code to reproduce the problem? If that issue is related to the latest version of Edge browser, might be it is a bug, so, we might need to submit a feedback to Microsoft Edge. Thanks for your understanding. Besides, please refer to the following thread to detect browser using CSS: [Link1](https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css), [link2](https://stackoverflow.com/questions/9328832/how-to-apply-specific-css-rules-to-chrome-only) – Zhi Lv Mar 10 '20 at 08:01

1 Answers1

2

You could use javascript to check what browser the user has, then apply a CSS class accordingly... something like this

  const browser = (function (agent) {
    switch (true) {
      case agent.indexOf("edge") > -1: return "edge";
      case agent.indexOf("edg") > -1: return "chromium based edge (dev or canary)";
      case agent.indexOf("chrome") > -1 && !!window.chrome: return "chrome";
      case agent.indexOf("trident") > -1: return "ie";
      case agent.indexOf("firefox") > -1: return "firefox";
      case agent.indexOf("safari") > -1: return "safari";
      default: return "other";
    }
  })(window.navigator.userAgent.toLowerCase());

  if (browser = 'chromium based edge (dev or canary)') {
    const el = document.getElementById('#yourelement');
    el.classList.add('chromium');
  }

For reference the userAgent for chromium based edge looks like this 

mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml,
like gecko) chrome/76.0.3800.0 safari/537.36 edg/76.0.167.1

so you can see that includes the keyword edg

but there are no CSS rules that directly apply to chromium based edge - so using javascript is your only option

Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152
  • 1
    Sniffing the User-Agent string is a _**terrible**_ idea https://developer.mozilla.org/docs/Web/HTTP/Browser_detection_using_the_user_agent and it's been considered bad for [at least 10 years](https://www.sitepoint.com/why-browser-sniffing-stinks/) — if you _must_ do it as the only workaround available, sniff for that one troublesome browser, don't try to cover all browsers. Use [feature detection](https://developer.mozilla.org/docs/Web/HTTP/Browser_detection_using_the_user_agent#Avoiding_user_agent_detection) if you have to vary more things. – Stephen P Mar 09 '20 at 22:36
  • 1
    Just noticed a possible small improvement to this answer: instead of returning a full string that you could possibly misspell in your `if` statement return a number to act as an index? – Dylan Anlezark Aug 26 '20 at 03:09