CSS Change won't apply - Where could the cache be?

Question

I've encountered a strange problem that I've never seen before. I edited a CSS file and uploaded it to my server. From my hosting's file manager, I can see the file is updated. But in my local computer, it is still the old version.

I cleared browser cache, I used another browser, I even switched to use my cellphone's browser, the CSS is still the old one. So I guess this is a server-side issue.

I logged-in to Joomla, and cleared all the cache I could find, but the file still won't update.

So where could this cache be stored?

Edit Through Developer's tool, I click and open the css file in a new tab, it is here that I see the CSS file is still the old version. I pressed F5 to refresh this file in browser tab, normally this will force the browser to check if there is a newer version, but the file still won't upgrade, so this is definitely something else. PS: I am pretty sure I didn't mistake the file.

Answer 1

Some really cheap and oversold hosts tend to cache asset files (images, JS files, CSS files) for a long time. Check in a few hours to see if the file was updated.

If not, and assuming you cleared your browser cache, then quite possibly you are looking at the wrong file or it might be that you the file transfer of the CSS file failed (permission issues?), but you didn't notice that, and so your changes never took effect (this is a very common problem with developers by the way).

Answer 2

• Do you reach directly to the updated css file through your browser and you see the old css?
• Or you just don't see the changes taking effect on your site?

Some suggestions for both scenarios:

A. Do you reach directly to the updated css file through your browser and you see the old css?

1. Make sure the server/location you are FTP uploading, is the same with the one you are reaching at with HTTP.

2. Some webhosts provide speed-optimization features that cache the websites files - so make sure you are not a "victim" of such features.

3. Check your .htaccess for mod_expires directives set too long.

4. Check the possibility of using a CDN (e.g. Cloudflare) that is also caching your site.

5. Try with hard-refresh - cache clearing on your browser.

B. Or you just don't see the changes taking effect on your site?

1. The CSS you are editing isn't getting loaded for the page you are viewing.

2. The CSS changes you did, do not take precedence over other CSS styles.

3. The CSS changes you did, are not correct or do not apply on your HTML.

4. You have an extension or plugin that could be generating a final master compressed css by reading all the available css which might require you to clear its cache individually and force it to regenerate a new css. Or another 3rd party extension for speed-optimization, cache etc that is compressing or caching, or setting directives.

Answer 3

Adding an answer since mine was similar to itoctopus with SiteGround. Instead of a plugin there was a service created by SiteGround that was causing the css file to be cached. It could be interacted with via the CPanel:

SuperCacher Introduction

Answer 4

Try to browse the css file directly to your browser and check if that is the updated one.

If not, then you are loading a different file.