javascript - Update the CSS of a Website without refreshing the Page - Stack Overflow

admin管理员组

文章数量:1134601

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?

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?

• javascript
• jquery
• html
• css
• ajax

Share Improve this question Follow edited Nov 12, 2013 at 12:58 asked Oct 2, 2012 at 7:46 user1671245user1671245 4

• 1 You can use the developerstoolkit of chrome to test changes on the fly to your website, and if it's working, you can add it to your .css file... – Mathlight Commented Oct 2, 2012 at 7:48
• Hi @all. Now i search the same but for changes in the HTML files! Anyone? – user1714425 Commented Oct 12, 2012 at 10:52
• @Karen, Please post a new question as this would require an entirely different answer. – A.M.K Commented Oct 14, 2012 at 2:52
• 1 +1 for @TWCrap 's recommendation. I do that all the time. – Parris Commented Nov 2, 2012 at 20:48

Add a comment  | 

13 Answers 13

Sorted by: Reset to default 81 +100

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

With jQuery you can create a function that reloads external stylesheets.

/**
 * 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);
    });
}

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

It works as a browser plugin for OS X and windows. I like it because I do not have to embed additional javascript which I could accidentally commit in my versioning control.

I find browser plugins/extensions to be the easiest solution. They don't require any code changes to your individual sites. And they can be used for any site on the web — which is useful if I modify something in-memory real quick to hide a toolbar or fix a bug temporarily; once finished mucking with it, I can press a key and all the CSS is back to normal.

Once installed, (most) CSS reloaded plugins/extensions don't reload the CSS automatically. But usually work with something as simple as a toolbar button, a context menu item, and/or a simple key press to reload the CSS. I find this method is less error prone anyway, and is much less complicated then some of the automated solutions out there.

Some examples (feel free to suggest some others):

Chrome:

• tin.cr (includes automatic reload, and can persist in-browser changes to source files)
• CSS Refresh

Firefox:

• CSS Reloaded
• CSS Refresh

Here is my little Project. Please give it a try
CSS Auto reload on Github

Yes you can manipulate the CSS via jQuery:

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

You could also use the toggleClass method.

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

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

Firebug for FireFox.

It's a plugin in an attached/separate window. Changes to HTML/CSS appear instantly, elements are highlighted.

Advantage over JS hacks is that you can't copy this accidentally to your production instance.

You are looking for Live Reload:

It's available as a browser extension and easy to implement

http://livereload.com/

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

Firebug for Firefox is my prefered 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 so on. If you wan't to tweak your design this is your choice. You can even save changes to a local copy, but I hardly ever use that feature.

If you are using Firefox then you can install Web Developer Toolbar 1.2.2 from Add-on of Firefox which has option of Reload Linked Stylesheets.

Try using CSS Brush, a chrome plugin for creating CSS live. You needn't have to write all CSS in a text editor, come back to browser and reload it, rather write the CSS live as if you were doing it in a text editor. You will have more features than a text editor here like context-sensitive-menu, use duplicate properties, select complete CSS path or a filtered path of a element directly from the page.

This might help -> chaicode

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

本文标签： javascriptUpdate the CSS of a Website without refreshing the PageStack Overflow