Width detection via sneaky CSS rules

## breakpoints_via_css.html
<!DOCTYPE html>
<!--[if IE 8]>    <html lang="sv-SE" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="sv-SE" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <title>Breakpoint detection test</title>
    <style type="text/css" media="screen">
        @media screen and (min-width: 320px) {
            #page:after {
                content: 'smallest'; /* represent the current width-bracket */
                display: none; /* hide ALL THE THINGS */
            }
        }
        @media screen and (min-width: 480px) {
            #page:after {
                content: 'small'; /* represent the current width-bracket */
            }
        }

        @media screen and (min-width: 600px) {
            #page:after {
                content: 'large'; /* represent the current width-bracket */
            }
        }

        @media screen and (min-width: 768px) {
            #page:after {
                content: 'largest'; /* represent the current width-bracket */
            }
        }

    </style>

</head>
<body>
    <div id="page">
        <h1>Reload at different viewport widths to trigger script.</h1>
    </div>
    <script type="text/javascript" charset="utf-8">
        (function(win){
            var doc=win.document,
                el,
                pseudo;
            if (win.getComputedStyle && doc.querySelector) {
                el = doc.querySelector('#page');
                pseudo = win.getComputedStyle(el, ':after').getPropertyValue('content');
                if (pseudo) {
                    alert(pseudo);
                }
            }
        })(this);
    </script>
</body>
</html>