跨浏览器网站的最佳做法是什么？ [英] What are the best practices for cross-browser web sites?

问题描述

（我希望这是最终的社区wiki，我从我自己的答案播种这个问题。）

指定一切

-browser问题等于：你没有指定什么，不同的浏览器做出不同的假设。因此：

声明有效的doctype

您的doctype告诉浏览器您将在码。

根据我的经验，严格的doctype使得IE的行为更好（启用例如CSS：在IE7中的div上的悬停选择器）。

本文介绍了doctypes的良好背景。

使用Web标准

验证您的HTML和CSS

$浏览器特定的标记，或仅在其他浏览器中的失败对网站体验不重要时才使用。 b
$ b

你不必得到一切都完美，但验证是好的反馈。 Jeff说：

了解规则和边界有助于定义您正在做的事情，并为您提供合法或不同意的合法弹药。你可以做一个知情的选择，而不是一个随机的我只是这样做，它的工作一。

想象一下，你打开了一个段落标签，但从来没有关闭它。如果你打开一个列表标签，你的意思是它在段落内还是不是？

考虑重置CSS

不同的浏览器假定不同的基线CSS规则。你可以帮助他们所有的行动一样，明确地消除差异前面。撰写 CSS：The Definitive Guide 的Eric Meyer使用此重置。另一个流行的选择是 YUI重置CSS 。

< h1>使用Javascript库进行DOM交互

每当您的Javascript需要处理页面上的元素时，最好使用jQuery，Prototype或MooTools等库。这些库被数以千计的开发人员使用，他们采用浏览器对Javascript的解释之间的大部分不一致，在内部处理它们，并为您提供一组一致的命令集。尝试找到并解决所有这些不一致是自己浪费时间，并可能创建错误。

在多个浏览器测试，处理IE最后

在多个浏览器中测试。通常，你会发现非IE浏览器的行为类似，IE是一种特殊情况 - 特别是如果你遵循上面的建议。必要时，您可以在单独的样式表中添加IE hack，并只为IE用户加载它。

Quirksmode.com 是捕捉浏览器差异的好地方。

Browsershots.org 可以帮助您显示您的网页在各种浏览器和操作系统中的显示方式。

< h1>优雅失败

在每个存在的浏览器中，任何网站都不会完美。如果用户没有Flash，JavaScript或高级CSS等，您希望您的网站仍然可用。设计时考虑到这一点：

检查裸HTML

尝试使用裸HTML加载您的网站 - ，没有脚本。是否提供菜单选项？主要内容是否位于次要内容之前？ 考虑测试驱动的逐步增强

在 =http://www.alistapart.com/articles/testdriven/ =nofollow noreferrer>本文，此技术使用javascript来检查浏览器是否具有给定的功能，如支持给定CSS属性，然后在页面上使用它。

解决方案

使用像jQuery这样的库抽象出差异在DOM，AJAX和JavaScript中。

(I'd like this to be the definitive community wiki. I seeded it from my own answer to this question.)

Specify Everything

A lot of cross-browser issues amount to this: you didn't specify something, and different browsers make different assumptions. Therefore:

Declare a valid doctype

Your doctype tells the browser what rules you'll be using in your code. If you don't specify, the browser has to guess, and different browsers will guess differently.

In my experience, a "strict" doctype makes IE behave better (enables things like CSS :hover selectors on divs in IE7).

This article gives good background on doctypes.

Use Web standards

Avoid browser-specific markup, or only use it when its failure in other browsers won't be significant to the site experience.

Validate your HTML and CSS

You don't have to get everything perfect, but validation is good feedback. As Jeff said:

Knowing the rules and boundaries helps you define what you're doing, and gives you legitimate ammunition for agreeing or disagreeing. You can make an informed choice, instead of a random "I just do this and it works" one.

Imagine you opened a paragraph tag and never closed it. If you then open a list tag, did you mean it to be inside the paragraph or not? Validating will help you catch that, close the tag, and eliminate ambiguity.

Consider a CSS Reset

Different browsers assume different baseline CSS rules. You can help them all to act the same by explicitly ironing out the differences up front. Eric Meyer, who wrote CSS: The Definitive Guide, uses this reset. Another popular choice is YUI Reset CSS.

Use a Javascript library for DOM interactions

Whenever your Javascript needs to work with elements on your page, it's best to use a library like jQuery, Prototype, or MooTools. These libraries are used by many thousands of developers, and they take most of the inconsistencies between browsers' interpretation of Javascript, deal with those internally, and give you a consistent set of commands that just work. Trying to find and work around all these inconsistencies yourself is a waste of time and likely to create bugs.

Test in multiple browsers, deal with IE last

Test in multiple browsers as you go. Generally, you'll find that non-IE browsers behave similarly and IE is a special case - especially if you follow the advice above. When necessary, you can add IE hacks in a separate stylesheet and only load it for IE users.

Quirksmode.com is a good place for hunting down random browser differences.

Browsershots.org can help show how your page will be displayed in an assortment of browsers and operating systems.

Fail Gracefully

No site will look perfect in every browser that exists. If a user doesn't have Flash, or Javascript, or advanced CSS, etc, you want your site to be usable anyway. Design with that in mind:

Check the bare HTML

Try loading your site with bare HTML - no styles, no scripts. Are menu options available? Does primary content precede secondary content? Is the site usable, even if ugly?

Consider test-driven progressive enhancement

Described in this article, this technique uses javascript to check if a browser has a given capability, such as support for a given CSS property, before using it on the page. It is unlike browser sniffing because it tests for features rather than a specific browser.

解决方案

Use a library like jQuery abstract away the differences in the DOM, AJAX and JavaScript.

这篇关于跨浏览器网站的最佳做法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！