I’m seeing some debate on prefixing box-shadow (and other properties). This is my solution to figuring out browser prefixes. This recent article by appendTo discusses the CSS Box-Shadow property. It does a decent job explaining the values and what they do, but they superfluously suggest prepending browser prefixes to the box-shadow property. In my last post, I discuss browser-prefixing as a general topic, and suggest a few tools to help determine if you need prefixes, namely, Autoprefixer. It’s a great tool with lots of different possible applications, including plug-ins for Atom (the text editor I use) and Sublime Text.

CSS Bloat

The problem I have with unnecessary prefixing is bloat. CSS bloat can be a huge problem for mobile users, and for anyone on slower connections. Browser prefixing can increase a property’s weight by a lot. In this case, the unprefixed box-shadow property is 51 bytes unminified, 43 minified. The prefixed version (what appendTo suggests) is 134 bytes unminified and 118 bytes minified. The difference is not negligible. 83 unminified bytes and 75 minified bytes is a lot.

I understand the need to cater to your users, I really do, because I have to do it, too. But unnecessarily using browser prefixes is a disservice, and that’s why I very strongly suggest using the tools I mentioned in my last post (and above). Not only will they save you time but they will also save your users bytes.

No Comments...yet