18

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 :(

Community
  • 1
  • 1
Ankit
  • 6,772
  • 11
  • 48
  • 84
  • Are you using a PHP framework or some pre built CMS or shopping cart? – David Gallagher Mar 05 '12 at 01:04
  • Check out [this bookmarklet](http://david.dojotoolkit.org/recss.html). Not really what you're looking for, but it might help you. It reloads your CSS without refreshing the page. – Joseph Silber Mar 05 '12 at 01:06
  • @DavidGallagher I am not using any PHP framework. Just plain PHP – Ankit Mar 05 '12 at 03:10
  • @JosephSilber Reloading CSS does not work. I suppose then, its the problem with some sort of caching with APACHE? – Ankit Mar 05 '12 at 03:12
  • 1
    This seems a little odd. The first thing I would do is check in another browser or another computer just be sure that the caching is occurring on the server side. I don't think Apache would cache CSS files unless some processing was occurring on the CSS file (such as compression) or if the file is loaded into memory (which seams unnecessary on the development machine). – David Gallagher Mar 05 '12 at 04:21

7 Answers7

21

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.

Mike L.
  • 1,936
  • 6
  • 21
  • 37
8

I used to have the same problem with my LAMP dev system, caused by a network mount. I managed to get rid of it by adding these two lines to my apache conf.

EnableMMAP off
EnableSendfile off
Corubba
  • 2,229
  • 24
  • 30
  • I can set these in my development environment. But, my web-host will not provide me access to `apache.conf`. Is there a way to set these parameters locally (may be in .htaccess or something like that). – Ankit Mar 05 '12 at 03:16
  • Update: It did not work on WAMP (at least), my development machine. PS: On WAMP, I saw only httpd.conf . Is this different from apache.conf – Ankit Mar 05 '12 at 03:22
  • They can be set in .htaccess. Since Apache is a company, httpd is the correct name for the webserver. apache.conf and httpd.conf should be semantically equal. – Corubba Mar 05 '12 at 03:53
  • I was having this problem; this is the solution that worked for me. – BlairHippo Jun 21 '12 at 18:03
3

In my php pages i usually add the current date time to the end of your css href: 

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />

Ref : Here

Delavega
  • 453
  • 1
  • 7
  • 21
1

I know this is an old question, but I just came across this and had some of the same issues. Here is a quick way to not keep cache on any file:

<link rel="stylesheet" href="css/style.css?<?=time()?>">

Using the helps get the newest version each time the page is loaded.

lostInTheTetons
  • 1,162
  • 1
  • 13
  • 23
0

I always using httcacheclean when change something in asset files (js, css, etc)

smftr
  • 923
  • 3
  • 17
  • 31
0

I would like to suggest something like:

<link rel="stylesheet" href="css/style.css?v=<?=filemtime('css/style.css')?>">

Actually, filemtime() functions returns file modified time. So, the value will be different if only and only the file is changed. Otherwise, the value will remain the same.

So, this function helps us to prevent the caching of the file is changed and also encourages caching if the file is not changed because it will return the same value.

The browsers will use the cached CSS if the filemtime() value is not changed.

Sajid Javed
  • 452
  • 8
  • 14
0
  1. Apache (-modules) can cache ressources, but that is not your current problem.
  2. Either disable your browsercache, flush cache on reload or deliver css with modded headers. You could write a script that sets expiry header so that your browser will have to get a fresh version of your css.

Anyhow I'm not getting the point in that. For development it's way easier to just disable your browsercache or hit Ctrl + r.

m02ph3u5
  • 3,022
  • 7
  • 38
  • 51