W3cubDocs

/CSS

@media.color-index

The color-index CSS media feature can be used to test the number of entries in the output device's color lookup table.

Syntax

The color-index feature is specified as an <integer> value representing the number of entries in the output device's color lookup table. (This value is zero if the device does not use such a table.) It is a range feature, meaning that you can also use the prefixed min-color-index and max-color-index variants to query minimum and maximum values, respectively.

Examples

Basic example

HTML

<p>This is a test.</p>

CSS

p {
  color: black;
}

@media (color-index) {
  p {
    color: red;
  }
}

@media (min-color-index: 15000) {
  p {
    color: #1475ef;
  }
}

Result

Custom stylesheet

This HTML will apply a special stylesheet for devices that have at least 256 colors.

<link rel="stylesheet" href="http://foo.bar.com/base.css" />
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" />

Specifications

Specification Status Comment
Media Queries Level 4
The definition of 'color-index' in that specification.
Candidate Recommendation The value can now be negative, in which case it computes to false.
Media Queries
The definition of 'color-index' in that specification.
Recommendation Initial definition. The value must be nonnegative.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support Yes ? No No ? ?
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support ? ? ? ? ? ? ?

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-index