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?

Leave a Reply

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