10

简短版本：在 Web 开发人员和 Web 开发人员的最终用户使用的所有浏览器中，对于一致的表示和 AJAX 功能，最简洁和最可维护的技术是什么？

  • 即 6、7、8
  • 火狐 2、3
  • 苹果浏览器
  • 谷歌浏览器
  • 歌剧

长版：我写了一个针对其他 Web 开发人员的 Web 应用程序。我希望我的应用程序在演示和 AJAX 行为方面都支持主要的网络浏览器（加上 Google Chrome）。

我从 Firefox/Firebug 开始，然后在 IE 6 和 7 下添加了条件注释以保持样式一致。接下来，令我惊讶的是，我发现 jQuery 在 IE 中的行为并不相同。所以我使用条件和不太纯的 jQuery将我的 Javascript 更改为在 FF 和 IE 上可移植。

今天，我开始在 Webkit 和 Google Chrome 上进行测试，发现不仅样式与 FF 和 IE 不一致，而且 Javascript 根本没有执行，可能是由于语法或解析错误。我期待一些 CSS 工作，但现在我有更多的 Javascript 调试要做！在这一点上，我想在为所有情况编写成堆的特殊情况之前退一步思考一下。

我不是在寻找灵丹妙药，我只是在寻找使事情尽可能易于理解和维护的最佳实践。如果这在没有服务器端智能的情况下工作，我更喜欢；但是，如果有优势，例如检查用户代理，然后将不同的文件返回到不同的浏览器，那么如果 Web 应用程序的总体可理解性和可维护性较低，那就没问题了。非常感谢大家！

4

11 回答 11

14

我处于类似情况，正在开发一个针对 IT 专业人员的 Web 应用程序，并且需要支持同一组浏览器，但不包括 Opera。

到目前为止我学到的一些一般性的东西：

  • 经常在尽可能多的目标浏览器中进行测试。确保您在开发计划中有时间进行此操作。
  • 工具包可以让您获得跨浏览器支持的一部分，但最终会在某些浏览器上遗漏一些东西。计划一些时间来调试和研究特定浏览器的修复程序。
  • 如果您需要一些工具包中没有的东西并且找不到免费的代码片段，请花一些时间编写封装依赖于浏览器的行为的实用程序函数。
  • 了解已知的浏览器错误，以便您可以围绕这些错误引导您的实施。

我学到了一些更具体的东西：

  • 仅将基于用户代理的条件代码用作最后的手段，因为“相同”浏览器的不同代可能具有不同的功能。相反，首先测试符合标准的行为——例如，if(node.addEventListener)...然后是常见的非标准功能——例如，if(window.attachEvent)...然后，如果必须，查看特定浏览器类型和版本号的用户代理。
  • 几乎每个浏览器都知道 DOM 何时“准备好”进行脚本访问是不同的。一个好的工具包会为你抽象出来。
  • 几乎每个浏览器中的事件处理程序都不同。一个好的工具包会为你抽象出来。
  • 使用 document.createElement 和 element.setAttribute 创建 DOM 元素，尤其是表单控件或具有属性的元素可能会很棘手。虽然不是标准的（而且有点恶心），但使用 node.innerHTML 和包含一些 HTML 的字符串似乎在不同浏览器类型中更可靠。我还没有找到一个工具包，可以让您使用 element.setAttribute 将“名称”添加到 IE 中的表单元素。
  • CSS 差异（和错误）与 JS 差异一样重要。
  • '核心' Javascript 功能（字符串、日期、正则表达式、数组函数）似乎在浏览器中非常可靠和一致，尤其是相对于 DOM/CSS/Window 函数。事实上，每个平台上的语言并不完全不同，这有点令人高兴。:-)

我还没有真正遇到任何 Chrome 特定的 JS 错误，但它始终是我测试的第一批浏览器之一。

高温高压

于 2009-03-25T02:19:42.190 回答
5

Chrome 实际上与 Safari 有点不同，它使用完全不同的 javascript 实现，并且原型和 jquery 都报告了问题。现在我不会太担心它，它仍然是浏览器的早期测试版，这种不一致可能会被视为错误。这是错误报告。

于 2008-09-05T12:09:29.360 回答
4

您可以考虑转向的一种“灵丹妙药”是Google Web Toolkit (GWT)。

我相信它支持您感兴趣的所有浏览器，并让您能够在与 Java 兼容的 IDE（如 Eclipse）中编写 UI。这样做的好处是您可以使用 IDE 工具进行代码完成和编译时错误检查，这极大地改进了大型 UI 项目的开发。

如果你使用 GWT UI 组件，它会隐藏很多浏览器特有的讨厌的东西，而不必处理，但是当你编译时，将为每个浏览器平台创建一个紧凑的部署文件。这样，如果您在 Firefox 中查看应用程序，您将永远不会下载任何特定于 IE 的代码。您还将生成一个客户端存根，它将加载适当的已编译 JS 包。为了使交易更加甜蜜，这些文件是可缓存的，因此对于回访者来说，感知性能通常会得到改善。

于 2009-03-25T02:32:03.393 回答
4

为了适应跨浏览器的开发，环境已经发生了很大的变化。跨浏览器 Javascript 存在jQuery、Prototype和其他框架。CSS 重置非常适合从所有浏览器的通用空白画布开始。BluePrint和960都是 CSS 框架，用于帮助使用CSS 网格布局技术进行布局，这些技术最近似乎变得非常流行。

至于跨不同浏览器的其他 CSS 怪癖，这里没有圣杯，唯一的选择是跨不同浏览器测试您的网站，并使用这个很棒的资源，并加入邮件列表以节省一些时间。

如果您在大批量生产网站上工作，那么您可以在最终游戏中使用 browsercam.com 之类的服务，以确保该网站不会在某些浏览器中严重崩溃。

最后，不要试图让网站在每个浏览器中看起来都一样。你的主要设计应该以 IE/FF 为目标，你应该对其他人做出合理的妥协。使用分级浏览器图表缩小浏览器支持范围。

至于最佳实践，开始在白纸上使用线框或Balsamiq mockups 之类的服务。我仍然对有多少开发人员从编辑器而不是线框开始感到惊讶，但我只在一年前才意识到它可以节省多少时间。将布局 (HTML)、演示 (CSS) 和行为 (Javascript) 完全分开。HTML 中不应有样式元素，Javascript 中不应有任何显示（使用.addClass('highlight')代替.css({'background-color': 'red'});）。

如果你不熟悉这篇文章中的任何粗体术语，谷歌搜索它们应该对你的 Web 开发生涯和生产力很有帮助。

于 2009-03-27T18:52:46.517 回答
3

如果您从基本重置或框架开始，并且已经考虑了 IE，但它仍然很怪异，您可能需要重新检查以下内容：

  • 一切都验证了吗？CSS和HTML？
  • 指向包含文件（js、css 等）的任何断开的链接。在 Chrome/Safari 中，如果您的样式表链接失效，您的所有链接都可能以红色告终。（我认为与默认的 404 样式有关）
  • 您可能正在使用的 js 插件有什么奇怪的要求吗？（css文件是否必须在js文件之前，就像jquery.thickbox一样？）
于 2009-03-26T13:32:01.987 回答
2

对于 UI，请查看Ext。

它作为一个独立的库非常棒，尽管它也可以与 jQuery、YUI、Prototype 和 GWT 一起使用。

示例：http ://extjs.com/deploy/dev/examples/samples.html

于 2008-09-05T05:14:26.787 回答
2

我发现有四件事对开发 JavaScript 应用程序很有帮助：

  • 特征检测
  • 图书馆
  • 使用虚拟化的迭代开发
  • JavaScript：权威指南，Douglas Crockford 和 John Resig

特征检测

使用反射来询问浏览器是否支持所需的功能。如果您想知道浏览器支持哪些事件处理，您可以使用 if(el.addEventHandler) 来满足 W3C 的要求，if(el.attachEvent) 来了解 IE 类型，最后使用 el.['onSomeEvent']。

一个大但是！

浏览器有时会谎报它们支持的功能。我不记得了，但我遇到了一个问题，即 Firefox 实现了 DOM 功能，但如果您测试该功能，则会返回 false！

图书馆

由于您已经在使用 jQuery，我将保存解释。但是，如果您遇到问题，您可能需要考虑 YUI，因为它具有出色的跨浏览器兼容性。他们甚至一起工作。

使用虚拟化进行迭代开发

也许我最好的建议是：一次运行所有的测试环境。获得一个 Linux 发行版、Compiz Fusion 和一堆 RAM。下载 VMWare 的 VMWare 服务器或 Sun 的 Virtual Box 的副本并安装一些操作系统。获取适用于 Windows XP、Windows Vista 和 Mac OS X 的图像。

基本思想是这样的：Compiz Fusion 为您提供了 4 个桌面映射到一个 Cube。这些桌面中的一个是您的 Linux 计算机，下一个是您的虚拟 Windows XP 机器，在 Vista 之后的一个，最后一个是 Mac OS X。编写一些代码后，您可以 alt-tab 进入虚拟计算机并检查您的工作。另外它看起来很棒。

JavaScript：权威指南，Douglas Crockford 和 John Resig

这三个来源为我的 JavaScript 开发提供了大部分信息。权威指南也许是 JavaScript 最好的参考书。

Douglas Crockford is a JavaScript guru (I hate the word) at Yahoo. Lookup his series "Douglas Crockford Theory of the DOM", "Douglas Crockford Advanced JavaScript", "Douglas Crockford Theory of the Dom", and ""Douglas Crockford The Good Parts" on Yahoo! Videos.

John Resig (as you know) wrote jQuery. His website at ejohn.org contains a wealth of JavaScript information, and if you dig around on Google you'll find he's given a number of presentations on defensive JavaScript techniques.

... Good luck!

于 2009-03-29T04:49:14.140 回答
1

为了让您少担心一个浏览器，Chrome 使用与 Safari 相同的渲染引擎。因此，如果它在 Safari 中工作，它应该在 Chrome 中工作完全相同。

请参阅Matt Cutts 博客上的这篇文章 。

Google Chrome 使用 WebKit 进行渲染，它与 Apple 的 Safari 浏览器是相同的渲染引擎，因此如果您的网站与 Safari 兼容，它应该在 Chrome 中运行良好。

更新：看起来这现在是过时的信息。请参阅 Vox 对此答案的评论。

于 2008-09-05T04:47:36.757 回答
0

如果您的首要任务是在列出的所有浏览器上完全一致且没有差异，那么您可能应该关注 AS3 和 Flex。

于 2009-03-27T18:57:55.990 回答
0

就个人而言，我使用Mootools作为一个简单的轻量级 JavaScript 框架。它易于使用并支持上述所有浏览器（Chrome 除外，但据我所知，它似乎也可以正常工作）。

此外，为了确保跨浏览器的一致性，我得到了一个特性/样式/行为/等。首先在一个浏览器中工作（通常是带有 firebug 的 Firefox 3），然后立即检查以确保它在所有其他浏览器中工作（最后留下 IE6）。如果没有，我会花时间立即修复它，因为否则我知道我以后不会有时间（根据我的经验，让事情跨浏览器工作大约需要我开发时间的 50% ;- ) )

于 2009-03-27T19:07:54.250 回答
0

Validating your javascript with a "good parts" + browser on JsLint.com makes it less likely to have JavaScripts behaving differently in FF, Safari etc.

Otherwise - using standards and validating your code as well as building on existing techniques like jQuery should make your site behave the same in all browsers except IE - and there's no magic recipe for IE - it's just bugs everywhere...

于 2009-03-29T08:29:22.643 回答