[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()
})();
One Response to How does CodeKit inject CSS changes without refreshing the browser?