CSS Media Check

## check.html
<!doctype html>
<html>
  <head>

    <title>CSS Media Check</title>

    <style type="text/css">
      #mediaquery{
        -webkit-transition: width .001s;
        -moz-transition: width .001s;
        -ms-transition: width .001s;
        -o-transition: width .001s;
        transition: width .001s;
      }

      #mediaquery:after {
        content: "small";
        display: none;
      }

      @media all and (min-width: 10px) {
       #mediaquery {
         width: 50px;
       }
       #mediaquery:after {
         content: "small";
       }
      }

      @media all and (min-width: 600px) {
        #mediaquery{
          width: 100px;
        }
        #mediaquery:after {
         content: "medium";
       }
      }

      @media all and (min-width: 800px) {
       #mediaquery{
         width: 200px;
       }
       #mediaquery:after {
         content: "large";
       }
      }
    </style>


  </head>
  <body><div id="mediaquery"></div>

    <script>
      var mq = document.getElementById("mediaquery");

      function eventCheck() {
        console.log(window.getComputedStyle(document.getElementById("mediaquery"),":after").getPropertyValue("content"));
      }

      // Check for all browsers
      mq.addEventListener('webkitTransitionEnd', eventCheck, true);
      mq.addEventListener('MSTransitionEnd', eventCheck, true);
      mq.addEventListener('oTransitionEnd', eventCheck, true);
      mq.addEventListener('transitionend', eventCheck, true);

    </script>


  </body>
</html>