Come rilevare se il supporto del browser ha specificato css-classe css?

Question

Qual è il concetto di rilevamento del supporto di una pseudo-classe css nel browser tramite JavaScript? Esattamente, voglio controllare se il browser dell'utente supporta pseudo-classe :checked o meno, perché ho creato alcuni popup CSS con caselle di controllo e ho bisogno di fare fallback per i vecchi browser.

RISPOSTA: Sto trovato già implementato method di test selettori CSS in un Modernizr "Additional Tests".

Answer 1

si può semplicemente controllare se è stato applicato il tuo stile con pseudo-classe.

Qualcosa di simile a questo: http://jsfiddle.net/qPmT2/1/

Answer 2

Se sei OK con l'utilizzo di JavaScript, è possibile ignorare il rilevamento e andare a destra per lo spessore: Selectivizr

Answer 3

stylesheet.insertRule(rule, index) metodo gettare errore se la regola non è valida. quindi possiamo usarlo.

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