title: How to use CSSStyleSheet.insertRule() properly?
body: <p>I can't figure out where I'm going wrong here :/. When I run this code, all I get is a blank  element. I can't seem to get the insertRule method to do anything (not even produce an error). Am I missing something?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
      var sheet = (function() {
          // Create the &lt;style&gt; tag
          var style = document.createElement("style");
  
          // WebKit hack
          style.appendChild(document.createTextNode(""));
  
          // Add the &lt;style&gt; element to the page
          document.head.appendChild(style);
  
          return style.sheet;
      })();
      sheet.insertRule("\
          #gridContainer {\
              width: 100%;\
              height: 100%;\
          }\
      ", 0);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>