Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Javascript que contiene a Javascript: Actualización automática de CSS

Datos de búsqueda

Javascript: Actualización automática de CSS

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);
});

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Hay un comentario a “Javascript: Actualización automática de CSS”

ivan dice:

Fecha de comentario: 2012/11/10 13:32

Un aporte muy útil. Yo uso para eso otro pequeño script CSSRefresh, que vigila los cambios de nuestros CSS “refrescando” la página cuando los detecta.

Información del sitio