Refresh your CSS site without refreshing the page.

Question

I created a page with CSS. Now I have to go from my editor to my browser and refresh the full page, just to look at every small change. But I do not want to refresh the page because I have animation.

So is there anything I can use to have my site automatically refresh after CSS updates?
Maybe with JavaScript, jQuery, Ajax, or something like that?

Answer 1

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

CSSrefresh is a small, unobtrusive javascript file that controls the CSS files included in your web page. As soon as you save the CSS file, the changes will be directly implemented without updating your browser.

Just paste the javascript file and it will work!

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

---

Edit: LiveStyle

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

If you want more information about this awesome plugin, read the Message from Smashing Magazine

Answer 2

With jQuery, you can create a function that reloads external style sheets.

/** * Forces a reload of all stylesheets by appending a unique query string * to each stylesheet URL. */ function reloadStylesheets() { var queryString = '?reload=' + new Date().getTime(); $('link[rel="stylesheet"]').each(function () { this.href = this.href.replace(/\?.*|$/, queryString); }); } 

Answer 3

Take a look at http://livereload.com/ .

It works as a browser plugin for OS X and Windows. I like it because I don’t need to embed additional javascript, which I could accidentally commit in my version control.

Answer 4

I believe browser plugins / extensions are the easiest solution. They do not require any code changes on your individual sites. And they can be used for any website on the Internet - which is useful if I can change something in my memory to quickly hide the toolbar or fix the error temporarily; after I am done with it, I can press a key and all CSS will return to normal.

After installation (most), reloaded CSS plugins / extensions do not reload CSS automatically. But usually they work with something as simple as a toolbar button, a context menu item and / or a simple keystroke to reload CSS. I find that this method is in any case less error prone and much less complicated than some of the automated solutions.

Some examples (feel free to suggest some others):

Chrome:

• tin.cr (enables automatic reboot and can be stored in browsers in source files)
• CSS update

Firefox:

• CSS Reloaded
• CSS update

Answer 5

Here is my little project. Please try Reloading CSS on Github

Answer 6

Yes, you can manipulate CSS with jQuery :

 $(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 ); 

You can also use the toggleClass method.

http://api.jquery.com/toggleClass/

http://jqueryui.com/demos/switchClass/

Answer 7

Firebug for Firefox.

This is a plugin in an attached / separate window. Changes in HTML / CSS appear instantly, elements are highlighted.

The advantage over JS hacks is that you cannot accidentally copy this to your production instance.

Answer 8

Are you looking for Live Reload:

It is available as a browser extension and is easy to implement.

http://livereload.com/

Answer 9

The new open-source code editor brackets has a Live Development function, where you can edit CSS in the editor, and it will immediately be reflected in the Chrome browser. Currently it only works for CSS editing, but HTML editing is coming!

Answer 10

Firebug for Firefox is my preferred method: https://addons.mozilla.org/de/firefox/addon/firebug/ You can edit HTML and CSS on the fly, quickly deactivate CSS rules (without deleting them), add or remove HTML and etc. If you do not customize your design, this is your choice. You can even save the changes to a local copy, but I almost never use this function.

Answer 11

It may help - > chaicode

Its a live CSS, Javascript and HTML editor that is open source and wip. github

Answer 12

If you use Firefox, you can install Web Developer Toolbar 1.2.2 from the Firefox add-on, which has the option to reload related styles.

Answer 13

Try using CSS Brush , a chrome plugin to create CSS in real time. You do not need to write all the CSS in a text editor, return to the browser and reload it, and write in CSS format as if you were doing it in a text editor. You’ll have more options than a text editor, such as a context-sensitive menu, using duplicate properties, choosing the full CSS path, or a filtered element path directly from the page.