I’ve found that browsers have a habit of keeping CSS files in the cache which is a problem when developing sites.
This is also an issue for anyone viewing your site as any changes made to the CSS will not be shown in the viewer’s browser.
I have found a way to allow changes to CSS files to instantly update in the browser when a page is loaded or refreshed without the need to clear the cache.
This fix uses one line of PHP code and so requires that your page has the .php file extension.
This is a typical line in the head section to set the stylesheet:
This PHP code appends the creation time of the file to the end of the file name in the form style.css?681239872, the numeric value will change when you make a change to style.css.
This tricks the browsers into thinking something is new so it’ll reload the style.css file with the new changes and caches it until the next change.
This has saved me a lot of headaches and time while developing my site.
I share it with you and hope you find it useful.
Thanks.
---- edit — changed single quotes around DOCUMENT_ROOT to double quotes as the whole thing is already inside single quotes and might cause an issue
i thought this was more useful because people viewing your site also have the same issue of cached css files and wont normally see the change you make to your site
but with this little php any changes made to css are reloaded instantly by the viewers browser as soon as they load any page
Erraticstuff You can use time() in PHP it returns unix time in numbers
if I had used time() it would work but the time would change on every page load and the browser would download the style.css every time
Im using filemtime() because I want to get the timestamp of the css file for when it was last updated, that way when you update the file the browser sees it as a new file and reloads the style.css file and caches it until you change it again
doing it this way the browser only reloads style.css on change which will save on download times and bandwidth
---------------- edit ---------------
sorry i could be wrong about time() i might be thinking of date() lol
This is actually quite a nice way to bust caches, while still allowing browsers to cache files as long as they don’t change! It doesn’t disable cache entirely, so you still get all the benefits of caching, but any changes is also visible immediately.
Of course, but to change the extensions of each html document is not desirable to me
because I try to have static resources wherever possible ( EP limits )
and it’s easier to run/test because I don’t need to turn on the local web server.
It’s still easy when someone has one CSS file, but I often see that many have more than 10
If you frequently make changes to CSS and other resources
you can also play with the Cache-Control settings and reduce the values from various parameters (how many seconds will hold something in the cache) or ETag…
I see your point , it would be a pain changing a lot of html files containing many css files
ln my case my website has only a single index.php that loads the css followed by loading the page content files into the body so there was only 1 file that needed to be edited as the pages are just content and have no head or body section
I was doing that all the time but browsers are often stubborn and refuse to load the changed css even after a hard refresh !, doing it this way with php guarantees it’ll load without having to hard refresh which is good for anyone visiting the site as a lot of people dont even know about hard refresh
well I was doing all of that before but with this php you dont need to purge any caches including cloudflare, it just saves a lot of hassle
this just helps if youre making changes to css a lot and trying things out, if youre changing site content like images etc then obviously the cache will still need purging
----- edit ---- I just tried the php on images and it does’nt work , oh well I still have to clear the cache when changing images lol
I did not try ur solution this yet.
But if it works, it is actually giving the perfect result.
Benefits in more speed site from keeping caching
+
It makes site up to date always