Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS.supports检测CSS支持

  有时候程序需要先判断某个CSS属性和值是否支持后才开始操作一些CSS,或者在不支持时选择一些hack方案替代。现代浏览器提供了@supports在CSS中检测属性和值是否支持,在程序中对应的则是CSS对象的supports方法。不过这东西在IE上暂时还没有实现。
  我觉得这玩意儿是CSS hack的替代方案,一旦普及就再也不需要CSS hack那种拙劣的东西来做兼容了。而且提供的程序接口也解决了原本在程序中判断CSS兼容困难的问题。以前我们通常会以浏览器版本来做判断依据,这样做的话开发者必须知道每一个浏览器的每一个版本对CSS属性和值的每一个兼容细节,说实话这是很冷的知识,我也只能记住常用的属性在各大浏览器上的支持程度,冷门的属性使用时可能还要翻阅资料或者写个测试。如果使用CSS.supports的话就不再需要记得那么细,只要判断属性的支持程度就可以找到解决方案。
  假如一个程序需要程序操作弹性盒子相关样式,但哪个浏览器版本使用哪一套规范我记不住,于是使用CSS.supports来判断 <script>
if(window.CSS)switch(true){
  case CSS.supports("display","box"):
    console.log("支持 display:box");
    //TODO
    break;
  case CSS.supports("display","flexbox"):
    console.log("支持 display:flexbox");
    //TODO
    break;
  case CSS.supports("display","flex"):
    console.log("支持 display:flex");
    //TODO
    break;
  default:
    console.log("不支持弹性盒子");
}else console.log("不支持 CSS.supports");
</script>
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^