5

Jaka jest koncepcja wykrywania obsługi dowolnej pseudoklasy css w przeglądarce za pomocą JavaScript? Dokładnie, chcę sprawdzić, czy przeglądarka użytkownika obsługuje pseudoklasę o nazwie :checked, czy nie, ponieważ zrobiłem kilka wyskakujących okienek CSS z polami wyboru i trzeba wykonać awarie dla starych przeglądarek.Jak wykryć, czy przeglądarka obsługuje określoną pseudoklasę css?

ODPOWIEDŹ: mam znaleźć już wdrożone method testowania selektorów CSS w modernizr "Additional Tests".

+1

[Modernizr] (http://www.modernizr.com/) wykrywa wiele takich rzeczy. –

+0

Wiem o Modernizr, ale nie ma testów dla obsługi pseudo-klas css3, tylko pseudoelementy takie jak ':: before', itp. – Raiden

Odpowiedz

4

można po prostu sprawdzić, czy zastosowano Twój styl z pseudo-klasie.

coś takiego: http://jsfiddle.net/qPmT2/1/

+4

Znaleziono już zaimplementowaną [metodę] (https://gist.github.com/441842) testowania selektorów css w Modernizatorze ["Dodatkowe testy"] (https://github.com/Modernizr/Modernizr/wiki). Och, Boże, dlaczego nie jest w rdzeniu? – Raiden

+0

Rozwiązanie robocze, ale trochę brzydkie – franzlorenzon

1

Jeśli jesteś OK z pomocą JavaScript, można pominąć wykrywanie i idź w prawo do podkładki: Selectivizr

+3

Lepiej nie używać Selectivizr, ponieważ wydajność maleje z powodu parsowania CSS przed wyświetlaniem strony. – andychups

0

stylesheet.insertRule(rule, index) metoda wygeneruje błąd, jeśli reguła jest nieprawidłowy. więc możemy go użyć.

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 
Powiązane problemy