andrewrocco/check.html

## 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>
	<!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>