Tôi làm cách nào để phát hiện các bộ lọc CSS?

Question

Trong một số trình duyệt, bao gồm Chrome ổn định, bạn có thể làm điều này:

h3 { 
    -webkit-filter: grayscale(1); 
    filter: grayscale(1); 
} 

Và bạn sẽ không biết nó, h1 sẽ được trả lại hoàn toàn trong màu xám. Everything old is new again.

Dù sao - có ai biết cách nào để phát hiện tính năng này không?

Tôi cần có thể áp dụng các kiểu khác nếu bộ lọc fil sẽ không hoạt động.

Answer 1

Vì vậy, gọi là CẬP NHẬT câu trả lời:

Như OP đề cập đến một điểm tốt Tôi đang cập nhật câu trả lời nhưng điều này không có liên quan đến bất cứ điều gì hoặc mâu thuẫn với câu trả lời trước đây của tôi, điều này chỉ đơn giản là một trình duyệt phát hiện.

Alan H. đã đề cập rằng IE, trước ngày thứ 10 của nó. Phiên bản, hỗ trợ filter tài sản css nhưng không theo cách chúng ta đều biết về nó (CSS3 filter Tôi có nghĩa là).

Vì vậy, nếu chúng tôi chỉ muốn phát hiện CSS3 filter giây, chúng tôi sẽ tiếp tục và sử dụng một chút phát hiện trình duyệt. Như tôi đã đề cập trong my comments.

Sử dụng thuộc tính documentMode và kết hợp nó với tính năng phát hiện đơn giản của chúng tôi, chúng tôi có thể loại trừ cái gọi là dương tính giả trong IE.

function css3FilterFeatureDetect(enableWebkit) { 
    //As I mentioned in my comments, the only render engine which truly supports 
    //CSS3 filter is webkit. so here we fill webkit detection arg with its default 
    if(enableWebkit === undefined) { 
     enableWebkit = false; 
    } 
    //creating an element dynamically 
    el = document.createElement('div'); 
    //adding filter-blur property to it 
    el.style.cssText = (enableWebkit?'-webkit-':'') + 'filter: blur(2px)'; 
    //checking whether the style is computed or ignored 
    //And this is not because I don't understand the !! operator 
    //This is because !! is so obscure for learning purposes! :D 
    test1 = (el.style.length != 0); 
    //checking for false positives of IE 
    //I prefer Modernizr's smart method of browser detection 
    test2 = (
     document.documentMode === undefined //non-IE browsers, including ancient IEs 
     || document.documentMode > 9 //IE compatibility moe 
    ); 
    //combining test results 
    return test1 && test2; 
} 

Original Modernizr source

---

if(document.body.style.webkitFilter !== undefined) 

hoặc

if(document.body.style.filter !== undefined) 

Thông tin thêm:

Chỉ để phát hiện tính năng đơn giản, hãy sử dụng các mã của tôi ở trên.Đối với một danh sách các chức năng được hỗ trợ, hãy xem ở đây:

• Filter Effects 1.0
• Filter Effects 1.0 functions

cho một cuộc biểu tình sống của filter s trong Chrome, hãy xem ở đây:

• CSS Filter Effects

Và 2 nhiều nguồn lực hơn cho bạn:

• CSS Filter Effects Landing in WebKit
• When can I use CSS Filter Effects?

Như tôi đang viết câu trả lời này, bạn phải sử dụng tiền tố webkit nhà cung cấp để làm cho nó làm việc.