Làm cách nào để phát hiện xem trình duyệt có hỗ trợ lớp giả định css không?

Question

Khái niệm phát hiện hỗ trợ của bất kỳ lớp giả CSS nào trong trình duyệt thông qua JavaScript? Chính xác, tôi muốn kiểm tra xem trình duyệt của người dùng có hỗ trợ :checked giả hay không, bởi vì tôi đã thực hiện một số cửa sổ bật lên CSS có hộp kiểm và cần phải thực hiện dự phòng cho các trình duyệt cũ.

TRẢ LỜI: Tôi tìm thấy đã được triển khai method của bộ chọn css thử nghiệm trong Modernizr "Additional Tests".

Answer 1

Bạn chỉ có thể kiểm tra nếu phong cách của bạn với pseudo-class đã được áp dụng.

Something như thế này: http://jsfiddle.net/qPmT2/1/

Answer 2

Nếu bạn OK với việc sử dụng Javascript, bạn có thể bỏ qua việc phát hiện và đi đúng đắn cho các shim: Selectivizr

Answer 3

stylesheet.insertRule(rule, index) phương pháp sẽ ném lỗi nếu sự cai trị không hợp lệ. để chúng ta có thể sử dụng nó.

var supportPseudo = function(){ 
    var ss = document.styleSheets[0]; 
    if(!ss){ 
     var el = document.createElement('style'); 
     document.head.appendChild(el); 
     ss = document.styleSheets[0]; 
     document.head.removeChild(el); 
    } 
    return function (pseudoClass){ 
     try{ 
      if(!(/^:/).test(pseudoClass)){ 
       pseudoClass = ':'+pseudoClass; 
      } 
      ss.insertRule('html'+pseudoClass+'{}',0); 
      ss.deleteRule(0); 
      return true; 
     }catch(e){ 
      return false; 
     } 
    }; 
}(); 


//test 
supportPseudo(':hover'); //true 
supportPseudo(':before'); //true 
supportPseudo(':hello'); //false 
supportPseudo(':world'); //false