When we are developing new sites or testing changes in new ones that involve css after the new code is committed and someone goes to check the changes they always see a cached version of the old css. This is causing a lot of problems in testing because people never are sure if they have the latest css on screen (I know shift and clicking refresh clears this cache but I can't expect end users to know to do this). What are my possible solutions?
Add a comment
|
4 Answers
If you're serving your CSS from static files (or anything that the query string doesn't matter for), try varying that to ensure that the browser makes a fresh request, as it will think that it's pulling a completley different resource, so have for example:
"styles.css?token=1234" in the CSS reference in your markup and change the value of "token" on each CSS check-in
7 Comments
Greg
I already use a static method to add css to pages so I added a timestamp of the build to the querystring works great thanks.
Karlth
Although this solution will work it is totally unpractical for large websites that might have hundreds of references to .css and .js files.
Rob
@user357320, I refer you to lines 21 and 22 of this very page which is by some definitions a "large website". Luckily it's a well structured & designed website so doesn't have hundreds of references to contend with.
user3285954
@Karlth Any website, especially a large one should use css and js bundling, and most libraries have the timestamp/version/hash generated into url, so one shouldn't have to modify hundreds of css links.
Karlth
@user3285954 "Any website should" is easier said than implemented!
|
In your development environment, set the Expires header much lower. In your Production environment, set it higher, and then set it low about a week before you do your release.
Comments
Its not a great solution, but I've gotten around this before at the page level by adding a querystring to the end of the call to the CSS file:
<link href="/css/global.css?id=3939" type="text/css" rel="stylesheet" />
Then I'd randomize the id value so that it always loads a different value on page load. Then I'd take this code out before pushing to production. I suppose you could also pull the value from a config file, so that it only has to be loaded once per commit.
Comments
Similar (a bit more detail) answers given for the JavaScript version of this question, which has the same problem/solution
