dynamic-range
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Mai 2022.
Die dynamic-range CSS Media-Feature kann verwendet werden, um die Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe zu testen, die vom User-Agent und dem Ausgabegerät unterstützt werden.
Hinweis: Einige Geräte verfügen über High-Dynamic-Range-Fähigkeiten, die nicht immer „eingeschaltet“ sind und aktiviert werden müssen (manchmal programmatisch, manchmal durch den Benutzer, manchmal basierend auf dem Inhalt). Dieses Media-Feature testet nicht, ob die High Dynamic Range-Funktionalität aktiv ist; es testet nur, ob das Gerät in der Lage ist, hochdynamische visuelle Inhalte darzustellen.
Syntax
Das dynamic-range-Feature wird als ein Schlüsselwortwert angegeben, der aus der unten stehenden Liste ausgewählt wird.
standard-
Dieser Wert trifft auf jedes visuelle Gerät zu und schließt Geräte aus, denen visuelle Fähigkeiten fehlen. Ein User-Agent oder ein Ausgabegerät, das mit
highübereinstimmt, wird auch denstandard-Wert treffen. high-
Dieser Wert trifft auf User-Agents und Ausgabegeräte zu, die eine hohe Spitzenhelligkeit, ein hohes Kontrastverhältnis und eine Farbtiefe von mehr als 24 Bit oder 8 Bit pro RGB-Farbkomponente unterstützen. Spitzenhelligkeit bezieht sich darauf, wie hell der hellste Punkt ist, den ein lichtemittierendes Gerät, wie ein LCD-Bildschirm, erzeugen kann. Bei einem lichtreflektierenden Gerät, wie Papier oder E-Ink, bezieht sich die Spitzenhelligkeit auf den Punkt, der zumindest Licht absorbiert. Kontrastverhältnis bezieht sich auf das Verhältnis der Leuchtdichte der hellsten Farbe zu der der dunkelsten Farbe, die das System erzeugen kann. Derzeit gibt es keine präzise Methode zur Messung von Spitzenhelligkeit und Kontrastverhältnis, und die Bestimmung, was als hohe Spitzenhelligkeit und hohes Kontrastverhältnis zählt, hängt vom User-Agent ab.
Beispiele
@media (dynamic-range: standard) {
p {
color: red;
}
}
@media (dynamic-range: high) {
p {
color: green;
}
}
Spezifikationen
| Specification |
|---|
| Media Queries Level 5 # dynamic-range |
Browser-Kompatibilität
Loading…