chrise86/breakpoints_via_css.html

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