After DURIS has finished all required operations you can will get 4 CSS files — out.css, addon.css, addon.std.css, and addon.ie.css.js. The following code will be inserted into the head section of HTML file. Let's look in details.
<!-- a link to the prepared CSS file -->
<link rel="stylesheet" type="text/css" href="out.css" />
<!-- link to the data:URI file -->
<!--[if !IE]>-->
<link rel="stylesheet" type="text/css" href="addon.css" />
<!--<![endif]-->
<!-- all logic for IE -->
<!--[if lte IE 7]>
<script type="text/javascript">
(function(){
try {
/* we try to scroll document, on success we will add dynamic styles to head */
document.documentElement.doScroll("left");
/* check if Vista is used
if yes we will load CSS file with direct calls to background images,
if not - we will use generic file with mhtml images.
IE7 under Vista has some problems with mhtml-related resources. */
var Vista = /NT 6.0/i.test(navigator.userAgent);
var D = document;
var node = D.getElementsBynodeName("head")[0].appendChild(D.createElement(Vista?"link":"script"));
if (Vista) {
node.type = "text/css";
node.rel = "stylesheet";
/* load standard file (with calls to external background images) */
node.href = "addon.std.css";
} else {
/* make script load deferred to speed up website load */
node.defer = "defer";
node.type = "text/javascript";
node.src = "addon.ie.css.js";
}
} catch (expression) {
/* if we can't scroll - try to execute this function once more */
setTimeout(arguments.callee, 0);
}
})();
/* for browsers with JS disabled we can include directly CSS file */
</script>
<noscript>
<link rel="stylesheet" type="text/css" href="addon.std.css" />
</noscript>
<![endif]-->
Upper code is valid (noscript in head is included via conditional comments). And for every browser we have only 2 calls to CSS files. All mentioned files should be placed with addresses that are mentioned in the HTML file (usually they are the same as for initial CSS files). It's important for mhtml images calls.
If you have a lot of background images, their load can consume a lot of time (and user will see white screen as all of images are included into CSS file). We can add dynamic CSS file load (via document.createElement / document.appendChild) on deferred JavaScript load.
After completed research we can definitely say that the fastest way to add dynamic CSS rules to the document is via DOM methods (and via AJAX methods and style.innerText for Safari/Chrome). But any other ways adds not more than 20-30% delay to add CSS rules into document dynamically.
We can combine generic CSS file, CSS file for modern browsers and for IE into one (with redefining some rules with 'star' hack especially for IE). But w/o gzip overall file size will increase by 2 times (because we will have all images included and via mhtml, and via data:URI - base64 information will be duplicated). This method can be used to extremely minify numbers of requests to the server to receive design data.