Width detection via sneaky CSS rules
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
This is really neat. I landed here from Jeremy Keith's Conditional CSS, but it looks like my latest version of Chrome ignores
getComputedStyle(el, ':after').getPropertyValue('content');
when the display is none. It looks like it's a Chrome bug? https://code.google.com/p/chromium/issues/detail?id=236603