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 May 2022.
Die dynamic-range CSS-Medienfunktion 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 haben hohe Dynamikbereichsfähigkeiten, die nicht immer "eingeschaltet" sind und aktiviert werden müssen (manchmal programmatisch, manchmal vom Benutzer, manchmal basierend auf dem Inhalt). Diese Medienfunktion testet nicht, ob die Dynamikbereichsfähigkeit aktiv ist; sie testet nur, ob das Gerät in der Lage ist, visuelle Inhalte mit hohem Dynamikbereich darzustellen.
Syntax
Die dynamic-range-Funktion wird als ein Schlüsselwortwert angegeben, das aus der unten stehenden Liste ausgewählt wird.
standard-
Dieser Wert entspricht jedem visuellen Gerät und schließt Geräte ohne visuelle Fähigkeiten aus. Ein User Agent oder ein Ausgabegerät, das den Wert
higherfüllt, wird auch den Wertstandarderfüllen. high-
Dieser Wert entspricht User Agents und Ausgabegeräten, die hohe Spitzenhelligkeit, hohes Kontrastverhältnis und Farbtiefe größer als 24 Bit oder 8 Bit pro Farbkomponente von RGB unterstützen. Spitzenhelligkeit bezieht sich darauf, wie hell der hellste Punkt ist, den ein lichtemittierendes Gerät, wie etwa ein LCD-Bildschirm, produzieren kann. Bei einem lichtreflektierenden Gerät, wie Papier oder E-Ink, bezieht sich Spitzenhelligkeit auf den Punkt, der zumindest Licht absorbiert. Kontrastverhältnis bezieht sich auf das Verhältnis der Leuchtdichte der hellsten Farbe zur dunkelsten Farbe, die das System produzieren kann. Derzeit gibt es keine präzise Methode zur Messung von Spitzenhelligkeit und Kontrastverhältnis, und die Bestimmung dessen, 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 |