css - modal - modernizr version

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

Question

Estoy intentando usar modernizr para probar :nth-child 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 (también estaba pensando en usarlo así porque creo que los navegadores que no son compatibles :last-child no son compatibles :nth-child tampoco, pero No estoy seguro)

¿Pueden ayudarme chicos? ¡Gracias por adelantado!

Answer 1

Acabo de escribir una función para detectar la compatibilidad: n-child para ti

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'');

Puedes 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-child es compatible con cualquier navegador compatible con jQuery, pero CSS :nth-child es compatible con IE9, Chrome, Safari y Firefox

Answer 2

Recuerdo que había un complemento de selectores de Modernizr que probaba el soporte de selectores, pero no puedo encontrarlo ahora mismo. Puedes echarle un vistazo a esto: http://javascript.nwbox.com/CSSSupport/ que es similar.

Answer 3

También puede usar Selectivizr para agregar compatibilidad de selector CSS3 a navegadores no compatibles

Answer 4

Mohsen, gracias por tu 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;

};