网页制作：JS代码判断浏览器是否支持CSS3属性

想要知道浏览器是否支持CSS3属性就需要利用代码去实现这项功能，如何去实现，这里教大家一段比较实用的JS代码片段，通过这段代码片段来判断！

var cssSupports = (function() {
 var div = document.createElement('div'),
  vendors = 'Khtml O Moz Webkit'.split(' '),
  len = vendors.length;
 return function(prop) {
  if ( prop in div.style ) return true;
  if ('-ms-' + prop in div.style) return true;
  
  prop = prop.replace(/^[a-z]/, function(val) {
   return val.toUpperCase();
  });

  while(len--) {
   if ( vendors[len] + prop in div.style ) {
   return true;
  }
 }
  return false;
 };
})();

实例：
border-radius
判断浏览器是否支持border-radius，支持则给html添加class为border-radius，反之则添加class为no-border-radius

if(cssSupports('borderRadius')){
 var oHtml = document.documentElement;
 oHtml.className += ' border-radius';
}else{
 oHtml.className += ' no-border-radius';
}

flex
flex出现在display的值上面的，上面方法只适用于属性，无法直接运用，我们可以换一种思路去实现，和flex相关的还有很多其他的属性，例如：order，align-content，align-item，align-slef等，我们用最简单的order来判断是否支持flex吧！（注意：flex除了标准版以外，还有其他两个版本，这里用标准的属性进行判断）

if(cssSupports('order')){
 var oHtml = document.documentElement;
 oHtml.className += ' flex';
}else{
 oHtml.className += ' no-flex';
}

如果你对上面的那段js不明白，你可以在控制台运行下面这段代码，就会看到所有的style属性。

(function(){
 var oDiv = document.createElement('div');

 for(var prop in oDiv.style){
  console.log(prop);
 }
})();

其实想要判断浏览器是否支持CSS3的方法还有很多，直接不行，可以采取迂回的方式，变换着思路进行，网页开发或是编程类的项目开发重点是“思路”，灵活清洗的思路能够让你衍生出更多不同的方式去实现相同的效果！程序讲究灵活性、多变性、开发者更是需要具备灵活多变的思维方式才能够成为一名有价值的码农！