Actualizar archivos CSS y JavaScript: Solución completa

Actualizar archivos CSS y JavaScript. Esta acción es necesaria cuando estemos desarrollando un sistema o página web ya que constantemente estamos modificando los estilos CSS y ficheros JavaScript.

Los actuales navegadores para acelerar los procesos de entrega de ficheros suelen almacenarlos en la caché y eso para los desarrolladores suele ser un dolor de cabeza. Por lo tanto, en lo personal me ha pasado que cuando edito un fichero JavaScript y esta enlazado a un fichero HTML deseo verlo en el navegador y me doy cuenta que los cambios no se ejecutan o no se muestran.

Entonces, para darle solución tenía que eliminar el historial y datos del navegador para poder apreciar los cambios.
En este articulo mostrare 3 formas de poder darle solución a este inconveniente.

¿Porque no se actualizan los estilos CSS?

El detalle radica en los navegadores, que para optimizar la carga de la web usan caché de archivos y obvio es muy bueno. Sin emabrgo, para los desarrolladores resulta un problema porque no se actualizar los archivos.

A los desarrolladores de sistema esto suele pasar a menudo. Y para pasar esta barrera se tiene que eliminar los datos de navegación, cookies, caché, y todo para que recién se actualice los estilos que modifique en el CSS o JavaScript.

¿Cuál sería la solución más adecuada?

Si estás desarrollando en el sitio web o sistemas y necesitas refrescar los cambios de CSS y JS sin que se almacenen en caché hay algunas opciones para evitar estos dolores de cabeza.

Actualizar archivos CSS y JavaScript: Tres formas

A) PRIMERA FORMA: Eliminar caché

Solución en HTML5

Dentro de la etiqueta HEAD puedes aplicar estos metas para eliminar la caché. Puedes agregar el siguiente código.

<head>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
</head>

En PHP la solución es:

Si tu aplicación o sistema que estas desarrollando está corriendo con php puedes utilizar lo siguiente:

<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 1 Jul 2000 05:00:00 GMT"); // Fecha en el pasado
?>

Ya tenemos la solución, el sistema te funcionará si estás editando los estilos o scripts y podrás ver resultados al momento y de manera real.

B) SEGUNDA FORMA: Usando función RAND

Otra solución quizá la más acertada es generar versiones de los estilos CSS o JavaScript utilizando «?12345» al final de la extensión del archivo. Sin embargo, generamos un número random en php y lo asignamos al fichero:

<link rel="stylesheet" href="/css/style.css?v=<?php echo(rand(1,500)); ?>" />
<script src="/js/script.js?v=<?php echo(rand(1,500)); ?>"></script>

C) TERCERA FORMA: Fecha en formato Unix

Hay esta opción más para corregir este error y seria agregar la fecha en formato Unix, después de la ruta del archivo, así:

<link rel="stylesheet" href="/css/estlos.css?v=<?php echo time(); ?>" />
<script src="/js/funciones.js?v=<?php echo time(); ?>"></script>

Con esta opción evitas que si se repite (casualmente) un número generado aleatoriamente con la función RAND, no cargaras una versión almacenada en la caché del navegador. Por lo tanto, la función time() no se repite porque trabaja con la fecha actual.

Actualizar archivos CSS y JavaScript Solución completa
Actualizar archivos CSS y JavaScript Solución completa

CONCLUSIÓN DEL ARTICULO

En este articulo hemos aprendido a dar solución a los problemas de la actualización de archivos JavaScript y CSS. este inconveniente suele presentarse en el desarrollo de un sistema o página web.

Además, hemos aplicado 3 formas para darle solución: en HTML5, PHP Rand, PHP Fecha Unix.
Si aplicamos correctamente cualquiera de las tres opciones ya no tendremos el problema de que no se actualiza los archivos JavaScript y CSS.

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

5 formar de validar checkbox

5 formar de validar checkbox

5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario. Aquí debéis fijaros que…

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por…

Enviar formulario usando checkbox

Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto,…

Limpiar Select2 jQuery

Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por…

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP. La mayoría de sistemas web o de escritorio trabajan con importación de registros hacia la base de datos para optimizar…

Esta entrada tiene un comentario

  1. OOOOhhhhh desconocía que se podía hacer esto, y además es REALMENTE UTIL ya que siempre estoy borrando la cache del navegador para poder visualizar cambios en CSS y Javascript, muy buen aporte!!!!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *