CSSrefresh.js – auto refresh CSS files in browser

Filed Under: HTML

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.
    <script type="text/javascript" src="js/cssrefresh.js"></script>
  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.
Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors