How to Make the Browser See CSS and JavaScript Changes

How can I make the browser see CSS and Javascript changes?

I found that if you append the last modified timestamp of the file onto the end of the URL the browser will request the files when it is modified. For example in PHP:

function urlmtime($url) {
   $parsed_url = parse_url($url);
   $path = $parsed_url['path'];

   if ($path[0] == "/") {
       $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path;
   } else {
       $filename = $path;
   }

   if (!file_exists($filename)) {
       // If not a file then use the current time
       $lastModified = date('YmdHis');
   } else {
       $lastModified = date('YmdHis', filemtime($filename));
   }

   if (strpos($url, '?') === false) {
       $url .= '?ts=' . $lastModified;
   } else {
       $url .= '&ts=' . $lastModified;
   }

   return $url;
}

function include_css($css_url, $media='all') {
   // According to Yahoo, using link allows for progressive 
   // rendering in IE where as @import url($css_url) does not
   echo '<link rel="stylesheet" type="text/css" media="' .
        $media . '" href="' . urlmtime($css_url) . '">'."\n";
}

function include_javascript($javascript_url) {
   echo '<script type="text/javascript" src="' . urlmtime($javascript_url) .
        '"></script>'."\n";
}

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.

Users don't see the CSS/JavaScript changes instantly in browser

You can just add a deploy version to your css file so this will reset cache from version to version. E.g. stylesheet.css?v=2.1.1.

Browser does not show changes in JavaScript. It keeps the old version

The CSS and js resources are probably cached by your browser.

When you change and reload to test, try reloading using Ctrl+R to refresh the cache in that reload. This should work with all browsers.

Update the CSS of a Website without refreshing the Page

Here you are: http://cssrefresh.frebsite.nl/

CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.

Just insert the javascript file and it works!

But note: It only works when you have the files on a server!

---

Edit: LiveStyle

If you develop with Sublime Text and Google Chrome or Apple Safari, then you should use Emmet LiveStyle. This is a more powerful Live CSS-Reloader.

Now I use it instead of CSS Refresh.

If you want more information about this awesome plugin, please read the Post by Smashing Magazine

---

Related Topics