flex support check

by Ibrahim Tanyalcin

HTML

<div id="container">
  <div id="mock"></div>
</div>

CSS

#container {
  display:flex;
  width:300px;
  height:300px;
}
#mock {
  transition: flex 1s ease;
}
#mock.active{
  display:flex;
  -webkit-flex: 1; /* Safari 6.1+ */
   -ms-flex: 1; /* IE 10 */ 
   flex: 1;
}

JavaScript

document.getElementById("mock")
.addEventListener("transitionend",function(e){if(e.propertyName.match(/flex/gi)){alert("flex is supported")}});
setTimeout(function(){document.getElementById("mock").classList.add("active");},1000);