这不是一个新话题,但我很好奇大家如何处理特定于浏览器的 .js
或 .css
文件。
你是否在 .js
函数中使用了 if/else
条件语句,或者为每个浏览器单独创建了文件?
现在,在流行浏览器的当前版本中,这是否真的是一个问题?
这不是一个新话题,但我很好奇大家如何处理特定于浏览器的 .js
或 .css
文件。
你是否在 .js
函数中使用了 if/else
条件语句,或者为每个浏览器单独创建了文件?
现在,在流行浏览器的当前版本中,这是否真的是一个问题?
这是一个非常现实的问题,主要是由于IE6的存在。您可以使用条件注释来处理IE6特定的CSS。
对于JavaScript,我建议使用一个已经抽象了浏览器差异大部分工作的库。jQuery在这方面表现得非常好。
不要写浏览器特定的CSS?
老实说,对于大多数布局来说,浏览器特定的CSS并不是必需的 - 如果是这样,请考虑更改布局。下一个需要另一种变体的浏览器出现时会发生什么?很糟糕。如果您有一些真正需要包含的内容,并且在某个浏览器中似乎无法正常工作,请在此处提问!有很多伟大的思想。
对于JS,有几个框架可以处理实现跨浏览器行为,例如jQuery(在本站使用)。
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
}
个人而言,我大多使用如上所述的条件注释。
然而,在 Stackoverflow 的播客中,Jeff 表示 Stackoverflow 正在使用 Yahoo 的 CSS 重置,这是我从未听说过的。如果它能做到宣传的功能,那么似乎可以解决许多(大多数?全部?)基于浏览器的 CSS 差异;至少在 Stackoverflow 的 HTML 源代码中没有看到任何条件注释。我下一个 Web 项目一定会试用它,并很乐意听取任何人的经验。
至于 Javascript,则像已经提到的那样,请使用您喜欢的 JS 框架...
document.getElementsByClassName
,请按照以下步骤进行:if(document.getElementsByClassName) {
// do something with document.getElementsByClassName
} else {
// find an alternative
}
我使用一个框架来处理99%的浏览器相关事务。
对于框架未覆盖的所有内容,我会使用if/else或try/catch。
使用if/else语句或分离文件,取决于网站的复杂程度。
浏览器之间仍然存在不兼容性问题,考虑使用JavaScript框架来帮助你完成这些繁琐的工作...
jQuery http://jquery.com/
Dojo http://www.dojotoolkit.org/
Script.aculo.us http://script.aculo.us/
Prototype http://prototypejs.org/
如果您正在进行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差异的轮子。
我使用jQuery的内置函数进行实际检测:
jQuery.each(jQuery.browser, function(i, val) {});