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

有关querySelector的详细信息，请参阅this other question。

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');

Answer 3

通过一些研究，我找到了可以测试浏览器以查看支持的各种网站。

此网站有助于找到支持但不测试当前浏览器的内容。

CSS Selectors

本网站将测试您的浏览器，如果您不想使用modernizr，您可以从他们的脚本中学习。

CSS Test

这最后一个网站似乎做得很好，并且非常准确的支持。我也很确定我找到了这样做的脚本我说你可以学习其他网站是如何做到这一点的。

CSS3Test
Source Code（添加view-source：查看来源，无法根据SO链接）
Support.js

要了解他们如何开展这项工作，您需要了解他们的脚本是如何工作的。最底层的三个似乎是最重要的功能。

<script src="utopia.js"></script>
<script src="supports.js"></script>
<script src="csstest.js"></script>
<script src="tests.js"></script>

这些只是我找到的一些选项，它可以满足您的需求。祝你好运，希望这对你有所帮助。

Answer 4

更简单的方法是简单地尝试查询选择器，如果它产生错误，则返回false，否则为true，如下所示：

function testSelector(selector) {
  document.querySelector('*');  //checks if querySelector is implemented and raises an error if not
  try {document.querySelector(selector)} catch (e) {return false}
  return true;
}

我在IE9 Windows和Chrome Mac（V43.0.2357.130），Win（V39.0.2171.95m），FireFox Win（V38.0.5）上进行了检查，并且可以正常使用testSelector（＆＃34;形式：无效＆＃34;），这不是由IE9实现的，而是由其他所有人实现的。

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

4 个答案: