in Resources

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.

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


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

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email