Don’t Minify on the Fly

Technical drawings of a Mini - made to look a little yesteryear

In the name of speeding up your site you may hear that minifying your CSS is both awesome and easy. I’ll agree that it’s very easy, and in the name of speed I can concede a bit to the awesomeness. But if you’re using @media or @font-face in your stylesheets, be wary of automatic minifying techniques.

I found out the hard way (Thanks Steven) that some of these techniques can strip web browsers ability to read @media or @font-face CSS code correctly, resulting in incorrect fonts being displayed, and the responsiveness of media queries rendered useless.

It turns out that I’d nonchalantly enabled the option to auto-minify stylesheets at the service I use to distribute this site, CloudFlare. Thankfully the option can be turned off and after a quick cache purge, all was well again in the Chrome world.

The lesson I’ve taken from this is that while it’s a great idea to minify stylesheets (and JavaScript for that matter), care has to be taken when doing so. Know what you are minifying. And be sure to test across all browsers to ensure that your sites are rendering as intended.

As a side-note, it was great to use old school Mini Cooper artwork for this post. I’ve loved them since I was a kid and still dream about getting one for my mid-life crisis one day.

5 Comments


Woah, good call. I had no idea. Thanks for saving me a lot of potential heartache.

Reply

What\’s the \”before and after\” that causes a problem? Can you give us an example? I have minified CSS on a client site that includes fonts and it seems to be working fine. I guess it depends which minifier is being used, maybe?

Reply

    The main issue I had was the minifying techniques used by Cloudflare. If you\’re manually minifying – I use a Coda plugin – then you\’re probably fine.

    I also use ProCSSor to both minify and cleanly format CSS.

    Reply

A better title for this post would be \”Don\’t minify on the fly with CloudFlare\’s autominify\”. I\’ve come across plenty of great php scripts that take media queries into consideration and this title post makes people think otherwise.

Reply

Good point Justin. I\’ve had great luck minifying with Sass and Compass, so an update is in order.

Reply

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Check out our Complete Website Package

Chat with us about your project or click below to find out more!

Learn More   Chat with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.