fix for stubborn browsers cache and css files

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 viewers 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 and without the need to clear the cache

This fix uses 1 line of php code and so requires that your page has a .php extension

This is a typical line in html head section to set the style sheet css file

<link rel='stylesheet' href='/style.css' />

replace with this

<link rel='stylesheet' href='/style.css?<?php echo filemtime($_SERVER["DOCUMENT_ROOT"] . "/style.css"); ?>' />

so what does this do ?

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

The ? after a file is usually used to pass values to php files but this is a css file and tricks the browsers into thinking something is new and it’ll reload 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

4 Likes

I don’t want to spoil your topic
but in the options of dev tools in FF
you can easily disable the cache

2 Likes

when toolbox is open
Does that mean only if DevTools is opened?

it should not be a problem because you keep it open during development anyway

image

there is also an option to permanently turn off the cache on the disk as well as in the RAM
inside the config of FF

There is also a developer version of the browser

1 Like

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

You can use time() in PHP it returns unix time in numbers

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

2 Likes

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.

1 Like

thanks admin :slight_smile:

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 :smile:

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…

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag

1 Like

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

1 Like

Did you know that you can hit CTRL + SHIFT + R to hard reload the page?
Or you can just use the .htaccess file

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

ManuTheCoder

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

Or you can purge cache if you use cloudflare this helps a lot

1 Like

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

You can also use this:

<link rel="stylesheet" href="<?php echo rand(1, 999); ?>">

or this…

<script type="text/javascript" src="<?php echo time() - rand(1, 999); ?>"></script>
1 Like

@ManuTheCoder thanks for that info, btw this is the wrong thread !

Oh, I’m so sorry… :frowning:

no worries :slight_smile:

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

2 Likes