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 Medienmerkmal wird verwendet, um CSS-Stile basierend auf dem ungefähren Umfang des von der User-Agent und dem Ausgabegerät unterstützten Farb-Gamuts anzuwenden.
Syntax
Das color-gamut-Merkmal wird als einer der folgenden Farbräume als Schlüsselwortwerte angegeben:
srgb-
Der User-Agent und das Ausgabegerät können ungefähr den sRGB-Gamut oder mehr unterstützen. Dies umfasst die überwiegende Mehrheit der Farbdisplays.
p3-
Der User-Agent und das Ausgabegerät können ungefähr den Gamut unterstützen, der durch den Display P3-Farbraum spezifiziert ist oder mehr. Der P3-Gamut ist größer als und umfasst den sRGB-Gamut.
rec2020-
Der User-Agent und das Ausgabegerät können ungefähr den Gamut unterstützen, der durch den ITU-R Empfehlung BT.2020-Farbraum spezifiziert ist oder mehr. Der REC. 2020-Gamut ist größer als und umfasst den P3-Gamut.
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
@mediaAt-Regel, die verwendet wird, um den Ausdruckcolor-gamutzu spezifizieren.- Verwendung von Media Queries, um zu verstehen, wann und wie man eine Media Query verwendet.
- CSS Media Queries Modul
- sRGB auf Wikipedia