light-level is a CSS media feature that can be used to check the current ambient light level.
Enumerated values
| Value | Meaning |
|---|---|
dim |
|
normal |
|
washed |
|
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 | Defered to Media Queries Level 5 |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |