TL;DR: The trick is using the file's actual last modification date from file system, formatting it and putting as query parameter.
- Declare a function
useCss()
that will return a<link>
declaration that accepts a CSS file URL as an argument. The URL should be relative to the$_SERVER['DOCUMENT_ROOT']
.
function useCss($link) {
$dateTemplate = 'd-m-Y_G:i:s';
$cacheQuery = date($dateTemplate, filemtime($_SERVER['DOCUMENT_ROOT'].'/'.$link));
return "<link rel='stylesheet' href='/{$link}?{$cacheQuery}' />";
}
- Replace the tags
<link>
in your template with the new function:
<head>
<?=useCss('css/styles.css'); ?>
</head>
You can create another function for Javascript files that works the same way.
function useJs($link, $type = "text/javascript") {
$dateTemplate = 'd-m-Y_G:i:s';
$cacheQuery = date($dateTemplate, filemtime($_SERVER['DOCUMENT_ROOT'].'/'.$link));
return "<script src='/{$link}?{$cacheQuery}' type='{$type}'></script>";
}
The result should look like this:
<?php
function useCss($link) {
$anticache = date('d-m-Y_G:i:s', filemtime($_SERVER['DOCUMENT_ROOT'].'/'.$link));
return "<link rel='stylesheet' href='/{$link}?{$anticache}' />\n";
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<?=useCss('css/libs.css'); ?>
<?=useCss('css/styles.css'); ?>
</head>
<body>
<h1>What a wonderful world!</h1>
<?=useJs('js/main.js'); ?>
</body>
</html>