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

Question

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

我目前有一些CSS代码,通过:checked在CSS中使用选择器使页面更具交互性,但我想创建一个与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;}

演示

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

有关详细信息,请参阅此其他问题querySelector.

Answer 2

您的情况的解决方法：

<input type=checkbox checked=checked>

CSS：

input{
  font-family:'arial';
}
input:checked{
  font-family:'sans-serif';
}

检查程序：js

alert($('input').css('font-family')=='sans-serif'?'supported':'not supported');