Wie kann ich erkennen, ob ein Browser eine CSS-Eigenschaft mit Javascript unterstützt?

Question

Ich möchte feststellen, ob der Browser eine CSS-Eigenschaft mit Javascript unterstützt (insbesondere, ob "Filter" unterstützt wird)? Wie kann ich das tun?

Ich habe versucht, die folgende Funktion

supportsCssStyle: function (prop) { 
     var div = document.createElement('div'), 
      vendors = 'Khtml Ms O Moz Webkit'.split(' '), 
      len = vendors.length; 

     if (prop in div.style) return true; 

     prop = prop.replace(/^[a-z]/, function (val) { 
      return val.toUpperCase(); 
     }); 

     while (len--) { 
      if (vendors[len] + prop in div.style) { 
       // browser supports box-shadow. Do what you need. 
       // Or use a bang (!) to test if the browser doesn't. 
       return true; 
      } 
     } 
     return false; 
    }, 

aber es funktioniert nicht

Answer 1

Wie von Oriol in den Kommentaren, meine ursprüngliche Antwort falsch war (noch irgendwie endete mit 3 upvotes) hingewiesen. Hier ist ein zuverlässigerer Weg.

function supportsProperty(prop) { 
 
    var el = document.createElement("div"); 
 
    el.style.cssText = prop + ":initial"; 
 
    return el.style[prop] === "initial"; 
 
} 
 

 
function supportsValue(prop, value) { 
 
    var el = document.createElement("div"); 
 
    el.style.cssText = prop + ":" + value; 
 
    return el.style[prop] === value; 
 
} 
 

 
console.log("filter", supportsProperty("filter")); // true for me 
 
console.log("-ms-flex", supportsProperty("-ms-flex")); // false for me 
 
console.log("position:sticky", supportsValue("position", "sticky")); // true for me

Answer 2

Ich weiß, die Frage bei einer JS-Lösung richtet, aber da es sich um ein CSS Problem ist, das gelöst ist wird, könnte es von Interesse sein, dass die @supports Feature Abfrage ziemlich gut jetzt unterstützt wird. ..except ... (Überraschung!) Internet Explorer (Edge unterstützt es, obwohl - vollständige Liste hier: http://caniuse.com/#feat=css-featurequeries)