Archivo

Archivo para la categoría ‘CSS’

Evitar cache de ficheros CSS y JS

Martes, 4 de mayo de 2010 Sin comentarios

Uno de los problemas habituales que tenemos los desarrolladores, es evitar las caches de los navegadores. Frecuentemente este es un problema al inicio y no después cuando el proyecto ya es estable.

Ahora voy a exponer el último método que he hecho servidor para evitar la cache de ficheros CSS y JS. Se trata de combinar PHP con el mod_rewrite del Apache.

Primero que nada, crearemos una función que nos devuelva el nombre (con anticache) del fichero.


function getAntiCache($file){

  $firma = '';

  $info = pathinfo($file);

  if (file_exists(DIR_FS_CATALOG.$file)){

    $firma = md5_file(DIR_FS_CATALOG.$file);

  }else{

    $firma = md5(rand(10000,99999));

  }

  return $info['dirname'].'/'.$info['filename'].'-'.$firma.'.'.$info['extension'];

}

echo getAntiCache('/recursos/css/www.css');
// Sacara por pantalla /recursos/css/www-{md5_file}.css

Como vemos en el nombre del fichero se incluye la firma en MD5 del fichero, por lo que cada vez que se cambie el contenido del fichero, la firma MD5 cambiará y el nombre del fichero cambiará. Aunque en realidad el nombre del fichero sea siempre el mismo.

Esto lo haremos de puertas hacia fuera con el mod_rewrite del Apache, el recibirá una petición por un fichero que no existe y la transformará a un fichero que si que existe, xq nosotros lo configuraremos así.

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^recursos/css/(.*)-(.*).css$ /recursos/css/$1.css?cache=$2 [s=100,QSA]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^recursos/js/(.*)-(.*).js$ /recursos/js/$1.js?cache=$2 [s=100,QSA]

Con esto vemos que los clientes nos realizaran peticiones del tipo /recursos/css/web-123ab123eHq132321.css pero que en realiadad van al fichero /recursos/css/web.css de esta forma como obligamos a que el nombre del fichero cambia, no hay cache posible por parte del navegador para este tipo de ficheros.

Espero que este método os sirva de ayuda igual que me ha servido a mi.

Categories: CSS, PHP Tags: , , , , ,

LI extra space (espacio extra) en IE

Viernes, 27 de noviembre de 2009 2 comentarios
Extra LI Space

Extra LI Space IE BUG

Uno de los últimos problemas que me he encontrado en temas de CSS es a la hora de hacer un menú, el espacio extra que Internet Explorer (IE)mete bajo de cada elemento LI. Sería algo como la imagen que tenemos a la derecha.

Esto se produce por un bug conocido de IE.

Después de buscar y buscar teóricas soluciones y algunas funcionar y otros muchas no. Aquí hos dejo las dos soluciones que a mi me han servido.

Una es buena y otra también me ha funcionado pero consiste en añadir un borde al elemento LI, lo que puede ser que no deseemos.

Aquí os pongo el código de ejemplo:

<html>
<head>
<title>Extra LI space IE</title>
<style>
ul {
list-style:none;
list-style-type:none;
padding:0;
margin:0;
width:20%;
}
ul li {
background-color:#ccc;
border-bottom:1px solid #d8d8d8; /* TAMBIÉN FUNCIONA, PERO METE BORDE */
vertical-align:bottom; /* SOLUCION QUE FUNCIONA */
}
ul li a {
display:block; /* ESTE ES EL CAUSANTE DEL PROBLEMA */
}
ul li a:hover {
background-color:#333;
color:#fff;
}
ul, ol, li {list-style-position: outside; list-style: none;}

</style>
</head>
<body>
<ul>
<li><a href=”#”>Item</a></li>
<li><a href=”#”>Item</a></li>
<li><a href=”#”>Item</a></li>
<li><a href=”#”>Item</a></li>
<li><a href=”#”>Item</a></li>
<li><a href=”#”>Item</a></li>
</ul>
</body>
</html>

Categories: CSS Tags: , , , , , , ,

cellpadding y cellspacing en CSS

Miércoles, 25 de noviembre de 2009 Sin comentarios

Vamos a ver una de las últimas cosas que me ha hecho falta hacer, y es el como sustituir la típica línea donde ponemos el valor de las propiedades cellpadding y cellspacing:

<table cellpadding=”0″ cellspacing=”0″>

Bueno, pues esto lo podemos hacer desde dentro de nuestro código CSS mediante la siguiente la expresión border-collapse con el valor collapse:

border-collapse:collapse;

Con esto tendremos nuestra tabla sin estos típicos espacios tan molestos.