High contrast CSS or JavaScript detection for Firefox

Question

I'm trying to style a high contrast version of a site. The following code works fine for IE and Edge, but I need to detect Firefox.

@media screen and (-ms-high-contrast: active) {}

I could also use JavaScript detection for high contrast and Firefox. Any advice?

Answer 1

I'm trying to style high contrast version of a site... ..need a detection for Firefox

The high contrast media query that you're using,

@media screen and (-ms-high-contrast: active) {}

works only for IE and Edge Legacy browsers. (The -ms prefix stands for Microsoft.)

Solution:

1. Create a JavaScript test for Windows 10 High Contrast mode. This function adds a div of an unusual color, and tests to see if it the color changes once it's appended to the DOM. If the color changes, you're in high contrast mode! (This will also work for IE and Edge Legacy.)

highContrastMode = () => {
  const testDiv = document.createElement('div');
  testDiv.style.color = 'rgb(200, 100, 50)';
  document.body.appendChild(testDiv);
  const color = document.defaultView!.getComputedStyle(testDiv, null).color;
  document.body.removeChild(testDiv);

  return color !== 'rgb(200, 100, 50)' ? true : false;
}

2. Create a user agent test for Firefox:

const isFirefox = window.navigator.userAgent.indexOf('Firefox') > -1;

3. Then apply your CSS!