Every so ofteh is seems that using the right browser, and the right server will not load recently changed CSS files. Sometimes the only way to prove over-caching is happening is to examine server logs and HTTP traffic.
After a measurable amount of searching the web, and reading discussion or tutorials on the subject I have realized that all of the solutions require some additional editing of your files to trick and bypass the caching.
For example, I've seen this a lot -
<link rel="stylesheet" href="./assets/css/reseter.css?v1"/>or
<link rel="stylesheet" href="./assets/css/reseter.css?v=1"/>And every time you change a CSS file you change the 1 to 2 or what ever the next number is. But that is impractical and if your making many changes in succession it will become a nightmare.
My solutions are "edit once and forget". No need to constantly change the CSS link URL. These 2 solutions take care of that automatically when the page is loaded.
<?php
// this will help defeat forced caching, like some android
// browsers. they even ignore the anti-caching meta tags.
$randquery = '?' . (microtime(true) * 10000);
?>
<!DOCTYPE html>
<html lang="en-us">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<!-- here are the modified href's -->
<link rel="stylesheet" href="./assets/css/reseter.css<?php echo $randquery; ?>"/>
<link rel="stylesheet" href="./assets/uc/site.css<?php echo $randquery; ?>"/>
</head>
<body>
</body>
</html>I did not see any other online solutions using JavaScript. So I decided that a JavaScript version was needed and creating one wasn't going to be very difficult. So here you go...
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<!-- Method #1, good for a single CSS file -->
<script>
var style = document.createElement('link');
style.href = './index.css' + '?' + Math.floor(Math.random() * 100000) + 1;
style.type = 'text/css';
style.rel = 'stylesheet';
document.getElementsByTagName('head')[0].append(style);
</script>
<!-- OR Method #2, for multiple CSS files -->
<script>
const cssfiles = ['./index.css', './buttons.css', './other.css'];
const randnumb = Math.floor(Math.random() * 100000) + 1;
for(var ix = 0; ix < cssfiles.length; ix++) {
let style = document.createElement('link');
style.href = cssfiles[ix] + '?' + randnumb;
style.type = 'text/css';
style.rel = 'stylesheet';
document.getElementsByTagName('head')[0].append(style);
}
</script>
</head>
<body>
</body>
</html>