如何通过 JavaScript 或 CSS 检查用户是否处于高对比度模式答案

【问题标题】：How to check if user is in high contrast mode via JavaScript or CSS如何通过 JavaScript 或 CSS 检查用户是否处于高对比度模式
【发布时间】：2010-12-27 14:55:48
【问题描述】：

当按下 Shift+Left+Alt+Print 时，Windows 切换到高对比度模式 - 是否有任何是否有机会在网页上检测到这一点（使用 JavaScript 或 CSS）？

有没有机会在HTTP-Request（也就是服务器端，例如通过 PHP 或 Ruby）中检测到这一点？

【问题讨论】：

标签： javascript css high-contrast

【解决方案1】：

根据this article about using CSS sprites in high contrast，在Windows 的高对比度模式下，背景图像应设置为“无”，并且还会更改背景颜色。这应该覆盖任何 CSS 样式表。因此，您可以在初始渲染后执行一些 javascript 来检测它。检查他的demo page（“仅供参考 [Not] in high contrast mode”文本）。

我有 Mac（仅供参考，使用 Cmd + Alt + Ctrl + 8 切换），他的技术对我不起作用，但他说它适用于 Windows。

如果可行，您可以使用一些 JavaScript 来简单地更改您的 CSS 或设置（会话）cookie 并重新加载页面以将其传递给服务器并执行服务器端操作。

【讨论】：

此响应没有回答问题，即：开发人员如何确定用户是否处于高对比度模式？此响应（以及随附的链接）提供了关于在确定用户处于高对比度模式后做什么的建议。

【解决方案2】：

以下适用于我在 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-high-contrast。 High-contrast mode 的描述也值得一提。

【讨论】：

非常感谢您为我指明正确的方向。使用@media screen 和 (-ms-high-contrast: active) 样式的另一个优点是您可以再次设置 background-image 属性以覆盖高对比度图像设置。
这仅适用于 Internet Explorer，不适用于 Firefox。 bugzilla.mozilla.org/show_bug.cgi?id=425598

【解决方案3】：

如果您在 Web 应用程序中实现高对比度，请使用以下代码块来检测黑白和黑白对比度选择。这将在 IE 中正常工作。

@media screen and (-ms-high-contrast: black-on-white) { /* 把你的造型代码...... */ }

@media 屏幕和 (-ms-high-contrast: white-on-black) { /* 把你的造型代码...... */ }

【讨论】：