After modifying a style sheet I noticed that when I loaded a page using that modified style sheet in a browser that had cached an older version of it the initial structure of the page was wonky, until refreshing it. After I refreshed the page the new version of the css was being used by the page. I assume most people do not refresh web pages after the first time it initially appears on screen. That said I don't want the page to look wonky on the initial visit of a returning user. What technique if any, can I use to ensure the new version of the style sheet is being used as opposed to the older version? I'm looking for a method, technique, or tutorial that is straight forward as my ADD mind doesn't play well with bloated instructions. Any help with this would be much appreciated! Thanks :)

  • Did this fix your problem? Don't forget to close your question if it's been answered by setting the 'best answer' (if relevant). This will also motivate people to answer your questions in the future. John Catterfeld over 8 years ago

3 answers

This was chosen as the best answer

If you simply add a version number to the end of your stylesheet, modifying this whenever you update the CSS will force the browser to download the new version rather than use the cache. E.g.

<link href="/css/styles.css?ver=1.0" rel="stylesheet" media="screen, print" />

Answered over 8 years ago by John Catterfeld
  • That's really pretty clever. And this is why I randomly browse through -- because I learn the answers to questions that I didn't even realize I had. :) Michael Martin-Smucker over 8 years ago
  • Done incorrectly, this can also cause the browser to skip the cache and download the stylesheet every time the page is accessed, which is not nice to the user or the server. Doug over 8 years ago
  • Doug, can you advise how you could do it incorrectly, so I know to be careful? John Catterfeld over 8 years ago

You can use javascript to refresh the page. Google this to find billions of examples. This is the method I see used most.

I don't know of a means to forcibly clear a user's cache, and that's probably because it would be very invasive.

My cache stores information about all pages I've visited, not just yours. It stores autocompletion values, user names and passwords, and more. How much of that I retain and for how long is up to me; and there is more to that decision than just whether I've got the latest version of the cosmetic state of your particular web page.

I don't mean to sound hostile, but the point is that even if you can clear your users' cache, many users would consider it a hostile act. Most designers I know argue strongly against even changing the size of the user's viewport for the same reasons.

The state of the browser and the general browsing experience is under the control of the user. They get to choose how they browse websites in general. Your task is to design your site so that it works within those constraints.

Answered over 8 years ago by superstringcheese

@John Catterfield

Worked like a charm! Thanks so much! This is exactly what I was looking for.


You don't sound hostile to me, however the gentleman above you posted a method that fixed my issue perfectly. No need for JS and no need for controlling the user experience. Just trying to get the page to look right on the initial view from a returning visitor.

But a word of advice to you, wanted or not. Doctype is for providing a specific answer such as the first answer given and I'm afraid googling an example is not the kind of answer I'm looking for on here. I would encourage you not to provide that as an answer to others. (It's kinda like, duh! I looked there, and that's why I came to doctype)

Answered over 8 years ago by Wen Griffin
  • That's a fair point. Thanks for the feedback. superstringcheese over 8 years ago