I recently examined the Javascripts used in the new Google Plus platform and discovered an interesting approach to loading CSS. Instead of utilizing <link> tags to reference a CSS file, Google Plus employs XHR to retrieve the CSS content from a separate file. It then dynamically creates a <style> element and injects the CSS content into it.
What might be the rationale behind Google's decision to implement this method for loading CSS?
Evidence:
D = function(a) {
var b = document.createElement("style");
b.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(b);
b.styleSheet ? b.styleSheet.cssText = a : b.appendChild(document.createTextNode(a))
};
var ia = function(a, b) {
if(4 == b.readyState) {
var d = window;
$("xcl");
b.onreadystatechange = k;
var c = b.status;
if(400 > c) {
try {
var e = b.getResponseHeader("X-Framework-CSS-Blocks"), f = b.responseText;
if(e) {
for(var e = e.split(","), g = c = 0;g < e.length;g++) {
var V = Number(e[g]);
D(f.substr(c, V));
c += V
}
c < f.length && D(f.substr(c))
}else {
D(f), ha() && C("css", a, d.OZ_lang, "nooffsets")
}
d.setTimeout(function() {
for(var b = i, c = 0, e = document.styleSheets.length;c < e;c++) {
var g = document.styleSheets[c], g = g.cssRules || g.rules;
0 < g.length && "sentinel" == g[g.length - 1].selectorText && (b = !0)
}
b || C("css", a, d.OZ_lang, "truncated." + f.length)
}, 1E3)
}catch(W) {
throw d.console && d.console.warn(W), C("css", a, d.OZ_lang, "error"), W;
}
}else {
C("css", a, d.OZ_lang, "status." + c)
}
$("xcr")
}
}, ja = function() {
var a = window.OZ_cssUrl;
$("xcs");
var b = ga();
b.open("GET", a, !0);
b.onreadystatechange = function() {
ia(a, b)
};
b.send(h)
}
window.OZ_cssUrl && ja()