[Cancel] How can I clear css from the cache

General
1

Hello everybody,

I observed something annoying.
I am actually working on the css file.

For example, I change the h1 tag in order to have smaller caracter and I also added a temporary border for debuging.

When I refresh the page the changes are not shown. But sometime later, the changes was applyed.
I make new change, and it happen again.

From Administration menu, I clear the cache but it did not help.

I wonder why the CSS changes seams to be cache somewhere. Is there another way then deleting the folder /core/cache, if that is the solution?

Thanks and good evening

2

Sorry, I deleted that post because I alreday ask a similar question

3

If it is a CSS file, then it is your browser that is caching the results, not MODX. While you are working on the site your can hold shift while hitting refresh to try and force your browser to update.

4

Try adding a version to your file link. css?v=1

5

If you’re on Firefox you can achieve the same with Ctrl + F5

6

Here’s a handy list from How To Geek of various keyboard shortcuts for a hard refresh depending on your OS and browser:
www_howtogeek_com-How to Hard Refresh Your Web Browser (to Bypass Your Cache)-20210119-029

7

I like Classic Cache Killer for Chrome.

Chrome is notorious for not completely clearing its cache, even with Ctrl-F5. Classic Cache Killer deletes everything and you can turn it on or off with one click.

2 Likes
8

There’s also the “Disable cache” box on the network tab in dev tools. And also, if you’re using something like Cloudflare it could be cached there too; in which case no amount of local cache clearing will work.

9

FWIW, I installed Classic Cache Killer because the “Disable cache” checkbox didn’t seem reliable.

1 Like
10

To get the current CSS without caching after modification there is a simple way with setting a version parameter to the file.
At first install the lastModified extra (https://modx.com/extras/package/lastmodified).
Your current path to the CSS in the head section is like:

<link href="assets/css/main.css" rel="stylesheet">

Change this path to:

<link href="[[!lastModified? &path=assets/css/ &file=main.css]]" rel="stylesheet">

That’s it, now you’ll get a new time stamp as version for the file automatically with every CSS modification.

<link href="assets/css/main.css?1610301865" rel="stylesheet">

1 Like
11

If you are using a CDN on the site, then you would have to clear the cache there. The suggestion herein for adding version will also correct it there also - that is if you remember to change the file on your end and the time stamp actually changes.