Detect and design with features, not User
Agents (browsers)

What if you could build your website based on features instead of for the individual
browser idiosyncrasies by manufacturer and version, making your website not just
backward compatible but also forward compatible? You could quite potentially
build a fully backward and forward compatible experience using a single code base
across the entire UA spectrum. What I mean by this is instead of baking in an MSIE
7.0 version, an MSIE 8.0 version , a Firefox version, and so on of your website, and
then using JavaScript to listen for, or sniff out, the browser version in play, it would
be much simpler to instead build a single version of your website that supports all
of the older generation, latest generation, and in many cases even future generation
technologies, such as a video API , box-shadow, first-of-type , and more.

Think of your website as a full-fledged cable television network
broadcasting over 130 channels, and your users as customers
that sign up for only the most basic package available, of only
15 channels. Any time that they upgrade their cable (browser)
package to one offering additional channels (features), they can
begin enjoying them immediately because you have already
been broadcasting to each one of those channels the entire time.

What happens now is that a proverbial line is drawn in the sand, and the site is built
on the assumption that a particular set of features will exist and are thus supported.
If not, fallbacks are in place to allow a smooth degradation of the experience as usual,
but more importantly the site is built to adopt features that the browser will eventually
have. Modernizr can detect CSS features, such as @font-face , box-shadow , and CSS
gradients. It can also detect HTML5 elements, such as canvas, localstorage, and
application cache. In all it can detect over 40 features for you, the developer.

Another term commonly used to describe this technique is progressive enhancement.
When the time finally comes that the user decides to upgrade their browser, the new
features that the more recent browser version brings with it, for example text-shadow,
will automatically be detected and picked up by your website, to be leveraged by
your site with no extra work or code from you when they do. Without any additional
work on your part, any text that is assigned text-shadow attributes will turn on at
the flick of a switch so that user’s experience will smoothly, and progressively be
enhanced.

What is Modernizr? More importantly, why should you use
it? At its foundation, Modernizr is a feature-detection library
powered by none other than JavaScript.

Here is an example of conditionally adding CSS classes based on the browser, also
known as the User Agent. When the browser parses this HTML document and finds
a match, that class will be conditionally added to the page.

code 1

Now that the browser version has been found, the developer can use CSS to alter
the page based on the version of the browser that is used to parse the page. In the
following example, IE 7, IE 8, and IE 9 all use a different method for a drop shadow
attribute on an anchor element:

code 2

The problem with the conditional method of applying styles is that not only does it
require more code, but it also leaves a burden on the developer to know what browser
version is capable of a given feature, in this case box-shadow . Here is the same
example using Modernizr. Note how Modernizr has done the heavy lifting for you,
irrespective of whether or not the box-shadow feature is supported by the browser:

code 3