External CSS with certain hosting providers

This question is unrelated to Wappler but I just want to know.

90% of the websites I create, I can attach an external CSS stylesheet like this and it works perfectly.

<link rel="stylesheet" type="text/css" href="/my-styles.css">

For some reason 10% of the time the stylesheet code as above just causes issues on some hosting providers and I can make an alteration to the styles that just do not show when i save the file, it does not matter how many times I refresh, hard refresh, clear caches, or swear at it, it just does not make the change.

Then all of a sudden after I have been refreshing and swearing for 10 minutes, then bam the new styles just start working.

I assume this is something to do with a caching server at the particular hosting provider, and to get around it I have to change my stylesheet link to this.

<link rel="stylesheet" type="text/css" href="/my-styles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">

My question is, is there any other way around this issue, like with an htaccess entry, php.ini, .user.ini, robots.txt, or something as it honestly drives my nuts, as it does the same thing with new images with the same filename not updating right away, as well as other files too.

Maybe there is a way to turn this all off at the host, I have already tried setting expires headers and ignoring certain file types in the .htaccess but it did not work, so maybe I did it wrong.

Normally you want the server to do some caching, but when it is not correctly configured it can be bothersome. A good server uses the ETag to let the browser know if the file is changed.

Best is to have the host configure the server correctly. I use almost the same workaround as you do, but I take the file’s timestamp as querystring parameter, that way it only invalidates cache when the actual file changes.

An other way is to disable caching, you could do this in the .htaccess, see https://stackoverflow.com/questions/11532636/how-to-prevent-http-file-caching-in-apache-httpd-mamp.

1 Like

Thanks @patrick good to know that I am not the only one who has found this issue with some hosts.

One would honestly imagine that the hosting providers would all be setup correctly and quite similar to one another, however it seems to hardly ever be the case.

I like you solution of a file timestamp rather than mine as mine will just never ever cache at all, while you solution makes more sense, thanks.

I found that with .htaccess you can also set the ETag, http://httpd.apache.org/docs/2.2/mod/core.html#FileETag.

To debug you should inspect the headers and see what the server sets for headers and find out what is misconfigured. But the workaround is the easiest way.

1 Like

I have just implemented the following (which works well) as I have had exactly the same issue.

  <link rel="stylesheet" type="text/css" href="../css/dgsitestyle.css?ver=<?php echo filemtime('../css/dgsitestyle.css'); ?>">

Thanks @psweb for raising this question.

3 Likes