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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
peter-m commentedOct 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
?