使用 jQuery，如何确定浏览器是不是原生支持 CSS 选择器“input[type=text]”？

Posted 2023-03-06

【中文标题】使用 jQuery，如何确定浏览器是不是原生支持 CSS 选择器“input[type=text]”？

【英文标题】：Using jQuery, how to find out if CSS selector "input[type=text]" is natively supported by browser?使用 jQuery，如何确定浏览器是否原生支持 CSS 选择器“input[type=text]”？

【发布时间】：2010-11-26 19:27:14

【问题描述】：

在我的 CSS 中，我有一个必须应用于所有文本字段的规则（使用 CSS3 选择器 input[type=text]。

我也使用jQuery。某些浏览器（例如 Internet Explorer 6）不支持 CSS 选择器的这种形式。所以我的解决方法是在 CSS 中添加一个额外的类名：

input[type=text], .workaround_classname
  /* css styling goes here */

然后通过 jQuery 添加 CSS 类：

$('input[type=text]').addClass('workaround_classname');

问题是：如何确保仅当 CSS3 选择器不受本机支持时才调用此规则？

【问题讨论】：

只是想让你知道[attr=val] 不是 CSS3 选择器，它是 2.1，并且被所有现代浏览器支持。 CSS3 中的新功能是[attr^=val] 和类似的RegEx 选择器。

@Vincent：我说的是现代的，不是吗：p

@peirix：感谢您的澄清！ CSS2.1 规则显然不是 2001 年 IE 团队关注的焦点 :)

【参考方案1】：

为什么不设置一些无用的css样式并检查是否应用了样式。仅将解决方法类添加到未应用此样式的元素。

唯一的问题是我想不出一个你可以使用的“无用”风格:-)

【讨论】：

我认为 IE6 的 @conditional cmets 可以解决问题。 （见下面我自己的答案）。这样，样式只能应用于所有文本字段——并且只有在浏览器本身不支持它的情况下。 8-10年后IE6真的被淘汰了，那么@conditional注释就可以去掉了。

【参考方案2】：

这似乎包含了您所说的内容：

http://www.w3avenue.com/2009/07/02/detect-support-for-css3-html5-with-modernizr/

【参考方案3】：

看看http://www.geocities.com/seanmhall2003/css3/detect.html。您应该为每个属性执行此操作。

【参考方案4】：

没有简单的方法可以知道“这个浏览器是否支持 CSS3 选择器”。您所能做的就是检测浏览器和浏览器版本。

Modernizr 无法帮助您，因为您无法检测特定的 CSS 选择器是否在 .css 文件中有效。 （或者您必须检查是否应用了 CSS 选择器中的特定 CSS 属性，这真的很难看！）

但是！这里最简单的方法是忘记 .css 文件中的 [attr=] 之类的 CSS 2.1 选择器，因为它没有得到广泛支持。如果你必须为不支持它们的浏览器（如 Internet Explorer 6）编写代码，你就不能使用它们。

所以，为每个人添加一个类。您的代码会更容易理解，否则您总是会添加不必要的 javascript 代码。

我明白我没有回答你，但这是b-a-d！

【参考方案5】：

我最终在我的 javascript 文件中使用了条件 cmets。这样我可以解决 IE6 并应用 CSS 类

$(function()
  //add css class to input[type=text] fields if the selector is not natively supported
    // IE6 hack: Since some CSS selectors are not working, we simulate with class names.
    /*@cc_on@if (@_jscript_version <= 5.6)
    $('input[type=text],input[type=password],input[type=radio],input[type=checkbox]').
        each(function()  $(this).addClass('type_' + this.type); );
    @end@*/

);

这样，我最终为所有表单字段添加了类名：

.type_text
.type_radio
.type_checkbox
.type_password

【讨论】：

真的，当你不能使用某些 css 选择器时，这样做实际上比为所有浏览器的元素添加类更糟糕。此外，ie6 中更多的 javascript 意味着更低的性能...... :)

Vincent，你错过了一个重点：我不希望开发人员在实现我的样式时执行额外的工作和不必要的步骤。开发人员应该只专注于思考：“我想要一个文本字段......”而不必记得添加额外的 class="type_text" 或类似的。我已经看到很多次出错了。

让我赞成这个想法的另一件事是绝对没有对现有字段进行修改。而且绝对不会忘记设置类名。

【参考方案6】：

为什么不直接拥有

input.workaround_classname
  /* css styling goes here */

然后将workaround_classname 添加到标记中的所有文本输入中。

您可以使用的选择器是（我认为第二个可能是最容易让其他人阅读代码的选择器）

$('input:text')
// or
$('input:text.workaround_classname')
// or
$('input.workaround_classname')

那么就不需要检测了，你也不会依赖 JavaScript 来添加类名。