Modernizr kullanarak nth-çocuk için nasıl test edilir?

Question

Ben :nth-child tarayıcı desteği test etmek için modernizr kullanmaya çalışıyorum ama bunu nasıl emin değilim, ben :last-child için test bu bir http://jsfiddle.net/laustdeleuran/3rEVe/ buldum ama :nth-child (I algılamak için bunu değiştirmek için nasıl bilmiyorum Ben

siz bana yardımcı olabilir) :last-child desteklemeyen tarayıcılar :nth-child desteklemez ya ama emin değilim inanıyorum beri de böyle kullanmaktan düşünüyordum? Şimdiden teşekkürler!

Answer 1

Sadece algılamak için bir fonksiyon yazdım: için n'inci-Nafaka Eğer

function isNthChildSupported(){ 
var result = false, 
    test = document.createElement('ul'), 
    style = document.createElement('style'); 
test.setAttribute('id', 'nth-child-test'); 
style.setAttribute('type', 'text/css'); 
style.setAttribute('rel', 'stylesheet'); 
style.setAttribute('id', 'nth-child-test-style'); 
style.innerHTML = "#nth-child-test li:nth-child(even){height:10px;}"; 
for(var i=0; i<3; i++){ 
    test.appendChild(document.createElement('li')); 
} 
document.body.appendChild(test); 
document.head.appendChild(style); 
    if(document.getElementById('nth-child-test').getElementsByTagName('li')[1].offsetHeight == 10) {result = true;} 
document.body.removeChild(document.getElementById('nth-child-test')); 
document.head.removeChild(document.getElementById('nth-child-test-style')); 
    return result; 
} 

Kullanımı:

isNthChildSupported() ? console.log('yes nth child is supported') : console.log('no nth child is NOT supported'); 

Bu eylem burada da http://jsbin.com/epuxus/15

işleri görebilirsiniz jQuery :nth-child ve CSS :nth-child arasında bir fark vardır.

jQuery :nth-child jQuery CSS ama destekleyen herhangi bir tarayıcıda desteklenmektedir IE9, Chrome, Safari ve Firefox

Answer 2

Ben seçiciler destek için test bir Modernizr seçiciler eklentisi olduğunu hatırlıyorum, ama yapamam içinde :nth-childis supported şimdi bul. Şuna bir göz atabilirsiniz: http://javascript.nwbox.com/CSSSupport/ Benzer.

Answer 3

Ayrıca kararınız için teşekkür ederim, desteklenmeyen tarayıcıların

Answer 4

Mohsen için CSS3 seçici desteği eklemek için Selectivizr kullanabilirsiniz. Eğer birisi jQuery gerekir:

function test(){ 

    var result = false, 
     test = $('<ul id="nth-child-test"><li/><li/><li/></ul>').appendTo($('body')), 
     style = $('<style type="text/css">#nth-child-test li:nth-child(even){height:10px;}</style>').appendTo($('head')); 

    if(test.children('li').eq(1).height() == 10) 
    result = true; 

    test.remove(); 
    style.remove(); 

    return result; 

};