Preventing Caching of CSS Files

Question 1

I am developing a simple website using PHP.

Development Configuration : WAMP

Production Configuration : LAMP

While testing, I changed my CSS file, but when I reload the page my browser(not sure) still uses the old cached css.

I did some googling and found different solutions that I have already tried

Appending a query at the end of css css/main.css?78923
Using Ctrl + R (in Firefox) to force fetching of the resource
Disabling Firefox caching as well as using the Clear Cache Firefox add-on.

When none of this worked, I did some more googling, where I came across a stack page (here) where someone suggested that Apache caches the resources. So, the problem is not with the Firefox, but the server. The guy also suggested a solution that I did not understand (me being a newbie)

My question has two parts:

Is it true that Apache caches resources? (How do I check if mine does?)
How to prevent it from caching?

PS: copying and pasting the solution in stack question (the one that I have above as a link) did not work :(

Question 2

I've ran across this problem a few times and usually over come the problem on production sites by calling my css like this

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

When you roll out an update just change the v=1 to v=2 and it will force all of your users browsers to grab the new style sheets. This will work for script files as well. If you view source on Google you will notice they use this approach as well.

Question 3

Thanks @tim!

The problem was in the headers i was serving alongside my media. I looked at the response in Chrome and it said:

Cache-Control: must-revalidate, no-cache, no-store

I didn't set these, it must be a default of apache since I'm serving through a script? Anyways, to fix, I just added:

Cache-Control: public

to my PHP file and it seems to be working!

Question 4

Your file will probably be cached - but it depends...

Different browsers have slightly different behaviors - most noticeably when dealing with ambiguous/limited caching headers emanating from the server. If you send a clear signal, the browsers obey, virtually all of the time.

The greatest variance by far, is in the default caching configuration of different web servers and application servers.

Some (e.g. Apache) are likely to serve known static file types with HTTP headers encouraging the browser to cache them, while other servers may send no-cache commands with every response - regardless of filetype.

...

So, first off, read some of the excellent HTTP caching tutorials out there. HTTP Caching & Cache-Busting for Content Publishers was a real eye opener for me :-)

Next install and fiddle around with Firebug and the Live HTTP Headers add-on , to find out which headers your server is actually sending.

Then read your web server docs to find out how to tweak them to perfection (or talk your sysadmin into doing it for you).

...

As to what happens when the browser is restarted, it depends on the browser and the user configuration.

As a rule of thumb, expect the browser to be more likely to check in with the server after each restart, to see if anything has changed (see If-Last-Modified and If-None-Match).

If you configure your server correctly, it should be able to return a super-short 304 Not Modified (costing very little bandwidth) and after that the browser will use the cache as normal.

Question 5

You want CSS and JS to be cached. It speeds up the loading of the web page when they come back. Adding a timestamp, your user's will be forced to download it time and time again.

If you want to make sure they always have a new version, than have your build system add a build number to the end of the file instead of a timestamp.

If you have issues with it just in dev, make sure to set up your browsers to not cache files or set headers on your dev pages to not cache.

Question 6

Thanks @Rich Bradshaw, I found the solution on using PHP header in Answering HTTP_IF_MODIFIED_SINCE and HTTP_IF_NONE_MATCH in PHP

function caching_headers($file,$timestamp){
    $gmt_mtime=gmdate('r', $timestamp);
    header('ETag: "'.md5($timestamp.$file).'"');
    if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])||isset($_SERVER['HTTP_IF_NONE_MATCH'])){
        if ($_SERVER['HTTP_IF_MODIFIED_SINCE']==$gmt_mtime||str_replace('"','',stripslashes($_SERVER['HTTP_IF_NONE_MATCH']))==md5($timestamp.$file)){
            header('HTTP/1.1 304 Not Modified');
            exit();
        }
    }
    header('Last-Modified: '.$gmt_mtime);
    header('Cache-Control: public');
}
caching_headers($_SERVER['SCRIPT_FILENAME'],filemtime($_SERVER['SCRIPT_FILENAME']));

Probably there are no better/suitable solution.

Preventing Caching of CSS Files

Answers

php,css,apache,caching,browser-cache