CSS optimizer to convert in shorthand form?

Question

Is there any free online or offline tool to optimize all properties to shorthand form, wherever is possible?

it would be useful to compress big files.

For example:

This

.class {
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}

to this

.class {
padding: 0 10px 15px 20px;
}

Answer 1

Your two snippets of CSS are not identical. The second one explicitly sets the top padding to zero, but the first one does not set a top padding so will inherit whatever was specified before.

For example, if you apply the class to a paragraph that already has padding, in the first situation the paragraph will keep its top padding, but in the second you remove it.

So there isn't going to be a tool that does exactly what you want. You'll simply need to write your CSS properly in the first place.

Answer 2

You can try Cleancss, this is an online tool.

By using your example:

   Input: 0.096KB, Output: 0.038KB, Compression Ratio: 60.4% (-58 Bytes)