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.
Woah, good call. I had no idea. Thanks for saving me a lot of potential heartache.
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?
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.
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.
Good point Justin. I’ve had great luck minifying with Sass and Compass, so an update is in order.