Una de las cosas que más a bombo y platillo se nos ha intentado meter en la cabeza en los últimos tiempos es que era mejor usar los CSS Sprites que no un montón de imágenes. Y es cierto, es mejor lo primero que lo segundo… ¿pero es lo óptimo? No.

En alguna ocasión he hablado ligeramente sobre las peticiones HTTP y lo que afectan en cuanto a la velocidad de carga de un sitio; una de esas cosas que comenté en su momento fue la de usar los Data URI. Y es que el uso de los CSS Sprites está muy bien si hablamos de navegadores como Internet Explorer 6 o 7, pero desde que tenemos los Internet Explorer 8, Firefox 3 u Opera 9 podemos ir a por un nivel más.

Hoy en día es mucho más óptimo reducir el número de peticiones que no el hecho del tamaño de los elementos en sí. la velocidad de conexión media ha aumentado de tal forma que no es un problema que los ficheros ocupen mucho, sino que haya muchos ficheros distintos, y esto es lo que consiguen los Data URI. Este método básicamente permite insertar imágenes directamente en el código de ficheros CSS y HTML codificando los elementos en Base64.

Teniendo en cuenta los navegadores que dan soporte a los Data URI, tenemos una buena forma de actuar:

• Firefox 2+
• Opera 7.2+ (no más de 4.100 caracteres)
• Chrome
• Safari
• Internet Explorer 8+ (menor de 32 KB)

¿Y cómo es un Data URI? Pues algo tans encillo como esto:

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge
8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h
LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g
77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

Este elemento, convertido en un CSS podría ser algo tal que así:

.icono {
  background: url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS
  /7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AA
  ARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguW
  w6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7) no-repeat;
}

Para aquellos que quieran automatizarlo, existen una opción en PHP que lo hace… algo tal que así:

<?php
echo base64_encode(file_get_contents("icono.gif"));
?>

Y ya tenemos más optimizadas las peticiones HTTP de nuestro sitio… menos peticiones, mayor velocidad (sobre todo teniendo en cuenta que los CSS se cachean si se organizan bien y se reducen también las peticiones para verificar imágenes actualizadas).

En muchas ocasiones nos encontramos que necesitamos aplicar algún tipo de estilo específico a Internet Explorer 6 o 7, que son los navegadores que menos funcionalidades CSS soportan pero que aún tienen una cantidad elevada de usuarios.

En estos casos, y debido a algunos errores en el funcionamiento del navegador, tenemos la posibilidad de ejecutar un pequeño hack que no afecta al resto.

El sistema es sencillo. Internet Explorer tiene un fallo y es que los atributos de los CSS permiten los símbolos “*” y “_” delante. Tomando de ejemplo este código a continuación, podemos ver algunos detalles:

.fondo {
  background: Green; /* Todos los navegadores */
  *background: Yellow; /* Sólo Explorer 6 y 7 */
  _background: Red; /* Sólo Explorer 6 */
}

¿Qué significaría esto? Pues que, todos los navegadores excepto Internet Explorer sólo leerían la primera línea, que es la única correcta. En el caso de Internet Explorer 8, también sólo leería la primera (las otras dos ya no, porque son erróneas). En el caso de Internet Explorer 7, como lee en orden y prima la última cosa correcta, de las 3 líneas leería hasta la segunda, porque el 7 no entiende la tercera, claro está.

En el caso de Explorer 6 es bastante similar… va leyendo en orden, y como entiende las 3 líneas, se queda con la tercera “porque es la última”… De esta forma, si queremos jugar con algunos pequeños hacks para Internet Explorer 6, 7 y 8 podemos hacerlo mediante este curioso sistema (gracias a los fallos que llevan las versiones anteriores)…

Una de las cosas por las que no solemos preocuparnos mucho es por los CSS. Solemos hacer un CSS más o menos bien formado, pero a partir de ahí nos limitamos a subirlo al servidor y poco más. Pero… si os digo que se puede ahorrar hasta un 25% en un CSS, ¿no sería interesante aplicarlo?

La idea es que los CSS, al ser un elemento de los que se han de cargar antes que “se pinte” el HTML interesa que sea rápido en descargar. Además, es un elemento que suele estar en todas las páginas, y aunque el navegador suele cachearlo, vale la pena que ocupe poco…

Una de las herramientas que podemos implementar directamente en nuestro servidor es el CSSTidy, que tiene unas opciones para PHP bastante sencillas.

El ejemplo básico podría ser este:

<?php
include('class.csstidy.php');
$css_code = "a {
  color:black;
  background-color:blue;
}";
$css = new csstidy();
$css->set_cfg('remove_last_;',TRUE);
$css->parse($css_code);
echo $css->print->formatted();
?>

Un ejemplo no tan básico podría ser este:

<?php
$css_code = file_get_contents("http://www.example.com/estilo.css");
include("class.csstidy.php");
$css = new csstidy();
$css->set_cfg("preserve_css",true);
$css->load_template('high_compression');
$css->parse($css_code);
$min = $css->print->plain();
?>

Las opciones que yo dejaría son (aunque puede que se pueda mejorar con alguna otra combinación):

• remove_bslash = true;
• compress_colors = true;
• compress_font-weight = true;
• lowercase_s = true;
• optimise_shorthands = 0;
• remove_last_; = true;
• case_properties = 0;
• sort_properties = true;
• sort_selectors = true;
• merge_selectors = 1;
• discard_invalid_properties = true;
• css_level = ‘CSS2.1′;
• preserve_css = true;
• timestamp = false;

En fin, una interesante herramienta que podemos ver en acción directamente en CSS Compressor, que es la herramienta que habitualmente utilizo yo.