Ambient light sensors and CSS Media Queries
There’s no way to make designs responsive to ambient light variations in CSS today. This is strange, and I think it should change…
CSS Luminance Media Queries
Here’s my proposal:
@media (min-luminance: outdoors) {
/* adapt for bright envs */
}@media (max-luminance: 700lux) {
/* adapt for dim envs */
}
This would be the mapping of the default keywords (courtesy of Microsoft) :
| CSS Name | Min light (lux) | Max light (lux) | Mean light (lux) |
| black | 0 | 10 | 5 |
| very-dark-indoors | 10 | 50 | 30 |
| dark-indoors | 50 | 200 | 125 |
| dim-indoors | 200 | 400 | 300 |
| indoors | 400 | 1000 | 700 |
| bright-indoors | 1000 | 5000 | 3000 |
| dim-outdoors | 5000 | 10000 | 7500 |
| cloudy-outdoors | 10000 | 30000 | 20000 |
| outdoors | 30000 | 100000 | 65000 |
| white | 100000 | infinity | infinity |
The exact mapping of the keywords would however not be normative, to allow user agents to accommodate them to the screen’s brightness. Brighter screens could probably shift the min/max values to left (triggering dim-indoors in darker environments than usual screens).
Conclusion
With CSS Transitions and the power of CSS Luminance Media Queries, making light-responsive user interface becomes possible and rather easy.