color-gamut
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Februar 2023.
Das color-gamut CSS Medienfeature wird verwendet, um CSS-Stile basierend auf dem ungefähren Bereich des vom User-Agent und dem Ausgabegerät unterstützten Farb-Gamut anzuwenden.
Syntax
Das color-gamut-Feature wird als einer der folgenden Farbräume mit Schlüsselwerten spezifiziert:
srgb-
Der User-Agent und das Ausgabegerät können etwa den sRGB-Gamut oder mehr unterstützen. Dies schließt die überwiegende Mehrheit der Farbdisplays ein.
p3-
Der User-Agent und das Ausgabegerät können etwa den im Display P3 Farbraum spezifizierten Gamut oder mehr unterstützen. Der P3-Gamut ist größer als und schließt den sRGB-Gamut ein.
rec2020-
Der User-Agent und das Ausgabegerät können etwa den im ITU-R Empfehlung BT.2020 Farbraum spezifizierten Gamut oder mehr unterstützen. Der REC. 2020-Gamut ist größer als und schließt den P3-Gamut ein.
Beispiele
HTML
<p>This is a test.</p>
CSS
p {
padding: 10px;
border: solid;
}
@media (color-gamut: srgb) {
p {
background: #f4ae8a;
}
}
Ergebnis
Spezifikationen
| Specification |
|---|
| Media Queries Level 4 # color-gamut |
Browser-Kompatibilität
Siehe auch
color()-Funktion, um Farben in einem definierten Farbraum anzugeben.- CSS-Farben-Modul
@media-At-Regel, die verwendet wird, um den color-gamut-Ausdruck zu spezifizieren.- Verwendung von Media Queries, um zu verstehen, wann und wie eine Media Query verwendet wird.
- CSS Media Queries-Modul
- sRGB auf Wikipedia