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.

About Pankaj

If you have come this far, it means that you liked what you are reading. Why not reach little more and connect with me directly on Google Plus, Facebook or Twitter. I would love to hear your thoughts and opinions on my articles directly.

Recently I started creating video tutorials too, so do check out my videos on Youtube.

I read a lot of books, below is the one I am currently reading.

Below are some of the recommended books in different technologies.

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=""> <s> <strike> <strong>

Subscribe to JournalDev Newsletter
Get the FREE access to JournalDev 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