Ulzurrun de Asanza i Sàez

Minimiza y ordena el CSS de tu theme de WordPress "al vuelo"

Ayer publicaron en Anieto2k una versión del compactador de CSS de Barry van Oudtshoorn que además de comptactar el CSS, ordena los atributos alfabéticamente.

Me ha parecido una idea bastante interesante adaptar un poco el compactador de Anieto2k a WordPress, con el objetivo de tener un archivo css fácil de modificar a la vez que el visitante cargase un CSS más ligero. No os penséis que he reescrito el script ni que he modificado mucho el código, realmente los cambios son insignificantes.

Para aplicar la compresión de CSS a nuestro theme de WordPress tenemos que crear un archivo llamado style.php. En él pondremos el siguiente código:

[php]<?php

header(‘Content-type: text/css’);

// Compresor de CSS por Anieto2k

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&aacute; cerrado");
}

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

}

}

// Fin de Compresor de CSS

$contenido = file_get_contents(‘style.css’);

$styleSheet = new StyleSheetCompressor($contenido);

echo $styleSheet->get(true);

?>
[/php]

En la línea 99, cambiad style.css por el nombre de vuestro archivo CSS (aunque la mayoría de las veces bastará con style.css).

A continuación abrid el archivo header.php de vuestro theme y buscad una línea similar a esta:

[php]<link rel="stylesheet" href="<?php bloginfo(‘stylesheet_url’); ?>" type="text/css" media="screen" />[/php]

Reemplazadla por esta otra:

[php]<link rel="stylesheet" href="<?php bloginfo(‘template_url’); ?>/style.php" type="text/css" media="screen" />[/php]

¡Y listo! Ahora si queremos modificar el CSS basta con editar el archivo style.css, que mantiene la estructura, los espacios, comentarios y demás cosas que nos facilitan la edición, mientras que el compresor se dedica a comprimir el CSS para cada visita.


2 replies on “Minimiza y ordena el CSS de tu theme de WordPress "al vuelo"

  1. ¿Y esto hace que las páginas carguen más rápido? ¿Con tan sólo añadir ese código? ¿Funciona en todos los exploradores o en IE no? xD

  2. Lo que hace es reducir el código eliminando espacio y comentarios innecesarios, así que si el CSS original funciona en IE, el que se genera "al vuelo" funcionará igual.

    Cargará más rápido dependiendo del CSS, si usas un CSS con muchos comentarios, espacios innecesarios y demás, se comprimirá más, si tienes un CSS relativamente limpio, entonces mejorará menos :) .

Leave a Reply

Your email address will not be published.

Required fields are marked *

Your avatar