Box Shadow

October 11, 2016
CSS and SASS Frontend

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post

Browser Prefixes

From October 8, 2016

Responsive design makes your design work across screen sizes. But what about working across browsers? Responsive design is only part of the solution to making your site accessible to all platforms. Another part (among many) is using browser prefixes and testing your solutions.

Read This Article
Next Post

Browser Defaults

From October 12, 2016

Browser defaults are generally rather sensible and malleable, but there are a few things I strongly urge you not to mess with.

Read This Article