Refresh CSS Automatically With CSSRefresh Javascript

CSSrefresh - automatically refresh CSS files

Here were looking at a small Javascript resource which will check when you have changed your CSS files and will automatically refresh your browser.

In modern development using CSS3 you can design a full website directly in the browser, in this situation you are making changes to your CSS files switching back the browser, refreshing the page to see the change. If you are making small changes to box-shadows/colour gradients you can be switching between browser and CSS file a lot.

What Is CSS Refresh

CSS Refresh Javascript file makes the switching so much easier by taking away the refresh and waiting for the browser to reload. If you have a dual monitor development setup then you can have your IDE in one monitor and the browser in the other monitor and you will be able to see your changes straight away in the browser.

All you have to do is include the Javascript file in your web page and as soon as you make changes to your CSS files you will see the changes without having to refresh the page.

How To Use CSS Refresh

There are two ways you can use CSS Refresh, you can either download the script and include the file on your web page or you can use the browser bookmarklet so CSS Refresh is included on every page.

Download

Download the script from the CSS Refresh website.

CSS Refresh Download

Include this file one your page in the head tag.

<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

Bookmarklet

To use the CSS Refresh bookmarklet go to the CSS Refresh website and drag the bookmarklet button to your Bookmarks bar..

CSS Refresh Button

Advertise here

Comment