Community

CSS Doesn't update on page reload

I’m working on a ModX page where I’m currently having an issue regarding CSS changes not applying on page reload even though they are uploaded to ModX. They worked before, and I also had this same issue some days ago. I then had to delete my CSS file to have my changes take effect. I tried clearing the cache, log in via another browser and CTRL + F5 but nothing is working. I’m new to ModX, having only worked in WordPress prior to this. And the client for whom I’m working for doesn’t have any special add-ons really (only like TinyMCE.)

1 Like

Is the css document with the changes being saved? You had to delete the css file for the changes to take effect? Deleting the css file would make all the styles disappear…

It can be true that Modx is a bit slow to clear out the changes. Try making some obvious changes and clear the cache, use another browser, etc., to see if the changes are applying. Even try flushing all sessions. Be patient and reload reload.

Its possible the changes you’ve made are not showing up due to things like using the parent class for example.

@nuan88, MODX doesn’t have anything to do with serving up static CSS files. In some edge cases people may use preprocessing extras, like MODX Minify, but the post suggests only TinyMCE is used. (If that’s the case; most of those extras trigger when clearing the MODX cache via Site > Clear Cache)

What does that even mean??

@furry56 If changes are applied to the file, and you’re not using any preprocessing, then it sounds like the server might be caching the file. Perhaps your site is behind a reverse proxy or CDN, like CloudFlare? If so, that might be storing a copy for some time.

One way to get around such caches is to apply a cache-busting string to the file name. Instead of linking to main.css, you would link to main.css?v=123 and change that number when you’ve changed the file. Some caches ignore URL parameters, for which there are also solutions where you link to main.123.css (while the file is still called main.css) which works better because the file name is actually different in that case.

We don’t even know what the behavior actually is. I mentioned some of the ways the changes may seem not to apply.

Is the correct file loaded? Try refresh that file. Also, is it working in another browser?