Al maquetar puede resultar engorroso el andar ajustando un pequeño detalle en CSS y tener que actualizar la página cada vez que se cambia.

He montado un Javascript simple para hacer más fácil la tarea del maquetador. Consiste en recargar la CSS en un intervalo de tiempo (en el ejemplo será 1 segundo) sin recargar la página, de modo que cuando se guarde la CSS se vean los cambios en el navegador casi de inmediato.

He preparado dos versiones, una con Jquery y otra con Prototype.

Versión Jquery

function actualizaCssJquery () {
	jQuery('link[type="text/css"]').each(function () {
		var url = jQuery(this).attr('href').split('?')[0];
		var tiempo = new Date().getTime();
		jQuery(this).attr('href',url+'?tiempo='+tiempo);
	});
}

Notar que se añade un parámetro a la URL de la CSS, de modo que la URL sea siempre distinta: esto es para que el navegador no utilice la CSS que tiene en cache.

Y la inicialización:

jQuery.noConflict();
jQuery(document).ready(function () {
	setInterval(actualizaCssJquery, 1000);
});

Versión Prototype

function actualizaCssPrototype () {
	$$('link[type="text/css"]').each(function (el) {
		var url = el.readAttribute('href').split('?')[0];
		var tiempo = new Date().getTime();
		Element.writeAttribute(el,'href',url+'?tiempo='+tiempo);
		console.log(url+'?tiempo='+tiempo);
	});
}

Y la inicialización:

document.observe("dom:loaded", function() {
	setInterval(actualizaCssPrototype, 1000);
});