Geek asks and answers

Testing for specific compatibility of css properties programmatically (support for text box size)

I implement a resizable text area on a website with multiple browsers. Now in FF / Chrome / Safari:

  textarea{
     resize: both;
  }

It works like a charm. Smelling me a bit brought me here:

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

Where I found out that Opera and IE do not support this property.

No biggie, the following javascript can take care of detection, with a jquery user interface call on resizable(), wrapped for functionality:

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

However, I don't like explicit browser checks. Is there a way to test support for a specific css property programmatically?

+5
source share
2 answers

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")
+2

, textarea undefined " ", :

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

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

FIDDLE, . OK Chrome, Opera, CSS " " Opera, , , , Opera. " " IE, .

+5

More articles:


All Articles