以编程方式测试特定css属性兼容性（在textarea上调整支持）

我在跨浏览器的网站上实现了可调整大小的textarea。现在在FF/Chrome/Safari中，有以下几种：以编程方式测试特定css属性兼容性（在textarea上调整支持）

textarea{ 
    resize: both; 
    }

工程就像一个魅力。周围嗅一点点，导致我在这里：

http://www.w3schools.com/cssref/css3_pr_resize.asp

在那里我学到的是Opera和IE浏览器不支持此属性。

没什么大不了的，下面的JavaScript可以照顾检测，与内包装的功能的jQuery用户界面调用resizable()：

if ((navigator.userAgent.indexOf('Trident') != -1) || (navigator.userAgent.indexOf('MSIE') != -1) || (navigator.userAgent.indexOf('Opera') != -1)){

不过，我不喜欢明确的浏览器检查。有没有办法以编程方式测试特定css属性的支持？

来源

2013-02-20 Abraham P

随着adeneo的帮助以上，最终，通用的解决方案如下：

var shims_property_for_element, supports_property_on_element; 

shims_property_for_element = function(prop, elem, method, attrs) { 
    if (!supports_property_on_element(prop, elem)) { 
    return $(function() { 
     var numEles; 
     $(elem)[method](attrs); 
     numEles = $(elem).length; 
     return window.setInterval((function() { 
     if ($(elem).length !== numEles) { 
      numEles = $(elem).length; 
      return $(elem)[method](attrs); 
     } 
     }), 1000); 
    }); 
    } 
}; 

supports_property_on_element = function(prop, elem) { 
    var e, len, vendors; 
    e = document.createElement(elem); 
    if (prop in e.style) { 
    return true; 
    } 
    return false; 
};

在这种特定情况下则转换为下面的电话：

shims_property_for_element('resize', 'textarea', "resizable")

来源

2013-02-20 20:34:32

检查它，如果它，它不支持未定义“调整”，一个文本的样式声明回报：

var txtarea = document.createElement('textarea'); 

if (txtarea.style.resize != undefined) { 
    //resize is supported 
}

这里有一个FIDDLE进行测试。它在Chrome中以及在Opera中返回OK，并且我在Opera中测试了CSS属性“resize”，并且它似乎工作得很好，所以它在Opera中受支持。正如预期的那样，测试在IE中返回“不支持”。

来源

2013-02-20 19:35:40 adeneo

@adeneo - 圣废话，看看你在不同的浏览器中测试这个很好的答案，并找出如何检查一个CSS属性等。这只是通过屋顶的人？ – adeneo 2013-02-20 20:22:51

谢谢你的回应;） – 2013-02-20 20:27:42

@AbrahamP - 没想到有人还在这里！它工作吗？ – adeneo 2013-02-20 20:34:32

以编程方式测试特定css属性兼容性（在textarea上调整支持）

回答

相关问题