Prevent the browsers to use old cached CSS and JS files
Table of Contents
Browser cache is very useful when users download the same CSS and JS files multiple times. Some browsers, however, use the old CSS and JS files from the cache, even though they have been updated. This may lead to unpleasant situations, when the pages are displayed to the user with the wrong styles or pages will work incorrectly.
Fortunately, these unpleasant situations is easy to avoid and let the browsers cache files as long as they are changed.
Basic example with static HTML-pages⌗
Original CSS ja JS file names⌗
<link href="/css/test1.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="/css/test2.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="/css/test3.css" media="all" rel="stylesheet" type="text/css"></link>
<link href="/css/test4.css" media="all" rel="stylesheet" type="text/css"></link>
<script src="/js/test1.js" type="text/javascript"></script>
<script src="/js/test2.js" type="text/javascript"></script>
<script src="/js/test3.js" type="text/javascript"></script>
Changed CSS ja JS file names⌗
<link href="/css/test1.css?20091105" media="all" rel="stylesheet" type="text/css"></link>
<link href="/css/test2.css?20091105" media="all" rel="stylesheet" type="text/css"></link>
<link href="/css/test3.css?20091105" media="all" rel="stylesheet" type="text/css"></link>
<link href="/css/test4.css?20091105" media="all" rel="stylesheet" type="text/css"></link>
<script src="/js/test1.js?20091105" type="text/javascript"></script>
<script src="/js/test2.js?20091105" type="text/javascript"></script>
<script src="/js/test3.js?20091105" type="text/javascript"></script>
The same example with a PHP and adding last modified time stamp after the file names⌗
PHP code⌗
<?php
...
echo '<link .="" filemtime="" href="/css/test1.css?' . date(" media="all" rel="stylesheet" type="text/css" ymdhis=""></link>';
echo '<link .="" filemtime="" href="/css/test2.css?' . date(" media="all" rel="stylesheet" type="text/css" ymdhis=""></link>';
echo '<link .="" filemtime="" href="/css/test3.css?' . date(" media="all" rel="stylesheet" type="text/css" ymdhis=""></link>';
echo '<link .="" filemtime="" href="/css/test4.css?' . date(" media="all" rel="stylesheet" type="text/css" ymdhis=""></link>';
echo '<script .="" filemtime="" src="/js/test1.js?' . date(" type="text/javascript" ymdhis=""></script>';
echo '<script .="" filemtime="" src="/js/test2.js?' . date(" type="text/javascript" ymdhis=""></script>';
echo '<script .="" filemtime="" src="/js/test3.js?' . date(" type="text/javascript" ymdhis=""></script>';
...
?>
Output HTML look like this⌗
<link href="/css/test1.css?20091105110212" media="all" rel="stylesheet" type="text/css"></link>
<link href="/css/test2.css?20091105110212" media="all" rel="stylesheet" type="text/css"></link>
<link href="/css/test3.css?20091105110212" media="all" rel="stylesheet" type="text/css"></link>
<link href="/css/test4.css?20091105110212" media="all" rel="stylesheet" type="text/css"></link>
<script src="/js/test1.js?20091105110212" type="text/javascript"></script>
<script src="/js/test2.js?20091105110212" type="text/javascript"></script>
<script src="/js/test3.js?20091105110212" type="text/javascript"></script>
The good thing about this implementation is that if only one file is changed, then all file names are not changed, but just the right file name.