Responding to environmental light levels with CSS Media Queries Level 5
Media Queries Level 5 is a future specification for CSS media queries that intends to build upon the existing media queries spec that many of us use when we build responsive designs today as well as the CSS Media Queries Level 4 specification.
It may seem strange that I want to talk about a theoretical specification beyond CSS Media Queries Level 4 but the powers that be have deferred one of the most exciting media features — the light-level media feature (formerly known as the luminosity)—to the Media Queries Level 5 spec. So obviously the specification has yet to be implemented in any browser at the time of writing, but that shouldn’t stop us from exploring the potential use cases.
The light-level media feature has garnered interest from the web community, it will allow developers to make CSS adjustments based on changes in the ambient lighting in which the device is used. The user’s device must be equipped with a light sensor to trigger this new media feature.
One of the most obvious use cases for the light-level media feature is to adapt a design depending on whether the user is reading the page during the day where ambient lighting is brighter or during the night where ambient lighting is darker. We already see this behaviour in a few native apps.
The thing about designing for the web is we don’t have the same prior knowledge of the destination device that designers for native apps do. The light sensor’s sensitivity on an iOS device might be different than an Android device, and the light sensor’s sensitivity on an Android device might be different to the light sensor of another Android device, so we would need to be careful with the degree of change we make as it could be jarring to devices that have an overly keen light sensor.
The code will look something like this:
@media (light-level: normal) {
body {
background: #f5f5f5;
color: #262626;
}
}
@media (light-level: dim) {
body {
background: #e9e4e3;
}
}
@media (light-level: washed) {
body {
background: #ffffff;
}
}A normal light level represents the screen being viewed in ideal lighting conditions. I would recommend working from this level as your default — and rather than wrapping those styles in a media query targeted for normal light levels it would probably be best to leave those styles unwrapped so browsers and devices that haven’t got the capability of seeing the light media feature can see the page in its ideal condition. You can then use the dim value to make adjustments for darker environments and washed to adjust styles for brighter environments leaving the default styles accessible to all devices whether they are equipped with a light sensor or not.
I mentioned earlier about the potential differences in the light sensor hardware sensitivity — I think this is a key reason not to go over the top with the changes we make within light-level media queries. Can we definitively say that a cloud passing in front of the sun will not trigger the dim light-level media feature? The last thing I’d imagine the user wants is a harsh change between a light and dark design on a threshold that is too easily triggered.
As with other facets of web design, we should strive to stay out of the user’s way when they are trying to enjoy our design. The light-level media feature has the potential to be the most annoying media query at our disposal, it could be responsible for ushering in a new era of glow in the dark websites — let’s just be careful with it when it eventually arrives.
This article was originally published on my old blog in November 2013, updated in 2014 and this version today in March 2017 to align with changes in CSS draft specifications.
