Can I force a refresh of my stylesheet file?

Question

I have just spent half a day quietly going mad.

I'm making changes to my classes in the Site.css file and they were not being reflected in the site being developed on my machine. Because I'm learning my way through jQuery and playing with addClass and removeClass and I'm creating the parameters for those calls dynamically, I was sure the problem was in my implementation.

Turns out the CSS file was cached in the browser and all I had to do was refresh it...

Is there a way to force a refresh (preferably only during debug I guess)?

Answer 1

Press CTRL+F5 to hard-refresh everything on your webpage including scripts and stylesheets.

Additionally, you can incorporate the stylesheets to be served from a dynamic server page [php/asp.net] and the Response.Expires = -1 which will force the client to load the css on every HTTP-GET request explicitly. You can also do this in your webserver settings for CSS mime types.

Answer 2

Are you keeping your browser open between your changes? Often simply closing all browser windows between making changes to your CSS file will tell the browser to download a new copy.

Answer 3

I'm not sure about all browsers, but in IE8 you can use the developer tools...

Go To:

Tools -> Developer Tools (F12)

Then (while on your page) inside the Developer Tools:

Cache -> Always Refresh From Server

Answer 4

A popular way of "cache-breaking" is to append a parameter to your css source. Typically a timestamp is used. I prefer the "file last modified" time, ie. filemtime() in PHP. I'm sure there's an asp.net function that would give you that.

Then your CSS tag becomes:

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

with the query parameter changing whenever the CSS file is updated.

Answer 5

I use this trick:

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

Answer 6

One trick is to add a QueryString parameter in the link to your stylesheet

http://stackoverflow.com/questions/438821/what-does-do-in-a-css-link/438828#438828

Answer 7

This is a classic problem. You have a lot of solutions available:

1. Probably the easiest way is to configure your webserver to server CSS files as never-cache/expire immediately. Obviously you wouldn't want this on a production environment. With IIS, this is very easy to do.
2. Add a random value to the name of the file you're including, e.g. Site.css?v=12. This is what SO does for their includes. I do this in house so that on the development machine, the parameter changes each time (a guid) the file is served, but when deployed it uses the svn version number. A little trickier but more robust.
3. Many, many more I'm sure

Answer 8

The easiest way is to disable caching in your browser. If you can't or don't want to do this, you can press ctrl+f5.

Your server or asp application might be caching, too. You can disable this in the web.config or you can restart the development server to make sure the latest version of your file is shown to the user.