Durante este año y varias veces ha habido un pequeño bug CSS que hace que los que mantenemos aplicaciones para Facebook (y no es un trabajo a tiempo completo) nos tiremos de los pelos.
Y es que al cargar nuestra aplicación, los estilos css no funcionan, no cargan, y si cargamos el archivo de Facebook del tipo:
http://external.ak.fbcdn.net/fbml_static_get.php?src=http%3A%2F%2Fmiurl.com%2Faplicacion%2Fcss%2Ffilo.css%3F_fb_q%3D1&appid=107083291268&pv=1&sig=5ee8229e4afbee29836224de876dfa&filetype=css
nos devolverá un precioso mensaje que dice:
Parámetro no válido: Error desconocido
Lo mejor es que el mensaje está traducido al español, por lo que al principio podemos sospechar que falla nuestra aplicación y luego cuando buscamos el error lo tenemos más difícil, aunque podemos buscar lo siguiente (aparece también en inglés, según nuestra localizacion):
Invalid parameter: Unknown error
El bug aún está abierto (a día 17 de Abril de 2010): podéis consultar el estado actualizado aquí.
Pero mientras investigaba el bug, encontré un pequeño fragmento de código interesante (y podemos utilizarlo como solución temporal al problema):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| function minify ( $css ) {
$css = preg_replace( '#\s+#', ' ', $css );
$css = preg_replace( '#/\*.*?\*/#s', '', $css );
$css = str_replace( '; ', ';', $css );
$css = str_replace( ': ', ':', $css );
$css = str_replace( ' {', '{', $css );
$css = str_replace( '{ ', '{', $css );
$css = str_replace( ', ', ',', $css );
$css = str_replace( '} ', '}', $css );
$css = str_replace( ';}', '}', $css );
return trim( $css );
}
function includeStyleCSS ($filename)
{
// due to: http://bugs.developers.facebook.com/show_bug.cgi?id=9053
// We either must print the stylesheet inline
// or include it with a link tag that does not include rel="stylesheet".
// Fixed 3/6/2010
// Broken 4/13/2010:http://bugs.developers.facebook.com/show_bug.cgi?id=9601
// use this block when linked CSS is broken
echo "<style type=\"text/css\">";
$content = @file_get_contents($filename);
echo minify ( $content );
echo "</style>";
// use this block when linked CSS is working
// echo "<link rel=\"stylesheet\" href=\"http://MYSERVER.COM/$filename\" type=\"text/css\" />\n";
} |
He dejado el fragmento de código original, pero podemos verlo atentamente y analizar lo que hace:
- Dentro de minify(), el primer regexp_replace elimina cuando hay más de un espacio seguido; el segundo, elimina los comentarios. Los str_replace que le siguen, sirven para eliminar espacios sobrantes cerca de caracteres de inicio y fin, y separación.
- includeStyleCss() introduce dentro de nuestro archivo resultante el CSS del archivo (más o menos reducido por minify()).
Hay que destacar que es una medida provisional, pero es interesante incluir este código en nuestras aplicaciones porque Facebook es reincidente en este fallo y no descartamos que vuelva a ocurrir.
Pero bueno, como yo no me puedo quedar quieto, vamos a intentar mejorar este código (propuesto en la discusión del bug por Ed Holzwarth, aunque he podido encontrar algún fragmento de minify por la red.
La modificación de este código viene de un poquito de investigación por otras webs:
1
2
3
4
5
6
7
8
9
10
11
12
13
| function minify($css)
{
// Quitamos comentarios
$css = preg_replace('#/\*.*?\*/#s', '', $css);
// Quitamos espacios en blanco cerca de {}|:;,
$css = preg_replace('/\s*([{}|:;,])\s+/', '$1', $css);
// Quitamos espacio en blanco al inicio
$css = preg_replace('/\s\s+(.*)/', '$1', $css);
// Quitamos ; innecesarios
$css = str_replace(';}', '}', $css);
return $css;
} |
Por cierto, sería interesante aplicar este minificador al script de cache y compresión de ficheros CSS. que publiqué hace un tiempo.
Facebook es la red de moda, y si queremos promocionar nuestra web o nuestros servicios, éste es un buen punto de partida. Por otra parte, puede ser que usuarios de Facebook enlacen a nuestra web o nuestro blog y para tener nuevos visitantes queremos hacer nuestro link atractivo: poner una imagen y una descripción es muy interesante. (En la imagen, tenemos el contraejemplo (un link poco atractivo para nuevos visitantes).
Últimos comentarios