Tech Blog (wh)

[CodeKit](http://incident57.com/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:

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/

Update

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

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()
})();