light-level

light-level is a CSS media feature that can be used to check the current ambient light level.

Enumerated values

Value	Meaning
`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	Added in Media Queries Level 4

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	?	?	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?

light-level

Enumerated values

Example

Specifications

Browser compatibility

Document Tags and Contributors