javascript - ブラウザが指定されたcss疑似クラスをサポートしているかどうかを検出する方法は？

Question

JavaScriptを介してブラウザでcss疑似クラスのサポートを検出する概念は何ですか？:checked正確には、ユーザーのブラウザーが疑似クラスをサポートしているかどうかを確認したいと思います。チェックボックス付きのCSSポップアップをいくつか作成し、古いブラウザーのフォールバックを実行する必要があるためです。

答え： Modernizrの「AdditionalTests」でcssセレクターをテストする方法がすでに実装されていることがわかりました。

Answer 1

ルールが無効な場合、stylesheet.insertRule(rule, index)メソッドはエラーをスローします。使用できるようにします。

var support_pseudo = 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 (pseudo_class){
        try{
            if(!(/^:/).test(pseudo_class)){
                pseudo_class = ':'+pseudo_class;
            }
            ss.insertRule('html'+pseudo_class+'{}',0);
            ss.deleteRule(0);
            return true;
        }catch(e){
            return false;
        }
    };
}();


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

Answer 2

疑似クラスを使用したスタイルが適用されているかどうかを簡単に確認できます。

このようなもの: http://jsfiddle.net/qPmT2/1/

Answer 3

Javascript の使用に問題がない場合は、検出をスキップして shim: Selectivizrを使用することができます。