标头缓存似乎被忽略了

Question

I've been wondering what seems to be wrong in my cache.

I set this headers so that it will not cache contents on the website (html, css, php) files.

header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
header('Pragma: no-cache'); // HTTP 1.0.
header('Expires: 0'); // Proxies.

So I went on to clear cache first on my Mozilla, reload the page then got this:

Seems fine because status is 200 OK, now I edited the file style.css then do a refresh, here is the result:

It says 304 Not Modified. I am no expert but isn't that means it cache the file? Also, I edited style.css, and my changes didn't appear. Need to do a Ctrl+F5 to reset it. Why is that?

Answer 1

Extending from comments:

What you were doing on your headers only affect that resource -- which most likely would be a PHP-generated HTML page.

To demonstrate, here's a simplified process:

• Browser: GET index.php
• Server: PHP: Cache-Control: no-cache; output content...
• Browser: GET style.css
• Server: (Default headers;) output style.css

So to ask the client to not cache CSS, you can:

1. Add additional header for all CSS in your HTTP server configuration. Example in Apache:

   <FilesMatch "\.css$">
       Header add Cache-Control no-cache
   </FilesMatch>
   

2. Use PHP to redistribute CSS:

   <?php
   header("Content-Type: text/css");
   header("Cache-Control: no-cache");
   ?>
   body {
   /* ... */
   }
   

3. If you don't mind modifying HTML on every edit (or if you're using some kind of version control that support this feature), you can make your HTML look like this:

   <link rel="stylesheet" type="text/css" href="style.css?20131111" />