Медиафункция CSS `color`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

color CSS-медиафункцию можно использовать для проверки количества бит на цветовой компонент (красный, зелёный, синий) устройства вывода.

Синтаксис

Медиафункция color задаётся значением <integer>, представляющим количество бит на цветовой компонент (красный, зелёный, синий) устройства вывода. Если устройство не является цветным, значение равно нулю. Это функция диапазона, поэтому для запроса минимального и максимального значений можно также использовать варианты с префиксами min-color и max-color соответственно.

Примечание: Если для разных цветовых компонентов используется разное количество бит, учитывается наименьшее значение. Например, если дисплей использует 5 бит для синего и красного и 6 бит для зелёного, считается, что устройство использует 5 бит на цветовой компонент. Если устройство использует индексированные цвета, учитывается минимальное количество бит на цветовой компонент в таблице цветов.

Подробнее о применении CSS для задания цвета HTML-элементам читайте в статье Применение цвета к HTML-элементам с помощью CSS.

Примеры

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

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

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`color`	1	12	2	10	3	18	4	10.1	1	1.0	4.4	1

См. также

Свойство CSS color
Единица данных CSS color

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/color