¿Cómo probar el enésimo hijo con Modernizr?

Question

Estoy tratando de usar modernizr para probar el soporte del navegador :nth-child, pero no estoy seguro de cómo hacerlo, encontré este http://jsfiddle.net/laustdeleuran/3rEVe/ que prueba :last-child pero no sé cómo cambiarlo para detectar :nth-child (I También estaba pensando en usarlo así porque creo que los navegadores que no admiten :last-child tampoco son compatibles con :nth-child, pero no estoy seguro)

¿Pueden ayudarme? ¡Gracias por adelantado!

Answer 1

acabo de escribieron una función para detectar el: apoyo nth-child para usted

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; 
} 

Uso:

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

se puede ver que esto funciona en acción aquí http://jsbin.com/epuxus/15

también Hay una diferencia entre jQuery :nth-child y CSS :nth-child.

jQuery :nth-childse soportado en cualquier navegador compatible con jQuery, pero CSS :nth-childis supported en IE9, Chrome, Safari y Firefox

Answer 2

Recuerdo que había un plugin de selectores Modernizr que puso a prueba el apoyo selectores, pero no puedo encuéntralo ahora mismo. Puede echar un vistazo a esto: http://javascript.nwbox.com/CSSSupport/ que es similar.

Answer 3

También se puede utilizar para añadir soporte Selectivizr selector CSS3 para navegadores no compatibles

Answer 4

Mohsen, gracias por su decisión. Si alguien necesita jQuery:

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; 

};