How does CodeKit inject CSS changes without refreshing the browser?

CodeKit is a nice little app for web development which does things like processing LESS into CSS and minifying javascript. It has one feature that is perplexing: “Inject CSS changes without a full reload”

It’s in the app’s preferences menu:

How does CodeKit inject CSS changes without refreshing the browser?

What it does: When you’re editing a CSS file and have a page that is using that CSS file open in your web browser, CodeKit watches for changes to the file and pushes the new CSS styles into the browser without doing a page reload.

I didn’t have to install any plugins into Chrome and I don’t see any in the Extensions manager for chrome, but somehow it works. How is this possible?

I do notice that after several CSS tweaks the browser will start to slow down and become unresponsive unless I refresh the page.

The Answer?

It uses CSSRefresh: http://cssrefresh.frebsite.nl/

How does CodeKit inject CSS changes without refreshing the browser?

Update

Looks like CodeKit is now using Live.js (http://www.livejs.com/) instead of CSSRefresh

How does CodeKit inject CSS changes without refreshing the browser?

 

Found the actual javascript that Codekit is using:

(function () {
  var e = {}, t = {}, n = 0,
    r = {
      refreshStylesheets: function () {
        function i(e) {
          var t = document.location,
            n = new RegExp("^\\.|^/(?!/)|^[\\w]((?!://).)*$|" + t.protocol + "//" + t.host);
          return e.match(n)
        }
        var n = document.getElementsByTagName("head")[0],
          r = document.getElementById("LPCodeKitLiveTransitionRule");
        r && n.removeChild(r);
        var s = document.styleSheets,
          o = document.styleSheets.length;
        for (var u = 0; u < o; u++) {
          var a = s[u];
          if (!a) continue;
          var f = a.media.mediaText,
            l = f.search(/print/i);
          if (l !== -1) continue;
          var c = a.href;
          if (!c) continue;
          if (!i(c)) continue;
          var h = c.split("?now=")[0],
            p = a.ownerNode,
            d = p.nextSibling,
            v = document.createElement("link");
          v.setAttribute("type", "text/css");
          v.setAttribute("rel", "stylesheet");
          v.setAttribute("href", h + "?now=" + new Date * 1);
          d ? n.insertBefore(v, d) : n.appendChild(v);
          e[h] = v;
          t[h] = p
        }
      },
      removeOldLinkElements: function () {
        if (n > 130) return;
        var i = 0;
        for (var s in t) {
          try {
            var o = e[s],
              u = t[s],
              a = o.sheet || o.styleSheet,
              f = a.rules || a.cssRules;
            if (f.length >= 0) {
              n = 0;
              u.parentNode.removeChild(u);
              delete t[s]
            }
          } catch (l) {
            n++;
            i++
          }
          i && setTimeout(r.removeOldLinkElements, 50)
        }
      },
      removeoldLinkElementsInChromeWithFileURL: function () {
        for (var e in t) {
          var n = t[e];
          n.parentNode.removeChild(n);
          delete t[e]
        }
      }
    };
  r.refreshStylesheets();
  var i = navigator.userAgent.toLowerCase().indexOf("chrome") > -1,
    s = document.URL.indexOf("file://") > -1;
  i && s ? setTimeout(r.removeoldLinkElementsInChromeWithFileURL, 400) : r.removeOldLinkElements()
})();

Related Posts:

This entry was posted in Design, Tech Tips, Web Development and tagged , , , , , . Bookmark the permalink.

One Response to How does CodeKit inject CSS changes without refreshing the browser?

  1. Bryan says:

    Bryan here; the guy that wrote CodeKit.

    CodeKit does not use CSSRefresh. The magic that goes on behind the scenes is similar in concept, though.

    As for slow-downs in your browser: this is nearly always caused by extensions that you’ve installed that don’t deal well with the CSS injection that CodeKit performs. If you see any slowdowns or errors, disable extensions until you find the one that’s incompatible.

Leave a Reply

Your email address will not be published. Required fields are marked *