logo标签列表

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

javascriptcss
6

这不是一个新话题，但我很好奇大家如何处理特定于浏览器的 .js 或 .css 文件。

你是否在 .js 函数中使用了 if/else 条件语句，或者为每个浏览器单独创建了文件？

现在，在流行浏览器的当前版本中，这是否真的是一个问题？

这不是一个新话题...这句话已经说明了一切。 - Florian Bösch
12个回答
10

这是一个非常现实的问题，主要是由于IE6的存在。您可以使用条件注释来处理IE6特定的CSS。

对于JavaScript，我建议使用一个已经抽象了浏览器差异大部分工作的库。jQuery在这方面表现得非常好。

4

不要写浏览器特定的CSS？

老实说，对于大多数布局来说，浏览器特定的CSS并不是必需的 - 如果是这样，请考虑更改布局。下一个需要另一种变体的浏览器出现时会发生什么？很糟糕。如果您有一些真正需要包含的内容，并且在某个浏览器中似乎无法正常工作，请在此处提问！有很多伟大的思想。

对于JS，有几个框架可以处理实现跨浏览器行为，例如jQuery（在本站使用）。

3

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。）
2
这些天，CSS在所有浏览器中（主要是IE6/7）仍然存在问题。
我从未需要单独的JS文件来处理任何工作。如果您使用JS库（jQuery、YUI、Prototype等），99%的浏览器不兼容问题都会得到解决。
至于CSS，我更喜欢将特定于浏览器的修复放在同一个CSS文件中。当您只需要在一个地方查找样式时，这样做会使调试变得更加容易。您可能会花费数小时进行调试，只发现错误是由您的10行特定于浏览器的样式表引起的。
从性能角度考虑，只有1个CSS和1个JS文件更好。
2

个人而言，我大多使用如上所述的条件注释。

然而，在 Stackoverflow 的播客中，Jeff 表示 Stackoverflow 正在使用 Yahoo 的 CSS 重置，这是我从未听说过的。如果它能做到宣传的功能，那么似乎可以解决许多（大多数？全部？）基于浏览器的 CSS 差异；至少在 Stackoverflow 的 HTML 源代码中没有看到任何条件注释。我下一个 Web 项目一定会试用它，并很乐意听取任何人的经验。

至于 Javascript，则像已经提到的那样，请使用您喜欢的 JS 框架...

2
使用所谓的“特征检测”。
例如，如果您想要使用document.getElementsByClassName，请按照以下步骤进行：
if(document.getElementsByClassName) {
    // do something with document.getElementsByClassName
} else {
    // find an alternative
}

关于CSS，如果您使用标准，大部分情况下应该都没问题，除了IE。在IE中，请使用条件注释——这是Microsoft的人推荐的方法。
1

我使用一个框架来处理99%的浏览器相关事务。

对于框架未覆盖的所有内容，我会使用if/else或try/catch。

1
0

如果您正在进行ASP.Net开发，您还可以使用设备过滤（我今天在Stack Overflow上刚学到的）。

您可以在页面指令中使用它来链接不同的皮肤、主控页面或CSS文件，但您也可以在ASP.Net服务器控件属性上使用它，如下所示：

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

当然，那个例子有点极端，但它确实让你在只使用一个CSS文件的情况下解决一些令人讨厌的浏览器不一致性问题。

我也赞成使用CSS重置文件的想法，并且一定要使用像jQuery这样的库，而不是重新发明JavaScript事件和DOM差异的轮子。

0

我使用jQuery的内置函数进行实际检测：

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

关于组织结构，这取决于您的应用程序。我认为将其放在初始化代码中，然后在需要时使用检测功能是最好的。我仍然有时需要检测Explorer的问题。例如，在使用jQuery时，我发现parent()和next()函数在Explorer和Firefox中有时具有不同的含义。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接