color-gamut
Baseline 2023Newly available
Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Das color-gamut
CSS Medien-Feature wird verwendet, um CSS-Stile basierend auf dem ungefähren Farbumfang (gamut) anzuwenden, der vom User-Agent und dem Ausgabegerät unterstützt wird.
Syntax
Das color-gamut
-Feature 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 Farbumfang 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 den Farbumfang unterstützen, der durch den Display P3 Farbraum oder mehr spezifiziert wird. Der P3-Farbumfang ist größer und schließt den sRGB-Farbumfang ein.
rec2020
-
Der User-Agent und das Ausgabegerät können ungefähr den Farbumfang unterstützen, der durch den ITU-R Empfehlung BT.2020 Farbraum oder mehr spezifiziert wird. Der REC. 2020-Farbumfang ist größer und schließt den P3-Farbumfang 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
- Funktion
color()
, um Farben in einem definierten Farbraum anzugeben. - CSS Farben Modul
@media
At-Regel, die verwendet wird, um den color-gamut-Ausdruck anzugeben.- Verwenden von Media Queries, um zu verstehen, wann und wie man eine Media Query verwendet.
- CSS Media Queries Modul
- sRGB auf Wikipedia