By Drupal_ on

Not sure if their is any setting I have to change.. but my css is are not getting refreshed in my browser after I changes are made to the css.... I have to manually refresh to get the updated css.. do I have to add anything in the head or change any settings for my apache... please advice.

⋅ Categories: Drupal 5.x

Comments

vm’s picture

vm commented

This doesn't seem like a big deal, but here are some things to check into:

are you using css aggregation in Drupal ?
what are the Drupal cache settings set at ?

what are your browsers cache settings set at ?

Drupal_’s picture

Drupal_ commented

I have not enabled any cache settings in drupal nor have I enabled the css aggregation option. Everything is pretty much the default. Also the browser settings are defualt too (btw I see this on IE as well as firefox) not from one computer but from many .. so it is not a browser thing for sure. I just don't think I changed anything in the apache config also.. just can't figure out what to change so that css changes don't get cached.

martig’s picture

martig commented

It's normal that you have to manually refresh the page. Btw, are you using the garland theme?

Drupal_’s picture

Drupal_ commented

Yes, I am using the customized garland theme. Would that matter. I will try to change to another theme to see if that works.. Martig, I don't think that is good idea to manually refresh every time css changes. The browser should know if the css changed and request a new version automatically.

vm’s picture

vm commented

If you already have a page open, the browser has ended its contact with the server until the next page load. It then grabs the new css file and uses it.

Drupal_’s picture

Drupal_ commented

Must be some weird settings that I have set somewhere and I suspect it might be some apache settings ... but in my case, even if I restart my PC, I still get the old/stale cached css. I have to force the browser by clicking the refresh button to get the new css. This does look like a strange behavior to me. For now, I just change the css name to force the browser to load the new css.. but that surely is a bad way to solve this.

martig’s picture

martig commented

The browser doesn't automagically now that the css has changed. The browser can only update content on reload (not including AJAX).

If you are using the color module, then a custom CSS file was created under files/color/garland-2664d353/style.css although I am sure the 2664d353 part is a generated code. But you get the idea. Edit that CSS file.

http://drupal.org/node/112456

zhelezko’s picture

zhelezko commented

I've a similar problem. I tried to delete print $styles and add style.css in page.tpl.php manually, then change it. I tried to clean or even delete css file. Also I've changed browsers and themes (garland and pushbutton). Nothing helps.

vm’s picture

vm commented

without knowing what theme you are using, and if garland, whether or not it's modified by color picker, its hard to help.

zhelezko’s picture

zhelezko commented

Theme: garland non-color-modified
Browser: Firefox 2.0.0.5 (Opera 9.10 works fine, my apologies)

Anything else?

vm’s picture

vm commented

I can't replicate this.

If i alter the css file, and do a hard refresh the css updates perfectly well. I suppose the idea in this thread is that the page, should automatically update, I'm not sure how that can happen without some kind of refresh either on the user end forcing it, or the browser end detecting it. IE doesn't recognize the css file change until the next refresh or the next time the page is visited. This holds true for firefox as well on a windows machine.

Drupal_’s picture

Drupal_ commented

Here's how I solved it. Check if expire_module is enabled in your httpd.conf (apache configuration file). This sets cache expiration headers for various files according to some rules to increase performance. I am not sure if this module was enabled by default or I enabled it later, but once you comment this, then I don't have to force my browser to refresh it after making changes in my css file. It works perfectly. Also I think the browser reloads only when the file has changed.

# Comment this module. You will have to restart your apache.
# LoadModule expires_module modules/mod_expires.so

There might be another way to do this by changing your style.css file to style.php and then setting the header info using the php header(). 

# change the stylesheet references from style.css to style.php. For example:
<link rel="stylesheet" type="text/css"
 media="screen" href="style.php">

In your style.php set the header 

<?php
header("Content-type: text/css");
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 16 Jul 2007 05:00:00 GMT"); // Date in the past
?>

I haven't tried this, but there should be a way to force some sort of cache control rule similar to above and maybe its time to start using style.php in drupal !! This actually might be the preferred way to do this, but for now due to time constraint, I took the easy way out by changing the apache. Also I believe this issue is more prevalent than people even realize or are aware of it.

The easiest way is to just change the style.css to styleX.css (after making your modifications)

tkcent’s picture

tkcent commented

If you look in the .htaccess file, you will see mod_expires settings.

I have added an extra line to reduce the cache time for CSS files from 2 weeks (the default for all files) down to 1 day.

# Requires mod_expires to be enabled.
<IfModule mod_expires.c>
  # Enable expirations.
  ExpiresActive On
  # Cache all files for 2 weeks after access (A).
  ExpiresDefault A1209600
  # Do not cache dynamically generated pages.
  ExpiresByType text/html A1
  ExpiresByType text/css A86400
</IfModule>

More info on mod_expires (for Apache v2.0) here:

http://httpd.apache.org/docs/2.0/mod/mod_expires.html

takien’s picture

takien commented

change the template name :)

mljhilton’s picture

mljhilton commented

I have been wrestling with this problem, and I have discovered that Drupal incorporates your style.css into its own css file and writes it as a "temporary" file into the files/css folder. I deleted all of these yesterday to see what would happen. It recreated them when I went into admin mode, but not when I went into normal user mode. I have just logged on again this evening. There are 3 of these css files from yesterday. The time stamps are 21:42, 21:59, and 22:01. When I do a "view source" I find that the css file being used is the one from 21:59, whereas I would have expected the 22:01 to be the one it would pick up.

I have just now deleted the 3 css files, then refreshed my site. It has created a new "temporary" css file with the correct values.

Why does it do this?

vm’s picture

vm commented

because you have css aggregation enabled in administer -> performance.

When tweaking a theme, css aggregation should be disabled so that the style.css file in the theme itself can be worked with.

mljhilton’s picture

mljhilton commented

I see what you mean. I've disable the CSS aggregation and all of the CSS files are listed separately in the View Source. Thanks.

pbland’s picture

pbland commented

While I don't think changing the theme name is the best way to get CSS changes automatically refreshed, it does work. I tried many other solutions people offered, but nothing worked for me.

---------------------------------------------------------------
My drupal site: Vacation-Places

talino’s picture

talino commented

Reviving an old thread... I was wondering if there were new "best practices" for this. I'm not referring to reloading pages on my development machine. I'm just annoyed that whenever I upload CSS changes to the live site, users won't see them unless they refresh their pages, which is something I don't think I should ask them to do. What's the proper way to automatically handle this?

vm’s picture

vm commented

if using css aggregation, you must first disable aggregation. Make your css changes. Then reenable css aggregation.

talino’s picture

talino commented

I am not using CSS aggregation, because I'm aware of the problems it causes when modifying stylesheets. My issue is therefore not related to that feature. I've just checked again : I modify a property, save the CSS file, launch a browser (any browser), go to the page, old CSS still shows up. Only refreshing the page reflects the new CSS file. How can I make sure users see the latest (and greatest) version?

vm’s picture

vm commented

What are the cache settings set at on your browser?

MY browser/s are set to update cache every page visit.

talino’s picture

talino commented

I understand what you mean, but I'm wondering how it works in a larger sense. I can set Safari or Firefox to empty the cache on *my* machine (or simply refresh the page), but I can't possibly ask all my users to do that whenever I change a font or a background color. I'm just trying to understand *when* it will happen on their end and if there's a way to trigger that on the site itself. For example, if drupal.org had a sudden site redesign this morning, I believe I would see the new version in my browser. Am I wrong? If I'm not, what would drupal.org do in that case in order to be sure everyone sees the new design?

Thanks for your help.

vm’s picture

vm commented

d.o. would likely clear the cache tables in the database as well as all sessions ? not sure.

anyway, http://www.google.com/search?hl=en&q=force+browser+cache+update&aq=f&oq=... may help.

talino’s picture

talino commented

Apparently it's quite a complex problem. There's a good article here. What's weird is that most people propose adding a dummy variable to the CSS call (style.css?whatever) but Drupal already does this by default (style.css?g etc...), so it seems it doesn't really work. I didn't know it was such a widely-spread issue. I guess I'll be posting at csscreator.com or something...

Many thanks.