如果操作系统处于高对比度模式,我想做一些额外的对比度工作。在 Windows 中,我们可以使用媒体查询,例如
@media screen and (-ms-high-contrast: active) {}
这将通过媒体查询检测到这一点,我们可以从那里扩展功能。如果我们在 Mac OS 中没有这样的媒体查询,也许有一个 JS 替代方案?或者它是否会在如此低的水平上反转颜色,以至于我们根本无法真正看到它?
如果操作系统处于高对比度模式,我想做一些额外的对比度工作。在 Windows 中,我们可以使用媒体查询,例如
@media screen and (-ms-high-contrast: active) {}
这将通过媒体查询检测到这一点,我们可以从那里扩展功能。如果我们在 Mac OS 中没有这样的媒体查询,也许有一个 JS 替代方案?或者它是否会在如此低的水平上反转颜色,以至于我们根本无法真正看到它?
您现在可以在 Safari 技术预览版中执行此操作:
@media (inverted-colors) {
img.cancel-inversion {
filter: invert(1);
}
}
你应该使用这个:
你不应该使用这个:
当我们讨论这个主题时,减少运动媒体查询现在也在 safari 技术预览中。
不,这是不可能的。
这是基于意见和间接证据的答案:
反转颜色模式不像 Windows 高对比度模式那样运行。它不会更改内容(例如通过删除页面上的背景图像),因此通过媒体查询使其可用不会给最终用户带来任何好处,而是为滥用开辟了一条途径。
从 10.9 开始,Objective-C 中确定可访问性模式是否处于活动状态(布尔值AXAPIEnabled(void);
)的特性已被弃用,没有迹象表明有替代品。您可以在 Apple Developer 网站上看到它。通过扩展,如果该系统级别的开发人员不再具有访问权限,我预计 Web 开发人员也会受到限制(就像AppleScript 编写者似乎没有访问权限一样)。
通常,最需要的用户不赞成测试是否存在辅助技术或激活辅助功能。它给善意的开发人员破坏这些功能(可能是通过取消页面翻转)以及允许不良行为者确定某人的个人健康信息带来了非常现实的风险。
我找不到来自 Apple 的文档说明如何做到这一点,甚至没有承认有办法做到这一点。我还询问了可访问性社区,大多数人认为它不存在(而且是个坏主意)。
在 CSS 4 中有一个inverted-colors
媒体查询的计划,但你会发现它不在最新的草案中(现在是 6.4color-gamut
)。在定义了特定于可访问性的MQ 时,它似乎被放弃了,以支持轻量级 MQ 。
我希望有人能给你一个更清楚的答案。我建议您在 Twitter 上查找任何 Apple Dev Rel 人员并将他们指向此处(假设您不是 Apple Developer Program 的成员,尽管我怀疑您会在那里问过)。
如何在 JavaScript / CSS 中检测 MAC OS 反色模式?
JavaScript/TypeScript 答案涉及以编程方式测试@gregwario 发布的@media (inverted-colors)
查询。下面的函数返回一个布尔值。
isUsingMacInvertedColors: () => {
const mediaQueryList = window.matchMedia('(inverted-colors: inverted)');
return mediaQueryList.matches;
}