Обнаружение возможностей CSS с Javascript

Question

Можно ли определить поддержку CSS с помощью Javascript?

Например, можно ли определить, поддерживает ли браузер селекторы атрибутов, как этот?

input[type='text'] { }

Answer 1

Modernizr предназначен для обнаружения функций браузера и вполне может помочь в этом случае. http://www.modernizr.com/

Answer 2

Это немного умозрительно, так как я не проверял его, но я считаю, что с помощью JS можно было бы добавить элемент style, за которым следует элемент, на который он влияет, и затем проверить значения:

Спекулятивный непроверенный код, может работать или не работать (для краткости используется jQuery):

$('<style type="text/css" id="foo">input[type="text"]{ width: 10px; }</style>').appendTo('head');
$('<input type="text" id="bar">').appendTo('body');
if ($('#bar').width() == 10)
{
  //attr selector supported
}
$('#foo, #bar').remove();

Answer 3

document.querySelectorAll("input[type='text']")

Но это не работает для старых браузеров, естественно.

Кроме этого, вы можете просто использовать свойство style, чтобы проверить, было ли применено определенное свойство CSS.

input[type='text'] {
  background-repeat: no-repeat; /* or any other irrelevant, non-default value */
}

и

if (myInputElem.style.backgroundRepeat == "no-repeat") {
  // selector is supported
}