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

Question

I'm implementing a resizeable textarea on a cross-browser website. Now in FF/Chrome/Safari, the following:

  textarea{
     resize: both;
  }

Works like a charm. A little bit of sniffing around has led me here:

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

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

No biggie, the following javascript can take care of detection, with a jquery UI call to resizable() wrapped within for functionality:

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

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

Answer 1

Check if a textarea's style declaration returns undefined for "resize", it if does, it's not supported:

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

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

Here's a FIDDLE to test it. It returns OK in Chrome, and also in Opera, and i tested the CSS property "resize" in Opera, and it seems to work just fine, so it is supported in Opera. The test returns "no support" in IE, as expected.