javascript - 测试浏览器是否支持 CSS 选择器

Question

非常简单:如何最准确地测试浏览器是否支持某个 CSS 选择器？

我目前有一些 CSS 代码，通过在 CSS 中使用 :checked 选择器使页面更具交互性，但我想创建一个后备脚本，用 JavaScript 做同样的事情，但是仅当用户的浏览器不支持 :checked 选择器时。

我的问题是，如何最准确地测试用户的浏览器是否支持某个 CSS 选择器？

这是我想使用它的代码:

HTML:

<label class="coolbox">
    <input type="checkbox"/>
    <span>I want to eat some caek.</span>
</label>

CSS:

.coolbox input {display:none;}
.coolbox span::before {
    content: "";
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:5px;
    border:1px solid black;
}
.coolbox:hover span::before {border:1px solid #555;}
.coolbox:active span::before {border:1px solid #999;}

.coolbox span::before {background-color:#F77;}
.coolbox input:checked + span::before {background-color:#4A4;}

Demo

PS:我不想只使用条件注释，因为我想遵循检测功能而不是浏览器的标准。

Answer 1

你可以使用querySelector:

function testSelector(selector, node){
  var scope = document.createElement("div");
  scope.appendChild(node);

  try {
    return scope.querySelector(selector) !== null;
  } catch(e) { return false; }
}

你可以这样测试:

var node = document.createElement("input");
node.type = 'checkbox';
node.checked = 'checked';

testSelector("input:checked", node); // === true

参见 this other question有关 querySelector 的更多信息。