Détection de fonctionnalité JS pour détecter l'utilisation de -webkit-calc sur calc

Question

Donc, je suis tout à fait conscient qu'en général, on devrait utiliser la détection de fonctionnalités dans JS contre la détection du navigateur. Un bon exemple de ceci étant poussé est la baisse de jQuery 1.9 de $.browser.

En outre, dans chaque article que j'ai lu, il est dit de ne jamais utiliser la détection du navigateur.

Mais j'ai une condition où je dois calculer dynamiquement la # de "slots" disponible dans une mise en page JS, et cela se fait par calc(100%/{0}), où {0} est le # des emplacements disponibles.

Bien sûr, dans l'iPad, le .css("height", "calc(100%/3)") échouera, car il doit être préfixé avec -webkit-. Donc, quelqu'un peut-il me dire exactement comment je devrais utiliser la détection des caractéristiques (au lieu de l'ancien $.browser.webkit) pour détecter qu'il en a besoin?

Answer 1

Créez un élément factice, insérez-le dans le document, utilisez .cssText.height = 'calc(100px - 50px);' et vérifiez si l'élément a la hauteur attendue. Répétez cette opération pour chaque préfixe fournisseur.

Remarque: Pour ce genre de questions, vous devriez regarder dans le code source de Modernizr. D'autres ont généralement contribué de tels scripts de détection de fonctionnalités, tels que calc.js. Modernizr détecte si la fonctionnalité est présente, elle ne dit pas quel préfixe doit être utilisé. Le code ci-dessous montre comment obtenir le bon préfixe:

var calc = (function(){ 
    var dummy = document.createElement('div'); 
    var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc']; 
    for (var i=0; i<props.length; ++i) { 
     var prop = props[i]; 
     dummy.style.cssText = 'width:' + prop + '(1px);'; 
     if (dummy.style.length) 
      return prop; 
    } 
})(); 

// Usage example: 
$('selector').css('height', calc + '(100%/3)'); 

(je ne l'ai pas ajouter le préfixe -ms-, parce que IE a commencé à soutenir sans le préfixe - voir http://caniuse.com/calc.)