Phát hiện khả năng CSS với Javascript

Question

Có thể phát hiện hỗ trợ CSS bằng cách sử dụng Javascript không?

Ví dụ: có thể phát hiện xem trình duyệt có hỗ trợ bộ chọn thuộc tính như thế này không?

input[type='text'] { } 

Answer 1

document.querySelectorAll("input[type='text']") 

Nhưng điều đó không cho các trình duyệt cũ, một cách tự nhiên.

Ngoài ra, bạn chỉ có thể sử dụng thuộc tính style để kiểm tra xem một thuộc tính CSS nhất định đã được áp dụng hay chưa.

input[type='text'] { 
    background-repeat: no-repeat; /* or any other irrelevant, non-default value */ 
} 

và

if (myInputElem.style.backgroundRepeat == "no-repeat") { 
    // selector is supported 
} 

Answer 2

Modernizr được thiết kế để phát hiện các tính năng trình duyệt và cũng có thể giúp đỡ trong trường hợp này. http://www.modernizr.com/

Answer 3

Đây là một chút suy đoán vì tôi chưa thử nghiệm, nhưng tôi tin rằng có thể thông qua JS để thêm phần tử style tiếp theo là yếu tố có hiệu lực và sau đó kiểm tra giá trị :

đầu cơ đang chưa được kiểm tra, có thể có hoặc không hoạt động (jQuery sử dụng cho ngắn gọn):

$('<style type="text/css" id="foo">input[type="text"]{ width: 10px; }</style>').appendTo('head'); 
$('<input type="text" id="bar">').appendTo('body'); 
if ($('#bar').width() == 10) 
{ 
    //attr selector supported 
} 
$('#foo, #bar').remove();