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.
Die color-gamut CSS-Medienfunktion wird verwendet, um CSS-Stile basierend auf dem ungefähren Bereich des vom User Agent und dem Ausgabegerät unterstützten Farb-Spektrums anzuwenden.
Syntax
Die color-gamut-Funktion wird als eine der folgenden Farbräume als Schlüsselwortwerte angegeben:
srgb-
Der User Agent und das Ausgabegerät können ungefähr das sRGB-Spektrum oder mehr unterstützen. Dies schließt die überwiegende Mehrheit der Farbdisplays ein.
p3-
Der User Agent und das Ausgabegerät können ungefähr das durch den Farbraum Display P3 spezifizierte Spektrum oder mehr unterstützen. Das P3-Spektrum ist größer als und umfasst das sRGB-Spektrum.
rec2020-
Der User Agent und das Ausgabegerät können ungefähr das durch den Farbraum ITU-R Recommendation BT.2020 spezifizierte Spektrum oder mehr unterstützen. Das REC. 2020-Spektrum ist größer als und umfasst das P3-Spektrum.
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
- Die
color()-Funktion, um Farben in einem definierten Farbraum anzugeben. - CSS-Farben-Modul
@mediaAt-Regel, die verwendet wird, um den color-gamut-Ausdruck zu spezifizieren.- Verwendung von Media Queries um zu verstehen, wann und wie man eine Media Query verwendet.
- CSS Media Queries-Modul
- sRGB auf Wikipedia