Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Media Check
<!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>
@peter-m

This comment has been minimized.

Copy link

commented Oct 21, 2012

I wouldn't animate a pseudo element, as browser support is pretty unstable (see Chris' table on this topic and the according webkit bug report) - furthermore is there a particular reason why you exclude mozTransitionEnd?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.