CSS - Visualizar los cambios CSS sin presionar F5 (actualizar)

   
Vista:
Imágen de perfil de MatiasWeb

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por MatiasWeb (8 intervenciones) el 28/07/2015 20:59:20
Buenas tardes.
resulta que tengo un sitio que está en constante actualización, y los css y divs varían cada tanto, pero resulta que cuando actualizo el sitio al ingresar a la web me toma el formato anterior, o a veces se mezclan css antiguos del caché con los nuevos y el sitio se vé un verdadero desastre. El tema está en que no puedo estar avisando a los usuarios que presionen F5 para actualizar el browser. Existe alguna manera de resolver este asunto?
Aguardo sus respuestas!

Saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por xve (349 intervenciones) el 28/07/2015 21:09:16
Hola Matias, para ello, tienes que poner un numero de versión a la carga de tus archivos... por ejemplo:
1
<link href="/css/css.min.css?1.0" type="text/css" rel="stylesheet">
De esta manera, cada vez que modifiques algún archivo CSS tienes que aumentar el numero de versión y listo.

El navegador, lo interpreta como un archivo diferente, y no utiliza la cache.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Matias

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por Matias (8 intervenciones) el 28/07/2015 22:33:27
xve
muchas gracias por la respuesta, estuve investigando y también encontré otras alternativas, y son las etiquetas:

<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">


aunque tu solución me parece más práctica.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por xve (349 intervenciones) el 29/07/2015 10:27:20
Si, tienes razón, pero no siempre es bueno indicar que no realice cache... ya que si alguien navega con una conexión lenta, como puede ser por un smartphone, lo estas perjudicando. De la otra manera, cada cuando tu quieres, actualizaras la cache.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Matias

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por Matias (8 intervenciones) el 29/07/2015 13:17:33
Si, también pensé esa contra de el método de los meta tags. Definitivamente me quedaré con tu propuesta, otra consulta, es necesario cambiar el nombre del archivo css o con agregar "?1.0" por ej, es suficiente?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por xve (349 intervenciones) el 29/07/2015 15:19:40
Es suficiente con variar el numero... ya que el navegador entiende que es una dirección diferente.

No es el mismo contenido este:
archivo.css?1
que este:
archivo.css?2

Para el navegador son dos archivos diferentes!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Matias

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por Matias (8 intervenciones) el 29/07/2015 20:55:13
Muchas gracias xve, ha sido de gran ayuda tu respuesta.
Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Matias

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por Matias (8 intervenciones) el 29/07/2015 22:39:40
Estimado
quizá me apresuré con mi respuesta, estuve reailzando unas pruebas y la web no me reconoce el css con el "?1.0" , no solo el navegador lo toma como un archivo diferente sinó que también el sitio.
Te comento que estoy desarrollando en xhtml y es posible que este tipo de extensiones no soporte realizar este cambio de versiones de CSS.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por xve (349 intervenciones) el 30/07/2015 08:15:20
Hola Matias, la verdad es que no se porque no te funciona... si revisas el código fuente de esta pagina, veras que también lo utilizan!!!

Nos puedes indicar la url, o mostrar el código para probarlo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Matias

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por Matias (8 intervenciones) el 30/07/2015 12:38:07
Sí, intenté de estas dos maneras:

<h:outputStylesheet library="css" name="estructura.css?1.0"/>

<h:outputStylesheet library="css" name="estructura.css?v=1.0"/>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por xve (349 intervenciones) el 30/07/2015 21:06:31
Esta manera que utilizas, la desconozco por completo... que utilizas algún framework?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Matias

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por Matias (8 intervenciones) el 30/07/2015 21:28:20
Estimado, es JSF sobre Java
creo que encontré la solución, debo probarla

<h:outputStylesheet library="css" name="theme.css" version="1.2"/>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Visualizar los cambios CSS sin presionar F5 (actualizar)

Publicado por xve (349 intervenciones) el 31/07/2015 08:49:19
Ok, ya nos comentaras que tal...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar