Force browser to refresh css, javascript, etc

Question

I'm developing a website based on Wordpress source code through XAMPP. Sometimes I change the CSS code, scrips or something else and I notice my browser takes time to apply the modifications. This leads me to use multiple browsers to refresh one and if doesn't apply the new styles I try the second one and it's always this.

There is some way of avoiding this problem? Sometimes I'm changing code without notice the previous modifications.

Answer 1

Developer point of view
If you are in development mode (like in the original question), the best approach is to disable caching in the browser via HTML meta tags. To make this approach universal you must insert at least three meta tags as shown below.

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

In this way, you as a developer, only need to refresh the page to see the changes. But do not forget to comment that code when in production, after all caching is a good thing for your clients.

Production Mode
Because in production you will allow caching and your clients do not need to know how to force a full reload or any other trick, you must warranty the browser will load the new file. And yes, in this case, the best approach I know is to change the name of the file.

Answer 2

In stead of link-tag in html-head to external css file, use php-include:

<style>
<?php
include("style.css");
?>      
</style>

Kind of hack, but works for me :)

Answer 3

check out the CSS Cache Buster plugin - this automatically adds a random number to the style sheet url, much like the answer from loler. the v= needs to different every time you need a fresh look at the css.

http://www.alistercameron.com/2008/09/12/wordpress-plugin-css-cache-buster/

This will also ensure that your users recieve the latest CSS file if you change anything while live.

Answer 4

Try clearing your browsers cache.

Answer 5

Check this: How Do I Force the Browser to Use the Newest Version of my Stylesheet?

Assumming your css file is foo.css, you can force the client to use the latest version by appending a query string as shown below.

<link rel="stylesheet" href="foo.css?v=1.1">

Answer 6

If you can write php, you can write:

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

It will always refresh!

EDIT: Of course, it's not really practical for a whole website, since you would not add this manually for everything.