CSS 34 💻 display-mode and dynamic-range media features

a - display-mode media feature
display-mode feature specifies if the document is running in a specific display more
values: browser → is inside a browser tab or window
standalone → is installed as a standalone app on a device
minimal-ui → is like a standalone app but with minimal set of UI elements
picture-in-picture → applies style while in PIP
@media (display-mode: standalone) → styles for standalone mode
@media (display-mode: fullscreen) → styles for full screen mode

b - dynamic range media feature
dynamic-range queries the combination of brightness, contrast and color depth.
values: standard → matches devices with no lack of visual capabilities
high → the device supports a high dynamic range
that means color depth greater than 24bit, high contrast and high peak brightness
A device matches high will also match standard value
@media (dynamic-range: high) → styles for high dynamic range devices
@media (dynamic-range: standard) → styles for standard dynamic range devices