Dynamically loading stylesheets, cssRules is coming up as null
<p>I'm trying to dynamically load a stylesheet, and check whenever it's ready with cssRules property, but it's coming up as null, and I can't see why. (Chrome)</p>

<p>Here is an example:</p>

<p><a href="http://jsfiddle.net/PeSqR/" rel="nofollow">http://jsfiddle.net/PeSqR/</a></p>

<pre><code>var href = "http://twitter.github.io/bootstrap/assets/css/bootstrap.css";

var link = document.createElement('link');
link.setAttribute('href', href);
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');

var intervalId = setInterval(
    function(){
        try{
            //console.log(link.sheet);
            //console.log(link.sheet.cssRules);
            if(link.sheet &amp;&amp; link.sheet.cssRules.length){
                clearInterval(intervalId);
                clearTimeout(timeoutId);
            }
        }
        catch(e){
            //console.log('err...' + e.message);
        }
    },
10);

var timeoutId = setTimeout(
    function(){
        clearInterval(intervalId);
        clearTimeout(timeoutId);
        alert('ERROR');
    },
5000);

document.getElementsByTagName('head')[0].appendChild(link);
</code></pre>

<p>Thanks for your help.</p>
