Обнаружение поддержки CSS-селектора браузера с помощью jQuery

Question

Обычно я использую Modernizr для обычного обнаружения функций, но он не может обнаружить поддержку селектора браузера (т.е. селектор nth-of-type ()).

Есть ли способ определить поддержку селектора браузера с jQuery?

Answer 1

Вы правы, что выбор элемента с помощью селектора jQuery будет работать даже в браузерах, которые не поддерживают этот селектор в CSS.

Однако вы можете применить стиль с помощью селектора CSS3, а затем выбрать элемент с помощью jQuery, чтобы определить, был ли применен этот стиль.

Например, в CSS:

#myid > p {
  display: none;
}

и затем в jQuery:

if ( $( '#myid > p' ).css('display') != 'none' ) {
 // blah
}

Однако будьте осторожны, поскольку .css() может не вернуть того, что вы ожидаете. Например, если вы примените цвет, такой как «красный», он вернет rgb(255, 0, 0).

Извините, я знаю, что это не такое идеальное решение, как Modernizr, но я надеюсь, что оно поможет вам в вашей ситуации.

Answer 2

Для этого вам не понадобится jQuery - обычный JavaScript сработает:

function supportsSelector(selector){
  if(selector.indexOf(":") !== 0) {
    selector = ':'+selector;
  }
  try {
    var queryString = "body" + selector + ",body:not(" + selector + ")";
    return !!document.querySelector("body" + selector + ",body:not(" + selector + ")");
  } catch (e) {
    return false;
  }
}

console.log(supportsSelector("hover"));
console.log(supportsSelector(":hover"));
console.log(supportsSelector(":focus-within"));
console.log(supportsSelector("I made this up"));
console.log(supportsSelector(":not(.a, .b)"));

Это должно работать в IE9 и выше (требуется querySelector и: не поддерживается).

Answer 3

Вы можете попробовать выбрать что-то с помощью этого селектора, если он возвращает 'NULL', либо браузер не поддерживает его, либо не было элементов этого типа

Я предлагаю использовать селекторы на том, что, как вы знаете, существует.