asp.net - net - ¿Puedo forzar una actualización de mi archivo de hojas de estilo?

aplicar estilos css a controles de asp net (12)

¿Mantienes tu navegador abierto entre tus cambios? A menudo, simplemente cerrando todas las ventanas del navegador entre realizar cambios en su archivo CSS le indicará al navegador que descargue una nueva copia.

Acabo de pasar medio día tranquilamente volviéndome loca.

Estoy realizando cambios en mis clases en el archivo Site.css y no se reflejaron en el sitio que se está desarrollando en mi máquina. Debido a que estoy aprendiendo a través de jQuery y jugando con addClass y removeClass y estoy creando los parámetros para esas llamadas dinámicamente, estaba seguro de que el problema estaba en mi implementación.

Resulta que el archivo CSS estaba guardado en caché en el navegador y todo lo que tenía que hacer era actualizarlo ...

¿Hay alguna forma de forzar una actualización (preferiblemente solo durante la depuración, supongo)?

Este es un problema clásico. Tienes muchas soluciones disponibles:

Probablemente, la forma más sencilla es configurar su servidor web para que los archivos CSS del servidor se almacenen de forma inmediata o caduquen de forma inmediata. Obviamente, no querrías esto en un entorno de producción. Con IIS, esto es muy fácil de hacer.
Agregue un valor aleatorio al nombre del archivo que está incluyendo, por ejemplo, Site.css? V = 12. Esto es lo que SO hace por sus incluye. Hago esto de forma interna para que en la máquina de desarrollo, el parámetro cambie cada vez (un guid) se sirva el archivo, pero cuando se implementa utiliza el número de versión svn. Un poco más complicado pero más robusto.
Muchos, muchos más estoy seguro.

La forma más fácil es deshabilitar el almacenamiento en caché en su navegador. Si no puedes o no quieres hacer esto, puedes presionar ctrl + f5.

Su servidor o aplicación asp también puede estar almacenando en caché. Puede deshabilitar esto en web.config o puede reiniciar el servidor de desarrollo para asegurarse de que la versión más reciente de su archivo se muestre al usuario.

Mi enfoque es utilizar el método de "cambio de cadena de consulta" para evitar los cachés (incluso en los servidores de navegador y proxy). Ya que estoy usando Master Pages, mantengo el enlace a CSS como de costumbre pero agregando una ID (nombrada aquí como cssStyleSheet):

<head runat="server"> <link id="cssStyleSheet" href="~/Styles/Default.css" rel="stylesheet" type="text/css" />

Luego, en el código detrás, implementé en Page_Cargar esta línea de código, agregando una cadena de preguntas como "? T = 5343423424234".

Protected Sub Page_Load(…) If IsNothing(Application("CSSTicks")) = True Then Application("CSSTicks") = DateTime.Now.Ticks End If cssStyleSheet.Attributes("href") = cssStyleSheet.Attributes("href") & "?t=" & Application("CSSTicks") End Sub

¿Porqué es eso? En el código HTML, algún diseñador podría cambiar el archivo CSS de la manera más fácil, sin interferir en algún código "difícil". Al usar una variable de aplicación, evito gastar el ancho de banda de mis servidores y también desde la perspectiva del cliente (como usar móviles).

Si se implementa una nueva aplicación, la variable de la aplicación se restablece automáticamente y una versión "nueva" de CSS si se descarga en el navegador (incluso a través de servidores proxy).

No estoy seguro de todos los navegadores, pero en IE8 puedes usar las herramientas de desarrollador ...

Ir:

Herramientas -> Herramientas de desarrollo (F12)

Luego (mientras está en su página) dentro de las Herramientas del desarrollador:

Caché -> Actualizar siempre desde el servidor

Para ASP.NET, el código subyacente (puede poner esto en una clase de utilidad o página maestra):

public static string GetTimestampedUrl(string virtualPath) { var realPath = HostingEnvironment.MapPath(virtualPath); var file = new FileInfo(realPath); return VirtualPathUtility.ToAbsolute(virtualPath) + "?" + file.LastWriteTime.ToFileTime(); }

Y luego en tu página:

<link href="<%= GetTimestampedUrl("~/screen.css") %>" rel="stylesheet" type="text/css" media="screen" />

Para fomentar la respuesta de Ian Kemp, que utiliza el LastWriteTime de la hoja de estilo en cuestión, escribí un ayudante de MVC para generar la etiqueta <link> con el parámetro de almacenamiento en memoria caché integrado.

El código

public static class CssLinkHelper { public static IHtmlString StyleSheet(this HtmlHelper helper, string stylesheetname) { // define the virtual path to the css file (see note below) var virtualpath = "~/" + stylesheetname; // get the real path to the css file var realpath = HostingEnvironment.MapPath(virtualpath); // get the file info of the css file var fileinfo = new FileInfo(realpath); // create a full (virtual) path to the css file including a cache busting parameter (e.g. /main.css?12345678) var outputpath = VirtualPathUtility.ToAbsolute(virtualpath) + "?" + fileinfo.LastWriteTime.ToFileTime(); // define the link tag for the style sheet var tagdefinition = string.Format("<link rel=/"stylesheet/" type=/"text/css/" href=/"{0}/" />", outputpath); // return html string of the tag return new HtmlString(tagdefinition); } }

Uso

@Html.StyleSheet("main.css")

Salida

<link rel="stylesheet" type="text/css" href="/main.css?131393346850223541" />

Nota

En caso de que se esté preguntando acerca de la var virtualpath = "/~" + ... parte y pensamiento, ¿por qué no pasarla como "~/main.css" ? He implementado esta función de esta manera porque todos mis archivos css están en una carpeta común (/ asset) y el ayudante prefijará mi salida con el nombre de la carpeta común, es decir, /assets/main.css?131393346850223541

Para usuarios de Wordpress, a continuación se muestra el código.

<link rel="stylesheet" href="<?php echo get_bloginfo(''stylesheet_url'')."?d=".date( ''Ymd'', time()); ?>" type="text/css" media="screen" />

O mejor uno

<link rel="stylesheet" href="<?php bloginfo(''stylesheet_url''); echo ''?'' . filemtime( get_stylesheet_directory() . ''/style.css''); ?>" type="text/css" media="screen, projection" />

¡Aclamaciones!

Presione CTRL + F5 para actualizar todo su contenido en la página web, incluidos los scripts y las hojas de estilo.

Además, puede incorporar las hojas de estilo que se servirán desde una página de servidor dinámico [php / asp.net] y Response.Expires = -1, lo que obligará al cliente a cargar el css en cada solicitud HTTP-GET explícitamente. También puede hacer esto en la configuración de su servidor web para los tipos de mime CSS.

Un truco es agregar un parámetro QueryString en el enlace a su hoja de estilo

Que hace ''?'' hacer en un enlace css?

Yo uso este truco:

<link rel="stylesheet" type="text/css" href="cssfile.css?t=<%= DateTime.Now.Ticks %>" media="screen" />

Una forma popular de "romper el caché" es agregar un parámetro a su fuente css. Normalmente se utiliza una marca de tiempo. Prefiero la hora de "última modificación del archivo", es decir. filemtime() en PHP. Estoy seguro de que hay una función asp.net que le daría eso.

Entonces tu etiqueta CSS se convierte en:

<link rel="stylesheet" type="text/css" media="screen" href="/main.css?123456789"/>

con el parámetro de consulta cambiando cada vez que se actualiza el archivo CSS.