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 NameMin light (lux)Max light (lux)Mean light (lux)
black0105
very-dark-indoors105030
dark-indoors50200125
dim-indoors200400300
indoors4001000700
bright-indoors100050003000
dim-outdoors5000100007500
cloudy-outdoors100003000020000
outdoors3000010000065000
white100000infinityinfinity

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.

Published on 2012-08-10 under ALL, CSS, WEB, USABILITY

Comments

A javascript file is loading the comments.