JavaScript: Media Queries sob demanda

gistfile1

/**
 * Carregamento condicional de css/img conforme a resolução.
 *
 * Através de data-*, permite que somente as folhas de estilos (e, 
 * opcionalmente, imagens) que batem com determinada resolução sejam 
 * carregados e entrem em ação.
 *
 * Deve-se usar seguindo o modelo:
 * <link rel="stylesheet"
 *       class="mediaquerydependent"
 *       data-media="screen and (min-width: 600px)"
 *       data-href="green.css">
 *
 * Para o caso de JS desabilitado, é interessante haver uma folha de 
 * estilos "comum" (antes de todas as outras) para prover estilos 
 * mínimos.
 *
 * @return void
 * @see http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/
 */
(function(){
  var queries = document.
                querySelectorAll('.mediaquerydependent'),
      all = queries.length,
      cur = null,
      attr = null;
  while (all--) {
    cur = queries[all];
    if (cur.dataset.media &&
        window.matchMedia(cur.dataset.media).matches) {
      for (attr in cur.dataset) {
        if (attr !== 'media') {
          cur.setAttribute(attr, cur.dataset[attr]);
        }
      }
    }
  }
}());