Обнаружение высокого контрастного режима в браузере Chrome

Я пытаюсь сделать свой сайт доступным в высококонтрастном режиме. Чтобы обнаружить, когда включен режим высокой контрастности, я создал метод JavaScript для обнаружения фоновых изображений, потому что режим высокой контрастности отключает фоновые изображения, а затем, если браузер находится в высококонтрастном режиме, я добавляю файл css для сделать исправления для отображения с высокой контрастностью. Это отлично работает в Firefox, Edge и IE, но Chrome использует собственное расширение для создания высококонтрастных и не отключает фоновые изображения, поэтому в Chrome css для высокой контрастности не добавляется.Обнаружение высокого контрастного режима в браузере Chrome

Из поиска Я обнаружил, что Chrome добавляет фильтр через веб-сайт, а не включает/отключает/меняет цвета сайта или изображения. Я искал и искал, но я не могу найти ничего, чтобы проверить, использует ли Chrome режим высокой контрастности. Если бы был способ определить, какие расширения используются, что также решит проблему, но я также не смог найти способ сделать это.

Мой код действительно работает нормально, все, что мне нужно, - это возможность обнаруживать высококонтрастный режим в Chrome. Вот метод, который я использую для проверки высококонтрастного режима.

let highContrast = (options) => { 
 

 
    let hcDetect = jQuery(`<div id="jQHighContrastDetect"></div>`).css('background', 'url(../uploads/c-wht-small.png)'); 
 
    hcDetect.appendTo(document.body); 
 

 
    if (hcDetect.css('background-image') === 'none') { 
 
    $('head').append('<link rel="stylesheet" href="../css/highcontrast.min.css" type="text/css" media="all">'); 
 

 
    } 
 
}

Если вы хотите увидеть больше кода, пожалуйста, дайте мне знать, я просто не уверен, что еще было бы полезно, чтобы показать.

Спасибо, если заранее за помощь!

источник

2016-07-20 CascadiaJS

см. Http: // stackoverflow.com/questions/1921047/how-to-check-if-user-in-high-contrast-mode-via-javascript-or-css – DiceXQ

@DiceXQ Я обнаружил, что уже, похоже на то, что я делаю, но он также не работает для Chrome. – CascadiaJS

Стоит упомянуть, что лучше избегать этой необходимости, когда это возможно. Если проекты соответствуют требованиям контраста WCAG AA, то большая часть вашего проекта будет отлично смотреться в различных режимах с высокой контрастностью. Фоновые изображения будут скрыты в большинстве высококонтрастных режимов, но они никогда не должны передавать важную информацию. Если вам требуются цвета фона для отображения в режиме высокой контрастности, рассмотрите возможность использования больших границ одного цвета и установки размера поля в рамку, переполнение до скрытого. –

Расширение Chrome вводит некоторый код для генерации высококонтрастного LAF.

Тайм-аут требуется дуэт для инъекции.

Это работает для меня:

setTimeout(function(){ 
    var htmlTag = document.getElementsByTagName('html'); 
    console.log(htmlTag[0].getAttribute('hc') != null); 
}, 150);

источник

2016-07-20 23:17:47 DiceXQ

Благодаря @DiceXQ это именно то, что мне нужно, оно отлично работает! – CascadiaJS

Как бы я использовал этот подход, используя прослушиватель событий? Я бы хотел сохранить исходные цвета и цвета фона нескольких элементов, когда они меняются при нажатии или если они активны. – Dylan

Если вы спрашиваете о Windows, высокой контрастности Режим, Chrome не знает, когда это является активным.

В общем случае, если пользователь Windows выбрал режим высокой контрастности, тогда этот пользователь просматривает в Microsoft Internet Explorer или Microsoft Edge (как это поддерживают эти браузеры). Оба они поддерживают правило -ms-high-contrast@media.

Проверка отсутствующего фонового изображения - это тактика, которая будет работать в IE/Edge, но использование медиа-запроса - лучший подход. Тем более, что Windows High Contrast Mode will soon allow background images in Edge.

Если вы хотите обнаружить, когда конкретное расширение установило свой собственный режим высокой контрастности в Chrome, было бы полезно узнать, какое расширение.

Например, с High Contrast расширением вы можете посмотреть на следующие атрибуты на <html> тег: hc="a3" и hcx="3" (значения могут быть разными для вас, но атрибуты должны совпадать). Если вы откроете инструменты для браузера, вы увидите некоторые другие вещи, которые он делает. но эти атрибуты находятся на самом высоком уровне DOM и, вероятно, безопаснее использовать.

Если вы спрашиваете о Chrome для Android, это также другой процесс.

источник

2016-07-21 16:09:34 aardrian

Спасибо @aardrian, я также использую '-ms-high-contrast', но мне нужна проверка на Chrome. Сейчас я тестирую «HIgh Contrast», но мне нужен тест для работы как можно большего количества контрастных расширений, потому что кто знает, какие фактические пользователи будут использовать на практике. – CascadiaJS

Если бы только мы могли видеть долю рынка каждого расширения, чтобы определить приоритетность нашей поддержки. Говоря об этом, dev tools - это мой метод go-to, чтобы посмотреть, что изменилось, когда я запускаю расширение. Удачи. – aardrian

Re «Chrome не знает, когда это активно», на самом деле это происходит сейчас, по крайней мере, в Windows 10. И когда Chrome обнаруживает, что он предлагает создать собственное высококонтрастное расширение или темную тему. – Fizz

Обнаружение высокого контрастного режима в браузере Chrome

ответ

Смежные вопросы