requestCss.js - stylesheet loader api for javaScript - attempts to work around lack-of-support for css load events && the rule number limits in MSIE

requestCss.js

/**
* file: css-api.js - provides stylesheet requestCss api to JavaScript -
* author: @dfkaye - david.kaye
* date: 2013-2-12
* fixed whitespace: 2020-07-28
*
* Prior Art:
*   - http://www.phpied.com/when-is-a-stylesheet-really-loaded/
*   - http://www.zachleat.com/web/load-css-dynamically/
*
* To-DO
*   - commonjs module support for global scope and exports
*   - better (any) negative tests for bad URLs
*
*/
(function (exports) {

  /* public */

  exports.requestCss = requestCss;

  /* local */

  var requested = {};

  /*
   * params - any number of string arguments to css filepaths.
   * The optional callback function should be the last argument.
   */
  function requestCss() {
    /*
     * <link> elements don't fire load event cross-browser
     * (webkit, FF < 9 - opera uses addEventListener...),
     * plus IE restricts <link> and @import counts to 31, nesting 3 deep, etc.
     * BUT, <style> elements fire load events!
     * AND, we can use multiple imports in a <style> to beat the IE restriction (no kidding!).
     */
    var style = document.createElement('style');

    style.setAttribute('media', 'all');

    var args = arguments;
    var len = args.length;
    var callback = args[len - 1];

    if (typeof callback === 'function') {
      len = len - 1;
      style.onload = function () {
        style.onload = null;
        callback();
      };
    }

    var pending = len;
    var cssText = '';

    // Append the element right away so that the @import directive runs on an
    // active element; borks out otherwise.
    document.getElementsByTagName('head')[0].appendChild(style);

    for (var i = 0; i < len; i++) {
      var url = args[i];

      if (typeof url == 'string' && !(url in requested)) {
        requested[url] = url;

        try {
          cssText += "\n@import url(" + url + ");";
        } catch (err) {
          console.error(err + ': ' + url);
        } finally {
          continue;
        }
      }
    }

    // try not to block other processes
    setTimeout(function () {
      if (style.styleSheet) {
        // internet explorer
        style.styleSheet.cssText = cssText;
      } else {
        // most DOM-compliant browsers
        style.appendChild(document.createTextNode(cssText));
      }
    }, 0);
  };
}(this));

Updated - fallback file for IE9-- uses style/import strategy, the rest use link strategy - see test page for latest