Mozilla 浏览器的高对比度模式

High contrast mode on Mozilla browser

我无法在 Mozilla (Firefox) 浏览器中对高对比度模式使用任何媒体查询。给出的媒体查询在 IE 和 edge 上运行良好,但在 Mozilla 上不起作用。这些图像不会以高对比度模式出现在 Mozilla 上。有人可以建议任何以高对比度模式针对 Mozilla 的媒体查询吗?

我使用了以下媒体查询:

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

}
@media screen and (-ms-high-contrast: black-on-white) {

}
@media screen and (-ms-high-contrast: white-on-black) {

}

对于 Mozilla,我使用 JS 来检测高对比度模式或媒体查询

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 对于 mozila

@-moz-文档url-前缀() {

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

}

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

没有针对高对比度模式和 Firefox 的媒体查询。在我的 React/TypeScript 项目中...


我使用 TypeScript 测试了高对比度模式并添加了样式:

  1. 测试用户是否在 Firefox、Internet Explorer 或 Edge 上启用了 Windows10 高对比度。下面的代码创建一个 div,给它一个颜色,将它附加到 DOM,并在删除它之前确定它是否保留它的颜色。如果颜色发生变化,则说明您处于高对比度模式!这适用于 Firefox、IE 和 Edge。它不适用于 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;
     }
    

如果您想专门针对 Firefox 而不 针对 IE 或 Edge,请添加用户代理测试:

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

  1. 当测试返回时 true,为我的组件添加了样式。

优点:

  • 适用于 Windows 10 个高对比度用户,包括 Firefox + 高对比度模式。

缺点:

  • 不适用于 Chrome。 (这也可能是一个优势。)