Indie-Resource.com

I've noticed that when I make a change to my css file and save it, the web page that uses the css file does not show the changes when I first load it up. I have to right click on he page and choose reload and then the css changes show up.

I was wondering if anyone else has experienced this issue with css? Is there a way I can make the css changes take effect without having to load the page and then right click and choose reload?

using Firefox?

Most likely it is the browser, It is cache'ing the files, or rather storing it in temp folder then pulling it instead of the new file.

Thanks for the response Halls. Yes I use firefox for my browser. I agree the browser is caching the files and not loading the changes. Was hoping that I could override that caching somehow so the user doesn't have to right click the page and choose reload.

I understand that browser caching of pages serves a useful purpose it just seems strange to me that the css file isn't checked for changes.

not sure why it is not, my does...maybe a setting?

F5 simply reloads a page in Firefox. However, Ctrl+F5 will erase the cache and completely reload the page. Try that if your cache is preventing up-to-date views of your webpage.

Thanks for the replies. I guess there is something in my browser settings that is causing the css file to be cached and not checked for changes. I was just curious if there was some kind of code command that would force a browser to check the css file for changes on page load.

No, it is completely in the browser and as far as I know, there is nothing you can put in your code to prevent it. It makes sense that way, because the general public will never be seeing your code as it is being actively worked on. When you do a full update on your live site, it should update fine since most browsers are smart enough to pick up a new version of a CSS file. Caching is a cornerstone of the web, and surely saves users hours upon hours of waiting annually.

How did the Ctrl+F5 work for testing?

I am at work so not able to try out the Cntrl+F5 suggestion tho I'm sure it will work fine. Jackolantern you mentioned doing a full update to my live site after I have made a change to css, is that some kind of purge or reload I would do using the godaddy interface?

Ohhh, I just meant updating the CSS file on your server, either by opening it, editing it and saving or by re-uploading a new file with the same name. You don't have to worry about browser caching on your live site, really. From time to time you may make some design decisions based on effectively utilizing user's browser cache to cut down download times (such as when creating "CSS sprites"), but I can't think of any instance when you would want to try to break the user's cache. They don't stay in their memory for very long, and when a user visits your site, the CSS won't be getting updated every few minutes like when you are in development, so having short-term caching is rarely a problem. The next time the user visits your site when it could be updated, the cache will have fallen out and they will download the new copy automatically. So as long as you can do hard resets in the browser while performing development testing, you should be fine