Modernizr, how to detect HTML5 and NEWT with Javascript

Original Site: http://www.modernizr.com/
Reblogged by Tim Selaty, Jan 8th, 2011

What is Modernizr?

Modernizr adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

Lastly, Modernizr also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

What Modernizr doesn’t do

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.

However if you’re interested in that, you’ll probably want to look here: HTML5 Cross browser Polyfills.

Who uses Modernizr?

Twitter,
American Eagle,
Burger King,
The Knot,
Capital One,
Posterous,
NFL,
The State of Texas,

Good Magazine,
UC Santa Cruz,
Made By Many,
Hardboiled Web Design,
Lost World’s Fairs,
Clusterr,
LittleIpsum,
and
Strategy Design & Advertising

Find out more about Modernizr.

One Response to “Modernizr, how to detect HTML5 and NEWT with Javascript”

  1. G’Day! Tlswebsolutions,
    Along the same lines,, (This Article is an introduction to the ‘HTML 5 & CSS 3 Elements’ collection.)
    I’ll be back to read more next time

Leave a Reply

Latest Posts

The United West

March 29th, 2011 by

WordPress 3.1 Helicon ISAPI_Rewrite Rules and Permalink Structure

March 6th, 2011 by

One of my clients is using WordPress on an IIS server and is using a product called “Helicon” (more…)

WordPress 3.1 Upgrade – Frontend Blank Site, Backend Okay (IIS)

March 6th, 2011 by

Shoot. You just upgraded your WordPress installation to the latest version (3.1 for me) and all of a (more…)

CodeIgniter HTACCESS remove index.php and add trailing slash

February 18th, 2011 by

Here is a quick HTACCESS snippet that will add the trailing slash (ex: http://domain.com/mycontroller to http://domain.com/mycontroller/) and will (more…)