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

这不是一个新主题，但我很好奇每个人如何处理特定于浏览器的.js或.css。如何处理浏览器特定的.js和.css

您是否有.js函数，其中包含if/else条件，或者您是否具有每个浏览器的单独文件？

这几天真的是当前版本的每个流行浏览器的问题吗？

来源

2008-09-22 Kevin

这不是一个新话题......全都说 – 2008-09-22 17:25:31

这是一个非常现实的问题。主要是因为IE6。您可以使用conditional comments来处理特定于IE6的CSS。

对于JavaScript，我建议使用一个库，它已经完成了抽象浏览器差异的大部分工作。 jQuery在这方面真的很好。

来源

2008-09-22 17:25:24

我使用框架来处理99％的xbrowser的东西。

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

来源

2008-09-22 17:25:01 Oli

不要写它们吗？

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

对于JS，有几个框架负责实现跨浏览器行为，如jQuery（在此站点上使用）。

来源

2008-09-22 17:26:17

如今，CSS在所有浏览器（主要是IE6/7）中都不起作用，这仍然是一个问题。

我从来不需要一个单独的JS文件来处理我所做过的任何事情。如果您正在使用JS库（jQuery，YUI，Prototype等），则会处理99％的浏览器不兼容问题。

至于CSS，我更喜欢将我的浏览器特定的修补程序粘贴在同一个CSS文件中。当你只需要在一个地方寻找样式时，它使调试变得更容易。你可以花几个小时调试一些东西，只是为了找出这个错误是由你的10行浏览器特定的样式表引起的。

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

来源

2008-09-22 17:27:16

我使用内置的jQuery功能的实际检测：

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

至于组织，这将取决于你的应用程序。我认为把它放在初始化代码中，然后在你需要的地方使用检测将是最好的。我仍然遇到需要偶尔检测资源管理器的问题。例如，当使用jQuery时，我发现parent（）和next（）函数在Firefox中与Firefox相比有时具有不同的含义。

来源

2008-09-22 17:28:26 dbrien

Internet Explorer具有有条件的结构，如

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

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

来源

2008-09-22 17:30:08

使用什么被称为“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。

来源

2008-09-22 17:32:09

if/else和单独的文件都取决于网站的复杂性。

有肯定还是浏览器之间的不兼容，因此可以考虑让一个JavaScript框架做肮脏的工作，你...

jQuery的 http://jquery.com/

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

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

原型 http://prototypejs.org/

来源

2008-09-22 17:35:31

我个人主要使用条件注释，如上所述。

但在Stackoverflow播客中，杰夫指出，Stackoverflow正在使用Yahoo's CSS Reset，这是我从未听说过的。如果它做了广告宣传，它似乎可以解决很多（大多数？）？基于浏览器的CSS差异;至少在Stackoverflow html源代码中没有看到任何指示条件注释的内容。我一定会在我的下一个网络项目中使用它，并且很乐意听到任何人的体验。

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

来源

2008-09-22 18:15:36 cori

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）

来源

2008-09-23 00:37:37 toohool

你能提供一个链接到一个好的css过滤器的描述吗？ – torial 2008-10-29 17:59:22

如果你正在做ASP.Net开发，你也可以使用Device Filtering（我刚刚在这里了解到Stack Overflow的含义）。

你可以用它在你的页面指令在不同的皮肤，母版页，或CSS文件的链接，但你也可以使用ASP.Net服务器控件的属性，就像这样：

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

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

我也是第二个使用CSS重置文件的想法，绝对使用像jQuery这样的库，而不是重新发明JavaScript事件和DOM差异。

来源

2008-09-23 00:50:08 CMPalmer

我认为有条件的评论对于样式表很好，但它们也可以用于javascript/jquery。

由于.browser已被弃用，现在使用条件注释从jquery 1.9（？）中删除是一个很好的方式来做浏览器特定的JavaScript。

这里是我的简单的例子：

1 - 将一个条件注释的地方在页面上。我个人把它放在身体标记之后。我已经看到人们在实际的body或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>标签之后。（它必须是开幕后的第一件事<head>）。如果页面的其余部分编码正确，这将关闭ie10/9/8中的兼容性按钮。如果您的部分需要可比较性模式，那么这是一个很好的失败保险措施，如果在兼容性中运行较新的浏览器，则可能会触发您的JS。

注意：截至本文发布之日，http-equiv没有验证W3C标准，但它是一个非常有用的标记，已被谷歌和微软等主页所采用。我认为这只是因为W3C采用它有点落后。

来源

2013-07-23 17:54:18

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

回答

相关问题