使用 Javascript 检测 CSS 功能

Question

是否可以使用 Javascript 检测 CSS 支持？

例如，是否可以检测浏览器是否支持这样的属性选择器？

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
}