What do people use Modernizr for?

A question popped to my head when doing some work on a site that is using Modernizr: “What do people mainly use Modernizr for?”. I asked Paul Irish on Twitter and he generously shared the last 30 days of Modernizr build data. It does not say anything of how much people actually use the features, but it says something about what they intend to use. I took the stats and did a simple sort and count (without weighing in how much each build is used…).

All the top results were “functions”, not specific feature tests, which tells us that Modernizr is actually used more as a JavaScript framework than anything else. I have listed some of the most used functions and feature tests below. Full list is here (at sheet 2).

Top functions

  1. load
  2. cssclasses
  3. testprop
  4. testallprops
  5. shiv
  6. teststyles
  7. prefixes
  8. hasevent

Top feature tests

  1. boxshadow
  2. csstransitions
  3. textshadow
  4. rgba
  5. opacity
  6. cssgradients
  7. borderradius
  8. canvastext
  9. csstransforms3d
  10. multiplebgs
  11. canvas

Not sure if it is ok to classify Modernizr like this… Let me know in the comments of you have another opinion or comment on the “stats”.

Published by

Anders M. Andersen

Digital Project Manager and Front End Developer.

  • Pingback: Dew Drop – April 26, 2012 (#1,314) | Alvin Ashcraft's Morning Dew()

  • http://twitter.com/brad_frost Brad Frost

    The two things I almost always find myself using are geolocation and touch. Much of the other CSS stuff takes care of itself in the cascade, but I can see how people would use it to inject polyfills for stubborn clients.

  • http://amobil.se Anders M. Andersen

    I was surprised to not see those on the toplist, but the stats are based on build profiles and many profiles include 20+ features… Here is the most used profile on Modernizr:

    fontface^backgroundsize^borderimage^borderradius^boxshadow^flexbox^flexbox_legacy^hsla^multiplebgs^opacity^rgba^textshadow^cssanimations^csscolumns^generatedcontent^cssgradients^cssreflections^csstransforms^csstransforms3d^csstransitions^applicationcache^canvas^canvastext^draganddrop^hashchange^history^audio^video^indexeddb^input^inputtypes^localstorage^postmessage^sessionstorage^websockets^websqldatabase^webworkers^geolocation^inlinesvg^smil^svg^svgclippaths^touch^webgl^shiv^load^cssclasses^teststyles^testprop^testallprops^hasevent^prefixes^domprefixes