代码之家 › 专栏 › 技术社区 › Kevin

如何处理特定于浏览器的.js和.css

css javascript

Kevin · 技术社区 · 16 年前

这不是一个新话题,但我很好奇每个人都是如何处理的 .js 或 .css

你有具有 if/else 条件,还是每个浏览器都有单独的文件?

这真的是当今流行浏览器的一个问题吗?

12 回复 | 直到 6 年前

John Sheehan 16 年前

这是一个非常现实的问题。主要是因为IE6。您可以使用 conditional comments .

对于JavaScript,我建议使用一个库,它已经完成了提取浏览器差异的大部分工作。jQuery在这方面非常好。

Chris Marasti-Georg Scott Weinstein 16 年前

老实说,对于大多数布局来说,浏览器特定的CSS并不是必需的——如果是,请考虑改变布局。当下一个需要另一个变体的浏览器出现时会发生什么?讨厌。如果您确实需要包含某些内容,但在一个浏览器中似乎无法使用,请在此处提出问题!有很多伟大的人。

对于JS,有几个框架负责实现跨浏览器行为,例如 jQuery (在本网站上使用)。

toohool 16 年前

IE条件注释的缺点是需要额外下载文件。我更喜欢使用两个著名的CSS过滤器:

.myClass {
  color: red;     // Non-IE browsers will use this one
  *color: blue;   // IE7 will see this one
  _color: green;  // IE6 and below will see this one
}

(是的,它不会验证,但我最后检查了一下,我们的钱来自用户和广告商,而不是W3C。)

Ryan Doherty 16 年前

至于CSS,我更喜欢将特定于浏览器的补丁粘贴在同一个CSS文件中。当您只需在1个位置查找样式时,它使调试变得更加容易。您可能会花费数小时调试某些东西,结果发现错误是由10行特定于浏览器的样式表引起的。

从性能角度来看,只有1个CSS和1个JS文件也更好。

John Sheehan 16 年前

使用所谓的“ feature detection

例如,如果您想使用 document.getElementsByClassName ,请执行以下操作:

if(document.getElementsByClassName) {
    // do something with document.getElementsByClassName
} else {
    // find an alternative
}

至于CSS,除了在IE中,如果你使用标准,你应该在很大程度上是好的。在IE中,使用条件注释——这就是方法 recommended by the guys at Microsoft .

cori 16 年前

就我个人而言,如上所述,我主要使用有条件的评论。

不过,在Stackoverflow播客中,Jeff指出Stackoverflow正在使用 Yahoo's CSS Reset

至于Javascript;正如已经说过的,使用你最喜欢的JS框架。。。

Oli 16 年前

我使用一个框架来处理99%的xbrowser内容。

对于框架中未涉及的所有内容,我将使用if/else或try/catch。

Gordon Bell 16 年前

浏览器之间仍然存在不兼容,所以请考虑让JavaScript框架为你做肮脏的工作。

http://jquery.com/

道场 http://www.dojotoolkit.org/

Script.aculo.us http://script.aculo.us/

原型 http://prototypejs.org/

neuroguy123 16 年前

jQuery.each(jQuery.browser, function(i, val) {});

至于组织,这将取决于您的应用程序。我认为将其放入初始化代码中,然后在需要的地方使用检测将是最好的。我仍然有问题,有时我必须检测探险家。例如,当使用jQuery时,我发现parent()和next()函数有时在Explorer中的含义与Firefox不同。

Max Rible Kaehn 16 年前

Internet Explorer有如下条件结构

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

这会让你为IE带来特定的样式表和JavaScript。如果没有符合标准的处理问题的方法,我认为这是最后的解决方案。

Community c0D3l0g1c 4 年前

如果您正在进行ASP.Net开发,还可以使用 Device Filtering (我今天刚刚在Stack Overflow上了解到)。

<asp:Label runat="server" ID="labelText" 
   ie:CssClass="IeLabelClass" 
   mozilla:CssClass="FirefoxLabelClass" 
   CssClass="GenericLabelClass" />

当然,这个例子有点极端,但它确实允许您在仅使用单个CSS文件的情况下解决一些严重的浏览器不一致问题。

我还支持使用CSS重置文件的想法,并明确使用像jQuery这样的库,而不是在JavaScript事件和DOM差异上重新发明轮子。

Ionko Gueorguiev 11 年前

我认为条件注释对于样式表非常有用,但它们也可以用于javascript/jquery。

由于.browser已被弃用,现在已从jQuery1.9(?)中删除,因此使用条件注释是执行特定于浏览器的javascript的一种非常好的方法。

下面是我的快速示例:

1-在页面上的某个位置放置条件注释。我个人把它放在身体标签后面。我见过有人在实际的正文或html中使用它,但这会带来IE8/9/10可比性视图按钮,如果可能的话,您希望避免这种情况。

<!--[if lt IE 9]><div class="ie8-and-below"></div><![endif]-->

2-然后使用jquery检查是否存在特定于IE的容器。

if ($("div").hasClass("ie8-and-below")) {
        //do you JS for IE 8 and below only
    }

3-(可选)设置您的目标可比性,并设置如下内容:

<meta http-equiv="X-UA-Compatible" content="IE=10" />

就在那之后 <head> <头> ). 如果页面的其余部分正确编码,这将关闭ie10/9/8中的兼容性按钮。如果您有需要可比较模式的部分,这是一个很好的故障保护,如果在兼容模式下运行较新的浏览器,您可以通过其他方式触发JS。

注:截至本文发布之日,http equiv并未验证W3C标准,但它是一个非常有用的标签,已被谷歌和微软等公司的主页采用。我认为这只是因为W3C在采用它方面有点落后。