5

Tarayıcıda herhangi bir css sözde sınıfının JavaScript ile tespit edilmesinin algılanması nedir? Tam olarak, kullanıcının tarayıcısının :checked sözde sınıfını destekleyip desteklemediğini kontrol etmek istiyorum, çünkü bazı CSS-popup'ları onay kutularıyla yaptım ve eski tarayıcılar için geri dönüşler yapmam gerekiyor.Tarayıcı desteği belirtilen css sözde sınıfı nasıl algılanır?

CEVAP: Zaten bir Modernizr "Additional Tests" test css seçiciler method hayata tekrar kazandım. Eğer Javascript kullanarak bir sorununuz yoksa

+1

[Modernizr] (http://www.modernizr.com/) böyle birçok şeyi algılar. –

+0

Modernizr hakkında biliyorum, ancak css3 sözde sınıfları desteği için testler yok, sadece '' önce 'gibi sahte-elemanlar, vb. – Raiden

cevap

4

Sadece kontrol edebilirsiniz. Böyle

şey: Kural geçersizse http://jsfiddle.net/qPmT2/1/

+4

Modernizr ["Ek Testler"] (https://github.com/Modernizr/Modernizr/wiki) 'de css seçicilerini test etmek için halihazırda uygulanan [yöntem] (https://gist.github.com/441842) bulundu. Oh, tanrım, neden çekirdekte değil? – Raiden

+0

Çalışma çözümü, ama biraz çirkin – franzlorenzon

1

, sen algılama atlayıp sağ şiminin gidebileceğini: sözde sınıfı ile stil uygulandıysa Selectivizr

+3

Daha iyisi Selectivizr kullanmayın, çünkü perfomance parse nedeniyle dikte oluyor Sayfa oluşturmadan önce CSS. – andychups

0

stylesheet.insertRule(rule, index) yöntem hatası atılır. böylece kullanabiliriz.

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 
İlgili konular