Search code examples
cssgoogle-chromereload

External style sheet not updating in Chrome 74, but other files do


I'm building a site in Chrome 74 using Notepad++ and XAMPP on localhost.

I have an index.php main file and an external style sheet index.css. It is connected to the main file like so: <link rel="stylesheet" type="text/css" href="index.css">

After making a few updates to index.css I couldn't get Chrome to view them. Originally I thought my css was wrong. But after pressing F12 in Chrome and looking at Sources and checking the index.css file I saw that the changes I had written weren't there.

The changes have been saved in Notepad++, browser page has been refreshed. I even looked at index.css using good old regular notepad just to be sure.

I have also tried restarting the browser, restarting XAMPP and then restarting my computer. Still the same.

The interesting thing is, changes made to index.php are being updated successfully. It's solely the changes to index.css that aren't. It's as if Chrome does not reload index.css but keeps an old version of it.

It has happened to me before, but last time the problem sort of just went away after a while and Chrome started updating index.css. Now I want to know why it happens.

Does anyone know why Chrome does this? Help much appreciated :)

To be clear: As of the moment, no changes made to index.css is being loaded by Chrome. Even stuff like body { background-color:red; }


Solution

  • The file is being cached: https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

    Usually, with the default configurations, dynamic pages (.php) are not cached and static files (.css, .js, etc.) are cached.

    You can:

    • Reload the page while pressing the shift ( ⇧ ) key
    • Clear caché and then reload
    • Implement a caché strategy for development