How to force cache cleanup on my visitors' browsers

Question

I usually update the style sheet of my site (CSS) a lot. What happens is that my visitors see no difference. Is there a script or something that forces cleaning? Example: On the next access the cache will be cleared. Some cookie that makes the cache last only 3 days for example. I just don’t know what to do.

Answer 1

For Apache, you can use the file htaccess with the cache control directives that inform browsers about when it should download a new version of each file.

Some examples:

Header unset Pragma
FileETag None
Header unset ETag

# 1 Ano (limitado a ficheiro media)
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset Last-Modified
</FilesMatch>

# 2 Horas (limitado a ficheiro conteúdos)
<FilesMatch "\.(html|htm|xml|txt|xsl)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</FilesMatch>

# Em cache para sempre (scripts e folhas de estilo)
<FilesMatch "\.(js|css)$">
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
Header unset Last-Modified
</FilesMatch>

Example cache in CSS files limited to 3 days

1. File .htaccess in the root of the folder containing the target files;
2. Write the appropriate cache control inside the file;

3. Specify file extensions assigned to the control to be applied:

   # extensões separadas por um |
   <FilesMatch "\.(css)$"> 
   

4. Specify the duration of the cache so that the server tells the browser that a file is only valid for the specified time, after which another file must be collected:

   # max-age = XX segundos
   Header set Cache-Control "max-age=259200, must-revalidate" 
   

The output of the file to use is:

Header unset Pragma
FileETag None
Header unset ETag

# 3 Dias
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=259200, must-revalidate"
</FilesMatch>

Answer 2

You can in PHP modify the page cache:

<?php
//Prevent page caching
 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
 header("Cache-Control: no-cache");
 header("Pragma: no-cache");
?>

Or you can use a TIME in the css link, example :

<link rel="stylesheet" type="text/css" media="screen" href="estilo.css?<?php echo time(); ?>" />