Testuj programowo zgodność konkretnej właściwości css (zmień rozmiar obsługi w obszarze tekstowym)

Question

Wstawiam obszar tekstowy z możliwością zmiany rozmiaru na stronie internetowej z wieloma przeglądarkami. Teraz w FF/Chrome/Safari, co następuje:

textarea{ 
    resize: both; 
    } 

działa jak czar. Trochę węszyć wokół doprowadziło mnie tutaj:

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

gdzie dowiedziałem się, że Opera i IE nie obsługuje tej właściwości.

szczegół, co następuje JavaScript może dbać o wykryciu połączenia z jQuery UI do resizable() zawinięte w ciągu funkcjonalności:

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

Jednak lubię kontrole przeglądarki jawne. Czy istnieje sposób programowo sprawdzać obsługę konkretnej właściwości css?

Answer 1

Z pomocą adeneo powyższym, ostateczna, rozwiązanie ogólnego przeznaczenia jest następujący:

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; 
}; 

które w tym konkretnym przypadku, a następnie przekłada się na następującej rozmowy:

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

Answer 2

Sprawdź, czy deklaracja stylu powraca textarea jest niezdefiniowane „rozmiar”, to jeśli nie, to nie jest obsługiwane:

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

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

Oto FIDDLE go przetestować. Zwraca OK w Chrome, a także w Operze, i przetestowałem właściwość CSS "resize" w Operze, i wygląda na to, że działa dobrze, więc jest obsługiwana w Operze. Test zwraca "brak wsparcia" w IE, zgodnie z oczekiwaniami.