5

JavaScriptによるブラウザのCSS疑似クラスのサポートを検出するコンセプトは何ですか?正確には、ユーザーのブラウザが:checked疑似クラスをサポートしているかどうかをチェックしたいと思います。これは、チェックボックスを使ってCSSポップアップを作成し、古いブラウザのフォールバックを行う必要があるためです。ブラウザが特定のCSS疑似クラスをサポートしているかどうかを検出するにはどうすればよいですか?

ANSWER:私はすでにModernizr "Additional Tests"にテスト用CSSセレクタのmethodを実現したんです。

+1

[Modernizr](http://www.modernizr.com/)は、そのような多くのことを検出します。 –

+0

私はModernizrについて知っていますが、それは ':: before'のような擬似要素だけをサポートするcss3擬似クラスサポートのテストを持っていません。 – Raiden

答えて

4

疑似クラスであなたのスタイルが適用された場合は、簡単に確認することができます。このような

何か:http://jsfiddle.net/qPmT2/1/

+4

Modernizr ["Additional Tests"](https://github.com/Modernizr/Modernizr/wiki)のcssセレクタをテストする方法[https://gist.github.com/441842]がすでに実装されています。ああ、神様、どうしてコアにないのですか? – Raiden

+0

実用的な解決策ですが、少し醜い – franzlorenzon

1

あなたはJavascriptを使用してしてOKなら、あなたは検出をスキップして、シムのために右の行くかもしれない:Selectivizr

+3

パーシモンが解析のためにディクレアするので、Selectivizrを使用しない方がよいレンダリング前のCSSページ。 – andychups

0

stylesheet.insertRule(rule, index)ルールが無効である場合、このメソッドはエラーをスローします。私たちはそれを使うことができます。

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 
関連する問題