Update on CSS Caching

Avatar of Chris Coyier
Chris Coyier on (Updated on )

css-caching

There were lots of great comments on the CSS Caching article. I learned a lot from those comments, so I wanted to clear up some of the misunderstanding and highlight some of the great tricks other folks shared.

  • It is the browser that does the caching, but the server can have some say in the matter. Many browsers will first ask the server whether or not it needs to download the CSS again and the server will respond. Sometimes the server will respond with a 304 (Not Modified) which will tell the browser to just use its own cached copy. Apparently, if you change you CSS on the server and almost instantly refresh the browser, the server may not have caught up yet and will respond with a 304 and your browser will used its cached copy. (Thanks Eric)
  • You can alter your server settings (if you are using Apache) to “expire” CSS files after one second. See 2nd Comment. This will achieve the same effect as timestamping, because the browser will always tell browsers that it should download the CSS fresh. (Thanks Joshua)
  • If you are using versioning software of any kind, adding version info to the end of the CSS link is probably a smarter way of handling this. (Thanks August)
  • Instead of appending the exact date and time to the end of the CSS link, appending the date and time of the last time file was modified is even smarter. Try this instead echo filectime(’/path/to/style.css’); This also returns a timestamp instead of a “human readable” date, which will eliminate the spaces in the URL link. (Thanks …everyone!)
  • Remember that you can SHIFT-Refresh in most browsers to force it to re-download all the files it needs. This one is easy enough to explain to your clients even! (Thanks Paul)