如何检测CSS代码是否被激活[重复]

Question

这是一个奇怪的问题，但我在我的网站上使用 flex 并且问题是：是否可以通过 JavaScript 或 jQuery 或类似的东西检测 flex 是否工作？因为 IE 10 及更低版本不支持 flex，如果它检测到它正在旧 Web 浏览器上查看或无法正常工作，则会出现如下消息：您的 Web 浏览器太旧，请下载一个新浏览器。这甚至可能吗？谢谢你的回答。

Answer 1

据我所知，css flex 或 order 属性是动画，因此您可以在可见性隐藏的元素上触发一个类以打开 flex 属性。然后为transitionend事件附加一个eventListener，并通过检查event.propertyName来检查属性是否来自flex，如果这个事件被触发，则表示它被支持。这里有一个 fiddle 来说明，一个名为 active 的类打开了一个带有#mock id 的 div 并监听了转换：

https://jsfiddle.net/ibowankenobi/yLv39dsm/1/

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);

除此之外，这个问题可以提供帮助：

Detecting flex-wrap support in browsers

似乎还有一种方法似乎可行：

https://gist.github.com/davidhund/b995353fdf9ce387b8a2

当然，Modernizr 可能已经有了这个。