How to Reload CSS Without Reloading the Page

Is there an easy way to reload css without reloading the page?

On the "edit" page, instead of including your CSS in the normal way (with a <link> tag), write it all to a <style> tag. Editing the innerHTML property of that will automatically update the page, even without a round-trip to the server.

<style type="text/css" id="styles">
    p {
        color: #f0f;
    }
</style>

<textarea id="editor"></textarea>
<button id="preview">Preview</button>

The Javascript, using jQuery:

jQuery(function($) {
    var $ed = $('#editor')
      , $style = $('#styles')
      , $button = $('#preview')
    ;
    $ed.val($style.html());
    $button.click(function() {
        $style.html($ed.val());
        return false;
    });
});

And that should be it!

If you wanted to be really fancy, attach the function to the keydown on the textarea, though you could get some unwanted side-effects (the page would be changing constantly as you type)

Edit: tested and works (in Firefox 3.5, at least, though should be fine with other browsers). See demo here: http://jsbin.com/owapi

Reload CSS stylesheets without reloading the page?

I haven't tried it, but this bookmarket promises to do the job: ReCSS. I'm sure you could repurpose the code in there.

reload css in browser without refresh

Try this code:

$.ajax({
    type: "POST",
    url: "handlers/load-css-file.ashx",
    data: { colorCode: colorCode, defaultColor:   defaultColor,currentCss:currentCss },
    dataType: 'text',
    async: false,
    success: function () {
        _edSite.theme = currentCss;
        edLoadCss(_workUrl + _edSite.theme);
    },
    error: function () {
        alert("Please try after some time.");
    }
 });

 //loading css file on the website
 function edLoadCss(href) {
    var d = new Date();
    $("link [rel=stylesheet]").attr("href", href + "?" + d.getTime());
 };

Update the CSS of a Website without refreshing the Page

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 Topics