Search code examples
cssgoogle-chromesafarireload

css files delay before updating

I'm using Dreamweaver to update a website. When I upload the style.css file, Safari and Chrome don't recognize the changes for a while. Here's what I'm doing.

  • Edit in Dreamweaver
  • Upload either with Dreamweaver or Fetch
  • If I use Fetch to view style.css as a text file on the server, I see my changes, so it's getting uploaded.
  • I'm using Safari and Chrome in Incognito mode, which I understand means that it won't cache anything, and in theory, every refresh should reload all the files. However, when I look at style.css using the web inspector, I see the old file.
  • In Web Inspector, while I'm looking at style.css, I refresh it and nothing changes.
  • I've emptied the cache and refreshed. Nothing changes.
  • If I File>Open the index.html page from my hard drive (which calls style.css), the browsers show the changes.

The problem is that Safari and Chrome aren't recognizing the changes on the server. I saw a suggestion to call the stylesheet with href="css/style.css?v={random number/string}" rel="stylesheet" type="text/css", but that didn't seem to help.

If I wait long enough (5-10 minutes), eventually things get updated. Is there a way to get instantaneous css updates to the browsers?

Solution

  • The browsers are caching the CSS file to be more efficient and have no idea that changes have been made.

    The versioning you mentioned in the original question should do the trick. Keep in mind it needs to be changed (to whatever you want) every time you want the browser to re-fetch it. 

    <link rel="stylesheet" type="text/css" href="/css/style.css?ver=2.0">