网站重构《挟用户以令设计师》

战争起源于微软对于标准漫不经心的支持。

不过在这之前，我们先回顾一下web设计的历史。

最开始的互联网是由无数HTML页面组成，但是HTML只是实现结构的语言，而不是实现表现的语言。

所以当时所有的网站看起来都跟我们现在的Word文档一样乏味。

聪明的设计师想到了一个巧妙的方法，即把屏幕划分成很多格子，每个格子显示特定的图片。

经过精确的设计和切图，网站可以设计得像海报一样酷。

当时的设计师以为认为发现了新大陆，却无意间打开了潘多拉的盒子。

如果浏览器上有一个“显示表格边框”的按钮，那么用户点击它以后就会发现精美的网站被切割成了一块块豆腐块一样的方形。

当然没有这样的按钮，用户更不会点击它。

页面看起来漂漂亮亮，老板满意，用户满意，一切似乎都很和谐。

所有人都称赞设计师设计了一个漂亮的站点，好像称赞一所宅子拥有最漂亮的草坪。

设计师站在门口，伪装出微笑跟大家客套。

只有他自己知道房间里是怎样垃圾成堆。

网页代码充斥着由软件自动生成的无意义的TD和TR元素，没有可重用性和可读性可言。

如果要在首页菜单上加一个栏目，基本上整个页面就要重新排版重新生成更乱的垃圾代码了。

于是，WEB的发明者Tim在1994年创办了W3C，汇聚了所有专家制定了一系列的标准。

这些标准用来告诉浏览器应该遵循什么样的规则来解析HTML语言，或者以后可能出现的其他web语言。

这些伟大的天才发明了XHTML和CSS来试图改变混乱的代码。

XHTML负责网页结构，CSS负责网页样式。

作为一个程序员，我认为这些编码规范相当优美严谨。

现在设计师只需要在稿纸上画好草图，然后就可以手工书写代码来设计了。

如果微软能稍有远见地理解和支持W3C创建的这些标准，现在的设计师就会轻松很多。

然而微软按照自己认为合理的方法解释了W3C创造的标准。

比如最著名的盒模型bug，微软认为padding应该算在长宽之内，就好像盒子的内部衬垫一样。

还有其他一些微软程序员设计错误导致的bug，比如在(X)HTML头部声明DTD后会进入怪癖模式。

还有一些功能上的缺陷，比如缺乏对32位png半透明度的支持。

尾大不掉，当W3C终于说服微软要遵循正确的标准的时候，微软发现成千上万的设计师已经学会了错误的“IE标准”，价值上亿的网站已经在运行。

如果更改IE的解释方式，那么这些网站将瞬间崩溃。

到了这个时候，恐怕微软自己——这个星球上拥有最多用户的软件公司——也会对自己庞大的用户群头疼不已。

后来一个聪明的设计师发明了DOCTYPE声明来解决这种尴尬的状况。

他建议想遵循W3C规范的设计师在自己的网站代码头部加上DOCTYPE声明。

这个声明告诉浏览器，设计师知道W3C规范，并且网站试图遵循W3C规范，请按照规范解释它。

而没有那些声明的网站，浏览器会默认设计师并不知道W3C规范，然后按照旧式的方式解释它。

DOCTYPE有好几种版本，并且分strict和transition的，书中有很详细的介绍。

虽然有了完全理想的解决办法，可是由于历史原因，IE6的一些错误还是改变不了了。

微软在IE7和IE8中已经改变了它傲慢的态度，IE7已经基本支持W3C标准。

大部分网站可以在IE7和Firefox上表现出相同的样式了。

很多设计师在自己的Twitter头像上加上了IE6 Must Die的印章，呼吁IE6快退出舞台。

还有一些设计师在网站头部明文写上“推荐用Firefox浏览本站”。

然而根据我的网站的流量统计，访客的50%以上仍在使用IE6浏览器。

不过好消息是IE6的退出只是时间问题了，前些日子Smashingmagazine的统计表示IE6访客已经降到了18%。

因为大部分用户不会升级IE浏览器，所以可以推断西方国家已经普遍用上Vista系统了。

我对于这本书的评价：

中文版虽然是08年第一次印刷，但内容对于技术人员来说还是较过时。

书中讲到的一些浏览器兼容性或者hack的时候还是停留在Netscape4时代，甚至提到了IE3。

但设计师都知道我们目前的敌人只有一个，那就是IE6。

当然书中的理念对于老板来说还是很有价值的，（十几天前新鲜上线的中国国防部官方网站仍然是用Table布局。http://www.chinamil.com.cn/

国防部网站负责人应该读读这本书。）【此处有误，国防部官网为http://www.mod.gov.cn/，从web标准来看是很不错的，豆瓣不提供HTML标签，很不方便啊，想中划线都不行】

总的来说，本书是一本可读性还不错的床头伪技术书。

如果打算深入研究用标准设计网站，不妨听听我的推荐：

《CSS权威指南》，是封面上有两条小鱼儿的动物书，基础书籍，适合CSS初学者。

《CSS Mastery Advanced Web Standards Solutions》讲了CSS的很多使用技巧（包括但不仅限于针对IE6的技巧），适合CSS中级学者。

“Definitive Guide to Taming the IE6 Beast”是一篇讲如何驯服IE6的完整技巧的文章，英文。http://sixrevisions.com/web-development/definitive-guide-to-taming-the-ie6-beast/

“Web Developer”是一个Firefox插件，可以查看当前站点是用标准模式还是怪癖模式在显示、是否有CSS错误、禁用CSS等等大量有用的功能。

“Html Validator”是一个Firefox插件，可以显示当前站点是否能通过W3C的验证，这个验证器十分严格，绝大部分商业站点都没有完全通过验证，我只在一些完美主义者的博客上见到过对勾，想到他们的努力就十分感动。

“Firebug”是一个Firefox插件，最强大的就是显示网页的DOM树和每个对象的CSS（及继承关系）。

/*----------------------------------------8月17号更新---------------------------------------------

http://cocre.com/?p=1245

所有IE的CSS相关的BUG

*/

/*----------------------------------------11月7号更新---------------------------------------------

最近签约到腾讯ISD部门，职业是“网站重构”，好巧。

*/