10 April 2010

Online CSS Unminifier

You may be aware of js unminifiers or beautifiers (such as jsbeautifier). I found myself wanting something similar for making minified CSS legible, so I built a simple tool using javascript to unminify CSS. It uses several regular expressions (and sometimes a split followed by a join) to generate the clean code and it also lets you specify tab width. I included a minified sample in case you want to give it a try.

 
tab width:  

Note: the easiest way to look a site’s CSS is to use a tool like firebug on firefox, but sometimes you still might want to view the full source to see any browser-specific hacks that won’t appear in firebug or to just take a peak at how someone may organize his or her code.

Update: June 2011—It’s now all the rage to drop the semicolon from the last declaration in a CSS rule (right before the closing brace), so I updated the unminifier to handle this case and put an example in the sample CSS.

Update2: September 2011—the CSS Unminifier now exists as a standalone script that you can run on your computer. I converted it to a node project, which you can install with npm (Node Package Manager) using npm install cssunminifier and you can see the code on the github page.

Comments (49)

1. Renato Silva wrote:

Great tool, thanks a lot!

Posted on 1 June 2010 at 4:06 PM  |  permalink

2. peter wrote:

I’m glad you found it useful!

Posted on 1 June 2010 at 10:06 PM  |  permalink

3. Janet wrote:

Thank you so much. Just helped me diff a file that had been minified. Saved me hours.

Posted on 7 July 2010 at 5:07 PM  |  permalink

4. Erik wrote:

This is incredibly useful. Thanks!

Posted on 15 July 2010 at 1:07 AM  |  permalink

5. Andy wrote:

You rock!

Posted on 23 July 2010 at 6:07 PM  |  permalink

6. Dave wrote:

Saved me from a failed merge, awesome.

Posted on 6 August 2010 at 4:08 PM  |  permalink

7. Kyle Sevenoaks wrote:

This is f*cking fantastic!! GREAT job!! Saved me about twenty hours!!

Posted on 19 August 2010 at 9:08 AM  |  permalink

8. Omegakenshin wrote:

Great tool, you are awesome, thanks alot for sharing ^^

Posted on 10 December 2010 at 10:12 AM  |  permalink

9. Adam wrote:

Absolutely AWESOME, Thank you so much, just saved me like 20minutes of headache ridden css cleaning!

Posted on 14 January 2011 at 5:01 AM  |  permalink

10. DJBoca wrote:

Awesome and quick! Thanks!

Posted on 4 February 2011 at 10:02 AM  |  permalink

11. Mick wrote:

Excellent! Thank you SO much.

Posted on 12 February 2011 at 2:02 PM  |  permalink

12. Will wrote:

Saved My LIFE! Thank you so much.

Posted on 16 February 2011 at 10:02 PM  |  permalink

13. Richard wrote:

Saved me a rake of time!

Posted on 17 February 2011 at 10:02 AM  |  permalink

14. Aasim wrote:

Thanks a lot!

Posted on 21 March 2011 at 9:03 PM  |  permalink

15. Bad and Good wrote:

Wow! Amazing tool!

Posted on 6 April 2011 at 2:04 AM  |  permalink

16. Artyom wrote:

Very useful!!! Thank you guys for this awesome tool! Always use when coding)

Posted on 16 May 2011 at 11:05 AM  |  permalink

17. Peter wrote:

This is so very useful. Sometimes you just want to read through a CSS file you got from someone else.

Posted on 9 June 2011 at 2:06 AM  |  permalink

18. Kevin McDougall wrote:

A fantastic tool! Many thanks Peter.

Posted on 2 July 2011 at 8:07 PM  |  permalink

19. dade wrote:

Let me just pile on and say well done sir. Bookmarked, and I couldn't do my job without this handy tool.

Posted on 20 July 2011 at 10:07 AM  |  permalink

20. Jason wrote:

You absolute God send! Busily FTP's CSS files

Posted on 18 August 2011 at 5:08 PM  |  permalink

21. Mikael wrote:

Awesome tool - Thank you!!!!!

Posted on 25 August 2011 at 4:08 PM  |  permalink

22. Andre wrote:

This just helped me fix a completely random CSS problem I couldn't find... Certain browsers had problems while others didn't. Anyway, when I write it, I place an extra line after each closing bracket, so while spacing out the unminified CSS, I found a few places where the } hadn't even made it to the next line.

Bottom line, you can never underestimate the value of the simplest tools... So thanks! I hope you never find cause to delete this page. :D

Posted on 15 September 2011 at 5:09 PM  |  permalink

23. Stefan wrote:

Ace, nice lil tool!

Posted on 19 September 2011 at 7:09 AM  |  permalink

24. Shannon Greene wrote:

THANKS!

Posted on 16 October 2011 at 2:10 PM  |  permalink

25. Roger wrote:

It does not seem to support @foo{a{b:c}}, which I expect to be: @foo { [tab]a { [tab][tab]b: c; [tab]} }

And in my opinion it should NOT modify comments.

Apart from those two things, it's excellent.

Posted on 22 October 2011 at 9:10 AM  |  permalink

26. Roger wrote:

All new line characters disappeared in the code I wrote above. Here is what I meant (using [newline] instead of the new line character): @foo {[newline][tab]a {[newline][tab][tab]b: c;[newline][tab]}[newline]}

Posted on 22 October 2011 at 9:10 AM  |  permalink

27. peter wrote:

Thanks roger, I’ll look into it!

Posted on 22 October 2011 at 12:10 PM  |  permalink

28. Roger wrote:

Hmm, perhaps a[style="font:normal 14px/20px helvetica,arial,sans-serif;color:#333;"] should be left untouched as well, since otherwise the selector won't match. Perhaps one could say: Text between brackets should be left untouched? Another example: a::after{content:"Some sentence with a ; in it."}

And about not touching comments ... that's true as long as they are COMMENTS (and perhaps very short code snippets), but sometimes they're used to comment out code ... don't no what's the best anymore ...

Posted on 24 October 2011 at 3:10 PM  |  permalink

29. Stefan wrote:

Great tool, cheers!

Posted on 15 November 2011 at 10:11 AM  |  permalink

30. Eduardo wrote:

I have an idea to improve this: put a new line after a class, like:

.some-class { [spaces]color: black; }

.another-class { [spaces]color: white; }

Posted on 24 November 2011 at 2:11 PM  |  permalink

31. Jarrod wrote:

Hey there, LOVE this tool. I can't applaud you enough.

However, I have found one tiny gotcha. I unminifed a file that had some images embedded as base64 encoded mumbo-jumbo. The unminifier added a newline after the first semicolon in data:image/png; base64, <base-64-encoded-image>; which you would thing a browser could handle, but Chrome (and perhaps others?) didn't seem to like this.

Just letting you know though, it's definitely not a complaint.

Thanks so much for this incredible tool :)

Posted on 4 December 2011 at 7:12 AM  |  permalink

32. oppih wrote:

I've just encountered a problem with this script and submited an issue on your github page. Please check it if you have time ?

BTW, anyone here find it is not compatible with node.js 0.6.x ?

Posted on 15 January 2012 at 12:01 AM  |  permalink

33. peter wrote:

Thanks for the heads up @oppih. I just updated the github project - https://github.com/mrcoles/cssunminifier

Posted on 20 January 2012 at 11:01 PM  |  permalink

34. Trevor Greenfield wrote:

Just what I was looking for. I think this was built into some editor I used long ago, but I can't find it in notepad++ if its there. Thanks!

Posted on 22 January 2012 at 11:01 PM  |  permalink

35. John Brooks wrote:

Thanks!

Posted on 27 January 2012 at 1:01 AM  |  permalink

36. Rocco wrote:

Sir, you are remarkable :) Just save me a bunch of time.

Posted on 9 February 2012 at 3:02 PM  |  permalink

37. HoldMeCloserTnyDanza wrote:

Thank you so so so so so much!

Posted on 18 March 2012 at 11:03 AM  |  permalink

38. Oleg wrote:

Great job man. Thanks a lot.

Posted on 21 March 2012 at 6:03 AM  |  permalink

39. Jonathan wrote:

Saved me from tedium. Thank you. This actually did a decent job un-minifying .less!

Posted on 1 April 2012 at 7:04 PM  |  permalink

40. Abhi Andhariya wrote:

awesome...! keep it up...

Posted on 10 April 2012 at 8:04 AM  |  permalink

41. Pascal wrote:

Thanks a lot for this awesome tool!

Posted on 16 May 2012 at 8:05 AM  |  permalink

42. Larry Hynes wrote:

Thanks for this, nice work.

Posted on 27 May 2012 at 2:05 PM  |  permalink

43. Soham wrote:

Worked perfectly for me. Thanks. Nice work.

Posted on 31 May 2012 at 9:05 AM  |  permalink

44. Mike wrote:

Thanks man!!!

Posted on 16 July 2012 at 10:07 AM  |  permalink

45. Pumuky wrote:

Great!

Posted on 17 July 2012 at 12:07 PM  |  permalink

46. Hu Yue wrote:

Nice One! Very helpful!Thanks!

Posted on 22 July 2012 at 4:07 AM  |  permalink

47. James Abbott wrote:

Thanks - this is a great tool!

Posted on 9 August 2012 at 9:08 AM  |  permalink

48. Gijs wrote:

The bees knees! Thanks!

Posted on 18 August 2012 at 6:08 AM  |  permalink

49. Snaders wrote:

VERY useful! Thanks!!

Posted on 4 September 2012 at 10:09 AM  |  permalink




Did you find this helpful or fun? paypal.me/mrcoles

Peter Coles

Peter Coles

is a software engineer living in NYC who is building Superset 💪 and also created GoFullPage 📸
more »

github · soundcloud · @lethys · rss