I’ve added a new tool to my online tool collection. It’s a CSS minifier. Click here to access it.
What’s a CSS minifier ?
The purpose of this tool is to reduce the size of CSS code without changing the way it works. It just gets rid of things a browser doesn’t use anyway like:
- comments
- empty rulesets
- empty @font-face, @media and @page at-rule blocks
- extra spaces
- line breaks
It also converts a few few things to save a few extra bytes:
- font weight values normal to 400 and bold to 700
- color values in hsl notation to hexadecimal notation
- color values in rgb notation to hexadecimal notation
- named color values to hexadecimal notation
- compresses color values in hexadecimal notation if possible e.g. #ffffff to #fff
- compresses unit values
The CSS code produced by this tool is not very human-readable anymore but it is compacter and the saved size will reduce the bandwidth used when loading your page.
Why should I care ?
Minifying CSS speeds up the downloading of your web page. Why should you care ? Does anybody like to wait for a web page to load ? Probably not. Will many visitors hit the Back button before a slow page has been loaded. Probably. So even though minifying CSS alone will not make a slow page fast, it’s one of the things you can do to speed up your page. And since you can use this online tool to get the minified CSS, it’s really easy.
If you want to read more about it, please refer to the Google Developers Best Practices.
How can I use it ?
Copy the CSS code you want to minify, click here, enter your CSS code in the text area titled “CSS to be minified”, select the options you want to use and click on the “Minify” button.
The minified code will then be displayed in the text area titled “Minified CSS”. You can copy it and paste it back to your CSS or HTML file replacing the existing CSS code.
Did you write everything from scratch ?
No. This tool wraps the excellent cssmin PHP library by Joe Scylla.