Как проверить, находится ли пользователь в режиме высокой контрастности с помощью JavaScript или CSS
При нажатии Shift+Left+Alt+Print Windows переключается в режим высокой контрастности - есть ли шанс обнаружить это на веб-странице (с использованием JavaScript или CSS)?
Есть ли шанс обнаружить это в HTTP-Request
(также на стороне сервера, например, через PHP или Ruby)?
4 ответа
В соответствии с этой статьей об использовании CSS-спрайтов в высококонтрастном режиме в режиме высокой контрастности в Windows фоновые изображения должны быть установлены на "none", и это также меняет цвет фона. Это должно переопределить любую таблицу стилей CSS. Таким образом, вы можете выполнить некоторый JavaScript, чтобы обнаружить его после первоначального рендеринга. Проверьте его демонстрационную страницу (текст "FYI [Not] в режиме высокой контрастности").
У меня есть Mac (FYI переключатель с помощью Cmd + Alt + Ctrl + 8
) и его техника не работает для меня, но он говорит, что работает на Windows.
Если это работает, вы можете либо использовать JavaScript, чтобы просто изменить свой CSS, либо установить (сессионный) cookie и перезагрузить страницу, чтобы передать ее на сервер и выполнить действия на стороне сервера.
Следующее работает для меня на Win8 с (рабочий стол)IE:
<style type="text/css">
// ...
@media screen and (-ms-high-contrast: active) {
/* any rules may come here, for example: */
.leftMenu a:hover { text-decoration: underline; }
}
// ...
</style>
Я думаю, что это должно работать и с приложениями Магазина Windows. Это не полное решение, но может быть немного полезно.
Документ MSDN: @media, -ms-высокая контрастность. Также стоит упомянуть описание режима высокой контрастности.
Используйте @media (предпочитает контраст: больше):
.contrast {
width: 100px;
height: 100px;
outline: 2px dashed black;
}
@media (prefers-contrast: more) {
.contrast {
outline: 2px solid black;
}
}
Он поддерживается во всех основных вечнозеленых браузерах .
Предупреждение:-ms-high-contrast
работает только в браузерах Microsoft.
Если вы реализуете высокую контрастность в своем веб-приложении, используйте следующий блок кода для обнаружения выбора контраста черного цвета на белом фоне и белого на черном. Это будет хорошо работать в IE.
@media screen и (-ms-high-контраст: чёрный на белом) { /* Поместите свой код стиля............. */ }
@media screen и (-ms-high-контраст: белый-на-черном) { /* Введите свой код стиля............. */ }