Wednesday, May 16, 2012

10 Tools to Compress, Optimize and clean CSS online


Optimizing CSS files is one of the most important things to boost the loading speed of your website. Itincludes cleaning CSS by removing unwanted properties, reducing code bloat by implementing CSS shorthand properties, removing extra spaces and line breaks to compress it to best file size etc. So, how do you optimize CSS? If you have chosen to do it manually – you have to mess with it while looking up for bloats and all – which is really a cumbersome task to do. But friend, there are some very cool ways to compress, clean and optimize CSS online – which are very handy to trim your stylesheets.
Below showcased are the 10 Best tools to clean, optimize and compress CSS files online:
  1. CSSOptimizer
     
    Its a simple tool based on input, process and get the optimized CSS on the go. Just provide the URL (web address) of your CSS file or upload it or paste in the CSS code directly, click “Optimize” and grab the optimized CSS! So easy! It comes with no other options andimplements its own standards to minify and optimize the code.
  2. Clean CSS
     
    Clean CSS provides a lot of options to format, compress and optimize CSS files, for example, you can choose one of the five compression levels in the Code Layout section, you can check or uncheck several options below it like Sort Selectors, Sort Properties, Merge Shorthand properties etc. depending on your knowledge and experience with CSS. If you don’t know much of CSS, then go with the default-checked options. It accepts the code by direct input or file URL.
  3. CSS Drive Gallery – CSS Compressor
    CSS Drive Gallery - CSS Compressor 
    This CSS Compressor comes with a few but quite reasonable options like Compression Mode (Light, Normal, Super Compact) and Compression Handling (Comment Stripping options). It also have an Advanced Mode, which gives you even more options to compress your CSS code – like handling spaces, tabs and new lines in the code, compressing color codes (hex-codes like #039 for #003399) etc. It allows direct input only.
  4. CSSCompressor
     
    Another CSS Compressor which provides four different modes of compression along with the options like Property sorting, color compression, font-weight compression, selector case-handling, removing unnecessary backslashes and semi-colons. It also accepts the code by direct input.
  5. W3 CSS Validator
     
    W3 CSS Validator is the well-known tool among Web designers and developers. It is the standard tool to Validate your CSS code by direct input, file upload or URI.
  6. FormatCSS
     
    With this tool, you can format your CSS according to your need. Whether you’re writing CSS while keeping in mind the readability or Web, this tool will help you every way with it’s really useful options to control spacing, tabbing, lines before and after selectors, braces and sub-rules.
  7. Tabifier
     
    Tabifier works similar to FormatCSS, but it provides the formatting support with HTML, JSON and C as well. This tool will be pretty useful, if you work simultaneously with HTML, CSS (and of course, JSON). However, it don’t provide any options for code formatting like FormatCSS.
  8. CSS SuperScrub
     
    Compact tool to scrub CSS code to by submitting the source file URL. You can utilize it’s simple compression and formatting options like whitespace removal and indenting.
  9. StyleNeat – CSS Organizer
     
    It organizes and standardizes the selectors, sub-selectors and properties in the CSS code in a structure that makes it easier to define page areas and see how they relate to each other. You can use it’s sorting, organizing and formatting options and can submit the code directly, by file upload or URI.
  10. Online YUI Compressor
     
    Yet another Code Compressor which also supports JavaScript compression. Make use of it’s smart minifying options and collect the output in plain text or gzipped archive. Allows direct input, file upload and URI submission of code.
All of these tools are automated and have their own processing methods, so don’t forget to backup your CSS code if you make cut-paste-save to be on the safer side in case if the resulted CSS not work properly.