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-Funktion 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 eine hohe Dynamikumfangsfähigkeit, die nicht immer aktiv ist und aktiviert werden muss (manchmal programmatisch, manchmal durch den Benutzer, manchmal basierend auf dem Inhalt). Diese Media-Funktion testet nicht, ob die Dynamikumfangsfähigkeit aktiv ist; sie testet nur, ob das Gerät in der Lage ist, visuelle Inhalte mit hohem Dynamikumfang darzustellen.
Syntax
Die dynamic-range-Funktion wird als ein Schlüsselwortwert angegeben, der aus der folgenden Liste ausgewählt wurde.
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 mit
highübereinstimmt, stimmt auch mit demstandard-Wert überein. high-
Dieser Wert entspricht User-Agents und Ausgabegeräten, die hohe Spitzenhelligkeit, hohes Kontrastverhältnis und Farbtiefe von mehr als 24 Bit oder 8 Bit pro Farbkomponente von RGB unterstützen. Spitzenhelligkeit bezieht sich darauf, wie hell der hellste Punkt, den ein Licht emittierendes Gerät, wie ein LCD-Bildschirm, erzeugen kann, ist. Im Fall eines lichtreflektierenden Geräts, wie Papier oder E-Ink, bezieht sich die Spitzenhelligkeit auf den Punkt, der wenigstens 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, um die Spitzenhelligkeit und das Kontrastverhältnis zu messen, und die Bestimmung dessen, was als hohe Spitzenhelligkeit und hohes Kontrastverhältnis gilt, 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…