0

Issue: If I change my css stylesheet, web browsers use a cached stylesheet from a prior visit. Users don't typically refresh, so the changes aren't applied. Furthermore, if I update a background graphic image (such as a .gif) and upload that image, the user's web browser pulls that image of the same name from cache, even though it's a new image. I have been able to use ?ver=1.0 and the like at the end of every image name on the css stylesheet, as well as in the header of some pages...however, it's not prudent to change the header of 100s of web pages every time I update the sheet. I can understand changing the sheet for each image (only one sheet), but not every web page. Is there any way I can force a users web browser to recognize these changes across the entire website, so the new graphics and updates are loaded. (If I only change the header on one page, then as soon as a user goes to a different page, the cache pulls the old css. Also note, I can't have the same header on every page, as there's so much diversity on the site.) Any help would be much appreciated!

(Or, do browsers eventually notice the changes? Over what period of time?)

Update after comment below:

Called host...apparently I can do this with an htaccess at the top level of the domain...? Need to see...

Michael
  • 45
  • 7
  • You can control this by setting the caching headers via your web server. Exactly how you do this depends on your server software. – Pointy Nov 20 '14 at 01:10
  • Interesting...looking at this now... – Michael Nov 20 '14 at 01:17
  • Called host...apparently I can do this with an htaccess at the top level of the domain...? Need to see... – Michael Nov 20 '14 at 01:21
  • I don't know that you can do it with an htaccess file; in my experience it's usually something in the server configuration that tells it how to set HTTP response headers for different file types. The things you want to set are some selection/combination of "Expires", "Cache-Control", "If-Modified-Since", and maybe others. – Pointy Nov 20 '14 at 01:24

2 Answers2

0

You could add a query string with an incremental number, ie. href="style.css?ver1.123" Have a look at csstutorial.net/2013/07/how-can-you-be-sure-the-latest-css-stylesheet-is-loaded-by-the-browser/

Billy
  • 2,448
  • 1
  • 10
  • 13
  • Yes, but then, wouldn't I have to do this across all web pages on the site? – Michael Nov 20 '14 at 01:15
  • Right, so this works, but one page at a time...hoping I wouldn't have to manually update every page... – Michael Nov 20 '14 at 01:16
  • 2
    I should delete this answer as I didn't read the question properly and now see that this is actually in the question and will probably get me down voted, But I'm gonna leave it here for 2 reasons, 1) to stop someone else posting the exact same thing 2) To warn people of the dangers of Alcohol. – Billy Nov 20 '14 at 01:20
  • Haha... Feel free to delete...or if you need me to do it, let me know. It does work...it's just the multi-page issue. And then again, for certain pages (solo pages) it is the solution. – Michael Nov 20 '14 at 01:23
  • do all pages on your site have something in common, ie a header file, menu file ? what are they ? plain html or php – Billy Nov 20 '14 at 01:26
  • Some of the head is the same, but again, would have to recode them all... html, php, etc... – Michael Nov 20 '14 at 01:31
  • if there is just one part that is the same in all pages then add a script or echo out something to append a link in the page to a stylesheet with the ?v=1.123 on the end and violla – Billy Nov 20 '14 at 01:36
  • [SO Add stylesheet to Head using javascript in body](http://stackoverflow.com/questions/11833759/add-stylesheet-to-head-using-javascript-in-body) or here [SO What is an elegant way to force browsers to reload cached CSS/JS files?](http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files) – Billy Nov 20 '14 at 01:39
  • Ahh....I like the stylesheet to the head...assuming I don't have to remove the stylesheet already listed in every head. I wonder if having two of the same links, but one with ?ver=1.123 would default to the new one? Hmmm... – Michael Nov 20 '14 at 01:47
  • yes, if 2 rules apply to the same element then the 2nd will overide the first, and it doesn't have to be in the head, read the first link. You could of course use JS to replace the one in the head with the new one if need be, Although this isn't widely supported as it is a security issue, I think only 2 browsers support it, not sure which. – Billy Nov 20 '14 at 01:52
  • I don't mind having both... I'm thinking I could put it in the common footer... Can I just add: $('head').append(''); before the

    tag? Would that work? I do have access there...

     – Michael Nov 20 '14 at 02:52
0

You need to set expire headers in your htaccess file.

Here is a good summary article: http://www.paulund.co.uk/set-expire-headers-in-htaccess

Patrick Lyver
  • 389
  • 2
  • 7
  • He'd still need the query on the end of the strings, I quote "They assume you control versioning with cachebusting query params like: # – Billy Nov 20 '14 at 02:28
  • No, you just set the expires time to sooner. That's the point. During development you could set them to something like "access plus 0 seconds" then when everything is set the time can be increased to something like "access plus plus 1 month" – Patrick Lyver Nov 20 '14 at 04:13
  • I quote (from one line lower than your quote) — If you don`t use filenames to version, lower the css and js to something like "access plus 1 week" — I just recommended even sooner in dev – Patrick Lyver Nov 20 '14 at 04:14
  • I like this...just not sure I completely understand...will review... So, everything goes in the htacess file, no need to adjust html or css? – Michael Nov 20 '14 at 04:35
  • It's telling the browser what to cache and for how long. You can play around with your expire times without having to touch any of your HTML or CSS. It will work for images as well. Here is the documentation on Apache http://httpd.apache.org/docs/2.2/mod/mod_expires.html#expiresbytype – Patrick Lyver Nov 20 '14 at 04:42
  • That text cuts off in my browser at the i in something....so couldn't read the rest. This seems like a great way to do it then, suprised it wasn't mentioned in either of the thread I linked to, Although I only scanned through them. – Billy Nov 20 '14 at 12:32
  • @PatrickLyver Not sure why, but doesn't seem to work. Set images for access plus 0 seconds, but doesn't change... Hmmm.. – Michael Nov 20 '14 at 23:24
  • But if I clear browser cache, then everyone else would have to as well, which I'm hoping to work around?...moving forward, perhaps it works. I'll try. – Michael Nov 20 '14 at 23:29
  • Can you share your URL? – Patrick Lyver Nov 21 '14 at 00:20