Chesanqi's Web World

1、页面设计师拿着自己满意的设计稿给前端重构工程师，得到的回答是哎呀，这个没法做，怎么能设计成这样。
2、页面设计师想知道前端重构工程师是怎么工作的，网页切图到底是什么意思？

这篇文章主要是回答这两个问题。（以下设计师指页面设计师，前端指前端重构工程师。）
首先得吹一次牛，无论设计稿是什么样前端都能做出来。前端抱怨的根源是工作量，没有给他安排足够的时间。通常前端比设计师多考虑两点：一是可复用性，一是动态性。

可复用性，设计师也考虑可复用性，但前端对复用的要求更高。写代码的都希望”写的少，做的多”，”修改一处，全局生效”。在ps里复用的概念指的是复制出来一个图层，挪到别处去用，之后这两个图层毫无关系，为了美观复制出来的图层可能根据周围元素的情况稍微改动一下，比如颜色稍稍变淡变深直角改为圆角长宽改变背景加了花纹。前端眼中的复用更局限，不是克隆出来的图层副本，更类似镜子，新加一面镜子照出景象，如果这个景象有变化，那所有镜子中的景象都有变化，如果保持其他镜子中的景象不变，需要单独写代码。代码的复用被打破。

动态性，设计稿就像一张照片映出的是网页最美的瞬间，可前端眼中的网页是动态的，他能根据数据的不同看到网页种种不美的瞬间。设计师为了页面美观可以把模拟数据掐头去尾，但前端展现的时候，必须保证各种数据都不会破坏布局，布局得适应各种数据，文字的折行、省略号，中英文、数字。动态性还表现在用户交互行为上，比如用户点了一个按钮，页面产生了相应变化。设计师眼中是两张类似但独立的设计稿，变化后为了页面美观，有可能稍微改变一下元素大小布局位置，虽然只有几个像素的变化，甚至肉眼看不出来，但前端知道如果两张设计稿叠加起来看是有差别的，前端实现的时候要把这差别计算进去。有时候实现这种差别付出的工作量远大于你的想象，甚至前端要为此调整整个页面布局方式。

还有一点是前端必须考虑的，那就是浏览器的兼容性。设计稿就是张图，在所有看图软件中都显示一致。但浏览器不是这样的，浏览器分为IE，火狐，谷歌等等，IE又有6、7、8、9之分。即使完全一样的代码在不同的浏览器显示的可能完全不一样，需要前端利用某种技术去实现兼容。这对设计师可能非常难理解，但事实如此。还有一点请设计师特别注意，你用的设计软件通常都是最新版能设计出特别美观的图，但IE67是10年前的浏览器，让黑白电视放高清电影，这太吃力了，但偏偏它在中国的市场占有率还很高。（有部IE6 获得终身成就奖应该退役的视频链接贴在文章后面。）圆角、阴影、艺术字体在现在的网页设计中很常见，火狐谷歌等浏览器已经可以使用CSS3技术轻松实现，但IE8以下的浏览器不支持CSS3所以只能做成死图片贴到网页上。死图片改起来必然没有代码容易控制。

说说前端技术。前端网页布局大概可分为两种方式，一是栅格化布局，一是响应式布局。

栅格化布局，算是一种经典布局方式，顾名思义网页被栅格化了，网页中的各个元素都有指定的大小和位置。比如下面这张图：

套用到实际的网页效果：

细节展示：

响应式布局，是最近流行的一种布局方式，他优于栅格布局的地方是能够解决多设备间不同分辨率的适配。 只用一套代码可以就可使同一个页面根据浏览终端的不同（PC，平板，手机）显示出不同的布局。比如 http://www.microsoft.com/，改变浏览器大小试试看。

————————————————-

《IE6获得终身成就奖》 http://v.youku.com/v_show/id_XMjc4MzYxMTY0.html
《网页的栅格系统设计》http://ued.taobao.com/blog/2008/09/grid_systems/
设计团队推荐：
《淘宝UED》 http://ued.taobao.com/blog/
《微博UDC》 http://udc.weibo.com/
《腾讯TGideas》 http://tgideas.qq.com/
《网易用户体验设计中心》 http://uedc.163.com/
《腾讯CDC》 http://cdc.tencent.com/
《搜狐媒体设计中心》http://mdc.sohu.com/
《19楼UED》 http://blog.19ued.com/
《迅雷CUED》 http://cued.xunlei.com/
《全球设计精享站》http://designlol.net/
《飞鱼的声纳》 http://startwmlife.com/

webkit 引起一片争论，前端观察也写了篇博客《反 webkit 之战》谈论这件事情。

知乎也有讨论：
-webkit- 浏览器前缀伤害了 web 技术的进步吗？

我是这样理解的：
实际情况下，标准的达成需要一段不可预测的时间长度，即使成为标准，或许也与最初的设想有些许差异，webkit 标准与 w3c 标准不能完美的相互映射。比如 w3c 对 css 渐变并不是面面俱到的规范之，webkit 是第一个支持 css 渐变的浏览器内核（可以理解为谷歌自己有网页需求并且有自己的浏览器，有需求便实现），但 mozilla 和 webkit 对规范有不同的理解，导致后来语法实现上有差异，多数的意见是 mozilla 的写法更优雅一些， 随后 webkit 对渐变语法进行了优化更新，采用了 mozilla 的标准。这种情况下浏览器按照“接收时开放，发送时保守”的原则需要保证以前使用 -webkit- 前缀的页面正确显示，“实验性的特性”、“不保证以后的兼容性”话可以这么说但事不能这么绝情做，开发人员担心私有前缀的后续兼容问题，在使用上会畏首畏脚。Chrome1 支持这个私有前缀 Chrome2 不支持，已完成的项目如果没有后期维护，用户不会升级。

对垄断的恐惧更多的源于技术的不更新，对 IE6 的阴影更多的是他对网页技术发展反应迟钝，IE6 的 bug 显而易见，技术上修复很容易，难点是微软放出了补丁也无济于事。升级IE需要重启电脑，这成本太高。同样我不喜欢 safair，不是技术领先不领先的问题而是不灵活，跟系统这样重量级的东西绑的太近。我不太担心 webkit 的“垄断”，浏览器是一款互联网入口软件，而现在世界是互联网公司的不是 PC/软件公司的。

以前对 CSS3 选择器理解的不准确。比如 :first-child 伪类。如果有这么一个代码片段：

1
2
3
4
5

<div>
    <h1></h1>
    <h2></h2>
    <h2></h2>
</div>

给出一个组合选择器

1

div h2:first-child{}

能不能匹配到第一个 h2 呢？
答案是不能。因为 h2 不是 div 元素的第一个子元素。这个伪类选择器只适用于 h2 是第一个子元素的情况，如果 h2 不是第一个子元素，它什么都匹配不到。W3C 官网是这么介绍的：

The :first-child pseudo-class represents an element that is the first child of some other element.

并且明确的给出了两个例子：

This selector can represent the p inside the div of the following fragment:

1 2 3 4

<p> The last P before the note.</p> <div class="note"> <p> The first P inside the note.</p> </div>

but cannot represent the second p in the following fragment:

1 2 3 4 5

<p> The last P before the note.</p> <div class="note"> <h2> Note </h2> <p> The first P inside the note.</p> </div>

去 W3C 官网查看例子

那么，如果想实现匹配不是第一子元素的一组 h2 中的第一个，应该用那个选择器呢？
要用 :first-of-type 伪类。
W3C 官网给出的介绍：

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.

去 W3C 官网查看例子

因为
:first-child 和 :last-child 是 :nth-child() 的特例。
:first-of-type 和 :last-of-type 是 :nth-of-type() 的特例。
所以这几个伪类的用法是一样的。

如果能在IE中实现一些高级的CSS技术，比如CSS3选择器、CSS3多背景、CSS3阴影等。或许就能更好的学习新技术，而不会总感觉那么遥远，总感觉新技术用不上。

写了一个JS。页面中只需引入这个JS，一些高级的CSS技术在IE中同样有效。实现起来很简单，比如选择器（现在只写了选择器 = =），通过JS找到一些高级选择器特有符号（如[] + ~ > *= ^=），把这些样式变成某个类的样式，把这个类名添加到相应的元素标签上。利用 jQuery 找到IE中相应的元素标签。

我找了下网上实现相同功能的办法，都需要一些配置，或者必须得在服务器环境下开发才行。我不是资深的工程师，不想那么麻烦，尽量做到跟平时写静态文件一样。也许这样看起来安全上没那么严谨。同时还有一些问题没解决，比如一些伪类没想好怎么处理。

看一下 demo 吧，共同解决。
点这里是 github 项目地址。

距上次写HTML5过去了好长时间。囧~，人真是懒！
最近内部学习用，修改了一下HTML5演示文档，粘在博客吧，请点击这里（Chrome效果最佳）。

另外粘几个关于HTML5的URLs：
1、The HTML5 test（可以测试各浏览器对HTML5支持情况）
http://www.html5test.com/
2、HTML5设计原理—Jeremy Keith在 Fronteers 2010 上的主题演讲（可以深入理解HTML5的设计思想）
http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html
3、畅游 HTML 5 (Dive Into HTML 5 中文版)（可以找到相关特性的相关说明）
http://www.diveintohtml5.com/
4、HTML5（火狐官方对HTML5的介绍，附有一些教程）
https://developer.mozilla.org/cn/HTML/HTML5