Cover by Maximiliano Firtman

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

Chapter 9. Feature and device detection

Before moving on with more HTML5, CSS and JavaScript code that we can use on mobile devices, we need to make a pause and talk about feature and device detection. As we have seen in last chapter, not every browser supports exactly the same and even the same browser on different versions will have differences in terms of what we can use.

This book was finished a few months (and why not, years) from the time you are reading it. I can assure you that browsers today may differ with what they used to support at the time of this writing.

This is not just a book authoring issue. It’s also a development issue because we can’t update every website and webapp on every new browser version or platform on the market.

Therefore we need a way to design and develop our code as much future-proof as possible. To make that work, we are going to see some techniques that will be useful for feature detection, fallbacks mechanisms as well as device detection for some specific reasons we may need.

With all these techniques we can finally use progressive enhancement technique (already covered in Chapter 5) and some graceful degradation hacks on some situations.

Possible problems

To find the right solutions, first we need to recognize all the possible problems we need to deal with. We can summarize the possible problems with features:

  • An HTML feature we want to use is not available, such as the progress element

  • A CSS feature we want to use is not available, such as CSS Animations ...

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required