color

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

color CSS 媒体特性 可用于检测输出设备的每个颜色分量(红、绿、蓝)的位数。

语法

color 特性被指定为一个 <integer> 值,表示输出设备的每个颜色分量(红、绿、蓝)的位数。如果设备不是彩色设备,则该值为零。它是一个范围特性,这意味着你也可以使用带前缀的 min-colormax-color 变体来分别查询最小值和最大值。

注意:如果各个颜色分量由不同位数的位表示,则使用最小的位数。例如,如果显示器对蓝色和红色使用 5 位,对绿色使用 6 位,那么该设备被认为每个颜色分量使用 5 位。如果设备使用索引颜色,则使用颜色表中每个颜色分量的最小位数。

请参阅 使用 CSS 为 HTML 元素应用颜色,了解更多关于如何使用 CSS 为 HTML 应用颜色的信息。

示例

HTML

html
<p>
  This text should be black on non-color devices, red on devices with a low
  number of colors, and greenish on devices with a high number of colors.
</p>

CSS

css
p {
  color: black;
}

/* Any color device */
@media (color) {
  p {
    color: red;
  }
}

/* Any color device with at least 8 bits per color component */
@media (min-color: 8) {
  p {
    color: #24ba13;
  }
}

结果

规范

规范
媒体查询第 4 级
# color

浏览器兼容性

另见