Minimiza y ordena tus CSS

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

css-compress

(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.

YUIComparison

(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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: