fix for stubborn browsers cache and css files

Community Guides
1

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:

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

Replace that with this:

<link rel='stylesheet' href='/style.css?<?= 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.

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

7 Likes
2

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

image
image1453×675 109 KB

2 Likes
3

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

4

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

2 Likes
5

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

6

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

7

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

3 Likes
8

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.

4 Likes
9

thanks admin :slight_smile:

1 Like
10

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…

2 Likes
11

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

2 Likes
12

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
13

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

1 Like
14

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

1 Like
15

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

1 Like
17

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
18

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

19

Oh, I’m so sorry… :frowning:

20

no worries :slight_smile:

21

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