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

Posted 2023-03-06

【中文标题】测试浏览器是不是支持 CSS 选择器

【英文标题】：Test if a browser supports a CSS selector测试浏览器是否支持 CSS 选择器

【发布时间】：2014-02-01 09:50:19

【问题描述】：

真的很简单：如何最准确地测试浏览器是否支持某个 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：我不想只使用条件 cmets，因为我想遵循检测功能而不是浏览器的标准。

【问题讨论】：

这不是modernizr.com 所做的吗？

如果可以只用一个简单的脚本而不是下载一个我只会使用一次的库，我会更喜欢它。

@Andreas :checked 测试在modernizr 中可用吗？

@Danko 查看 OP 的“PS”。

checked 似乎在modernizr 中可用：github.com/Modernizr/Modernizr/blob/master/feature-detects/css/… testStyles 方法基本上是injectElementWithStyles:github.com/Modernizr/Modernizr/blob/master/src/…

【参考方案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。

【讨论】：

如果我运行这个脚本，testSelector 的return 语句中似乎有错误（“无效参数”）。我仍然在谷歌上寻找导致这种情况的确切原因，但如果可以解决这个问题，我认为这将是最好的解决方案。你知道这可能是什么原因吗？

在 IE11 的 IE8 模拟器的控制台中测试 document.body.querySelector(':checked') 后，它给出了相同的“无效参数”错误。看起来 IE8（至少在 IE11 仿真模式下）认为 :checked 选择器无效，并引发错误。

我在 Chromium 和 Firefox 上进行了测试，但没有在 IE 上进行测试。我不确定是什么导致“无效参数”。如果您在 IE 上进行测试，请确保您在标准模式下使用 IE8+。否则querySelector函数将不存在。

我决定采用这个答案，因为这不需要对 CSS 或 JS 进行任何更改，也不需要修改页面内容来测试任何内容。我在导致 IE8 出现问题的部分周围放置了一个try catch(e)。我只是假设如果您在.querySelector 中使用:checked 时浏览器抛出错误，则浏览器不支持它。

@joeytje50 是正确的。无法识别或无效的选择器应该抛出错误，而不仅仅是返回 null 结果，因此 IE 行为正确。当querySelector() 返回 null 时，这意味着选择器有效但不匹配任何内容。见w3.org/TR/selectors-api/#processing-selectors

【参考方案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');

【讨论】：

将我的“接受”更改为这个答案，因为我最终实际使用了这个。感谢您的帮助！

【参考方案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>

这些只是我找到的一些选项，这取决于您的需求。祝你好运，希望这对你有所帮助。

【讨论】：

按照 css3.info 上的源代码，我制作了一个小测试脚本以在控制台中使用：var x = new CSSTestCase(['checked'], onSuccess: function() console.log(true,arguments), onFailure: function() console.log(false,arguments));，当我浏览控制台中记录的消息时，此脚本似乎需要为每个测试加载一个 iframe。对于另一个网站，我仍在寻找，但对于他们如何在他们的网站上实际进行功能测试，这看起来有点令人困惑。

@joeytje50 嗯，很奇怪，查看页面的源代码后，页面上的任何地方都没有 iframe。我猜它必须由脚本生成，这应该不是什么大问题，你只需要找到 iframe 是如何添加的。 （没关系，我说的是 css3test，这似乎是一个更好的脚本）

【参考方案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("form:invalid") 一起工作正常, 不是 IE9 实现的，而是其他人实现的。