Last week while whiteboarding a new native mobile app I had an idea: what if you could detect the battery level of the device and only do CSS transitions when the battery is charged? This lead me to a API put out by Mozilla to query the status of the battery. David Walsh posted a great blog entry about the API with a demo.

This works perfectly for what I wanted to accomplish. So I created two feature detects: battery and lowbattery. The latter will detect if your battery is less then 20% and not charging. I decided to use Modernizr for the feature detects as it makes it super easy to built tests.

What is Modernizr?

A quick side trip into Modernizr. With the explosion of features in HTML5, developers were left with a dilemma; How do we use these new features without leaving old browsers in the dust. Historically this has been done with browser sniffing. But this is flawed, as you can see with this Mozilla warning about Firefox 10. So some smart developers came up with feature detection. Rather then saying browser X supports feature Y, you just check if feature Y is detected. Modernizr is a framework and collection of these tests.

Say you want to use the new CSS3 gradients in your designs. Modern browsers natively support this property (with a vendor prefix), so you can just add it to your styles. But what about old browsers which have no support. For them, you'll want a fallback of an image or flat background color. Modernizr will add a class of .cssgradient to the html element if it's supported, and a class of .no-cssgradient if it's not. So your styles could look like this:

header { background: gradient( 0% #ccc, 30% #ddd); }
.no-cssgradient header { background: #ddd; }

Battery Feature Detect

Now with these feature detects in place, I can build styles tailored to the battery level. My goal was to support CSS transitions when the device has enough battery power to warrant the extra CPU/GPU processing of animation. And have an easy fallback for the case where the battery is low. Here's what that could look like:

section { position: absolute; left: 0%; }
section.stage-left { left: -100%; }
section.stage-right { left: 100%; }
.no-lowbattery section { transition: left .5s ease; }

I've submitted a pull request to add these features detects to Modernizr. Paul Irish responded within 12 hours of my request, which I was really impressed by. The code is now committed in the feature detects section and can be tested in your browser already here.

Important Caveat

The status of the Battery API is that only Firefox Aurora supports it. There is code for WebKit, but it hasn't made it into the trunk. As of this writing, no other browser has indicated support. Hopefully blog posts like this will change their minds.

Summary

Using the Battery API and Modernizr, we can tailor our sites so features which are CPU/GPU intensive don't happen when the battery is low. This brings in a whole slew of possibilities for mobile web apps. You could hold back an AJAX request when on 3G and low battery, or not request the GPS, or have fewer CSS images to load. What other uses can you imagine for this? Let us know in the comments below.