CODEWITHSUNDEEP
javascriptcssfilterwebkit
martin
martin

Reputation: 413

Detect support for -webkit-filter with javascript

Using JavaScript, how do you detect if a browser supports webkit filters?

Based on the info provided at Default CSS filter values for brightness and contrast, I have tried the following and a few of the other default values:

 if (window.matchMedia && window.matchMedia("( -webkit-filter:opacity(1) )").matches) {
 alert("supported");
 }else{
 alert("not supported");
 }

Upvotes: 3

Views: 1431

Answers (1)

Christoph
Christoph

Reputation: 51191

An relatively easy way to test whether a css property is supported is the following:

  1. Create an element
  2. Apply the CSS in question to the element
  3. Read the value - if it is the same value you set in step 2, it is supported, otherwise not

js:

var e = document.querySelector("img");
e.style.webkitFilter = "grayscale(1)";
if(window.getComputedStyle(e).webkitFilter == "grayscale(1)"){
   "supported!";
}

see the Example

Upvotes: 7

Related Questions