以编程方式测试特定css属性的兼容性(在文本区域上调整大小支持）

Test for specific css property compatability programmatically (resize support on a textarea)

本文关键字：区域 文本 调整 支持 兼容性 测试 方式 编程 属性 css      更新时间：2023-09-26

我正在跨浏览器网站上实现一个可调整大小的文本区域。现在在FF/Chrome/Safari中，以下内容：

  textarea{
     resize: both;
  }

工作起来很有魅力。一点点的嗅闻让我来到了这里：

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

在那里我了解到Opera和IE不支持此属性。

没有什么大不了的，下面的javascript可以负责检测，其中封装了对resizable()的jquery UI调用以获得功能：

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

然而，我不喜欢明确的浏览器检查。有没有一种方法可以通过编程测试对特定css属性的支持？

检查文本区域的样式声明是否返回未定义的"resize"，如果返回，则不支持：

var txtarea = document.createElement('textarea');
if (txtarea.style.resize != undefined) {
    //resize is supported
}

这里有一个FIDDLE来测试它。它在Chrome和Opera中都返回OK，我在Opera中测试了CSS属性"resize"，它似乎工作得很好，所以Opera支持它。正如预期的那样，该测试在IE中返回"不支持"。

在上述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")
相关文章：