Aunque me gustaría ahondar mucho más en el tema, por el momento sólo presentaré una pequeña función que puede ser bastante útil a la hora de reducir el peso de CSS gigantes, sin embargo, la verdadera ganancia puede no estar aquí, sino que en la compresión que se debe activar en el servidor, o bien ocupando ob_start() de PHP, pero como ya dije: eso ya es harina de otro costal y al ser más amplio preferiría dejarlo para otro post.

Sin embargo, a continuación les presento el pequeño script. Vamos... haz click en leer más

Entendiendo CSS

CSS es un invento genial. Mediante el mismo, y combinándolo inteligentemente con HTML, podemos controlar cualquier aspecto de nuestra página. Es, como casi todo en la Web, fácilmente interpretable y también pesa poco: aplicando sólo una hoja de estilos, podemos controlar todo el aspecto gráfico de la página. Sin embargo, y casi de forma tan variable como lo sea el gusto del programador, es también posible llenar un CSS demasiado con comentarios, espacios demás y hasta caracteres demás. De muestra, un botón:

html {
  background-color:#113355;
}
/* Algunos estilos */
p.hola, a:link {
  margin-left: 2px;
  margin-right: 2px;
  margin-top: 43px;
  margin-bottom: 43px;
}
/* El contenedor General de la página */
#wrapper {
  padding: 0px 0px 0px 0px;
  color: #5533AA;
}

Esto puede reducirse bastante, para que no quede tan críptico, dejé cada estilo en una línea:

html{background:#135}
p.hola,a:link{margin:43px 2px}
#wrapper{padding:0;color:#53A}

Explicaré algunas reglas básicas:

1. Los comentarios no sirven: si quieren un peso chico, eliminen todo comentario.
2. margin, padding y algunos otros tienen un formato reducido. Sin embargo, es algo que se explicará en otro artículo
3. El punto y coma final de cada declaración no es necesario. Elimínenlo.
4. Los colores se pueden reducir, siempre y cuando los tres pares RGB sean iguales. Es útil.
5. A CSS no le gustan mucho los espacios. Se pueden eliminar muchos.

Ahora bien, en el pequeño ejemplo de arriba, que son exactamente iguales, el peso del archivo se redujo de 263 bytes a 84 bytes. Ahora se pueden imaginar la misma situación, pero en la vida real donde el CSS no pesa algunos bytes, sino que bastantes kibibytes. (Eso serían bytes multiplicados por 1024). De todas formas, eliminando los saltos de línea, se puede dejar en 81 bytes, pero queda de difícil lectura.

Sin embargo, el tema que nos convoca hoy no hace algo tan avanzado, sino que simplemente elimina los puntos 1, 3 y la gran mayoría del punto 5. Aunque todavía está lejos de ser perfecto aunque hasta el momento he detectado que hace bien su pega.

<?php
  function compress($buffer) {
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    $buffer = str_replace(array(';}','; }',': ',' {','; '),array("}\n","}\n",':','{',';'),$buffer);
    return $buffer;
  }

header('Content-type: text/css');
echo compress(file_get_contents('highslide.css'));
?>

En el ejemplo de arriba tomé el CSS de highslide, un script hecho en JavaScript que realiza el típico efecto zoom de una foto. El CSS de este script pesa 21.274 bytes, un poco más de 21KiB. Aunque el CSS en sí está bastante bien hecho, no está optimizado para la transferencia Web, tiene muchos espacios vacíos inútiles y también algunos comentarios, todo separado por un enter que parece que se le hubiera quedado pegado al programador.
Después de aplicar el script, quedó pesando 15.695 bytes, lo cual significa una reducción de 6KiB. Puede no sonar tanto, pero en cuanto a porcentaje estamos hablando de una reducción de peso de un poco más de un 26%, ¡sólo eliminando espacios innecesarios! Además, hay que tener en cuenta que se está agregando un enter después de cada declaración: al eliminar estos enter que en estricto rigor también están demás, obtenemos un archivo de 15.511 bytes, lo cual en porcentaje significa un poco más del 27%.

Ahora bien, la desventaja de este esquema es que cada vez que queramos modificar el CSS, tendremos que realizar el paso de conversión y luego escribir el archivo, algo bastante impráctico sobretodo si se está desarrollando continuamente. Para solucionar esto, se puede ampliar un poco la función de arriba, combinando CSS y PHP en un solo archivo.

<?php
  header('Content-type: text/css');
  ob_start("comprimir");
  function comprimir($buffer) {
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    $buffer = str_replace(array(';}','; }',': ',' {','; '),array("}","}",':','{',';'),$buffer);
    return $buffer;
  }
?>
body{background:#1C762C none repeat scroll 0 0;color:#000;font-family:Arial;margin:0;padding:0}
img{border:none}
marquee{background:#FFF;height:168px;padding:0;text-align:center;width:130px}
a{color:#111;text-decoration:none}
ul{text-align:left}
<?php
  ob_end_flush();
?>

Pero, esto tiene un pequeño detalle: hay que guardarlo como un archivo .php, debido a que por lo general la configuración no permite establecer un .css como un script ejecutable de PHP. Lo que en el fondo se hace es generar un archivo PHP que genera CSS gracias a ob_start() que, con una explicación muy a la lijera, toma la salida y le aplica la función que definimos antes de enviarlo al explorador. Finalmente, debemos indicarle expresamente dónde termina el archivo.

De esta forma, se consigue comprimir todo el contenido. El único cambio que habría que hacer en HTML sería el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <base href="http://looneyfactory.com/"/>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"/>
    <link href="estilo_general.css.php?v=1.0" rel="stylesheet" type="text/css"/>
  </head>
  <body>
<!-- el contenido del cuerpo -->
  </body>
</html>

Aquí pasan varias cosas interesantes. Primero llamamos a una aplicación de Yahoo, que es la encargada de resetear todos los valores predeterminados que puedan tener los navegadores. (¿Se acuerdan del artículo sobre reseteo de CSS?). Después de eso, llamamos a nuestro estilo, que en realidad es un script hecho en PHP. Además, le pasamos la cadena v=1.0 y esto tiene una razón bastante específica: Hoy en día, no es extraño encontrar que algunos sitios (como por ejemplo: Yahoo, Google y en general cualquier empresa grande que tenga empleados que algo cachan sobre la Web) tengan habilitada una caché que dura menos que 1 año. El CSS de Yahoo por ejemplo, expira en 10 años más. Sin embargo, no tiene ni una gracia que se tenga que cambiar el nombre del archivo cada vez que hay un pequeño cambio en el CSS. Es por eso, que se le agrega al más puro estilo $_GET de PHP un identificador único con lo cual el navegador sub-entiende que ese nombre de archivo (completo, incluido los parámetros) lo debe guardar en caché.

Ahora entendí un poco más... Y todo junto cómo sería?

Afortunadamente para ustedes, cuando empezé a escribir este post comencé también a trabajar en una class que me hiciera esto de forma automática. Sin embargo, y como siempre, aunque el requerimiento era bastante simple, terminé por meterle mucho más contenido que lo que originalmente iba a hacer.
Mayor información, tal como link hacia la class y qué cosas hace, las pueden encontrar en este post.

De esta forma, el CSS principal de CHW por ejemplo, pasa de pesar 43876 bytes a 5802 bytes, una compresión de un 87%!

Cómo se hace esto? Muy simple: se toma el o los CSS a procesarse, se eliminan los comentarios, los retornos de carros, los espacios que sobran, los tabs que sobran, se cambian todos los 0px a 0, los colores se convierten a su respectivo código corto y por último los colores se tratan de acortar de #EEAA11 a #EA1.
Por último, a ese archivo resultante se le aplica gzip y se manda al cliente. Por último, si el cliente ya tiene en su caché el CSS, simplemente se manda un código HTTP de que el archivo no ha sido modificado, reduciendo de esta manera ancho de banda.

Mi class trabaja con dos formas de caché, ambos configurables:
El primer caché se genera en el servidor. De esta manera, se pueden dar distintas combinaciones para distintos perfiles.
Si en una página cargo hola.css y chao.css y en otra página cargo hola.css y mundo.css, ambos tendrán una caché distinta.
Esta caché se puede activar o desactivar, aunque desactivado no tiene mucha gracia ya que cada vez que hay un request, se debe realizar todo el proceso de arriba nuevamente.

La segunda caché es la del cliente: si el CSS no ha cambiado entonces no descarga nada. Si en cambio, el archivo fuente ha cambiado o el cliente no tiene en caché el CSS se descarga nuevamente.
Esta caché se puede desactivar como también regular el tiempo que dura.

¿Qué ventajas tiene esto?

1. Los CSS quedan originales, no teniendo que renombrarse. Es tan fácil como llegar y editarlos en caso que sea necesario. Cuando se editan, se actualiza automáticamente la caché interna y se manda la nueva versión al cliente.
2. No más problemas extraños con distintos navegadores: la class se encarga de hablar con el navegador.
3. Menos HTTP requests por cliente.
4. Menos peso que transferir hacia el cliente.
5. De fácil integración: sólo son 2 líneas de código

Por último, también es posible enviar el CSS como un archivo (recomendado) o bien imprimirlo inline como parte del estilo.

Y de dónde se puede descargar esta maravilla? De acá:

http://unreal4u.users.phpclasses.org/browse/package/5950.html

En ese link se encuentra la class, documentación completa (en inglés, sorry es requisito del sitio), el archivo de configuración necesaria y por último un par de ejemplos.

Cualquier duda, puede ser mediante phpclasses.org o bien mediante CHW o por último, como comentario en este mismo blog

[UPDATE]: Saqué la versión 1.3 hace algunos días que incorpora algo nuevo: uno puede forzar la creación de un archivo caché (en el servidor) y ahora también existe la opción de sólo imprimir el nombre del archivo caché que genera. De esa forma, podemos incluirlo en nuestro código fuente sin tener otro archivo dando vueltas y que el Webserver se encargue de lidiar con la caché del navegador. (Aunque esto hay que configurarlo, mi class la hace solo )

También me llevé una agradable sorpresa: el post que habla acerca de cómo manejar errores en PHP ya se ubica primero en Google al buscar por php trigger_error Aunque a través de Google sólo he recibido 2 visitas, el solo hecho de ubicarme en primer lugar ya me hace más que feliz.
Pero, el tema que nos concierne hoy, es acerca del reseteo de CSS. "¿Qué es?" "¿Para qué sirve?" y "¿Cómo podemos solucionar la problemática?" serán algunas de las interrogantes que se plantearán y que verán la luz en este post.

¿Qué es?

Tal como su nombre lo indica, es un reseteador de CSS (doh!!). ¿Qué es lo que significa exactamente? Bueno, para todos aquellos que se han lanzado a la aventura de crear una página Web que se vea exactamente igual en cualquier navegador, se ha podido dar cuenta de que no siempre se renderean exactamente igual todos los elementos. Existe siempre alguna forma lijeramente distinta de mostrar una cosa en un navegador y en otro.
Para solucionar eso, nació la necesidad de poder "resetear" los valores predeterminados que un navegador en particular pudiera tener para un elemento en particular. De esta manera, se obtiene un documento en blanco que sirve de base para que de esta manera, se pueda empezar a trabajar.

¿Para qué sirve?

Aunque parcialmente respondida en la pregunta anterior, aquí voy a terminar de responderla al 100%.
El problema se origina debido a que los navegadores pueden aplicar ciertos valores predeterminados para ciertos elementos lo cual hace que ese elemento no se vea siempre igual. El problema fundamental de esto es que por lo general el o los desarrolladores tienen un navegador principal con el que prueban todo exhaustivamente y ocupan otros sólo para simplemente verificar que todo esté marchando bien.
Un ejemplo práctico lo tiene por ejemplo la diferencia en el rendereo del elemento h1 y p en Chrome y Firefox vs Opera e Internet Explorer:

El código:

<html><head><title>Probando...</title>
<style>
html{background:#333}
h1{background:#555;color:#FFF;width:300px}
p{background:#777;color:#CCC;width:300px}
</style>
</head><body>
<h1>Hola mundo!!!</h1>
<p>Chao mundo!!</p>
</body></html>

La vista previa:

Si se fijan bien en la imagen, tanto Chrome como Firefox mantienen un estilo bastante parecido, pero definitivamente Internet Explorer tiene otra manera totalmente distinta de renderear la página, lo cual redunda en mayores espacios y finalmente en pixeles corridos. También Opera corre el espaciado con un par de pixeles de diferencia, sólo apreciable para el que tiene muy buen ojo.
Cabe destacar eso sí, que en estilos más complicados, incluso hay diferencias entre Chrome y Firefox.

¿Cómo podemos solucionar la problemática?

Y ha llegado el momento de la salvación y la principal razón de existir de este post: podemos solucionar estas pequeñas problemáticas en un 99% simplemente borrando cualquier estilo predeterminado que tome el navegador y estableciendo expresamente la nuestra de forma posterior al reseteo.
Aunque creo haberlo mencionado antes, nunca está demás: CSS funciona de una manera bastante simple: cuando existe algún conflicto entre dos clases, simplemente se aplicará el último estilo declarado. De esta forma, si tenemos:

<html>
<style>
p{color:#454;background:#9AF}
</style>
<body>
<p style="color:#29E">hola mundo!</p>
</body></html>

Existe un claro conflicto entre el estilo declarado en la cabecera y el estilo declarado de forma inline con la propiedad style. Mientras que el primero establece un color #445544, el segundo establece un color de fuente #2299EE. En este caso, se aplicará el último estilo declarado, es decir, el que se declara de forma inline.
Exactamente lo mismo pasa con esta solución: mediante un pequeño cambio en nuestro código de arriba, podemos primero resetear todos los estilos y después llamar a nuestro CSS de forma segura.

Para facilitar aún más las cosas, y de paso no demorar más la carga de nuestra página, podemos externalizar el servicio. Es por lo mismo, que Yahoo nos ofrece el reseteo del CSS de forma totalmente gratuita, contando con el respaldo de ellos. ¿Cómo se hace?

<html><head><title>Probando...</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"/>
<style>
html{background:#333}
h1{background:#555;color:#FFF;width:300px}
p{background:#777;color:#CCC;width:300px}
</style>
</head><body>
<h1>Hola mundo!!!</h1>
<p>Chao mundo!!</p>
</body></html>

Con este pequeño cambio, nuestro script quedaría rendereado de la siguiente forma en los distintos navegadores seleccionados:

Aunque existen todavía algunos pixeles corridos, ya no son tantos como antes, lo cual alivia bastante la pega extra a realizarse.

Eso si que ahora será responsabilidad nuestra establecer los tamaños de las fuentes, pero mediante esta técnica se permitirá facilitar bastante el desarrollo cross-browser. Algunos consejos: la etiqueta <strong> también se resetea, al igual que la etiqueta <em> y varios más. Sugiero echar un vistazo en Yahoo Developer Network para informarse de más cambios y otras posibilidades más avanzadas que jamás he ocupado.

Versión un poco más recortada (343 bytes)

La versión de Yahoo pesa 501 bytes. Abajo adjunto una versión un poquito más chica que pesa 343 bytes. Se eliminó todo comentario previo y también el punto y coma final de cada declaración que no es necesario.


html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}


Encontré en Internet una forma bastante sencilla de crear barras de progreso sólo con CSS: es un truco bastante viejo pero encontré genial la idea que había detrás. Es demasiado simple pero a la vez ingenioso.

El truco en sí es bastante fácil:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Porcentajes en CSS</title>
  <style type="text/css">
body{font-family:Arial;font-size:12px}
div.box{width:250px;border:1px solid #000;height:17px;margin:2px 0;background:#CCC}
div.bar{height:14px;line-height:11px;color:#FFF;text-align:right;padding:3px 0 0 0}
.bg-one{background:#000}
.bg-ima{background:url(progreso.png)}
  </style>
</head>
<body>
<h2>Porcentajes en CSS (Sin imagen)</h2>
  <div class="box"><div class="bar bg-one" style="width:40%">40%</div></div>
  <div class="box"><div class="bar bg-one" style="width:25%">25%</div></div>
  <div class="box"><div class="bar bg-one" style="width:93%">93%</div></div>
<h2>Porcentajes en CSS (Con imagen)</h2>
  <div class="box"><div class="bar bg-ima" style="width:86%">86%</div></div>
  <div class="box"><div class="bar bg-ima" style="width:3%">3%</div></div>
  <div class="box"><div class="bar bg-ima" style="width:50%">50%</div></div>
</body>
</html>

Lo cual produce esta salida:

Básicamente lo que se hace es declarar un contenedor de un ancho específico. Dentro de este declaramos otro con un ancho en porcentaje, que puede ser establecido fácilmente a través de PHP u otro método. Por último, le doy dos clases (aprovechando herencia y selectores de CSS2.1): la primera establece parámetros básicos y comunes a ambos, la segunda clase es simplemente el color de fondo. Esto se puede obviar si siempre se ocupa el mismo.

De esta manera es posible crear una bonita barra de progreso solamente con CSS.

Demo en vivo? Por supuesto: Demo.

Fue el tip webmasterístico de hoy.

Saludos !!