以编程方式测试特定的css属性兼容性(调整textarea上的支持)

Question

我正在跨浏览器网站上实现可调整大小的textarea.现在在FF/Chrome/Safari中,以下内容:

  textarea{
     resize: both;
  }

奇迹般有效.一点点嗅闻让我在这里:

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

我在那里了解到Opera和IE不支持这个属性.

没什么大不了的,下面的javascript可以处理检测,用jquery UI调用resizable()包含在内的功能:

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

但是,我不喜欢明确的浏览器检查.有没有办法以编程方式测试对特定css属性的支持？

Answer 1

检查textarea的样式声明是否为"resize"返回undefined,如果是,则不支持:

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

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

这是一个测试它的FIDDLE.它在Chrome中以及在Opera中返回OK,我在Opera中测试了CSS属性"resize",它似乎工作正常,因此Opera支持它.正如预期的那样,测试在IE中返回"不支持".

Answer 2

在上述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")