Stefan Baumgartner

Web ops, performance and front-end

noPrefixes flag in Modernizr

20 February 2014 by @ddprrt | Posted in: CSS, Browser, Modernizr

More than half a year ago I had some little rant on why we should drop using vendor prefixes as a whole. Main points were:

Also, several people already pointed out that vendor prefixes were a necessary evil, but are all in all bad and shouldn’t be used at all; neither by developers nor by browser vendors. There’s even a “considered harmful” article out there, which just shows that there are some really strong feelings out there!

One (solvable) problem

Well, we kept them using anyways. Mostly because we were used to it, and there were tools (Sass mixins, Emmet.io autocompletion), which helped creating more code than necessary.

Another reason was because we love using Modernizr and the great ability to do feature based decision making: If feature A exists, use that code, otherwise do it in a different way. Modernizr tests do also check for prefixed features. So, for your switch to work in all cases, prefixes were again mandatory.

Modernizr is an indispensable tool for my daily workflow and helps me progressively enhancing my websites and applications.

We had some discussion over at Modernizr and decided to try if a robust and easy to opt-in possibility exists for that very case. And now, with the upcoming release, there’s a flag for that.

noPrefixes

It’s pretty easy to set up for you. I hope to have it on the Modernizr web page in the near future, but for now you just clone or fork or download the repo, and add one line of code in the file config-all.json. Try to figure out which one!

"options": [
  "setClasses",
  "addTest",
  "html5printshiv",
  "load",
  "testProp",
  "fnBind",
  "noPrefixes"
],

config-all.json includes all options for the Modernizr build. Here you can remove the HTML5 Shiv, the possibility to add new (custom) tests, or remove tests which you have no use for. Afterwards, you just build your file using Grunt. Et voilà!

One alternative against code bloat

If you still want to use vendor prefixes in your CSS file, be sure to check out Autoprefixer. It uses the Caniuse.com database to make sure that your property is just prefixed with the necessary ones.

Modernizr team, I love you guys!

Big thanks to Patrick Kettner from the Modernizr team who guided me through all this! Learned a lot from you guys.

Comments? Shoot me a tweet!