使用jQuery，如何找出浏览器本机是否支持CSS选择器“input [type = text]”？

在我的CSS我有必须使用CSS3选择器input[type=text]被应用到所有文本字段（规则。使用jQuery，如何找出浏览器本机是否支持CSS选择器“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');

的问题是：如何确保这个规则只为INV当CSS3选择器不是本机支持的时候发起的？

来源

2009-09-09 Jesper Rønn-Jensen

只是想让我知道'[attr = val]'不是CSS3选择器，它是2.1，并且受到所有现代浏览器的支持。 CSS3中有什么新东西是'[attr^= val]'和类似的正则表达式选择器。 – peirix 2009-09-09 11:31:41

所有，但ie6！是的 – vvo 2009-09-09 11:36:33

@Vincent：我说现代，没有我：p – peirix 2009-09-09 11:37:31

我结束了在我的JavaScript文件中使用条件注释。这样我可以解决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. 
    /*@[email protected] (@_jscript_version <= 5.6) 
    $('input[type=text],input[type=password],input[type=radio],input[type=checkbox]'). 
     each(function() { $(this).addClass('type_' + this.type); }); 
    @[email protected]*/ 

});

这样，我结束了对所有表单字段添加的类名：

.type_text{} 
.type_radio{} 
.type_checkbox{} 
.type_password{}

来源

2009-09-09 11:57:43

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

文森特，你错过了一个重要的观点：我不需要额外的工作，也不需要执行我的样式的开发人员执行额外的不必要的步骤。开发人员应该专注于思考：“我需要一个文本字段......”而不必记得添加额外的'class =“type_text”'或类似的东西。我已经看到那么多次出错了。 – 2009-09-11 09:55:54

另一件让我赞成这个想法的事情是，现有领域绝对没有修改。绝对没有办法忘记设置类名。 – 2009-09-11 10:00:00

为什么不设置一些无用的CSS样式并检查样式是否被应用。只将变通方法类添加到未应用此样式的元素。

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

来源

2009-09-09 11:23:52

我认为IE6的@conditional评论可以做到这一点。（请参阅下面我自己的答案）。这样，这些样式只能应用于所有文本字段 - 只有当浏览器本身不支持。在IE6真正被淘汰的8-10年后，可以删除@conditional的评论。 – 2009-09-11 09:58:57

这似乎像你所说的纳入了一句：

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

来源

2009-09-09 11:24:38

有一个看看http://www.geocities.com/seanmhall2003/css3/detect.html。你应该为每个属性做这件事。

来源

2009-09-09 11:31:29

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

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

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

所以，为每个人添加一个类。你的代码会更容易理解，否则你会一直添加不必要的JavaScript代码。

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

来源

2009-09-09 11:34:49 vvo

为什么不只是有

input.workaround_classname{ 
    /* css styling goes here */ 
}

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

您可以使用选择器（我认为第二个可能是一个，这将是最容易理解它是什么选择别人读码）

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

则不需要检测和你将不会依靠JavaScript来添加类名称。

来源

2009-09-09 12:01:41

使用jQuery，如何找出浏览器本机是否支持CSS选择器“input [type = text]”？

回答

相关问题