Force Browser to Use New CSS

Force browser to refresh CSS, JavaScript, etc

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:

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

How to force Chrome browser to reload .css file while debugging in Visual Studio?

There are much more complicated solutions, but a very easy, simple one is just to add a random query string to your CSS include.

Such as src="/css/styles.css?v={random number/string}"

If you're using php or another server-side language, you can do this automatically with time(). So it would be styles.css?v=<?=time();?>

This way, the query string will be new every single time. Like I said, there are much more complicated solutions that are more dynamic, but in testing purposes this method is top (IMO).

Force browser to use new CSS

I don´t know if it is correct usage, but I think you can force a reload of the css file using a query string:

<link href="mystyle.css?SOME_UNIQUE_TEXT" type="text/css" rel="stylesheet" />

I remember I used this method years ago to force a reload of a web-cam image, but time has probably moved on...

How can I force the browser to load the html and css pages from server rather than from cache?

There are a lot of different options here, but the idea is to append some kind of dynamic value to the end of the path when you include it.

For example:

<link href="styles.css?test=123" rel="stylesheet" />

That would force the browser to load the stylesheet from the server once, but then that version would be cached.

If you are using some kind of server-side language like PHP or .NET, you can put a dynamic value at the end that will be different every time the page loads for a user.

In PHP:

<link href="styles.css?test=<?=(new DateTime())->format("YmdHis")?>" rel="stylesheet" />

How to force a browser to show the latest changes to a CSS file?

Add a unique string as query string when linking the stylesheet. Here's an example

<link href="style.css?<?=filemtime("style.css")?>" rel="stylesheet" type="text/css" />

Forcing the browser to reload css/js only if they have changed

It may not be the best way, but this is what I am doing now:

1. All of my js/css have a [source control = svn] revision number
2. References in my jsp are like /foo/path1/path2/xyz000000/foo.
3. Build Step 1 - Generate a map of css|js files and their revision numbers
4. Build Step 2 - Replace xyz000000 references in jsps with a hash of svn revisions
5. A rule in url rewriter to direct all /foo/path1/path2/xyz<767678>/foo. to /foo/path1/path2/foo.[js|css]
6. Infinitely cache the css|js files
7. Whenever there is a commit, the revision number changes and so do the references in .jsp

force browsers to get latest js and css files in asp.net application

I solved this by tacking a last modified timestamp as a query parameter to the scripts.

I did this with an extension method, and using it in my CSHTML files. Note: this implementation caches the timestamp for 1 minute so we don't thrash the disk quite so much.

Here is the extension method:

public static class JavascriptExtension {
    public static MvcHtmlString IncludeVersionedJs(this HtmlHelper helper, string filename) {
        string version = GetVersion(helper, filename);
        return MvcHtmlString.Create("<script type='text/javascript' src='" + filename + version + "'></script>");
    }

    private static string GetVersion(this HtmlHelper helper, string filename)
    {
        var context = helper.ViewContext.RequestContext.HttpContext;

        if (context.Cache[filename] == null)
        {
            var physicalPath = context.Server.MapPath(filename);
            var version = $"?v={new System.IO.FileInfo(physicalPath).LastWriteTime.ToString("MMddHHmmss")}";
            context.Cache.Add(filename, version, null,
              DateTime.Now.AddMinutes(5), TimeSpan.Zero,
              CacheItemPriority.Normal, null);
            return version;
        }
        else
        {
            return context.Cache[filename] as string;
        }
    }
}

And then in the CSHTML page:

 @Html.IncludeVersionedJs("/MyJavascriptFile.js")

In the rendered HTML, this appears as:

 <script type='text/javascript' src='/MyJavascriptFile.js?20111129120000'></script>

---

Related Topics