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?
Asked
Active
Viewed 1.4k times
4 Answers
9
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
Rob
- 45,296
- 24
- 122
- 150
-
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. – Greg Sep 22 '08 at 21:48
-
Although this solution will work it is totally unpractical for large websites that might have hundreds of references to .css and .js files. – Karlth Nov 25 '13 at 21:21
-
@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. – Rob Nov 25 '13 at 21:41
-
@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. – user3285954 Nov 22 '16 at 15:59
-
@user3285954 "Any website should" is easier said than implemented! – Karlth Nov 22 '16 at 23:52
-
@Karlth If one is using a framework then is usually just switching a flag, can even be done per environment, e.g. no bundling and minification for developers but both for everyone else. And one should not build a large website without using frameworks. And in practice even tiny websites can use frameworks and often do. – user3285954 Nov 24 '16 at 15:20
-
@user3285954 We don't use any 3rd party frameworks, only support libraries. I personally wouldn't recommend using Javascript/CSS frameworks. Opinions differ though of course! – Karlth Nov 24 '16 at 16:30
5
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.
Tom Ritter
- 99,986
- 30
- 138
- 174
2
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.
Michael Cox
- 1,281
- 13
- 15
2
Similar (a bit more detail) answers given for the JavaScript version of this question, which has the same problem/solution
Community
- 1
- 1
Paul Rowland
- 8,244
- 12
- 55
- 76