现代化网站建设的小妙招

jiandan1dian · 发表于 2017-3-23 19:02:47

现代化网站建设的小妙招

在近几年中，在与web开发者交流的时候，听得最多的一件事情就是创建一个能很好的跨越各种类型浏览器版本与各种设备的网站有多么难。在兄弟连（www/itxdl/cn）学习前端知识的时候，接触过很多方面的内容，当然也是借鉴了一些其他方面获取的知识，整理出来这十几条小技巧，希望对大家有所帮助。

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

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

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

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

3、什么才是稳定

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

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

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

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

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

6、开发时多浏览器测试

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

7、熟悉和使用CSS级联规则

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

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

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

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

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

10、将CSS在HTML文件顶部引入

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

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

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

12、避免HTML中脚本标签

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

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

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

账号		自动登录	找回密码
密码			论坛注册

现代化网站建设的小妙招

浏览过的版块

客服中心

投诉建议