Медиафункция CSS `color-gamut`
Baseline Широко доступно
Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в разных версиях браузеров. Она доступна во всех браузерах с февраля 2023 года.
color-gamut CSS медиафункция используется для применения стилей CSS в зависимости от приблизительного диапазона цветового охвата, поддерживаемого пользовательским агентом и устройством вывода.
Синтаксис
Функция color-gamut задаётся одним из следующих цветовых пространств в виде ключевого значения:
-
srgb - Пользовательский агент и устройство вывода поддерживают приблизительно цветовой охват sRGB или более широкий. Сюда относится подавляющее большинство цветных дисплеев.
-
p3 - Пользовательский агент и устройство вывода поддерживают приблизительно цветовой охват, заданный цветовым пространством Display P3, или более широкий. Охват P3 шире охвата sRGB и включает его.
-
rec2020 - Пользовательский агент и устройство вывода поддерживают приблизительно цветовой охват, заданный цветовым пространством ITU-R Recommendation BT.2020, или более широкий. Охват REC. 2020 шире охвата P3 и включает его.
Примеры
HTML
<p>This is a test.</p>
CSS
p {
padding: 10px;
border: solid;
}
@media (color-gamut: srgb) {
p {
background: #f4ae8a;
}
}
Результат
Спецификации
| Спецификация |
|---|
| Media Queries Level 4 # color-gamut |
Совместимость с браузерами
| Настольные компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
color-gamut |
58 |
79 |
110 |
45 |
10 |
58 |
110 |
43 |
10 |
7.0 |
58 |
10 |
p3 |
58 |
79 |
110color-gamut: p3 всегда имеет значение false, поскольку Firefox не поддерживает широкоформатный цвет. См. ошибку 1626624. |
45 |
10 |
58 |
110color-gamut: p3 всегда имеет значение false, поскольку Firefox для Android не поддерживает широкоформатный цвет. См. ошибку 1626624. |
43 |
10 |
7.0 |
58 |
10 |
rec2020 |
58 |
79 |
110color-gamut: rec2020 всегда имеет значение false, поскольку Firefox не поддерживает широкоформатный цвет. См. ошибку 1626624. |
45 |
10 |
58 |
110color-gamut: rec2020 всегда имеет значение false, поскольку Firefox для Android не поддерживает широкоформатный цвет. См. ошибку 1626624. |
43 |
10 |
7.0 |
58 |
10 |
srgb |
58 |
79 |
110color-gamut: srgb всегда имеет значение true, поскольку Firefox не поддерживает широкоформатный цвет. См. ошибку 1626624. |
45 |
10 |
58 |
110color-gamut: srgb всегда имеет значение true, поскольку Firefox для Android не поддерживает широкоформатный цвет. См. ошибку 1626624. |
43 |
10 |
7.0 |
58 |
10 |
См. также
-
color()— функция для задания цветов в определённом цветовом пространстве. - Модуль цветов CSS
-
@media— at-правило, используемое для задания выражения color-gamut. - Использование медиазапросов для понимания того, когда и как применять медиазапрос.
- Модуль медиазапросов CSS
- sRGB в Википедии
© 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-gamut
