Prevent the browsers to use old cached CSS and JS files

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:

Changed CSS ja JS file names:

The same example with a PHP and adding last modified time stamp after the file names

PHP code:

<?php
...
echo '';
echo '';
echo '';
echo '';
echo '';
echo '';
echo '';
...
?>

Output HTML look like this:

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.