aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Barry van Oudtshoorn, ha desarrollado un compactador de CSS que además nos permite ordenar alfabéticamente los atributos de nuestros CSS.

Para ello, ha seguido las especificaciones que Google propone en Minimize Payload Size haciendo que nuestro CSS sea más pequeño y, por consecuente, tarde menos en llegar al usuario final.

¿Que es lo que hace?

Usando un fichero CSS de base se le aplican una serie de transformaciones para obtener un fichero CSS nuevo complemente compactado.

• Se eliminan todos los comentarios
• Ordena todos las propiedades de cada selector alfabéticamente
• Ordena todos los valores de cada propiedad alfabéticamente
• Elimina todo espacio innecesario.

Comparación con YUI Compressor

(Ver Imagen)

La compactación está a la altura de la ofrecida por YUI Compressor, aunque únicamente la supera (y por muy poco) en los casos con CSS gzipped.

(Ver Imagen)
Via

Versión PHP

Aprovechando las vacaciones y que esto me irá bien para un proyecto que estoy desarrollando, me portado la función a PHP para poder usarla sin usar Java.

<?php
class StyleSheetCompressor {
 private $cssFile;
 private $selectors = array();

 function __construct($cssContent = '', $cleanComments = true){
 $this->cssFile = $cssContent;

 // Borramos comentarios
 if ($cleanComments)
 $this->cssFile = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $this->cssFile);

 $selectors = array();
 // Obtenemos todos los selectores
 $partes = explode("}", $this->cssFile);

 foreach($partes as $parte) {
 if (!empty($parte))
 array_push($this->selectors, new SelectorCSS($parte."}"));
 }
 }

 function get($cleanSpaces = true){
 $salida = '';
 foreach($this->selectors as $selector) {
 $salida .= $selector->get($cleanSpaces)."\n";
 }
 // Borramos saltos de linea, espacios,...
 if ($cleanSpaces)
 $salida = str_replace(array("\t", "\n", "\r"), '', $salida);

 return $salida;
 }
}

/*
 SelectorCSS
*/
class SelectorCSS{
 private $properties = array();
 private $selector;

 function __construct($selector = ''){
 $parts = explode("{", $selector);
 if (count($parts) < 2) {
 die("Selector " + selector +" incompleto");
 }
 $this->selector = trim($parts[0]);
 $contents = trim($parts[1]);
 if (strlen($contents) == 0) {
 die("Selector " + selector + "vacio");
 }

 if (substr($contents,strlen($contents) -1 ,1) != '}'){
 die("Selector "+selector+" no estáerrado");
 }

 $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;
 }

}

Para usar es muy sencillo, simplemente debemos indicar el contenido del fichero .css que deseemos compactar y ordenar sus propiedades. Al recibir el contenido del fichero podemos enviar uno o varios fichero concatenando el contenido de los mismos.

// Contenido del fichero styles.css
 $fileName = file_get_contents('styles.css');

 // Creamos un objeto al que le pasamos el contenido por parámetro
 $styleSheet = new StyleSheetCompressor($fileName);
 /* Parámetros:
    1: (String) Contenido del fichero
    2: (Bool) Limpiar comentarios (defecto: true)
 */
 // Obtenemos el contenido CSS
 echo $styleSheet->get(false);
 /*    Parámetros:
     1: (Bool) Eliminar saltos de línea (defecto: true)
 */

El objeto dispone de un método get() que devolverá el contenido compactado y ordenado, este contenido podemos cachearlo en un fichero estático o mostrarlo directamente.