Режим высокой контрастности в браузере Mozilla - PullRequest
Новая
       23

Режим высокой контрастности в браузере Mozilla

0 голосов
/ 19 марта 2019

Я не могу использовать медиа-запрос для высококонтрастного режима в браузере Mozilla, данный медиа-запрос работает нормально на 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) {

}

1 Ответ

0 голосов
/ 29 марта 2019

Для 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 Для мозила

@ - moz-document url-prefix () {

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

}

...