How to auto update CSS of web page without refreshing

Like any website owner, I always crave to change my website themes and wordpress plugin layouts to get better presentation. Most of the times, its 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.

Steps to use CSSrefresh

  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

  • CSSrefresh 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 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 also have a bookmarklet that you can use but I prefer to use low level APIs.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe to JournalDev Newsletter
Get the FREE access to Monthly Newsletter and Free PDF eBooks
*No Spam Guaranteed. By entering your email address, you agree also subscribing to our newsletter.
Oops! - Something went wrong.
Close
Limited Offer: Java 8 Lambda Expressions PDF eBook Free Download Now
Exclusive Offer: Citrix™ Whitepaper on Denial of Service Attack Download Now
Advertisment ad adsense adlogger