High contrast mode on Mozilla browser

Question

I am not able to use any media query for high contrast mode in the Mozilla (Firefox) browser. The media queries given are working fine on IE and edge, but not working on Moz

Answer 1

Can someone suggest any media query which will target Mozilla in high contrast mode?

There isn't a media query for high contrast mode and Firefox. In my React/TypeScript project...

I used TypeScript to test for high contrast mode and added styling:

1. Tested if the user had Windows 10 high contrast enabled on Firefox, Internet Explorer, or Edge. The below code creates a div, gives it a color, appends it to the DOM, and determines if it retains its color before removing it. If the color has changed, you're in high contrast mode! This works for Firefox, IE, and Edge. It does not work for Chrome.

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

If you want to target Firefox specifically without targeting IE or Edge, add a user agent test:

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

2. When the test returned true, added styling to my component.

Advantages:

• Works for Windows 10 high contrast users, including Firefox + high contrast mode.

Disadvantages:

• Doesn't work for Chrome. (This could also be an advantage.)

Answer 2

For Mozilla I use JS to detected high contrast mode or media query

function HCTest(idval) {
    var objDiv, objImage, strColor, strWidth, strReady;
    var strImageID = idval; // ID of image on the page

    // Create a test div
    objDiv = document.createElement('div');

    //Set its color style to something unusual
    objDiv.style.color = 'rgb(31, 41, 59)';

    // Attach to body so we can inspect it
    document.body.appendChild(objDiv);

    // Read computed color value
    strColor = document.defaultView ? document.defaultView.getComputedStyle(objDiv, null).color : objDiv.currentStyle.color;
    strColor = strColor.replace(/ /g, '');

    // Delete the test DIV
    document.body.removeChild(objDiv);

    // Check if we get the color back that we set. If not, we're in 
    // high contrast mode. 
    if (strColor !== 'rgb(31,41,59)') {
        return true;
    } else {
        return false;
    }
}
jQuery(function () {
    var HCM = HCTest();
    if (HCM === true) {
        jQuery('Body').addClass("moz-contrast");
    } else {
        jQuery('Body').removeClass('moz-contrast');
    }
});

CSS For mozila

@-moz-document url-prefix() {

.moz-contrast{
   /**styling**/
}

}