Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
The light-level
CSS @media
media feature can be used to apply styles based on the ambient light level.
Syntax
dim
- The device is used in a dim environment, where excessive contrast and brightness would be distracting or uncomfortable to the reader. For example: night time, or a dimly illuminated indoor environment.
normal
- The device is used in a environment with a light level in the ideal range for the screen, and which does not necessitate any particular adjustment.
washed
- The device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. For example: bright daylight.
Example
This code will likely not work on any devices (device compatablility is low).
@media (light-level: normal) { p { background: url("texture.jpg"); color: #333; } } @media (light-level: dim) { p { background: #222; color: #ccc; } } @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } }
Specifications
Specification | Status | Comment |
---|---|---|
Media Queries Level 4 The definition of 'light-level' in that specification. |
Working Draft | Deferred to Media Queries Level 5. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | No support | No support | No support | No support | No support |