构建现代化网站的 20 个技巧

最新推荐文章于 2025-10-31 00:15:00 发布

转载最新推荐文章于 2025-10-31 00:15:00 发布 · 746 阅读

英文原文：20 tips for building modern sites

参与翻译：

在过去几年中，我们与web开发者花了很多时间交流，听得最多的一件事情就是创建一个能很好的跨越各种类型浏览器版本与各种设备的网站有多么难。我们为jQuery项目写代码的时候一直有这个问题。因此我们整理了20条编码模式与经验，它们是从出席无休止的会议和读了几百篇专稿中摘取出来的。我们希望能在你建站的时候给你节省一些时间（和麻烦）。

跨浏览器基础

网站不需要在所有浏览器里渲染得一样

一件普遍被开发者所关心的事情是确保他们的网站在所有浏览器中渲染得一样，包括非现代的一些。那一般并不需要。更好的路线是考虑逐渐增强你的网站，对非现代浏览器的用户提供一个可靠的工作基线，而给用现代浏览器的用户提供一个更丰富的UI。

从固体模版开始以简化开发

许多的技巧已经创建进项目模版如HTML5 Boilerplate 以节省你一些时间。这些准则对以现代浏览器为目标的项目和需要旧浏览器（一直回退到IE6）支持的项目工作得一样好。

关注稳定的标准

当一个新又酷的特性出现的时候很容易令人兴奋，但其中的一些可能仍然在为技术参数实验、仍然在开发中。重要的是要记得，在规范发展的早期是很容易变化的，这有可能影响你的网站的稳定性和你的用户的体验。通过关注稳定的标准，你可以确保你的用户能获得他们期望的体验，你的网站会更易维护。

用IE兼容检测工具帮助你的网站迁移到基于标准的代码

标准是IE10的一个核心部分，帮助开发者迁移他们的代码以便能发挥这项长处，这对IE工程项目组来说无比重要。这就是为什么他们创造了IE兼容检测工具，它能实时分析你的网站，准确的找到通常问题的类型并给出解决方法。通过在你的代码中包括一个简单的JavaScript脚本文件，在你的页面你就能得到可视化的结果。它也可以被集成进Fidder HTTP 分析工具。

谨慎使用polyfills和shims（模拟标准API）

如果你必须在不同浏览器实现系统的体验，polyfills和shims提供了代码和标签，可以帮助模拟标准的API和功能。需要谨记的是，确保你引入的代码适合你的需要，并且可以在日后维护。

开发时多浏览器测试

尽管相对以前，现代浏览器已经接近统一标准，但还是有不同。偶尔的多浏览器测试避免不会在最后一刻发现大问题——甚至已经上线了。确保查看所有浏览器调试器比如IE的F12 Dev Tools，检查有没有警告或错误信息。一些老浏览器比如IE7没有内建调试器，可以用Firebug Lite调试。或者使用跨浏览器解决方案如BrowserStack。

用工具参与创建过程来检测错误和缩小文件大小

有好一批创建工具如 HTML validators, CSS validators, Uglify, JSHint, 或者 GruntJS ，他们能找到潜在的问题，增强项目代码的标准，减少文件的大小提升性能。如果你的IDE或者代码编辑器支持它们，这些步骤就不会成为绊脚石。例如，Visual Studio提供了在创建过程中运行外部工具和合并/压缩脚本文件的能力。

HTML

总是使用标准模式避免怪癖模式

直接用<!DOCTYPE html>吧！现代化网站不需要怪癖模式，不需要考虑90年代中期为了兼容现代化的浏览器比如IE6和FireFox 2.大多数现今的网页在怪癖模式下要么文档声明无效，要么出现无关文本。很容易导致布局异常，而且很难调试。

理解有限向后兼容的HTML标签

新HTML5标签比如<section>,<header>和<footer>改善标签的语义化，但需要特殊的辅助脚本让IE6,7和8认识他们。页面在太旧的浏览器或者禁止脚本时无法使用HTML5标签，那么使用<div>标签是对这些情况比较靠谱的解决方法。

将CSS在HTML文件顶部引入

在文档body中引入CSS会导致页面全空，直到CSS加载后才显示。CSS文件应该放在HTML文档的head中，让浏览器尽早地读取他们。

将JS在HTML文件底部引入

浏览器会先检索、解析和执行加载的脚本，然后渲染剩余的页面内容，以防脚本创建新元素。脚本在底部后，浏览器可以一直渲染页面直到脚本加载完全，以便用户尽快加载页面显示出来。

避免HTML中脚本标签

不同于引入脚本，脚本标签需要浏览器停止渲染（处理脚本），阻碍后续资源文件的分析和下载。这导致页面初始加载减慢，甚至留下可怕的“空白页”体验。而且脚本分散在内联标签里很难维护。

不要在HTML元素中使用内联脚本事件

例如<button onclick="validate()">Validate</button>。这种做法违反了标签、表示和行为之间的清爽原则。而且，如果相关的脚本实在文档底部加载，用户可能先点击了页面触发事件从而尝试调用脚本程序，但是其实脚本还没加载——引发错误！

CSS

熟悉和使用CSS级联规则

简单的id和class选择器是好用的，但是这也意味着标签混乱，到处是无法重用的的id和class。应该用标签，子元素标签，同列标签和，小部分的id和class标签组合，使css更简单和通用。避免使用“!imporant”。

面向未来的使用前缀特定属性

新草案制定时，一些浏览器厂商会通过添加前缀以实现可能支持的标准。为了确保CSS标签以后可用，带前缀的和标准的属性名称都用上最好。这篇文章还提供了一个JavaScript解决方法。

用优雅的CSS处理兼容性，而不是hack

CSS hack随着浏览器的更新，显得不可靠。解决方法是为html或body标签添加特定浏览器的class，并在css规则中使用。条件注释也可以在特定浏览器版本时使用需要的CSS文件。

JavaScript

总是将功能探测优先于浏览器(navigator.userAgent)探测。

判断是否存在一个特定功能（或错误）时，'userAgent'字符串是一个糟糕的指标。更严重的是，解析userAgent的代码是错误的。例如，一个浏览器探测库期待主版本号是一个一位数字，所以会把Firefox 15报告为Firefox 1，把IE 10报告为IE 1！更可靠的是直接探测功能或问题，并用它作为代码分支决策的标准。我们推荐Modernizr，它是实现功能探测的最简单方法。