CSS changes not reflecting on site.

Question

Whenever we make changes to the CSS, it generally takes 24 hours to reflect those changes on my site. I have tried clearing the server cache and browser cache but it doesn't help too. Is there any other way to make the CSS changes reflect immediately after updation?

it happens in all the browsers... when i check it in the browser , i can access my css file with two paths eg : i store my css in folder named "Cssfolder" and my css name is say 135.css So when i access the folder paths, Cssfolder/135.css & cssfolder/135.css, one of the path shows me latest css whereas other one shows me old css.Notice the "c" is captital in one path whereas small in other path.

Thanks.

Answer 1

You really need to see whether this is server side or client side. If the server is still serving the old CSS then clearly you've got no chance on the client side.

I've occasionally seen times where I've had to show the CSS in the browser, and then next time I've been to the real page, it's used that new CSS. Usually just hitting refresh does it.

Do you have any web caches like Akamai involved anywhere?

If you try to go to the CSS page from a computer which has never seen the old version, which version does it show?

EDIT: Changed answer to reflect edits in question.

Answer 2

I've found this to be a pretty common problem in a lot of my projects. I would suggest two things...

1. If it's just an app that you are working on you can use the CSS Cachebuster during development.

2. Following the idea behind the Cachebuster I have found that often adding the timestamp of the CSS file as a query string off of the CSS link will help in telling the browser that the file is different... something like... whatever.css?12212009035543

Answer 3

Maybe Internet Service Provider cache, as in this case?

Answer 4

When I am developing and I need to be sure that I am seeing changes as I work, I stick the css in the page ie

<style type="text/css">
/* your css */
</style>

Or you could constantly change the name of the css file itself, not very useful in a production environment, but perhaps okay while developing.

I know it doesn't solve the problem, but for developing it is okay.

Answer 5

You might want to use a monitoring tool, like Live Http Headers for Firefox, to see the requests and responses to and from the server. This usually solves a lot of problems for me. Take a look at the "Expire" headers and conditional requests (like: "If-modified-since"). This said, take a look at server and client local times and timezones - it might be that they differ significantly and conditional GET requests "seem to be" handled correctly, because of future or otherwise mangled timestamps.

You can force to load the current css directly from the server with appending a random unique value to the url, like http://example.com/Cssfolder/135.css?983274928374 and http://example.com/cssfolder/134.css?08973249827. There's no way that this would ever get cached unless you use the same random value twice.

This way you learn where to look further for the solution to your problem: At the server, the ISP/a proxy or your browser.

Answer 6

I have been dealing with this issue in the past, and ended up writing a httpmodule to deal with it.

It's pretty simple, it just finds all script/css links in head tag (they now need to have runat=server) and appends the assembly version number to the link, in the same way as Tim K describes. This way im sure my clients always fetches the newest css/scripts when my app is updated in production, and never have to deal with this issue again.

Answer 7

stackoverflow.com: what is an elegant way to force browsers to reload cached css/js files?

Answer 8

I've written a blog post about how we overcame this problem here:

Avoiding JavaScript and CSS Stylesheet Caching Problems in ASP.NET

Basically, during development you can add a random number to a query string after the filename of your CSS file. When you do a release build, the code switches to using your assembly's revision number instead. This means that in your production environment, your clients can cache the stylesheet, but whenever you release a new version of the site they'll be forced to re-load the file.