如何在JavaScript / CSS中检测MAC OS彩色模式？ [英] How to detect MAC OS inverted color mode in JavaScript / CSS?

问题描述

如果操作系统处于高对比度模式，我想做一些额外的对比度工作。在Windows中，我们可以使用媒体查询，例如

I want to do some extra contrast work if the OS is in high contrast mode. With Windows we can use the media queries like

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

这将通过媒体查询检测到该错误，然后我们可以从那里扩展功能。如果我们在Mac OS中没有这样的媒体查询，也许还有JS替代方法？还是它会将颜色反转得如此低，以至于我们根本无法真正研究它？

which would detect this via media query and we can extend the functionality from there. If we don't have a media query like this in Mac OS, perhaps there's a JS alternative? Or does it invert the colors at such a low level that we can't really look into it at all?

推荐答案

立即在Safari技术预览版中执行此操作：

you can do this in safari technical preview right now:

@media (inverted-colors) {
    img.cancel-inversion {
        filter: invert(1);
    }
}

您应在以下位置使用此功能：

you should use this on:

• 照片


• .icns-ish图标图像（诸如应用程序图标之类的东西都可以）

您不应在以下位置使用此功能：

you should not use this on:

• 文本图像（I意思是，您不应该使用文本图像，但是如果由于某些原因您必须...不要在这些图像上使用此技术！）


• 装饰性图像


• 单色字形（看起来像字体图标的东西）

• images of text (I mean, you shouldn't use images of text, but if you must for some reason... don't use this technique on those images!)
• decorative images
• monochrome glyphs (things that look like font icons)

在我们讨论此主题时，减少运动媒体查询位于野生动物园技术预览中现在也是。

while we're on this subject reduce motion media query is in safari technical preview right now as well.

这篇关于如何在JavaScript / CSS中检测MAC OS彩色模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！