tests/ie8-jsincss.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
  <title>JSinCSS in IE8</title>

  <!-- IE8 Polyfills for addEventListener() and querySelectorAll() -->
  <script>
    /*
     * addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
     * Forked from http://css-tricks.com/snippets/javascript/addeventlistner-polyfill/
     * Adds the native DOM2 function addEventListener on IE6 - 8.
     */

    (function (win, doc) {

      // If the function already exists, no need to polyfill
      if (win.addEventListener) return;

      function docHijack(p) {
        var old = doc[p];
        doc[p] = function (v) {
          return addListen(old(v))
        }
      }
      function addEvent(on, fn, self) {
        return (self = this).attachEvent('on' + on, function(e) {
          var e = e || win.event;
          e.preventDefault  = e.preventDefault  || function(){e.returnValue = false}
          e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
          try {
            fn.call(self, e);
          }
          catch (e) {}
        });
      }
      function addListen(obj, i) {
        if (i = obj.length) while (i--) obj[i].addEventListener = addEvent;
        else obj.addEventListener = addEvent;
        return obj;
      }
      addListen([doc, win]);
      if ('Element' in win) win.Element.prototype.addEventListener = addEvent;      // IE8
      else{                                                                       // IE < 8
        doc.attachEvent('onreadystatechange', function(){addListen(doc.all)});    // Make sure we also init at domReady
        docHijack('getElementsByTagName');
        docHijack('getElementById');
        docHijack('createElement');
        addListen(doc.all);
      }
    })(window, document);

    /*
     * document.querySelector and querySelectorAll polyfill / Maxime Euzière / public domain
     * Forked from: http://xem.github.io/Lazy/
     * Adds basic DOM selection on IE6-8 (selection by tag, class or id only)
     */

    (function(doc) {
      if (doc.querySelectorAll) return;

      doc.querySelectorAll = function(a) {
        if ("#" == a.charAt(0)) return [doc.getElementById(a.substr(1))];
        if ("." == a.charAt(0)) return doc.getElementsByClassName(a.substr(1));
        return doc.getElementsByTagName(a);
      }

      doc.querySelector = function(a) {
        return querySelectorAll(a)[0];
      }
    })(document);
  </script>

  <!-- JS-in-CSS with Container Queries Mixin -->
  <script>
    window.addEventListener('load', JSinCSS)
    window.addEventListener('resize', JSinCSS)
    document.documentElement.addEventListener('keydown', JSinCSS)
    document.documentElement.addEventListener('keyup', JSinCSS)
    document.documentElement.addEventListener('mousedown', JSinCSS)
    document.documentElement.addEventListener('mouseup', JSinCSS)

    function JSinCSS(e) {

      var tag = document.querySelector('#JSinCSS')

      if (!tag) {

        tag = document.createElement('style')
        tag.id = 'JSinCSS'
        document.getElementsByTagName('head')[0].appendChild(tag)

      }

      var css = ''

      css += containerQuery('input', 'this.value.length > 5', '$this { background: lime; }')

      css += containerQuery('div', 'this.offsetWidth > 500', '$this { background: blue; margin: 1em 0; }')

      if (tag.styleSheet) {

        tag.styleSheet.cssText = css

      } else {

        tag.innerHTML = css

      }

      return true

    }

    function containerQuery(selector, test, stylesheet) {

      var tag = document.querySelectorAll(selector)
      var style = ''
      var count = 0

      for (var i=0; i<tag.length; i++) {

        var attr = (selector+test).replace(/[= "'<>+.]/g, '')

        var func = new Function('return ' + test)

        if (func.call(tag[i])) {

          var element = '[data-' + attr + '="' + count + '"]'
          var css = stylesheet.replace(/\$this/g, element)

          tag[i].setAttribute('data-' + attr, count)

          style += css

          count++

        } else {

          tag[i].setAttribute('data-' + attr, '')

        }

      }

      return style

    }
  </script>
</head>
<body>

  <p>Type more than 5 characters into the INPUT below:</p>
  <input>
  <input>

  <p>DIVs below blue if wider than 500px</p>
  <div style="width: 100%">100% wide</div>
  <div style="width: 66.66%">66.6% wide</div>
  <div style="width: 33.33%">33.33% wide</div>

</body>
</html>