CSSrefresh, automatically refresh stylesheets as soon as you save
If you’re like me, obsessed with the minimal, meaningless detail specially when it boils down to refine stylesheets, you likely prove mastery over the subtle art of typing and switching from the editor to the browser while pressing the Magic Combo Command + R so fast that even Flash Gordon would be confused watching you.
Well, relax. They found a cure. It’s called CSSrefresh and it will refresh all the CSS files as soon as you save from inside your favorite editor.
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
I do recommend it. It’s such a pleasure not to have to press the devilish combo! One feels really relieved.
Hot to use CSSrefresh
And that’s super simple, too. Download the file cssrefresh.js from the official project page CSSrefresh, and include it into the page your working on. More options on the CSSrefresh official page.
<!-- So, first include any .css file you need --> <link rel="stylesheet" type="text/css" href="css/site.css" /> <!-- then include cssrefresh.js and let it do the job! --> <script type="text/javascript" src="js/cssrefresh.js"></script>
Note: only CSS files that have been imported before the file cssrefresh.js will be monitored.
Where?
The author suggests to include cssrefresh.js in the <head> of your page. I instead wait till the footer to link to it.
<script type="text/javascript" src="js/cssrefresh.js"></script> <!-- just before the closing </body> --> </body> </html>
…and till now everything works wonderfully. I prefer to load all the other stuffs before. Also this way I hardly risk to include a stylesheet later than cssrefresh.js itself.
Development vs Deployment
Well, this should be obvious, but I remind just in case. CSSrefresh is a production tool, and it will become unnecessary once the website will finally go live. I would make sure to remove it once you get there.
And now, enjoy!
Wait, can we refresh also LESS?
Wouldn’t be sweet, indeed, if we could automatically refresh also .less files? Yes… very! So, stay tuned, I may have a surprise for you, coming soon.
