Preventing Caching of CSS Files

Question

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:

1. Is it true that Apache caches resources? (How do I check if mine does?)
2. 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 :(

Answer 1

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.