105

I'm developing a website based on WordPress source code through XAMPP. Sometimes I change the CSS code, scripts 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 it 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 noticing the previous modifications.

3
  • 4
    Browsers cache. Anytime you make changes to CSS, JavaScript and are viewing the page you've updated - you will see this concern. You can force a refresh by pressing CTRL+F5 on the browser and that will get the latest version. I've found the Chrome sometimes requires that sequence a couple times...
    – anAgent
    Commented Jul 13, 2012 at 16:21
  • you could also clear the browser cache programatically
    – Pawan
    Commented Jul 13, 2012 at 16:31
  • Answer here: Answer of Fermin.
    – JWC May
    Commented Dec 7, 2017 at 10:10

17 Answers 17

136

General solution

Pressing Ctrl + F5 (or Ctrl + Shift + R) to force a cache reload. I believe Macs use Cmd + Shift + R.

PHP

In PHP, you can disable the cache by setting the expiration date to a time in the past with headers:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrome

Chrome's cache can be disabled by opening the developer tools with F12, clicking on the gear icon in the lower right corner and selecting Disable cache in the settings dialog, like this:

enter image description here
Image taken from this answer.

Firefox

Type about:config into the URL bar then find the entry titled network.http.use-cache. Set this to false.

4
  • Thank you JamWaffles for the detailed description and thank you all for the replys. Thank you very much. Commented Jul 13, 2012 at 16:29
  • In recent versions of Chrome: CTRL+R.
    – Alix Axel
    Commented Jun 25, 2013 at 1:29
  • 1
    For Chrome the interface you shared changed a little. Just press the Network tab and you'll find the checkbox there. Commented Mar 8, 2017 at 2:09
  • 6
    FYI: for Opera on Mac it's cmd-alt-R
    – Derwent
    Commented May 24, 2017 at 4:58
61

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.

4
  • 2
    Good point, but then browser ask always about file. Of course server will return "304 Not Modified". Commented May 31, 2013 at 13:25
  • 1
    @ajozwik I tested with Firefox 26.0 and Chromium 31.0.1650.57. Just as you said, Firefox indeed makes a new query every time if the CSS URL contains a question mark (and the server gives response 304 with empty body); Firefox does not make a new query if the CSS URL doesn't contain a question mark. Chromium does not make a new query even with question mark. Probably this can be considered a bug of Firefox.
    – Jaan
    Commented Jan 17, 2014 at 18:47
  • doesn't work my friends in this way. Only if filename is different. Why so many upvotes? Commented May 11, 2018 at 9:00
  • 1
    I found in many other places the same approach given in this answer, I believe this worked in the past but is not working anymore. If you are in development mode the best and universal approach is to disable caching in the browser via HTML meta tags. See my answer below.
    – ePi272314
    Commented May 30, 2018 at 4:27
13

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">
1
  • 1
    This appears to work for Chrome on my PC, but does not appear to always work for my users on their mobile devices. Commented Oct 12, 2023 at 13:25
12

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.

4
  • It doesn't work in this way! Only if filename is different browser reloads. Or maybe with this hint only for some browsers work, if it has worked for you Commented May 11, 2018 at 8:59
  • I used it with a ?v= style.css<?php echo '?v='.mt_rand(); ?>' type='text/css' media='all' />
    – carnini
    Commented Feb 27, 2022 at 15:22
  • @Gediminas — I tested it in Chrome (the biggest troublemaker) on Win and Android and it worked flawlessly. Even with the server set to ‘Use the cached file’. Commented May 11, 2022 at 23:53
  • Thanks for this great solution, would someone happen to know how to implement it with WordPress?
    – Keyslinger
    Commented Nov 21, 2023 at 20:32
5

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.

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

It will refresh if modify.

2
  • Very nice solution for all those projects that aren't using webpack or a packing tool that automatically adds versioning to resources. Commented Apr 23, 2019 at 16:05
  • I did not downvote it, but this solution does not work well in latest chrome as of today, it still fetches the previous version of the JavaScript file Commented Sep 9, 2019 at 20:31
3

And I didn't see anyone going to the answer. Here is simple trick to get the external css loaded each time

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

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.

1

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

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

0

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.

0

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

1
  • 1
    Did you consider the OP might not use php?
    – Oram
    Commented Dec 18, 2018 at 12:50
0

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 .

0

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.

-1

Try clearing your browsers cache.

-1

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

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

1
  • 1
    It doesn't work in this way! Only if filename is different browser reloads. Or maybe with this hint only for some browsers work, if it has worked for you. Downvote Commented May 11, 2018 at 8:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.