CSSrefresh.js - auto refresh CSS files in browser With Examples

Recently I got to know about a great tool for CSS developers – CSSrefresh.js. Like any website owner, I always crave to change my website themes and WordPress plugin layouts to get a better presentation. Most of the times, it’s updating CSS files to get the desired result. But every time I change my CSS files, I need to refresh the full webpage to see its effect and trust me its frustrating to jump from my terminal to browser and keep continuing this process.

So I started looking for a way to auto refresh my web page as soon as I make changes any CSS files in server, after some digging I found CSSrefresh – great tool that is really easy to use and works pretty well and save a lot of time.

CSSrefresh.js – how to use

  1. Download cssrefresh.js from here. Save this javascript file with other js files you have.
  2. Add following code just before </head> of your html page. If you are using wordpress you need to add this code in header.php file.
  3. Reload the page in browser and start editing CSS files, the script will take care of the browser.

Tips for using CSSrefresh.js

  • CSSrefresh.js uses XMLHttpRequest to get the modification time of CSS files, so it can work only in a server environment.
  • Only CSS files included before the CSSrefresh.js file will be refreshed, so if you are working on a single file, try putting it just after that.
  • Make sure to remove this once you are done with your changes because it will unnecessarily add load to the server.
  • CSSrefresh.js also have a bookmarklet that you can use but I prefer to use low level APIs.

By admin

Leave a Reply

%d bloggers like this: