Site icon SumTips

Unminify CSS and Make it Readable

There are various tools available that lets you minify CSS code. If you are not familiar with the term – Minify or minification is the process of removing all unnecessary characters (white space characters, new line characters, comments, etc.) from code without changing its functionality. The resultant CSS code is optimized, and is only a fraction of the original file in size, and thus improving your site’s load time.

Many theme developers use minified CSS in their themes for maximizing performance, but this in turn also takes away the ease of use and customization ability from many users. So if you get depressed seeing the holy grail of CSS in one single line in your themes, here are some tools to help you out.

Uncompress CSS

Uncompress CSS

This is a free online tool that allows you to transform (or decompress or unminify) minified CSS to nicely formatted and indented CSS. It does not convert the CSS to the exact original form, but it formats the minified CSS to make it more readable to the human eye.

Paste or type in your code directly into the tool, or simply enter a URL to fetch the code from, and click on “Process CSS” button. Decompressed CSS code will be instantly presented to you. You can now replace the original minified code in your theme’s CSS file with this uncompressed one and get on with the editing you require.

With the “Jump to:” option, you can access link to another utility that will allow you to compress normal CSS, and also download desktop applications for OS X and Linux. Those can be used if you want to again minify the CSS before uploading to your web host. Hit the link below to try it now.

Visit: Uncompress CSS

CSS Unminifier

CSS Unminifier

In addition to what the previous tool does, CSS Unminifier lets you specify tab width. It also transforms CSS faster, without page refresh.

Visit: CSS Unminifier

Client-side CSS (De)Compressor

Client side CSS (De)Compressor

csCSSc gives you both compression and decompression utility on the same page. When you do either, it displays the size difference ratio giving you a better knowledge.

Visit: Client-side CSS (De)Compressor