Proudly Announcing: Modernizr

Have you ever wanted to do if-statements in your CSS and say, “if the browser supports border-image, apply these rules and properties, but if it doesn’t then use these other rules and properties instead”?

Have you been eager to start playing around with HTML5’s new elements but been held back by the lack of styling control in Internet Explorer?

Well, Modernizr makes it all possible.

Modernizr is a small JavaScript toolkit that uses feature detection techniques to determine whether or not the current browser is capable of any of the following features from CSS3 and HTML5:

  • Canvas
  • rgba()
  • hsla()
  • border-image:
  • border-radius:
  • box-shadow:
  • Multiple backgrounds
  • opacity:
  • CSS Animations
  • CSS Columns
  • CSS Gradients
  • CSS Reflections
  • CSS Transforms
  • CSS Transitions

What makes Modernizr different from a lot of other, existing approaches is that it doesn’t use any UserAgent sniffing at all—in fact, Modernizr was partially designed and developed precisely to put an end to UA sniffing. It is a bad, unsafe and unreliable practice so the more alternatives we have to do it right, the better.

When Modernizr runs its course, it will add a series of classes to your document’s <body> element and each class will indicate whether or not the current browser has native support for that feature. Does it support CANVAS? A class of “canvas” will be added. No support for it? Then the class “no-canvas” is added to the <body> element.

Using these classes, it then takes just a little bit of clever CSS to create “if rules” for your site. Example:

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

The biggest difference that Modernizr brings to your workflow is control: you maintain a much finer level of control over your site’s look and feel in older browsers than you do when simply adding properties to your rules and relying on the browsers not understanding them. After all, what if you want to have a difference between margins or paddings? With Modernizr, you don’t have to worry about hacky workarounds or unreliable UserAgent sniffing anymore.

The JavaScript programmers will be pleased to hear that Modernizr also creates a single object, simply named Modernizr, which contains all of the features it detects against as properties. Each property will be set to TRUE or FALSE depending on whether the browser supports it.

Another helpful thing that Modernizr does: when loaded in an IE browser, it runs through the list of HTML5 elements and quickly creates them in nodespace so that you can style them to your heart’s content.

I will go more in-depth into the process behind Modernizr and the many, many interesting things I discovered about browsers while developing it, but in subsequent blog posts. For now, I’m going to just excitedly throw it out there and let people explore it.

I want to thank, first and foremost, the amazing Mike Krieger, friend and collaborator on Modernizr. He has built the Django-based back-end that is using and his insights have helped refine the toolkit and its website to a much higher degree of quality. Big, big thanks go out to Mike.

Additionally, I’d like to thank Dean Jackson, Oliver Hunt, Boris Zbarsky and Robert Marini for helping me understand various things about browsers and their technologies, some of this information played a crucial part in optimizing and fine-tuning Modernizr’s codebase to become robust, fast and accurate. Thank you all very much.

With that said, please enjoy Modernizr!

If you liked this, you should follow me on Twitter!