如何以编程方式启用“ -ms-高对比度”。媒体查询？ [英] How to programmatically enable "-ms-high-contrast" media query?

问题描述

我想在我的网站上启用高对比度模式，并将所有与可访问性相关的规则放在高对比度媒体查询中：

I'd like to enable high contrast mode on my site and put all accessibility-related rules inside the high contrast media query:

@media screen and (-ms-high-contrast: active) {
  /* All high contrast styling rules */
}

但是，如何在JavaScript中以编程方式启用这种模式？我想为我的用户提供一个按钮，可按其意愿切换此功能。有可能吗？我做对了吗？也许存在更好的解决方案。

However, how do I enable such mode in JavaScript programmatically? I'd like to have a button for my users to toggle this feature on their will. Is it possible in any way? Am I doing it right? Maybe a better solution exists.

谢谢您的帮助。

推荐答案

由于媒体查询是自动的（基于浏览器条件），因此您需要在CSS中模拟该块，但根据用户互动应用并删除它。

Since media queries are automatic (based on browser conditions) you need to emulate that block in your CSS but apply and remove it based on a user interaction.

对我来说，您应该只编写样式来模仿IE的高对比度模式，然后在单击按钮时在文档（可能是主体）上切换一个类。

It seems to me that you should simply write the styles to emulate IE's high contrast mode and then toggle a class on the document (probably body) when you click a button.

在CSS底部添加了新的类和子定义，因此您知道它们将覆盖以前的属性。

Put your new class and sub definitions at the bottom of your CSS so you know they'll override previous properties.

例如：

h2 {
  font-size: 14px;
  color: #dddddd;
}
/* overrides a normal h2 when highContrast class is added to the body */
/* use a post processor (LESS/SCSS) to easily nest elements */
body.highContrast h2 {
  font-size: 18px;
  color: #000;
  font-weight: bold;
}

这篇关于如何以编程方式启用“ -ms-高对比度”。媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！