Update the CSS of a Website without refreshing the Page

javascript jquery html css ajax
user1671245 picture user1671245 · Oct 2, 2012 · Viewed 16.3k times · Source

I've created a page with CSS. Now I must change from my editor to my browser and refresh the full page, just to have a look at every little change. But I don't want to refresh the page, because I have some animations.

So is there anything which I can use that my site updates automatically after a CSS update?
Maybe with JavaScript, jQuery, Ajax or something?

Answer

Michael Schmidt picture Michael Schmidt · Oct 2, 2012

Here you are: http://cssrefresh.frebsite.nl/

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.

Just insert the javascript file and it works!

But note: It only works when you have the files on a server!

Edit: LiveStyle

If you develop with Sublime Text and Google Chrome or Apple Safari, then you should use Emmet LiveStyle. This is a more powerful Live CSS-Reloader.
Now I use it instead of CSS Refresh.

If you want more information about this awesome plugin, please read the Post by Smashing Magazine

Related questions

Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More
Set timeout for ajax (jQuery)

$.ajax({ url: "test.html", error: function(){ //do something }, success: function(){ //do something } }); Sometimes success function works good, sometimes not. How do I set timeout for this ajax request? In example, 3 seconds, if time is out, then show an error. The …

Read More
How to apply !important using .css()?

I am having trouble applying a style that is !important. I’ve tried: $("#elem").css("width", "100px !important"); This does nothing; no width style whatsoever is applied. Is there a jQuery-ish way of applying such a style without having to …

Read More