Intro to Feature Detection
This is an interactive demo about feature detection.
View the source and see the inline CSS/JS that powers each section. Inspect any element to see how it works
Scroll down to continue ⬇
UA Sniffing
In the good ol' days, we looked at a complicated identifier called a User-Agent String to guess what browser was hitting our sites. This typically happened on the server before returning HTML to the visitor.
Your current user-agent string:
Enable JS to see your UA string
How many of these words actually describe your browser? The user-agent string is more a history lesson about your browser than a straightforward identifier.
Many of the words you see are there simply because at one point in time that word identified the most popular browser of the day.
Detect features, don't assume!
As browsers grew in complexity, the old way of guessing became unwieldy. It was often wrong, and when one browser innovated, the second and third-place implementors had to imitate aspects of other browsers to receive the same features.
Valid Firefox code:
-webkit-border-radius: 50px;
Soon we wanted a way to make decisions on each client instead of making assumptions on the server.
Responsive Web Design pushed feature detection into the mainstream. People wanted to send one codebase to the browser and have it render well in different form factors.
Progressive Enhancement
I'm a regular paragraph with some plaintext, the most reliable form of content.
Alt text is the oldest form of graceful degredation. If you can't show your preferred media show something simpler as a fallback, like a text description.
Progressive Enhancement flips that way of thinking on its head: show something simple; when you test for something more advanced then show that.
Mobile-first is the best-known progressive enhancement method. We assume the most basic capabilities by default, then query for other media properties like screen dimensions, touch events, etc.
Detecting @media features
Current media:
Viewport size:
Orientation:
These individual media features can be combined into larger media queries:
@media only screen and (min-width: 802px) {
/* CSS for screens at least 802px wide */
}Detect CSS with @supports
CSS has added its own feature detection method using @supports blocks.
They function just like @media but are for individual CSS features that your browser may or may not support.
No browser support for:
Main content column
Just a sprinkle of content for some realism here.
View the source to see how the sample layout changes from single-column to a float-based grid at a certain screen width, and opts for CSS Grid when the browser supports it.
Detect everything with JS
JavaScript is much easier to test.
- appCodeName is undetected.
- appName is undetected.
- Geolocation is undetected.
- Service Worker is undetected.
- Network is undetected.
Notice that the appCodeName and appName are probably NOT describing the browser you're using. That's why it's important to ignore the name of a browser and instead focus on detecting it's capabilities.
Most of these features were detected on page load and the answer won't change until you reload. But the Network feature has event listeners attached. Turn your wi-fi off and the status will change.
Modernizr
Nowadays, you almost never need to write your own feature detection if you don't want to.
- cssgrid
- cssgridlegacy
- serviceworker
- geolocation
- flexbox
- flexboxlegacy
All tests are grey until Modernizr executes and adds the results to the <html> element. Afterwards, any test that passes is green, and any that fail are red.
Look at modernizr.js and visit the URL in the top comment to edit the file. Add the flexbox feature test to your Modernizr build.
Once Modernizr executes, open the JavaScript console, type Modernizr, and hit enter. The object contains all test results as Booleans. You can use them in your code like this:
if (Modernizr.cssgrid) {
// Code depending on CSS Grid
} else {
// Fallback code
}About this page
Created by Chris Ruppel for Frontend Meetup Freiburg.
This page is open source. Hack on it and make it your own!
All content is licenced CC-BY-SA 4.0.
All code is licenced MIT, including Modernizr.