css - Firefox 的高对比度 CSS 或 JavaScript 检测

Question

我正在尝试设计网站的高对比度版本。以下代码适用于 IE 和 Edge，但我需要检测 Firefox。

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

我还可以将 JavaScript 检测用于高对比度和 Firefox。有什么建议吗？

Answer 1

我正在尝试设计网站的高对比度版本... ..需要检测 Firefox

您正在使用的高对比度媒体查询，

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

仅适用于 IE 和 Edge Legacy 浏览器。（-ms前缀代表微软。）

解决方案：

1. 为 Windows 10 高对比度模式创建 JavaScript 测试。此函数添加一个不寻常颜色的 div，并测试它是否在附加到 DOM 后颜色发生变化。如果颜色发生变化，则说明您处于高对比度模式！（这也适用于 IE 和 Edge Legacy。）

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;
}

2. 为 Firefox 创建用户代理测试：

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

3. 然后应用你的 CSS！