[javascript] Force browser to refresh css, javascript, etc

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.

This question is related to javascript css browser xampp

The answer is


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


The accepted answer above is correct. If, however, you only want to reload the cache periodically, and you are using Firefox, the Web Developer tools (under the Tools menu item as of November 2015) provides a Network option. This includes a Reload button. Select the Reload for a once off cache reset.


You can use the Firefox/Chrome developer toolbar:

  1. Open Dev Toolbar Ctrl + Shift + I
  2. Go to network tab
  3. Press the "disable cache" checkbox (Firefox: top right of toolbar; Chrome: top centre of toolbar)

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">

Try this:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

If you need something after the '?' that is different every time the page is accessed then the time() will do it. Leaving this in your code permanently is not really a good idea since it will only slow down page loading and probably isn't necessary.

I've found that forcing a style sheet refresh is helpful if you've made extensive changes to a page's layout and accessing the new style sheet is vital to having something sensible appear on the screen.


You can turn off caching with Firefox's web developer toolbar.


Try clearing your browsers cache.


I have decided that since browsers do not check for new versions of css and js files, I rename my css and js directories whenever I make a change. I use css1 to css9 and js1 to js9 as the directory names. When I get to 9, I next start over at 1. It is a pain, but it works perfectly every time. It is ridiculous to have to tell users to type .


If you want to avoid that on client side you can add something like ?v=1.x to css file link, when the file content is changed. for example if there was <link rel="stylesheet" type="text/css" href="css-file-name.css"> you can change it to <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1"> this will bypass caching.


If you want to be sure that these files are properly refreshed by Chrome for all users, then you need to have must-revalidate in the Cache-Control header. This will make Chrome re-check files to see if they need to be re-fetched.

Recommend the following response header:

Cache-Control: must-validate

This tells Chrome to check with the server, and see if there is a newer file. If there is a newer file, it will receive it in the response. If not, it will receive a 304 response, and the assurance that the one in the cache is up to date.

If you do NOT set this header, then in the absence of any other setting that invalidates the file, Chrome will never check with the server to see if there is a newer version.

Here is a blog post that discusses the issue further.


Make sure this isn't happening from your DNS. For example Cloudflare has it where you can turn on development mode where it forces a purge on your stylesheets and images as Cloudflare offers accelerated cache. This will disable it and force it to update everytime someone visits your site.


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.


This Firefox extension was the only solution I could get to work: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/


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.


I have a case, where I need to be able to create and change my stylesheets remotely affecting thousands of clients, but due to risk of heavy network load, I'm not turning off cache.

Since I can change the HTML contents remotely, I then link the stylesheet with a hashcode matching the contents of the stylesheet.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

That said, I also use a client-side javascript function to carefully replace nodes and attributes when HTML contents change, meaning the stylesheet link tag will not be replaced, only the href attribute will change.

This scenario works fine in Chrome, Firefox and Edge on Windows, also Chrome on Android, but doesn't always work in webclients on Android to my surprise. So I'm more or less looking for something to force/trigger the update using javascript - optimally without needing to reload the page.


<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

It will refresh if modify.


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to browser

How to force reloading a page when using browser back button? How do we download a blob url video How to prevent a browser from storing passwords How to Identify Microsoft Edge browser via CSS? Edit and replay XHR chrome/firefox etc? Communication between tabs or windows How do I render a Word document (.doc, .docx) in the browser using JavaScript? "Proxy server connection failed" in google chrome Chrome - ERR_CACHE_MISS How to check View Source in Mobile Browsers (Both Android && Feature Phone)

Examples related to xampp

Xampp localhost/dashboard phpMyAdmin ERROR: mysqli_real_connect(): (HY000/1045): Access denied for user 'pma'@'localhost' (using password: NO) Is there way to use two PHP versions in XAMPP? Where to find htdocs in XAMPP Mac phpMyAdmin access denied for user 'root'@'localhost' (using password: NO) How to downgrade php from 7.1.1 to 5.6 in xampp 7.1.1? How to turn on/off MySQL strict mode in localhost (xampp)? mysqli_connect(): (HY000/2002): No connection could be made because the target machine actively refused it How to install mcrypt extension in xampp Fatal error: Uncaught Error: Call to undefined function mysql_connect()