Barry van Oudtshoorn, has developed a compactor CSS also allows us to alphabetize our CSS attributes.
It has therefore followed the specifications proposed in Google Payload Size Minimize making our CSS is smaller and, consequently, less late in coming to the end user.
What do you do?
Using a basic CSS file are applied to a series of transformations to obtain a new CSS file supplement packed.
- Eliminate all comments
- Sort all the properties for each selector alphabetically
- Sort all values of each property alphabetically
- Eliminate all unnecessary space.
Comparison with YUI Compressor
The compaction is equal to that offered by YUI Compressor, but only the above (and little) in cases with gzipped CSS.
PHP Version
Taking advantage of this holiday and I’ll be okay for a project I’m developing, I ported to PHP function to use it without using Java.
<?php class cssCompressor { private $cssFileName; private $selectors = array(); function cssConstruct($cssContent = '', $deleteComments = true){ $this->cssFileName = $cssContent; // Delete comments if ($deleteComments) $this->cssFileName = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $this->cssFileName); $selectors = array(); // We get all the selectors $parties = explode("}", $this->cssFileName); foreach($parties as $part) { if (!empty($part)) array_push($this->selectors, new SelectorCSS($part."}")); } } function get($cleanSpaces = true){ $output = ''; foreach($this->selectors as $selector) { $output .= $selector->get($cleanSpaces)."\n"; } // Delete line breaks, spaces, ... if ($cleanSpaces) $output = str_replace(array("\t", "\n", "\r"), '', $output); return $output; } } /* SelectorCSS */ class SelectorCSS{ private $properties = array(); private $selector; function cssConstruct($selector = ''){ $parts = explode("{", $selector); if (count($parts) < 2) { die("Selector " + selector +" incomplete"); } $this->selector = trim($parts[0]); $contents = trim($parts[1]); if (strlen($contents) == 0) { die("Selector " + selector + "empty"); } if (substr($contents,strlen($contents) -1 ,1) != '}'){ die("Selector "+selector+" is wrong"); } $contents = substr($contents, 0, $contents - 2); $this->properties = explode(';', $contents); } function get(){ $str = $this->selector.'{'; natcasesort($this->properties); foreach($this->properties as $property) { if (!empty($property)) $str .= $property.";"; } $str .= '}'; return $str; } } ?> |
To use is simple, we simply must indicate the file’s contents. Css we want to compact and manage their properties. Upon receiving the contents of the file we can send one or more file concatenating the contents thereof.
// StyleSheet.css file content $fileName = file_get_contents('StyleSheet.css'); // We create an object that we pass the contents of parameter $styleSheet = new cssCompressor($fileName); /* Parameters: 1: (String) content of the file 2: (Bool) Clear comments (default: true) */ // We get the CSS content echo $styleSheet->get(false); /* Parameters: 1: (Bool) Delete lines (default: true) */ |
The object has a method get() that returns the contents compacted and orderly, this content can cache in a static file or display it directly.
